Page MenuHomeWickedGov Phorge
Files F4102351

skins.citizen.preferences.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

skins.citizen.preferences.less
View Options

@import '../mixins.less';
#citizen-preferences__card {
form {
display: grid;
// This is not the best because it does not adapt to the text length but will revisit later
grid-template-columns: repeat( var( --pref-columns, 2 ), 1fr );
gap: var( --space-xxs );
padding-inline: var( --space-md );
}
}
.citizen-preferences-content {
display: flex;
flex-direction: column;
gap: var( --space-xs );
padding-block: var( --space-xs );
}
// New clientPrefs styles
.citizen-client-prefs {
&-radio {
&__input {
// Hide radio button because we use label as button
display: none;
&:checked {
~ .citizen-client-prefs-radio__label {
border-color: var( --color-progressive );
}
}
}
&__label {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: var( --space-xs ) var( --space-md );
font-weight: var( --font-weight-medium );
cursor: pointer;
border: var( --border-width-thick ) solid var( --border-color-base );
border-radius: var( --border-radius-medium );
&:hover {
border-color: var( --color-progressive--hover );
}
&:active {
border-color: var( --color-progressive--active );
}
}
}
}
#citizen-client-prefs {
.citizen-menu {
&__content {
padding: 0 var( --space-md );
}
}
}
#skin-client-prefs-skin-theme {
--pref-columns: 3;
.citizen-client-prefs-radio__label {
background: var( --color-surface-0 );
&[ for='skin-client-pref-skin-theme-value-day' ] {
// color-base of day theme
color: ~'hsl( var( --color-progressive-hsl__h ), 30%, 20% )';
// color-surface-0 of day theme
background: ~'hsl( var( --color-progressive-hsl__h ), 30%, 96% )';
}
&[ for='skin-client-pref-skin-theme-value-night' ] {
// color-base of night theme
color: ~'hsl( var( --color-progressive-hsl__h ), 25%, 80% )';
// color-surface-0 of night theme
background: ~'hsl( var( --color-progressive-hsl__h ), 20%, 10% )';
}
}
}
#skin-client-prefs-citizen-feature-custom-font-size {
--pref-columns: 2;
}
#skin-client-prefs-citizen-feature-custom-width {
--pref-columns: 3;
}
#skin-client-prefs-citizen-feature-pure-black {
display: none;
// Display on dark theme
.skin-theme-clientpref-night & {
display: block;
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os & {
display: block;
}
}
.citizen-client-prefs-radio__label[ for='skin-client-pref-citizen-feature-pure-black-value-1' ] {
background-color: #000;
}
}
#skin-client-prefs-citizen-feature-autohide-navigation {
display: none;
@media ( max-width: @max-width-breakpoint-tablet ) {
display: block;
}
form {
grid-template-columns: repeat( 2, 1fr );
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 17:24 (3 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a7/33/e2ad428b8b6fe1edff5303445488
Default Alt Text
skins.citizen.preferences.less (2 KB)

Event Timeline