//// Settings// ._settings { display: none; position: absolute; top: 0; bottom: 0; z-index: var(--headerZ); &._in { display: block; } > ._header { justify-content: space-between; } &._dirty > ._header { background: var(--noteGreenBackground); border-color: var(--noteGreenBorder); }} //// Settings page// ._settings-fieldset { display: -ms-flexbox; display: flex; margin: 1.5rem 0; line-height: 1.5rem;} ._settings-legend { -ms-flex: 0 1 10rem; flex: 0 1 10rem; margin: 0; padding-right: .5rem; line-height: inherit; font-size: inherit; font-weight: var(--boldFontWeight); text-align: right; @extend %border-box;} ._settings-inputs { -ms-flex: 1 1 20rem; flex: 1 1 20rem;} ._settings-label { &:not(._theme-label) { margin: 0 0 .375rem; } > small { display: block; color: var(--textColorLight); margin-left: 1.75rem; } &._theme-label > small { display: inline-block; margin-left: 0.75rem; } input[type=checkbox], input[type=radio] { vertical-align: top; margin: .25rem .375rem; }} @media (max-width: 80rem) { ._setting-max-width { display: none; }} ._setting-native-scrollbar { display: none; }@supports (-webkit-margin-end: 1px) { ._setting-native-scrollbar { display: block; } } //// Settings buttons// ._settings-btn { display: block; width: 100%; height: 100%; line-height: 1.5rem; padding: 0 .75rem; font-size: .875rem; font-weight: var(--boldFontWeight); color: inherit; text-align: left; cursor: pointer; @extend %border-box; > svg { width: 1.5rem; height: 1.5rem; margin-right: .125rem; @extend %svg-icon; }} ._settings-btn-back { ._dirty & { display: none; }} ._settings-btn-save { display: none; ._dirty & { display: block; }} //// Header tabs// ._settings-tabs { display: none; // mobile only margin-right: .5rem; ._dirty & { display: none !important; }} ._settings-tab { position: relative; vertical-align: top; padding: 0 .75rem; line-height: var(--headerHeight); color: var(--textColorLight); &.active { color: var(--textColor); font-weight: var(--boldFontWeight); box-shadow: inset 0 -2px var(--linkColor); }}
//
// Settings
//
._settings {
display: none;
position: absolute;
top: 0;
bottom: 0;
z-index: var(--headerZ);
&._in { display: block; }
> ._header { justify-content: space-between; }
&._dirty > ._header {
background: var(--noteGreenBackground);
border-color: var(--noteGreenBorder);
}
}
//
// Settings page
//
._settings-fieldset {
display: -ms-flexbox;
display: flex;
margin: 1.5rem 0;
line-height: 1.5rem;
}
._settings-legend {
-ms-flex: 0 1 10rem;
flex: 0 1 10rem;
margin: 0;
padding-right: .5rem;
line-height: inherit;
font-size: inherit;
font-weight: var(--boldFontWeight);
text-align: right;
@extend %border-box;
}
._settings-inputs {
-ms-flex: 1 1 20rem;
flex: 1 1 20rem;
}
._settings-label {
&:not(._theme-label) {
margin: 0 0 .375rem;
}
> small {
display: block;
color: var(--textColorLight);
margin-left: 1.75rem;
}
&._theme-label > small {
display: inline-block;
margin-left: 0.75rem;
}
input[type=checkbox], input[type=radio] {
vertical-align: top;
margin: .25rem .375rem;
}
}
@media (max-width: 80rem) {
._setting-max-width { display: none; }
}
._setting-native-scrollbar { display: none; }
@supports (-webkit-margin-end: 1px) { ._setting-native-scrollbar { display: block; } }
//
// Settings buttons
//
._settings-btn {
display: block;
width: 100%;
height: 100%;
line-height: 1.5rem;
padding: 0 .75rem;
font-size: .875rem;
font-weight: var(--boldFontWeight);
color: inherit;
text-align: left;
cursor: pointer;
@extend %border-box;
> svg {
width: 1.5rem;
height: 1.5rem;
margin-right: .125rem;
@extend %svg-icon;
}
}
._settings-btn-back {
._dirty & { display: none; }
}
._settings-btn-save {
display: none;
._dirty & { display: block; }
}
//
// Header tabs
//
._settings-tabs {
display: none; // mobile only
margin-right: .5rem;
._dirty & { display: none !important; }
}
._settings-tab {
position: relative;
vertical-align: top;
padding: 0 .75rem;
line-height: var(--headerHeight);
color: var(--textColorLight);
&.active {
color: var(--textColor);
font-weight: var(--boldFontWeight);
box-shadow: inset 0 -2px var(--linkColor);
}
}