mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-16 11:00:08 +00:00
192 lines
3.3 KiB
Plaintext
192 lines
3.3 KiB
Plaintext
@import '../variables.less';
|
|
@import '../mixins.less';
|
|
|
|
#citizen-pref {
|
|
&-toggle {
|
|
box-sizing: content-box;
|
|
border: 0;
|
|
appearance: none;
|
|
|
|
&:after {
|
|
display: block;
|
|
width: inherit;
|
|
height: inherit;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
content: '';
|
|
opacity: var( --opacity-icon-base );
|
|
transition: @transition-opacity-quick, @transition-transform-quick;
|
|
}
|
|
|
|
&:active:after {
|
|
opacity: var( --opacity-icon-base--active ) !important;
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
padding: 20px var( --padding-page ) 0;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
font-size: @ui-menu-header;
|
|
}
|
|
}
|
|
|
|
// TODO: unify the dropdown menu style somewhere
|
|
&-panel {
|
|
position: absolute;
|
|
top: var( --height-header );
|
|
right: var( --padding-page );
|
|
left: var( --padding-page );
|
|
border: 1px solid var( --border-color-base--lighter );
|
|
background: var( --background-color-dp-08 );
|
|
border-radius: var( --border-radius--medium );
|
|
.boxshadow(4);
|
|
|
|
fieldset {
|
|
padding: 10px var( --padding-page );
|
|
border: 0;
|
|
margin: 0;
|
|
appearance: none;
|
|
font-size: @ui-menu-text;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&-theme {
|
|
&-option {
|
|
&-light {
|
|
background: @background-color-dp-00;
|
|
color: @color-base;
|
|
}
|
|
|
|
&-dark {
|
|
background: @dark-background-color-dp-00;
|
|
color: @dark-color-base;
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0 -4px;
|
|
}
|
|
|
|
// Let label be the radio button
|
|
input {
|
|
display: none;
|
|
|
|
&:checked {
|
|
+ label {
|
|
border-color: var( --color-primary );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-resetbutton {
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
border: 0;
|
|
margin-top: 10px;
|
|
appearance: none;
|
|
background: var( --color-destructive );
|
|
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: @ui-menu-text;
|
|
font-weight: 450;
|
|
|
|
&:hover {
|
|
background: var( --color-destructive--hover );
|
|
}
|
|
|
|
&:active {
|
|
background: var( --color-destructive--active );
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-pref {
|
|
&-panel {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: @transition-opacity-quick;
|
|
visibility: hidden;
|
|
|
|
&--active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
&__label {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
color: var( --color-base--subtle );
|
|
letter-spacing: 0.75px;
|
|
}
|
|
}
|
|
|
|
&-theme {
|
|
&-option {
|
|
flex-grow: 1;
|
|
padding: 10px 20px;
|
|
border: 2px solid var( --border-color-base );
|
|
margin: 4px;
|
|
border-radius: var( --border-radius--medium );
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
.boxshadow( 2 );
|
|
|
|
&:hover {
|
|
border-color: var( --color-primary--hover );
|
|
.boxshadow( 3 );
|
|
}
|
|
|
|
&:active {
|
|
border-color: var( --color-primary--active );
|
|
.boxshadow( 1 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.skin-citizen-dark {
|
|
#citizen-pref-toggle:after {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @width-breakpoint-tablet ) {
|
|
#citizen-pref {
|
|
position: relative;
|
|
|
|
&-panel {
|
|
right: 0;
|
|
left: unset;
|
|
min-width: 250px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( hover: hover ) {
|
|
#citizen-pref:hover #citizen-pref-toggle:hover:after {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
transform: rotate3d( 0, 0, 1, 90deg );
|
|
}
|
|
}
|