546 lines
17 KiB
SCSS
546 lines
17 KiB
SCSS
// Settings
|
|
$color-light-fore : #222;
|
|
$color-light-back : #EFEFEF;
|
|
$color-light-primary : #2272D4;
|
|
$color-light-secondary : #D47222;
|
|
$color-dark-fore : #EFEFEF;
|
|
$color-dark-back : #222;
|
|
$color-dark-primary : mix(#FFF, #2272D4, 30%);
|
|
$color-dark-secondary : mix(#FFF, #D47222, 30%);
|
|
$color-grey : mix($color-light-fore, $color-light-back ,50%);
|
|
$header-height : 4em;
|
|
$footer-height : 2em;
|
|
$radius-item : .3em;
|
|
$border-size : .1em;
|
|
$box-shadow-item-inset : .2em;
|
|
$transition-in : .15s;
|
|
$transition-out : 1s;
|
|
$transition : .5s;
|
|
|
|
// Common
|
|
@function unicode($code){
|
|
@return unquote("\"") + unquote(str-insert($code, "\\", 1)) + unquote("\"");
|
|
}
|
|
|
|
// Styles
|
|
.opo-tests{
|
|
|
|
position : relative;
|
|
top : 0em;
|
|
left : 0em;
|
|
width : 100%;
|
|
height : 100%;
|
|
overflow : hidden;
|
|
&,input,button,[role=button]{
|
|
font-family : Arial, Helvetica, sans-serif;
|
|
font-size : 1em;
|
|
}
|
|
|
|
a[href]{text-decoration : none;}
|
|
a[href],button,[role=button]{
|
|
cursor : pointer;
|
|
transition-duration : $transition-out;
|
|
transition-property : color;
|
|
&:hover{transition-duration : $transition-in;}
|
|
}
|
|
button,input,[role=button]{
|
|
border-width : $border-size;
|
|
border-style : solid;
|
|
border-radius : $radius-item;
|
|
}
|
|
a[href],button,[role=button],input{outline : none;}
|
|
button,[role=button]{transition-property : color,background-color,border-color,box-shadow;}
|
|
input{
|
|
transition-property : border-color,box-shadow;
|
|
transition-duration : $transition-out;
|
|
&:focus{transition-duration : $transition-in;}
|
|
}
|
|
|
|
[data-icon]::before{
|
|
margin-right : .4em;
|
|
font-family : "FA6FS";
|
|
}
|
|
|
|
[data-visible=false]{display : none;}
|
|
|
|
fieldset{
|
|
margin : 1em 0em;
|
|
border : none;
|
|
}
|
|
legend{
|
|
font-weight : 900;
|
|
font-size : 1.2em;
|
|
}
|
|
|
|
&[data-vertical=true] .form{
|
|
fieldset{
|
|
display : block;
|
|
overflow-x : hidden;
|
|
}
|
|
.structure>div>*{
|
|
display : block;
|
|
width : 100%;
|
|
}
|
|
}
|
|
&[data-vertical=false] .form .structure{
|
|
display : table;
|
|
table-layout : fixed;
|
|
&>div{
|
|
display : table-row;
|
|
&>*{display : table-cell;}
|
|
&>span{max-width : 80%;}
|
|
&>label{
|
|
width : 20em;
|
|
text-align : right;
|
|
}
|
|
&>ul{width : 0em;}
|
|
}
|
|
}
|
|
.form{
|
|
fieldset{
|
|
width : 100%;
|
|
box-sizing : border-box;
|
|
min-inline-size: inherit;
|
|
}
|
|
.structure{
|
|
width : 92%;
|
|
max-width : 92%;
|
|
margin-left : 3%;
|
|
box-sizing : border-box;
|
|
&>div{
|
|
&>*{
|
|
padding : .2em .5em;
|
|
vertical-align : top;
|
|
}
|
|
}
|
|
}
|
|
[data-i]>label>span{
|
|
display : block;
|
|
&:first-child{
|
|
font-weight : 900;
|
|
white-space : nowrap;
|
|
&::after{content : ":";}
|
|
}
|
|
&+span{
|
|
font-size : .85em;
|
|
opacity : .7;
|
|
}
|
|
}
|
|
[type=number],[type=text],[type=password]{width : 100%;}
|
|
}
|
|
|
|
.buttons,.group{
|
|
display : block;
|
|
text-align : center;
|
|
&>*{&,&>*{border-radius : 0em !important;}}
|
|
&,&>:first-child{&>:first-child{
|
|
border-top-left-radius : $radius-item !important;
|
|
border-bottom-left-radius : $radius-item !important;
|
|
}}
|
|
&,&>:last-child{&>:last-child{
|
|
border-top-right-radius : $radius-item !important;
|
|
border-bottom-right-radius : $radius-item !important;
|
|
}}
|
|
}
|
|
|
|
&[data-gui-mode=light]{
|
|
&,input{color : $color-light-fore;}
|
|
background-color : $color-light-back;
|
|
header,footer{box-shadow : 0em 0em 1em $color-light-back;}
|
|
&,input,button,[role=button]{color : $color-light-fore;}
|
|
a,button,[role=button]{
|
|
color : $color-light-primary;
|
|
&:hover{
|
|
color : $color-light-secondary;
|
|
}
|
|
}
|
|
button,[role=button]{
|
|
border-color : $color-light-primary;
|
|
background-color : mix($color-light-back, $color-light-primary, 95%);
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-primary;
|
|
&:hover{
|
|
border-color : $color-light-secondary;
|
|
background-color : mix($color-light-back, $color-light-secondary, 95%);
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-secondary;
|
|
}
|
|
}
|
|
input,.group>label:not([role=button]){
|
|
color : $color-light-fore;
|
|
border-color : $color-light-fore;
|
|
background-color : mix($color-light-back, $color-light-fore, 90%);
|
|
}
|
|
input{
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-fore;
|
|
&:focus{
|
|
border-color : $color-light-primary;
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-light-primary;
|
|
}
|
|
}
|
|
.graphic{
|
|
[data-status=unanswered]{background-color : mix($color-light-back, #888, 80%);}
|
|
[data-status=answered]{background-color : mix($color-light-back, #888, 50%);}
|
|
[data-status=right]{background-color : mix($color-light-fore, #0F0, 50%);}
|
|
[data-status=wrong]{background-color : mix($color-light-fore, #F00, 50%);}
|
|
[data-status=partially]{background-color : mix($color-light-fore, #FF0, 50%);}
|
|
}
|
|
.test-info{
|
|
li[data-i18n=number]{color : mix($color-light-back, #888, 50%);}
|
|
li[data-i18n=unanswered]{color : mix($color-light-back, #888, 25%);}
|
|
li[data-i18n=rights]{color : mix($color-light-fore, #0F0, 50%);}
|
|
li[data-i18n=wrongs]{color : mix($color-light-fore, #F00, 50%);}
|
|
li[data-i18n=partially]{color : mix($color-light-fore, #FF0, 50%);}
|
|
}
|
|
.form-errors,.errors{color : mix($color-light-fore, #F00, 50%);}
|
|
}
|
|
&[data-gui-mode=dark]{
|
|
&,input{color : $color-dark-fore;}
|
|
background-color : $color-dark-back;
|
|
header,footer{box-shadow : 0em 0em 1em $color-dark-back;}
|
|
&,input,button,[role=button]{color : $color-dark-fore;}
|
|
a,button,[role=button]{
|
|
color : $color-dark-primary;
|
|
&:hover{
|
|
color : $color-dark-secondary;
|
|
}
|
|
}
|
|
button,[role=button]{
|
|
border-color : $color-dark-primary;
|
|
background-color : mix($color-dark-back, $color-dark-primary, 95%);
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-primary;
|
|
&:hover{
|
|
border-color : $color-dark-secondary;
|
|
background-color : mix($color-dark-back, $color-dark-secondary, 95%);
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-secondary;
|
|
}
|
|
}
|
|
input,.group>label:not([role=button]){
|
|
color : $color-dark-fore;
|
|
border-color : $color-dark-fore;
|
|
background-color : mix($color-dark-back, $color-dark-fore, 90%);
|
|
}
|
|
input{
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-fore;
|
|
&:focus{
|
|
border-color : $color-dark-primary;
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-dark-primary;
|
|
}
|
|
}
|
|
.graphic{
|
|
[data-status=unanswered]{background-color : mix($color-dark-back, #888, 80%);}
|
|
[data-status=answered]{background-color : mix($color-dark-back, #888, 50%);}
|
|
[data-status=right]{background-color : mix($color-dark-fore, #0F0, 50%);}
|
|
[data-status=wrong]{background-color : mix($color-dark-fore, #F00, 50%);}
|
|
[data-status=partially]{background-color : mix($color-dark-fore, #FF0, 50%);}
|
|
}
|
|
.test-info{
|
|
li[data-i18n=number]{color : mix($color-dark-back, #888, 50%);}
|
|
li[data-i18n=unanswered]{color : mix($color-dark-back, #888, 25%);}
|
|
li[data-i18n=rights]{color : mix($color-dark-fore, #0F0, 50%);}
|
|
li[data-i18n=wrongs]{color : mix($color-dark-fore, #F00, 50%);}
|
|
li[data-i18n=partially]{color : mix($color-dark-fore, #FF0, 50%);}
|
|
}
|
|
.form-errors,.errors{color : mix($color-dark-fore, #F00, 50%);}
|
|
}
|
|
|
|
header,main,footer{
|
|
position : absolute;
|
|
left : 0em;
|
|
width : 100%;
|
|
}
|
|
header{
|
|
display : flex;
|
|
flex-wrap : nowrap;
|
|
align-items : flex-end;
|
|
top : 0em;
|
|
height : $header-height;
|
|
&>*{flex: 0 0 auto;}
|
|
}
|
|
main{
|
|
top : $header-height;
|
|
bottom : $footer-height;
|
|
overflow : auto;
|
|
}
|
|
footer{
|
|
display : flex;
|
|
flex-wrap : nowrap;
|
|
align-items : center;
|
|
bottom : 0em;
|
|
height : $footer-height;
|
|
&>*{flex: 1 1 auto;}
|
|
}
|
|
|
|
h1{
|
|
font-size : 1em;
|
|
span,img{vertical-align : middle;}
|
|
.image{
|
|
display : inline-block;
|
|
margin : .2em 1em;
|
|
}
|
|
img{
|
|
width : auto;
|
|
height : $header-height - .4em;
|
|
}
|
|
[data-status=loading],[data-status=error]{display : none;}
|
|
span+span{
|
|
margin-left : .2em;
|
|
font-size : $header-height * .6;
|
|
font-weight : 900;
|
|
}
|
|
}
|
|
|
|
.header-menu{
|
|
flex : 1 1 0;
|
|
margin-bottom : .3em;
|
|
ul{
|
|
list-style-type : none;
|
|
margin : 0em;
|
|
padding : 0em;
|
|
text-align : center;
|
|
}
|
|
li{
|
|
display : inline-block;
|
|
margin : 0em 1em;
|
|
}
|
|
}
|
|
|
|
.licenses{
|
|
display : flex;
|
|
flex-direction : row;
|
|
justify-content : center;
|
|
align-items : center;
|
|
margin : 0em;
|
|
text-align : center;
|
|
font-size : .8em;
|
|
&>*{
|
|
flex : 0 0 auto;
|
|
margin : 0em 1em;
|
|
}
|
|
}
|
|
.cc-by-nc-sa-4{
|
|
display : flex;
|
|
align-items : center;
|
|
&>[data-i18n]{flex : 1 1 auto;}
|
|
&>.image{
|
|
margin-left : .3em;
|
|
flex : 0 0 auto;
|
|
}
|
|
img{
|
|
width : auto;
|
|
height : $footer-height * .8;
|
|
}
|
|
}
|
|
|
|
.group[data-i18n=search]{
|
|
display : flex;
|
|
flex-direction : row;
|
|
flex-wrap : nowrap;
|
|
// &>:first-child::after{content : ": ";}
|
|
&>*{flex : 0 0 auto;}
|
|
&>.input-text{flex : 1 1 auto;}
|
|
&>:first-child,&>:last-child{
|
|
border-width : $border-size;
|
|
border-style : solid;
|
|
border-radius : $radius-item;
|
|
}
|
|
[for=show_selected]{
|
|
[data-icon=checkbox]::before{content : unicode("f070");font-family : "FA6FS";}
|
|
[type=checkbox]:checked+[data-icon=checkbox]::before{content : unicode("f06e");font-family : "FA6FS";}
|
|
span+span{display : none;}
|
|
}
|
|
[data-icon]{
|
|
&::before{margin : 0em .3em;}
|
|
&+[data-i18n]{display : none;}
|
|
}
|
|
}
|
|
|
|
label>[data-i18n='blocks[]']{
|
|
&>:first-child{
|
|
margin-right : .4em;
|
|
&::before{content : "[ ";}
|
|
&::after{content : " ] - ";}
|
|
}
|
|
&>span{
|
|
display : inline-block;
|
|
&[title=undefined]{display : none;}
|
|
&+:not([title=undefined])+span::before{
|
|
content : "-";
|
|
margin : 0em .5em;
|
|
}
|
|
}
|
|
}
|
|
[data-i][data-i18n=blocks]{
|
|
[data-show-selected]{width : 100%;}
|
|
nav{
|
|
width : 100%;
|
|
max-height : 20em;
|
|
overflow : auto;
|
|
}
|
|
ul{
|
|
list-style-type : none;
|
|
li{
|
|
white-space : nowrap;
|
|
text-overflow : ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-i18n=test]{font-size : 1.5em;}
|
|
[data-i18n=test_text]{display : none;}
|
|
section,.graphic{
|
|
position : absolute;
|
|
top : 4em;
|
|
bottom : 2em;
|
|
}
|
|
section{
|
|
left : 0em;
|
|
right : 1em;
|
|
overflow : auto;
|
|
}
|
|
.graphic{
|
|
display : flex;
|
|
flex-direction : column;
|
|
right : 0em;
|
|
width : 1em;
|
|
margin : 0em;
|
|
padding : 0em;
|
|
list-style-type : none;
|
|
overflow : hidden;
|
|
li{flex : 1 1 auto;}
|
|
}
|
|
.block-info{
|
|
margin : 0em;
|
|
padding : 0em;
|
|
list-style-type : none;
|
|
font-size : .85em;
|
|
opacity : .7;
|
|
li{
|
|
display : inline;
|
|
&+li::before{content : " - ";}
|
|
}
|
|
strong{
|
|
display : none;
|
|
&::after{content : ": ";}
|
|
}
|
|
}
|
|
.answers{list-style-type : none;}
|
|
[data-show-selected=true] [data-selected=true]{display : list-item;}
|
|
|
|
[data-fixed=false]{
|
|
&[data-show-rights=false] [data-is-ok]{display : none;}
|
|
&[data-show-results=false] [data-right]{display : none;}
|
|
button[data-i18n=restart]{&,&:hover{
|
|
background-color : mix($color-light-back, $color-grey, 80%);
|
|
color : $color-grey;
|
|
border-color : $color-grey;
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
|
|
}}
|
|
}
|
|
[data-fixed=true] button[data-i18n=fix]{&,&:hover{
|
|
background-color : mix($color-light-back, $color-grey, 80%);
|
|
color : $color-grey;
|
|
border-color : $color-grey;
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
|
|
}}
|
|
[data-fixed=true],[data-lock-mode=true]{button{
|
|
&[data-i18n=change_results_mode],
|
|
&[data-i18n=change_rights_mode]{&,&:hover{
|
|
background-color : mix($color-light-back, $color-grey, 80%);
|
|
color : $color-grey;
|
|
border-color : $color-grey;
|
|
box-shadow : 0em 0em $box-shadow-item-inset inset $color-grey;
|
|
}}
|
|
}}
|
|
|
|
.test-info{
|
|
position : absolute;
|
|
top : 0em;
|
|
left : 7em;
|
|
right : 0em;
|
|
margin : 0em;
|
|
padding : 0em;
|
|
text-align : center;
|
|
list-style-type : none;
|
|
font-size : 1em;
|
|
li{
|
|
display : inline-block;
|
|
margin : 0em 1em;
|
|
&[data-i18n=marks]{
|
|
font-weight : 900;
|
|
font-size : 1.2em;
|
|
}
|
|
}
|
|
strong::after{content : ": ";}
|
|
.maximum{
|
|
opacity : .5;
|
|
&::before{content : " / ";}
|
|
}
|
|
}
|
|
|
|
.test-form{
|
|
.buttons{
|
|
position : absolute;
|
|
left : 0em;
|
|
bottom : 0em;
|
|
width : 100%;
|
|
text-align : center;
|
|
[data-icon]{
|
|
&::before{margin : 0em .3em;}
|
|
&+[data-i18n]{display : none;}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
[data-is-ok=true]::before{
|
|
content : " ✔";
|
|
color : green;
|
|
}
|
|
[data-is-ok=false]::before{
|
|
content : " ✖";
|
|
color : red;
|
|
}
|
|
[data-is-ok=null]::before{
|
|
content : " ❓";
|
|
color : orange;
|
|
}
|
|
|
|
[data-right=true]::before{
|
|
content : " ✔";
|
|
color : green;
|
|
}
|
|
[data-right=false]::before{
|
|
content : " ✖";
|
|
color : red;
|
|
}
|
|
[data-right=null]::before{
|
|
content : " ❓";
|
|
color : orange;
|
|
}
|
|
|
|
[type=checkbox]{
|
|
display : none;
|
|
&+[data-icon=checkbox]::before{content : unicode("f0c8");font-family : "FA6FR";}
|
|
&:checked+[data-icon=checkbox]::before{content : unicode("f14a");font-family : "FA6FR";}
|
|
}
|
|
[type=radio]{
|
|
display : none;
|
|
&+[data-icon=radio]::before{content : unicode("f111");font-family : "FA6FR";}
|
|
&:checked+[data-icon=radio]::before{content : unicode("f192");font-family : "FA6FR";}
|
|
}
|
|
|
|
[data-icon=select_all_visible]::before{content : unicode("f0ae");font-family : "FA6FS";}
|
|
[data-icon=unselect_all_visible]::before{content : unicode("f03a");font-family : "FA6FS";}
|
|
[data-icon=home]::before{content : unicode("f015");font-family : "FA6FS";}
|
|
[data-icon=git]::before{content : unicode("f841");font-family : "FA6FB";}
|
|
[data-icon=clean]::before{content : unicode("f51a");font-family : "FA6FS";}
|
|
[data-icon=submit]::before{content : unicode("f1d8");font-family : "FA6FS";}
|
|
[data-icon=search]::before{content : unicode("f002");font-family : "FA6FS";}
|
|
[data-show-rights=false] [data-icon=change_rights_mode]::before{content : unicode("f03a");font-family : "FA6FS";}
|
|
[data-show-rights=true] [data-icon=change_rights_mode]::before{content : unicode("f0ae");font-family : "FA6FS";}
|
|
[data-show-results=false] [data-icon=change_results_mode]::before{content : unicode("e075");font-family : "FA6FS";}
|
|
[data-show-results=true] [data-icon=change_results_mode]::before{content : unicode("f05b");font-family : "FA6FS";}
|
|
[data-icon=fix]::before{content : unicode("f681");font-family : "FA6FS";}
|
|
[data-icon=restart]::before{content : unicode("f0e2");font-family : "FA6FS";}
|
|
[data-icon=do_other_test]::before{content : unicode("f2f5");font-family : "FA6FS";}
|
|
|
|
} |