OpoTests/Public/scss/OpoTests.css

381 lines
13 KiB
CSS

@charset "UTF-8";
.opo-tests {
position: relative;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
overflow: hidden; }
.opo-tests, .opo-tests input, .opo-tests button {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em; }
.opo-tests a[href] {
text-decoration: none; }
.opo-tests a[href], .opo-tests button {
cursor: pointer;
transition-duration: 1s;
transition-property: color; }
.opo-tests a[href]:hover, .opo-tests button:hover {
transition-duration: 0.15s; }
.opo-tests button, .opo-tests input {
border-width: 0.1em;
border-style: solid;
border-radius: 0.3em; }
.opo-tests a[href], .opo-tests button, .opo-tests input {
outline: none; }
.opo-tests button {
transition-property: color,background-color,border-color,box-shadow; }
.opo-tests input {
transition-property: border-color,box-shadow;
transition-duration: 1s; }
.opo-tests input:focus {
transition-duration: 0.15s; }
.opo-tests [data-icon]::before {
margin-right: .4em;
font-family: "FA6FS"; }
.opo-tests [data-visible=false] {
display: none; }
.opo-tests fieldset {
margin: 1em 0em;
border: none; }
.opo-tests legend {
font-weight: 900;
font-size: 1.2em; }
.opo-tests .form fieldset {
width: 100%;
box-sizing: border-box; }
.opo-tests .form .structure {
display: table;
width: 92%;
max-width: 92%;
margin-left: 3%;
table-layout: fixed;
box-sizing: border-box; }
.opo-tests .form .structure > div {
display: table-row; }
.opo-tests .form .structure > div > * {
display: table-cell;
padding: .2em .5em;
vertical-align: top; }
.opo-tests .form .structure > div > span {
max-width: 80%; }
.opo-tests .form .structure > div > label {
width: 20em; }
.opo-tests .form .structure > div > ul {
width: 0em; }
.opo-tests .form [data-i] > label {
text-align: right; }
.opo-tests .form [data-i] > label > span {
display: block; }
.opo-tests .form [data-i] > label > span:first-child {
font-weight: 900;
white-space: nowrap; }
.opo-tests .form [data-i] > label > span:first-child::after {
content: ":"; }
.opo-tests .form [data-i] > label > span + span {
font-size: .85em; }
.opo-tests .form [type=number], .opo-tests .form [type=text] {
width: 100%; }
.opo-tests .buttons, .opo-tests .group {
display: block;
text-align: center; }
.opo-tests .buttons > *, .opo-tests .group > * {
border-radius: 0em; }
.opo-tests .buttons > :first-child, .opo-tests .group > :first-child {
border-top-left-radius: 0.3em;
border-bottom-left-radius: 0.3em; }
.opo-tests .buttons > :last-child, .opo-tests .group > :last-child {
border-top-right-radius: 0.3em;
border-bottom-right-radius: 0.3em; }
.opo-tests[data-gui-mode=light] {
background-color: #EFEFEF; }
.opo-tests[data-gui-mode=light], .opo-tests[data-gui-mode=light] input {
color: #222; }
.opo-tests[data-gui-mode=light] header, .opo-tests[data-gui-mode=light] footer {
box-shadow: 0em 0em 1em #EFEFEF; }
.opo-tests[data-gui-mode=light], .opo-tests[data-gui-mode=light] input, .opo-tests[data-gui-mode=light] button {
color: #222; }
.opo-tests[data-gui-mode=light] a, .opo-tests[data-gui-mode=light] button {
color: #2272D4; }
.opo-tests[data-gui-mode=light] a:hover, .opo-tests[data-gui-mode=light] button:hover {
color: #D47222; }
.opo-tests[data-gui-mode=light] button {
border-color: #2272D4;
background-color: #e5e9ee;
box-shadow: 0em 0em 0.2em inset #2272D4; }
.opo-tests[data-gui-mode=light] button:hover {
border-color: #D47222;
background-color: #eee9e5;
box-shadow: 0em 0em 0.2em inset #D47222; }
.opo-tests[data-gui-mode=light] input {
color: #222;
border-color: #222;
background-color: #dbdbdb;
box-shadow: 0em 0em 0.2em inset #222; }
.opo-tests[data-gui-mode=light] input:focus {
border-color: #2272D4;
box-shadow: 0em 0em 0.2em inset #2272D4; }
.opo-tests[data-gui-mode=light] .graphic [data-status=unanswered] {
background-color: #dadada; }
.opo-tests[data-gui-mode=light] .graphic [data-status=answered] {
background-color: #bcbcbc; }
.opo-tests[data-gui-mode=light] .graphic [data-status=right] {
background-color: #119111; }
.opo-tests[data-gui-mode=light] .graphic [data-status=wrong] {
background-color: #911111; }
.opo-tests[data-gui-mode=light] .graphic [data-status=partially] {
background-color: #919111; }
.opo-tests[data-gui-mode=dark] {
background-color: #222; }
.opo-tests[data-gui-mode=dark], .opo-tests[data-gui-mode=dark] input {
color: #EFEFEF; }
.opo-tests[data-gui-mode=dark] header, .opo-tests[data-gui-mode=dark] footer {
box-shadow: 0em 0em 1em #222; }
.opo-tests[data-gui-mode=dark], .opo-tests[data-gui-mode=dark] input, .opo-tests[data-gui-mode=dark] button {
color: #EFEFEF; }
.opo-tests[data-gui-mode=dark] a, .opo-tests[data-gui-mode=dark] button {
color: #649ce1; }
.opo-tests[data-gui-mode=dark] a:hover, .opo-tests[data-gui-mode=dark] button:hover {
color: #e19c64; }
.opo-tests[data-gui-mode=dark] button {
border-color: #649ce1;
background-color: #25282c;
box-shadow: 0em 0em 0.2em inset #649ce1; }
.opo-tests[data-gui-mode=dark] button:hover {
border-color: #e19c64;
background-color: #2c2825;
box-shadow: 0em 0em 0.2em inset #e19c64; }
.opo-tests[data-gui-mode=dark] input {
color: #EFEFEF;
border-color: #EFEFEF;
background-color: #373737;
box-shadow: 0em 0em 0.2em inset #EFEFEF; }
.opo-tests[data-gui-mode=dark] input:focus {
border-color: #649ce1;
box-shadow: 0em 0em 0.2em inset #649ce1; }
.opo-tests[data-gui-mode=dark] .graphic [data-status=unanswered] {
background-color: #363636; }
.opo-tests[data-gui-mode=dark] .graphic [data-status=answered] {
background-color: #555555; }
.opo-tests[data-gui-mode=dark] .graphic [data-status=right] {
background-color: #78f778; }
.opo-tests[data-gui-mode=dark] .graphic [data-status=wrong] {
background-color: #f77878; }
.opo-tests[data-gui-mode=dark] .graphic [data-status=partially] {
background-color: #f7f778; }
.opo-tests header, .opo-tests main, .opo-tests footer {
position: absolute;
left: 0em;
width: 100%; }
.opo-tests header {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
top: 0em;
height: 4em; }
.opo-tests header > * {
flex: 0 0 auto; }
.opo-tests main {
top: 4em;
bottom: 2em;
overflow: auto; }
.opo-tests footer {
display: flex;
flex-wrap: nowrap;
align-items: center;
bottom: 0em;
height: 2em; }
.opo-tests footer > * {
flex: 1 1 auto; }
.opo-tests h1 {
font-size: 1em; }
.opo-tests h1 span, .opo-tests h1 img {
vertical-align: middle; }
.opo-tests h1 .image {
display: inline-block;
margin: .2em 1em; }
.opo-tests h1 img {
width: auto;
height: 3.6em; }
.opo-tests h1 [data-status=loading], .opo-tests h1 [data-status=error] {
display: none; }
.opo-tests h1 span + span {
margin-left: .2em;
font-size: 2.4em;
font-weight: 900; }
.opo-tests .header-menu {
flex: 1 1 0;
margin-bottom: .3em; }
.opo-tests .header-menu ul {
list-style-type: none;
margin: 0em;
padding: 0em;
text-align: center; }
.opo-tests .header-menu li {
display: inline-block;
margin: 0em 1em; }
.opo-tests .licenses {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0em;
text-align: center; }
.opo-tests .licenses > * {
flex: 0 0 auto;
margin: 0em 1em; }
.opo-tests .cc-by-nc-sa-4 {
display: flex;
align-items: center; }
.opo-tests .cc-by-nc-sa-4 > [data-i18n] {
flex: 1 1 auto; }
.opo-tests .cc-by-nc-sa-4 > .image {
margin-left: .3em;
flex: 0 0 auto; }
.opo-tests .cc-by-nc-sa-4 img {
width: auto;
height: 1.6em; }
.opo-tests .group[data-i18n=search] {
display: flex;
flex-direction: row;
flex-wrap: nowrap; }
.opo-tests .group[data-i18n=search] > :first-child::after {
content: ": "; }
.opo-tests .group[data-i18n=search] > * {
flex: 0 0 auto; }
.opo-tests .group[data-i18n=search] > .input-text {
flex: 1 1 auto; }
.opo-tests .group[data-i18n=search] [for=show_selected] [data-icon=checkbox]::before {
content: "\f070";
font-family: "FA6FS"; }
.opo-tests .group[data-i18n=search] [for=show_selected] [type=checkbox]:checked + [data-icon=checkbox]::before {
content: "\f06e";
font-family: "FA6FS"; }
.opo-tests .group[data-i18n=search] [for=show_selected] span + span {
display: none; }
.opo-tests label > [data-i18n='blocks[]'] > :first-child {
margin-right: .4em; }
.opo-tests label > [data-i18n='blocks[]'] > :first-child::before {
content: "[ "; }
.opo-tests label > [data-i18n='blocks[]'] > :first-child::after {
content: " ] - "; }
.opo-tests label > [data-i18n='blocks[]'] > span {
display: inline-block; }
.opo-tests label > [data-i18n='blocks[]'] > span[title=undefined] {
display: none; }
.opo-tests label > [data-i18n='blocks[]'] > span + :not([title=undefined]) + span::before {
content: "-";
margin: 0em .5em; }
.opo-tests [data-i][data-i18n=blocks] [data-show-selected] {
width: 100%; }
.opo-tests [data-i][data-i18n=blocks] nav {
width: 100%;
max-height: 20em;
overflow: auto; }
.opo-tests [data-i][data-i18n=blocks] ul {
list-style-type: none; }
.opo-tests [data-i][data-i18n=blocks] ul li {
white-space: nowrap;
text-overflow: ellipsis; }
.opo-tests [data-i18n=test] {
font-size: 1.5em; }
.opo-tests [data-i18n=test_text] {
display: none; }
.opo-tests section, .opo-tests .graphic {
position: absolute;
top: 4em;
bottom: 2em; }
.opo-tests section {
left: 0em;
right: 1em;
overflow: auto; }
.opo-tests .graphic {
display: flex;
flex-direction: column;
right: 0em;
width: 1em;
margin: 0em;
padding: 0em;
list-style-type: none;
overflow: hidden; }
.opo-tests .graphic li {
flex: 1 1 auto; }
.opo-tests .block-info {
margin: 0em;
padding: 0em;
list-style-type: none;
font-size: .85em; }
.opo-tests .block-info li {
display: inline; }
.opo-tests .block-info li + li::before {
content: " - "; }
.opo-tests .block-info strong {
display: none; }
.opo-tests .block-info strong::after {
content: ": "; }
.opo-tests .answers {
list-style-type: none; }
.opo-tests [data-show-selected=true] [data-selected=true] {
display: list-item; }
.opo-tests [data-show-rights=false] [data-is-ok] {
display: none; }
.opo-tests [data-show-results=false] [data-right] {
display: none; }
.opo-tests [data-is-ok=true]::before {
content: " ✔";
color: green; }
.opo-tests [data-is-ok=false]::before {
content: " ✖";
color: red; }
.opo-tests [data-is-ok=null]::before {
content: " ❓";
color: orange; }
.opo-tests [data-right=true]::before {
content: " ✔";
color: green; }
.opo-tests [data-right=false]::before {
content: " ✖";
color: red; }
.opo-tests [data-right=null]::before {
content: " ❓";
color: orange; }
.opo-tests [type=checkbox] {
display: none; }
.opo-tests [type=checkbox] + [data-icon=checkbox]::before {
content: "\f0c8";
font-family: "FA6FR"; }
.opo-tests [type=checkbox]:checked + [data-icon=checkbox]::before {
content: "\f14a";
font-family: "FA6FR"; }
.opo-tests [type=radio] {
display: none; }
.opo-tests [type=radio] + [data-icon=radio]::before {
content: "\f111";
font-family: "FA6FR"; }
.opo-tests [type=radio]:checked + [data-icon=radio]::before {
content: "\f192";
font-family: "FA6FR"; }
.opo-tests [data-icon=select_all_visible]::before {
content: "\f0ae";
font-family: "FA6FS"; }
.opo-tests [data-icon=unselect_all_visible]::before {
content: "\f03a";
font-family: "FA6FS"; }
.opo-tests [data-icon=home]::before {
content: "\f015";
font-family: "FA6FS"; }
.opo-tests [data-icon=git]::before {
content: "\f841";
font-family: "FA6FB"; }
.opo-tests [data-icon=clean]::before {
content: "\f51a";
font-family: "FA6FS"; }
.opo-tests [data-icon=submit]::before {
content: "\f1d8";
font-family: "FA6FS"; }
.opo-tests [data-icon=search]::before {
content: "\f002";
font-family: "FA6FS"; }
/*# sourceMappingURL=OpoTests.css.map */