mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-26 23:32:25 +00:00
c7e45177cd
Same as the previous commit, the transition is now accessible as a CSS variable (transition-menu)
160 lines
2.8 KiB
Plaintext
160 lines
2.8 KiB
Plaintext
@import '../variables.less';
|
|
@import '../mixins.less';
|
|
|
|
.citizen-pref {
|
|
&__button {
|
|
padding: 0;
|
|
border: 0;
|
|
appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
|
|
&[ aria-expanded='true' ] {
|
|
background-color: var( --background-color-primary--active );
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
|
|
&__label {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__value {
|
|
color: var( --color-base--emphasized );
|
|
font-weight: var( --font-weight-medium );
|
|
}
|
|
}
|
|
|
|
&-theme {
|
|
&-option {
|
|
flex-grow: 1;
|
|
padding: 0.5rem 1rem;
|
|
border: 2px solid var( --border-color-base );
|
|
border-radius: var( --border-radius--medium );
|
|
cursor: pointer;
|
|
font-weight: var( --font-weight-medium );
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
border-color: var( --color-primary--hover );
|
|
box-shadow: var( --box-shadow-card );
|
|
}
|
|
|
|
&:active {
|
|
border-color: var( --color-primary--active );
|
|
}
|
|
}
|
|
}
|
|
|
|
// We only show min and max value
|
|
&__tickmarks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var( --color-base--subtle );
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
#citizen-pref {
|
|
&-header {
|
|
padding: var( --space-lg ) var( --space-md ) 0;
|
|
color: var( --color-base--emphasized );
|
|
font-size: 1rem;
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
|
|
// TODO: unify the dropdown menu style somewhere
|
|
&-panel {
|
|
.citizen-header-card( right );
|
|
|
|
&.citizen-pref-panel--active {
|
|
.citizen-card-show;
|
|
}
|
|
|
|
fieldset {
|
|
padding: 0 var( --space-md );
|
|
border: 0;
|
|
margin: 0;
|
|
appearance: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
> * {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&-form {
|
|
display: grid;
|
|
margin: var( --space-md ) 0;
|
|
gap: var( --space-md );
|
|
}
|
|
|
|
&-theme {
|
|
&-option {
|
|
&-light {
|
|
background: @color-surface-0;
|
|
color: @color-base;
|
|
}
|
|
|
|
&-dark {
|
|
background: ~'hsl( var( --color-primary__h ), 20%, 10% )';
|
|
color: ~'hsl( var( --color-primary__h ), 10%, 75% )';
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-top: 0.25rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
// Let label be the radio button
|
|
input {
|
|
display: none;
|
|
|
|
&:checked {
|
|
+ label {
|
|
border-color: var( --color-primary );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-resetbutton {
|
|
width: 100%;
|
|
padding: var( --space-sm ) var( --space-md );
|
|
border: 0;
|
|
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
|
appearance: none;
|
|
background: var( --color-destructive );
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
font-weight: var( --font-weight-medium );
|
|
|
|
&:hover {
|
|
background: var( --color-destructive--hover );
|
|
}
|
|
|
|
&:active {
|
|
background: var( --color-destructive--active );
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( hover: hover ) {
|
|
.citizen-pref:hover .citizen-pref__button .citizen-ui-icon::before {
|
|
transform: rotate3d( 0, 0, 1, 90deg );
|
|
}
|
|
}
|