223 lines
7.0 KiB
SCSS
223 lines
7.0 KiB
SCSS
@mixin main_color_web($mode){
|
|
background-color : map-deep-get($color, $mode, "back");
|
|
color : map-deep-get($color, $mode, fore);
|
|
&,button,input,select,textarea{color : map-deep-get($color, $mode, fore);}
|
|
button,input,select,textarea{background-color : map-deep-get($color, $mode, input-back);}
|
|
[role=link],[data-role=link],a[href]{
|
|
&[disabled]{color : map-deep-get($color, grey);}
|
|
&[readonly]{color : map-deep-get($color, $mode, fore);}
|
|
&:not([disabled],[readonly]){
|
|
color : map-deep-get($color, $mode, primary);
|
|
&:hover{color : map-deep-get($color, $mode, secondary);}
|
|
}
|
|
}
|
|
[role=button],[data-role=button],button,[type=button],[type=submit],[type=reset]{
|
|
&[disabled]{
|
|
border-color : map-deep-get($color, grey);
|
|
color : map-deep-get($color, grey);
|
|
box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
|
|
}
|
|
&[readonly]{
|
|
border-color : map-deep-get($color, $mode, fore);
|
|
color : map-deep-get($color, $mode, fore);
|
|
box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
|
|
}
|
|
&:not([disabled],[readonly]){
|
|
border-color : map-deep-get($color, $mode, primary);
|
|
color : mix(map-deep-get($color, $mode, primary), map-deep-get($color, $mode, fore), 50%);
|
|
box-shadow : 0em 0em .4em inset map-deep-get($color, $mode, primary);
|
|
&:hover{
|
|
border-color : map-deep-get($color, $mode, secondary);
|
|
color : mix(map-deep-get($color, $mode, secondary), map-deep-get($color, $mode, fore), 50%);
|
|
box-shadow : 0em 0em .4em inset map-deep-get($color, $mode, secondary);
|
|
}
|
|
}
|
|
}
|
|
header,footer{box-shadow :
|
|
0em 0em 1em map-deep-get($color, $mode, back),
|
|
0em 0em 1.25em map-deep-get($color, $mode, back),
|
|
0em 0em 1.5em map-deep-get($color, $mode, back),
|
|
0em 0em 2em map-deep-get($color, $mode, back);
|
|
}
|
|
}
|
|
|
|
@mixin main_web($reverse:false){
|
|
|
|
position : relative;
|
|
top : 0em;
|
|
left : 0em;
|
|
width : 100%;
|
|
height : 100%;
|
|
overflow : hidden;
|
|
|
|
&,button,input,select{font-family : $font-normal;}
|
|
textarea,pre{font-family : $font-mono;}
|
|
button,input,select,textarea{font-size : 1em;}
|
|
[data-icon]::before{
|
|
margin-right : .4em;
|
|
font-family : $font-icon;
|
|
}
|
|
|
|
a[href]{text-decoration : none;}
|
|
[role=link],[role=button],[data-role=link],[data-role=button],a[href],button,[type=button],[type=submit],[type=reset]{&:not([disabled],[readonly]){
|
|
cursor : pointer;
|
|
transition-duration : $transition-out;
|
|
transition-property : color;
|
|
&:hover{transition-duration : $transition-in;}
|
|
}}
|
|
[role=button],[data-role=button],button,[type=button],[type=submit],[type=reset],[type=text],[type=number],[type=date],[type=password],textarea{
|
|
padding : .1em .4em;
|
|
border-width : .1em;
|
|
border-style : solid;
|
|
border-color : map-deep-get($color, grey);
|
|
border-radius : $border-radius;
|
|
box-shadow : 0em 0em .4em inset map-deep-get($color, grey);
|
|
}
|
|
button,[type=button],[type=submit],[type=reset]{&:not([disabled],[readonly]){
|
|
transition-property : color,border-color,background-color,box-shadow;
|
|
}}
|
|
|
|
.group{
|
|
&>*{&,&>*{border-radius : 0em;}}
|
|
&>:first-child{&,&>:first-child{border-radius : $border-radius 0em 0em $border-radius;}}
|
|
&>:last-child{&,&>:last-child{border-radius : 0em $border-radius $border-radius 0em;}}
|
|
}
|
|
|
|
[data-visible=false]{display : none;}
|
|
|
|
header,main,footer{
|
|
position : absolute;
|
|
left : 0em;
|
|
width : 100%;
|
|
}
|
|
|
|
header{
|
|
top : 0em;
|
|
height : $header-height;
|
|
z-index : 20;
|
|
overflow : visible;
|
|
}
|
|
|
|
main{
|
|
top : $header-height;
|
|
bottom : $footer-height;
|
|
z-index : 10;
|
|
overflow : auto;
|
|
}
|
|
|
|
footer{
|
|
display : flex;
|
|
flex-direction : row;
|
|
justify-items : center;
|
|
bottom : 0em;
|
|
height : $footer-height;
|
|
z-index : 30;
|
|
overflow : visible;
|
|
}
|
|
|
|
@each $key, $option in (dark : true, light : false){
|
|
&[data-gui-mode=#{$key}],&[data-gui-mode=default][data-dark-mode=#{$option}]{
|
|
@include main_color_web($key);
|
|
}
|
|
}
|
|
&[data-gui-mode=light],&[data-gui-mode=default][data-dark-mode=false]{header>h1{
|
|
[data-type=dark]{opacity : 0;}
|
|
[data-type=light]{opacity : 1;}
|
|
}}
|
|
&[data-gui-mode=dark],&[data-gui-mode=default][data-dark-mode=true]{header>h1{
|
|
[data-type=dark]{opacity : 1;}
|
|
[data-type=light]{opacity : 0;}
|
|
}}
|
|
|
|
h1{
|
|
margin : .2em .5em;
|
|
padding : 0em;
|
|
font-size : 1em;
|
|
font-weight : 900;
|
|
img{
|
|
width : auto;
|
|
height : 3.6em;
|
|
&+span{display : none;}
|
|
}
|
|
a>span{vertical-align : middle;}
|
|
&,.image{
|
|
display : inline-block;
|
|
position : relative;
|
|
transition-duration : $transition;
|
|
transition-property : opacity;
|
|
&+.image{
|
|
position : absolute;
|
|
top : 0em;
|
|
left : 0em;
|
|
}
|
|
}
|
|
.text{
|
|
margin-left : .2em;
|
|
font-size : 3.6em;
|
|
}
|
|
}
|
|
|
|
.main-menu{
|
|
padding-bottom : .4em;
|
|
vertical-align : bottom;
|
|
&,ul,li{display : inline-block;}
|
|
ul{
|
|
margin : 0em;
|
|
padding : 0em;
|
|
list-style-type : none;
|
|
}
|
|
li{margin : 0em 1em;}
|
|
}
|
|
|
|
.licenses{
|
|
display : flex;
|
|
flex-direction : row;
|
|
justify-items : center;
|
|
align-items : center;
|
|
width : 100%;
|
|
font-weight : 100;
|
|
text-align : center;
|
|
img{
|
|
width : auto;
|
|
height : 1.8em;
|
|
}
|
|
&>span{
|
|
margin : 0em .3em;
|
|
vertical-align : middle;
|
|
}
|
|
.text{font-size : .7em;}
|
|
}
|
|
.copyright{font-size : .7em;}
|
|
|
|
.cc-by-nc-sa-4,.gplv3{
|
|
display : flex;
|
|
flex-direction : row;
|
|
justify-items : center;
|
|
align-items : center;
|
|
&>span{margin : 0em .3em;}
|
|
}
|
|
|
|
.gui-controls{
|
|
margin : .2em .5em;
|
|
padding : 0em;
|
|
border : none;
|
|
white-space : nowrap;
|
|
font-size : .85em;
|
|
&>*{&,&>*{border-radius : 0em;}}
|
|
&{&>[data-i18n=less_zoom],.input-number,&>[data-i18n=more_zoom],&>[data-i18n=reset_zoom]{display : none;}}
|
|
button[data-i18n=zoom_mode]{&,&>:first-child{border-radius : $border-radius 0em 0em $border-radius;}}
|
|
&>:last-child{&,&>:last-child{border-radius : 0em $border-radius $border-radius 0em;}}
|
|
legend{display : none;}
|
|
[data-icon]{
|
|
&::before{margin : 0em;}
|
|
&+[data-i18n]{display : none;}
|
|
};
|
|
}
|
|
|
|
.wmd-main-menu-button{
|
|
position : absolute;
|
|
bottom : 0em;
|
|
right : 0em;
|
|
}
|
|
|
|
} |