MediaWiki:Icons.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/******************** Icons.css *******************
  Description:
    This is a stylesheet to apply CSS icons.
    
 **************************************************/
 
/** Location Pin Icon **/
.gg-pin {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: rotate(45deg) scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border-radius: 100% 100% 0 100%;
    border: 2px solid;
    margin-top: -4px
}
.gg-pin::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid;
    top: 4px;
    left: 4px;
    border-radius: 40px
}

/** Round Check Icon **/
.gg-check-o {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 100px
}
.gg-check-o::after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 10px;
    border-color: currentColor;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform-origin: bottom left;
    transform: rotate(45deg)
}

/** Remove Icon **/
.gg-remove {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}
.gg-remove::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 5px;
    top: 8px;
    left: 4px
}

/** Sleep Icon **/
.gg-sleep,
.gg-sleep::after {
    display: inline-block;
    box-sizing: border-box
}
.gg-sleep {
    transform: scale(var(--ggs,1));
    position: relative;
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}
.gg-sleep::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 2px;
    background: currentColor;
    bottom: 3px
}

/** Time Icon **/
.gg-time {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}
.gg-time::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 7px;
    height: 7px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    top: 2px;
    left: 7px
}

/** Calendar Icon **/
.gg-calendar-dates {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 3px
}
.gg-calendar-dates::after,
.gg-calendar-dates::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    height: 2px;
    left: 4px
}
.gg-calendar-dates::before {
    background: currentColor;
    width: 2px;
    box-shadow:
        4px 0 0,8px 0 0,0 4px 0,
        4px 4px 0,8px 4px 0;
    top: 8px
}
.gg-calendar-dates::after {
    width: 10px;
    top: -3px;
    box-shadow: 0 6px 0 0
}

/** Close Icon **/
.gg-close-r {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px
}
.gg-close-r::after,
.gg-close-r::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 3px
}
.gg-close-r::after {
    transform: rotate(-45deg)
}