@ -1,9 +1,10 @@
/ / stylelint-disable rscss / class-format
/ / stylelint-disable rscss / class-format
/* stylelint-disable no-descending-specificity */
/* stylelint-disable no-descending-specificity */
@import " ./variables " ;
@import " ./panel " ;
@import " ./panel " ;
: root {
: root {
--font-size : 14 px ;
--status-margin : 0 .75 em ;
--navbar-height : 3 .5 rem ;
--navbar-height : 3 .5 rem ;
--post-line-height : 1 .4 ;
--post-line-height : 1 .4 ;
/ / Z-Index stuff
/ / Z-Index stuff
@ -13,19 +14,21 @@
--ZI_navbar_popovers : 7500 ;
--ZI_navbar_popovers : 7500 ;
--ZI_navbar : 7000 ;
--ZI_navbar : 7000 ;
--ZI_popovers : 6000 ;
--ZI_popovers : 6000 ;
/ / Fallback for when stuff is loading
--background : var ( -- bg ) ;
}
}
html {
html {
font-size : 14 px ;
font-size : var ( -- font-size ) ;
/ / overflow-x : clip causes my browser ' s tab to crash with SIGILL lul
/ / overflow-x : clip causes my browser ' s tab to crash with SIGILL lul
}
}
body {
body {
font-family : sans-serif ;
font-family : sans-serif ;
font-family : var ( -- inter faceF ont, sans-serif ) ;
font-family : var ( -- font) ;
margin : 0 ;
margin : 0 ;
color : $fallback--text ;
color : var ( -- text ) ;
color : var ( -- text , $fallback--text ) ;
-webkit-font-smoothing : antialiased ;
-webkit-font-smoothing : antialiased ;
-moz-osx-font-smoothing : grayscale ;
-moz-osx-font-smoothing : grayscale ;
overscroll-behavior-y : none ;
overscroll-behavior-y : none ;
@ -42,17 +45,35 @@ body {
/ / have a cursor / pointer to operate them
/ / have a cursor / pointer to operate them
@media ( any-pointer : fine ) {
@media ( any-pointer : fine ) {
* {
* {
scrollbar-color : var ( -- btn ) transparent ;
scrollbar-color : var ( -- fg ) transparent ;
& : : -webkit-scrollbar {
& : : -webkit-scrollbar {
background : transparent ;
background : transparent ;
}
}
& : : -webkit-scrollbar-corner {
background : transparent ;
}
& : : -webkit-resizer {
/* stylelint-disable-next-line declaration-no-important */
background-color : transparent !important ;
background-image :
linear-gradient (
135deg ,
transparent calc ( 50 % - 1px ) ,
var ( - - textFaint ) 50 % ,
transparent calc ( 50 % + 1px ) ,
transparent calc ( 75 % - 1px ) ,
var ( - - textFaint ) 75 % ,
transparent calc ( 75 % + 1px ) ,
) ;
}
& : :- webkit-scrollbar-button ,
& : :- webkit-scrollbar-button ,
& : : -webkit-scrollbar-thumb {
& : : -webkit-scrollbar-thumb {
background-color : var ( -- btn ) ;
box-shadow : var ( -- shadow ) ;
box-shadow : var ( -- buttonShadow ) ;
border-radius : var ( -- roundness ) ;
border-radius : var ( -- btnRadius ) ;
}
}
/ / horizontal / vertical / increment / decrement are webkit-specific stuff
/ / horizontal / vertical / increment / decrement are webkit-specific stuff
@ -61,7 +82,7 @@ body {
& : : -webkit-scrollbar-button {
& : : -webkit-scrollbar-button {
--___bgPadding : 2 px ;
--___bgPadding : 2 px ;
color : var ( -- btnT ext) ;
color : var ( -- t ext) ;
background-repeat : no-repeat , no-repeat ;
background-repeat : no-repeat , no-repeat ;
& : horizontal {
& : horizontal {
@ -69,15 +90,15 @@ body {
& : increment {
& : increment {
background-image :
background-image :
linear-gradient ( 45deg , var ( - - b tnT ext) 50 % , transparent 51 % ) ,
linear-gradient ( 45deg , var ( - - text) 50 % , transparent 51 % ) ,
linear-gradient ( - 45deg , transparent 50 % , var ( - - b tnT ext) 51 % ) ;
linear-gradient ( - 45deg , transparent 50 % , var ( - - text) 51 % ) ;
background-position : top var ( -- ___bgPadding ) left 50 % , right 50 % bottom var ( -- ___bgPadding ) ;
background-position : top var ( -- ___bgPadding ) left 50 % , right 50 % bottom var ( -- ___bgPadding ) ;
}
}
& : decrement {
& : decrement {
background-image :
background-image :
linear-gradient ( 45deg , transparent 50 % , var ( - - btnText) 51 % ) ,
linear-gradient ( 45deg , transparent 50 % , var ( - - text) calc ( 50 % + 1px ) ) ,
linear-gradient ( - 45deg , var ( - - b tnT ext) 50 % , transparent 51 % ) ;
linear-gradient ( - 45deg , var ( - - text) 50 % , transparent 51 % ) ;
background-position : bottom var ( -- ___bgPadding ) right 50 % , left 50 % top var ( -- ___bgPadding ) ;
background-position : bottom var ( -- ___bgPadding ) right 50 % , left 50 % top var ( -- ___bgPadding ) ;
}
}
}
}
@ -87,15 +108,15 @@ body {
& : increment {
& : increment {
background-image :
background-image :
linear-gradient ( - 45deg , transparent 50 % , var ( - - b tnT ext) 51 % ) ,
linear-gradient ( - 45deg , transparent 50 % , var ( - - text) 51 % ) ,
linear-gradient ( 45deg , transparent 50 % , var ( - - b tnT ext) 51 % ) ;
linear-gradient ( 45deg , transparent 50 % , var ( - - text) 51 % ) ;
background-position : right var ( -- ___bgPadding ) top 50 % , left var ( -- ___bgPadding ) top 50 % ;
background-position : right var ( -- ___bgPadding ) top 50 % , left var ( -- ___bgPadding ) top 50 % ;
}
}
& : decrement {
& : decrement {
background-image :
background-image :
linear-gradient ( - 45deg , var ( - - b tnT ext) 50 % , transparent 51 % ) ,
linear-gradient ( - 45deg , var ( - - text) 50 % , transparent 51 % ) ,
linear-gradient ( 45deg , var ( - - b tnT ext) 50 % , transparent 51 % ) ;
linear-gradient ( 45deg , var ( - - text) 50 % , transparent 51 % ) ;
background-position : left var ( -- ___bgPadding ) top 50 % , right var ( -- ___bgPadding ) top 50 % ;
background-position : left var ( -- ___bgPadding ) top 50 % , right var ( -- ___bgPadding ) top 50 % ;
}
}
}
}
@ -104,15 +125,14 @@ body {
}
}
/ / Body should have background to scrollbar otherwise it will use white ( body color ? )
/ / Body should have background to scrollbar otherwise it will use white ( body color ? )
html {
html {
scrollbar-color : var ( -- selectedMenu ) var ( -- wallpaper ) ;
scrollbar-color : var ( -- fg ) var ( -- wallpaper ) ;
background : var ( -- wallpaper ) ;
background : var ( -- wallpaper ) ;
}
}
}
}
a {
a {
text-decoration : none ;
text-decoration : none ;
color : $fallback--link ;
color : var ( -- link ) ;
color : var ( -- link , $fallback--link ) ;
}
}
h4 {
h4 {
@ -128,27 +148,12 @@ h4 {
i [ class * = " icon- " ] ,
i [ class * = " icon- " ] ,
. svg-inline--fa ,
. svg-inline--fa ,
. iconLetter {
. iconLetter {
color : $fallback--icon ;
color : var ( -- icon ) ;
color : var ( -- icon , $fallback--icon ) ;
}
. button-unstyled : hover ,
a : hover {
> i [ class * = " icon- " ] ,
> . svg-inline--fa ,
> . iconLetter {
color : var ( -- text ) ;
}
}
}
nav {
nav {
z-index : var ( -- ZI_navbar ) ;
z-index : var ( -- ZI_navbar ) ;
background-color : $fallback--fg ;
box-shadow : var ( -- shadow ) ;
background-color : var ( -- topBar , $fallback--fg ) ;
color : $fallback--faint ;
color : var ( -- faint , $fallback--faint ) ;
box-shadow : 0 0 4 px rgb ( 0 0 0 / 60 % ) ;
box-shadow : var ( -- topBarShadow ) ;
box-sizing : border-box ;
box-sizing : border-box ;
height : var ( -- navbar-height ) ;
height : var ( -- navbar-height ) ;
position : fixed ;
position : fixed ;
@ -195,8 +200,7 @@ nav {
grid-column : 1 / span 3 ;
grid-column : 1 / span 3 ;
grid-row : 1 / 1 ;
grid-row : 1 / 1 ;
pointer-events : none ;
pointer-events : none ;
background-color : rgb ( 0 0 0 / 15 % ) ;
background-color : var ( -- underlay ) ;
background-color : var ( -- underlay , rgb ( 0 0 0 / 15 % )) ;
z-index : - 1000 ;
z-index : - 1000 ;
}
}
@ -204,7 +208,6 @@ nav {
--miniColumn : 25 rem ;
--miniColumn : 25 rem ;
--maxiColumn : 45 rem ;
--maxiColumn : 45 rem ;
--columnGap : 1 em ;
--columnGap : 1 em ;
--status-margin : 0 .75 em ;
--effectiveSidebarColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- sidebarColumnWidth , var ( -- miniColumn ))) ;
--effectiveSidebarColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- sidebarColumnWidth , var ( -- miniColumn ))) ;
--effectiveNotifsColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- not ifsColumnWidth , var ( -- miniColumn ))) ;
--effectiveNotifsColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- not ifsColumnWidth , var ( -- miniColumn ))) ;
--effectiveContentColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- contentColumnWidth , var ( -- maxiColumn ))) ;
--effectiveContentColumnWidth : minmax ( var ( -- miniColumn ) , var ( -- contentColumnWidth , var ( -- maxiColumn ))) ;
@ -366,106 +369,113 @@ nav {
. button-default {
. button-default {
user-select : none ;
user-select : none ;
color : $fallback--text ;
color : var ( -- text ) ;
color : var ( -- btnText , $fallback--text ) ;
background-color : $fallback--fg ;
background-color : var ( -- btn , $fallback--fg ) ;
border : none ;
border : none ;
border-radius : $fallback--btnRadius ;
border-radius : var ( -- roundness ) ;
border-radius : var ( -- btnRadius , $fallback--btnRadius ) ;
cursor : pointer ;
cursor : pointer ;
b ox-shadow: $fallback--buttonShadow ;
b ackground-color: var ( -- background ) ;
box-shadow : var ( -- buttonS hadow) ;
box-shadow : var ( -- s hadow) ;
font-size : 1 em ;
font-size : 1 em ;
font-family : sans-serif ;
font-family : sans-serif ;
font-family : var ( -- inter faceF ont, sans-serif ) ;
font-family : var ( -- font) ;
& . -sublime {
& : : -moz-focus-inner {
b ackground: transparent ;
b order: none ;
}
}
i [ class * = " icon- " ] ,
& : disabled {
. svg-inline--fa {
cursor : not-allowed ;
color : $fallback--text ;
color : var ( -- btnText , $fallback--text ) ;
}
}
}
& : : -moz-focus-inner {
. menu-item ,
. list-item {
display : block ;
box-sizing : border-box ;
border : none ;
border : none ;
outline : none ;
text-align : initial ;
font-size : inherit ;
font-family : inherit ;
font-weight : 400 ;
cursor : pointer ;
color : inherit ;
clear : both ;
position : relative ;
white-space : nowrap ;
border-color : var ( -- border ) ;
border-style : solid ;
border-width : 0 ;
border-top-width : 1 px ;
width : 100 % ;
line-height : var ( -- __line-height ) ;
padding : var ( -- __vertical-gap ) var ( -- __horizontal-gap ) ;
background : transparent ;
--__line-height : 1 .5 em ;
--__horizontal-gap : 0 .75 em ;
--__vertical-gap : 0 .5 em ;
& . -non-interactive {
cursor : auto ;
}
}
& . -active ,
& : hover {
& : hover {
box-shadow : 0 0 4 px rgb ( 255 255 255 / 30 % ) ;
bo rder-top-width: 1 px ;
box-shadow : var ( -- buttonHoverShadow ) ;
bo rder-bottom-width: 1 px ;
}
}
& : active {
& . -active + & ,
box-shadow :
& : hover + & {
0 0 4px 0 rgb ( 255 255 255 / 30 % ) ,
border-top-width : 0 ;
0 1px 0 0 rgb ( 0 0 0 / 20 % ) inset ,
0 - 1px 0 0 rgb ( 255 255 255 / 20 % ) inset ;
box-shadow : var ( -- buttonPressedShadow ) ;
color : $fallback--text ;
color : var ( -- btnPressedText , $fallback--text ) ;
background-color : $fallback--fg ;
background-color : var ( -- btnPressed , $fallback--fg ) ;
svg ,
i {
color : $fallback--text ;
color : var ( -- btnPressedText , $fallback--text ) ;
}
}
}
& : disabled {
& : hover + . menu-item-collapsible : not ( .- expanded ) + &,
cursor : not-allowed ;
& . -active + . menu-item-collapsible : not ( . -expanded ) + & {
color : $fallback--text ;
border-top-width : 0 ;
color : var ( -- btnDisabledText , $fallback--text ) ;
background-color : $fallback--fg ;
background-color : var ( -- btnDisabled , $fallback--fg ) ;
svg ,
i {
color : $fallback--text ;
color : var ( -- btnDisabledText , $fallback--text ) ;
}
}
}
& . toggled {
& [ aria-expanded = " true " ] {
color : $fallback--text ;
border-bottom-width : 1 px ;
color : var ( -- btnToggledText , $fallback--text ) ;
}
background-color : $fallback--fg ;
background-color : var ( -- btnToggled , $fallback--fg ) ;
box-shadow :
0 0 4px 0 rgb ( 255 255 255 / 30 % ) ,
0 1px 0 0 rgb ( 0 0 0 / 20 % ) inset ,
0 - 1px 0 0 rgb ( 255 255 255 / 20 % ) inset ;
box-shadow : var ( -- buttonPressedShadow ) ;
svg ,
a ,
i {
button : not ( . button-default ) {
color : $fallback--text ;
text-align : initial ;
color : var ( -- btnToggledText , $fallback--text ) ;
padding : 0 ;
background : none ;
border : none ;
outline : none ;
display : inline ;
font-size : 100 % ;
font-family : inherit ;
line-height : unset ;
color : var ( -- text ) ;
}
}
& : first-child {
border-top-right-radius : var ( -- roundness ) ;
border-top-left-radius : var ( -- roundness ) ;
border-top-width : 0 ;
}
}
& . danger {
& : last-child {
/ / TODO : add better color variable
border-bottom-right-radius : var ( -- roundness ) ;
color : $fallback--text ;
border-bottom-left-radius : var ( -- roundness ) ;
color : var ( -- alertErrorPanelText , $fallback--text ) ;
border-bottom-width : 0 ;
background-color : $fallback--alertError ;
background-color : var ( -- alertError , $fallback--alertError ) ;
}
}
}
}
. button-unstyled {
. button-unstyled {
background : none ;
border : none ;
border : none ;
outline : none ;
outline : none ;
display : inline ;
display : inline ;
text-align : initial ;
text-align : initial ;
font-size : 100 % ;
font-size : 100 % ;
font-family : inherit ;
font-family : inherit ;
box-shadow : var ( -- shadow ) ;
background-color : transparent ;
padding : 0 ;
padding : 0 ;
line-height : unset ;
line-height : unset ;
cursor : pointer ;
cursor : pointer ;
@ -473,28 +483,23 @@ nav {
color : inherit ;
color : inherit ;
& . -link {
& . -link {
color : $fallback--link ;
/* stylelint-disable-next-line declaration-no-important */
color : var ( -- link , $fallback--link ) ;
color : var ( -- link ) !important ;
}
& . -fullwidth {
width : 100 % ;
}
& . -hover-highlight {
& : hover svg {
color : $fallback--lightText ;
color : var ( -- lightText , $fallback--lightText ) ;
}
}
}
}
}
input ,
input ,
textarea ,
textarea {
border : none ;
display : inline-block ;
outline : none ;
}
. input {
. input {
& . unstyled {
& . unstyled {
border-radius : 0 ;
border-radius : 0 ;
background : none ;
/* stylelint-disable-next-line declaration-no-important */
background : none !important ;
box-shadow : none ;
box-shadow : none ;
height : unset ;
height : unset ;
}
}
@ -502,19 +507,11 @@ textarea,
--_padding : 0 .5 em ;
--_padding : 0 .5 em ;
border : none ;
border : none ;
border-radius : $fallback--inputRadius ;
border-radius : var ( -- roundness ) ;
border-radius : var ( -- inputRadius , $fallback--inputRadius ) ;
background-color : var ( -- background ) ;
box-shadow :
color : var ( -- text ) ;
0 1px 0 0 rgb ( 0 0 0 / 20 % ) inset ,
box-shadow : var ( -- shadow ) ;
0 - 1px 0 0 rgb ( 255 255 255 / 20 % ) inset ,
font-family : var ( -- font ) ;
0 0 2px 0 rgb ( 0 0 0 / 100 % ) inset ;
box-shadow : var ( -- inputShadow ) ;
background-color : $fallback--fg ;
background-color : var ( -- input , $fallback--fg ) ;
color : $fallback--lightText ;
color : var ( -- inputText , $fallback--lightText ) ;
font-family : sans-serif ;
font-family : var ( -- inputFont , sans-serif ) ;
font-size : 1 em ;
font-size : 1 em ;
margin : 0 ;
margin : 0 ;
box-sizing : border-box ;
box-sizing : border-box ;
@ -528,7 +525,6 @@ textarea,
& [ disabled = " disabled " ] ,
& [ disabled = " disabled " ] ,
& . disabled {
& . disabled {
cursor : not-allowed ;
cursor : not-allowed ;
opacity : 0 .5 ;
}
}
& [ type = " range " ] {
& [ type = " range " ] {
@ -543,9 +539,9 @@ textarea,
display : none ;
display : none ;
& : checked + label : : before {
& : checked + label : : before {
box-shadow : 0 0 2 px black inset , 0 0 0 4 px $fallback--fg inset ;
box-shadow : var ( -- shadow ) ;
b ox-shadow: var ( -- inputShadow ) , 0 0 0 4 px var ( -- fg , $fallback--fg ) inset ;
b ackground-color: var ( -- background ) ;
background-color: var ( -- accent , $fallback--link ) ;
color: var ( -- text ) ;
}
}
& : disabled {
& : disabled {
@ -559,16 +555,14 @@ textarea,
+ label : : before {
+ label : : before {
flex-shrink : 0 ;
flex-shrink : 0 ;
display : inline-block ;
display : inline-block ;
content : " ";
content : " • ";
transition : box-shadow 200 ms ;
transition : box-shadow 200 ms ;
width : 1 .1 em ;
width : 1 .1 em ;
height : 1 .1 em ;
height : 1 .1 em ;
border-radius : 100 % ; / / Radio buttons should always be circle
border-radius : 100 % ; / / Radio buttons should always be circle
b ox-shadow: 0 0 2 px black inset ;
b ackground-color: var ( -- background ) ;
box-shadow : var ( -- inputS hadow) ;
box-shadow : var ( -- s hadow) ;
margin-right : 0 .5 em ;
margin-right : 0 .5 em ;
background-color : $fallback--fg ;
background-color : var ( -- input , $fallback--fg ) ;
vertical-align : top ;
vertical-align : top ;
text-align : center ;
text-align : center ;
line-height : 1 .1 ;
line-height : 1 .1 ;
@ -581,8 +575,9 @@ textarea,
& [ type = " checkbox " ] {
& [ type = " checkbox " ] {
& : checked + label : : before {
& : checked + label : : before {
color : $fallback--text ;
color : var ( -- text ) ;
color : var ( -- inputText , $fallback--text ) ;
background-color : var ( -- background ) ;
box-shadow : var ( -- shadow ) ;
}
}
& : disabled {
& : disabled {
@ -600,13 +595,9 @@ textarea,
transition : color 200 ms ;
transition : color 200 ms ;
width : 1 .1 em ;
width : 1 .1 em ;
height : 1 .1 em ;
height : 1 .1 em ;
border-radius : $fallback--checkboxRadius ;
border-radius : var ( -- roundness ) ;
border-radius : var ( -- checkboxRadius , $fallback--checkboxRadius ) ;
box-shadow : var ( -- shadow ) ;
box-shadow : 0 0 2 px black inset ;
box-shadow : var ( -- inputShadow ) ;
margin-right : 0 .5 em ;
margin-right : 0 .5 em ;
background-color : $fallback--fg ;
background-color : var ( -- input , $fallback--fg ) ;
vertical-align : top ;
vertical-align : top ;
text-align : center ;
text-align : center ;
line-height : 1 .1 ;
line-height : 1 .1 ;
@ -623,16 +614,14 @@ textarea,
}
}
/ / Textareas should have stock line-height + vertical padding instead of huge line-height
/ / Textareas should have stock line-height + vertical padding instead of huge line-height
textarea {
textarea . input {
padding : var ( -- _padding ) ;
padding : var ( -- _padding ) ;
line-height : var ( -- post-line-height ) ;
line-height : var ( -- post-line-height ) ;
}
}
option {
option {
color : $fallback--text ;
color : var ( -- text ) ;
color : var ( -- text , $fallback--text ) ;
background-color : var ( -- background ) ;
background-color : $fallback--bg ;
background-color : var ( -- bg , $fallback--bg ) ;
}
}
. hide-number-spinner {
. hide-number-spinner {
@ -653,7 +642,7 @@ option {
li {
li {
border : 1 px solid var ( -- border ) ;
border : 1 px solid var ( -- border ) ;
border-radius : var ( -- inputRadiu s) ;
border-radius : var ( -- roundnes s) ;
padding : 0 .5 em ;
padding : 0 .5 em ;
margin : 0 .25 em ;
margin : 0 .25 em ;
}
}
@ -714,74 +703,58 @@ option {
overflow : hidden ;
overflow : hidden ;
text-overflow : ellipsis ;
text-overflow : ellipsis ;
& . badge-notification {
& . -dot ,
background-color : $fallback--cRed ;
& . -counter {
background-color : var ( -- badgeNotification , $fallback--cRed ) ;
margin : 0 ;
color : white ;
position : absolute ;
color : var ( -- badgeNotificationText , white ) ;
}
}
. alert {
margin : 0 0 .35 em ;
padding : 0 0 .25 em ;
border-radius : $fallback--tooltipRadius ;
border-radius : var ( -- tooltipRadius , $fallback--tooltipRadius ) ;
& . error {
background-color : $fallback--alertError ;
background-color : var ( -- alertError , $fallback--alertError ) ;
color : $fallback--text ;
color : var ( -- alertErrorText , $fallback--text ) ;
. panel-heading & {
color : $fallback--text ;
color : var ( -- alertErrorPanelText , $fallback--text ) ;
}
}
}
& . warning {
& . -dot {
background-color : $fallback--alertWarning ;
min-height : 8 px ;
background-color : var ( -- alertWarning , $fallback--alertWarning ) ;
max-height : 8 px ;
color : $fallback--text ;
min-width : 8 px ;
color : var ( -- alertWarningText , $fallback--text ) ;
max-width : 8 px ;
padding : 0 ;
. panel-heading & {
line-height : 0 ;
color : $fallback--text ;
font-size : 0 ;
color : var ( -- alertWarningPanelText , $fallback--text ) ;
left : calc ( 50 % - 4 px ) ;
}
top : calc ( 50 % - 4 px ) ;
margin-left : 6 px ;
margin-top : - 6 px ;
}
}
& . success {
& . -counter {
background-color : var ( -- alertSuccess , $fallback--alertWarning ) ;
border-radius : var ( -- roundness ) ;
color : var ( -- alertSuccessText , $fallback--text ) ;
font-size : 0 .75 em ;
line-height : 1 ;
. panel-heading & {
text-align : right ;
color : var ( -- alertSuccessPanelText , $fallback--text ) ;
padding : 0 .2 em ;
}
min-width : 0 ;
left : calc ( 50 % - 0 .5 em ) ;
top : calc ( 50 % - 0 .4 em ) ;
margin-left : 0 .7 em ;
margin-top : - 1 em ;
}
}
}
}
. faint {
. alert {
color : $fallback--faint ;
margin : 0 0 .35 em ;
color : var ( -- faint , $fallback--faint ) ;
padding : 0 0 .25 em ;
border-radius : var ( -- roundness ) ;
border : 1 px solid var ( -- border ) ;
}
}
. faint -link {
. faint {
color: $fallback--faint ;
--text: var ( -- textFaint ) ;
color: var ( -- faint , $fallback--f aint) ;
--link: var ( -- linkF aint) ;
& : hover {
color : var ( -- text ) ;
text-decoration : underline ;
}
}
}
. visibility-notice {
. visibility-notice {
padding : 0 .5 em ;
padding : 0 .5 em ;
border : 1 px solid $fallback--faint ;
border : 1 px solid var ( -- textFaint ) ;
border : 1 px solid var ( -- faint , $fallback--faint ) ;
border-radius : var ( -- roundness ) ;
border-radius : $fallback--inputRadius ;
border-radius : var ( -- inputRadius , $fallback--inputRadius ) ;
}
}
. notice-dismissible {
. notice-dismissible {
@ -802,6 +775,10 @@ option {
& . iconLetter {
& . iconLetter {
font-size : 1 .1 em ;
font-size : 1 .1 em ;
}
}
& . svg-inline--fa {
vertical-align : - 0 .15 em ;
}
}
}
. fa-old-padding {
. fa-old-padding {
@ -816,6 +793,11 @@ option {
opacity : 0 .25 ;
opacity : 0 .25 ;
}
}
. timeago {
--link : var ( -- text ) ;
--linkFaint : var ( -- textFaint ) ;
}
. login-hint {
. login-hint {
text-align : center ;
text-align : center ;
@ -914,3 +896,8 @@ option {
padding : 0 ;
padding : 0 ;
position : absolute ;
position : absolute ;
}
}
* : : selection {
color : var ( -- selectionText ) ;
background-color : var ( -- selectionBackground ) ;
}