188 lines
3.1 KiB
CSS
188 lines
3.1 KiB
CSS
/*
|
|
* Stairway.js: a simple JavaScript privacy quiz
|
|
* Copyright © 2021 luca0N!
|
|
*
|
|
* This file is part of Stairway.js.
|
|
*
|
|
* Stairway.js is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Stairway.js is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Stairway.js. If not, see <https://www.gnu.org/licenses/>.
|
|
*
|
|
* E-mail contact: <luca0n@luca0n.com>.
|
|
*/
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin-left: 15%;
|
|
margin-right: 15%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
background-color: #bfc0cd;
|
|
}
|
|
|
|
.content {
|
|
background-color: #fff;
|
|
padding: 24px;
|
|
box-shadow: 0 0 32px #0004;
|
|
}
|
|
|
|
#results {
|
|
display: none;
|
|
animation-duration: 1s;
|
|
animation-name: fadein;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
color: white;
|
|
background-color: orange;
|
|
padding: 4px;
|
|
}
|
|
|
|
.badge-small {
|
|
padding: 6px 6px 2px 6px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 2px #000c;
|
|
}
|
|
|
|
.badge {
|
|
display: none;
|
|
padding: 14px;
|
|
font-weight: bold;
|
|
font-size: 32pt;
|
|
box-shadow: 0px 0px 5px gray;
|
|
text-shadow: 0 0 2px #000c;
|
|
}
|
|
|
|
.grade-s {
|
|
color: white;
|
|
background: linear-gradient(#881df9, #881db9);
|
|
border-radius: 24px;
|
|
}
|
|
.grade-a{
|
|
color: white;
|
|
background: linear-gradient(#50d50d, #0a0);
|
|
border-radius: 18px;
|
|
}
|
|
.grade-b{
|
|
color: white;
|
|
background: linear-gradient(#afff00, #d4db00);
|
|
border-radius: 12px;
|
|
}
|
|
.grade-c{
|
|
color: white;
|
|
background: linear-gradient(#ff0, #fc0);
|
|
border-radius: 8px;
|
|
}
|
|
.grade-d{
|
|
color: white;
|
|
background: linear-gradient(#f4a50d, #f36d0c);
|
|
border-radius: 6px;
|
|
}
|
|
.grade-e{
|
|
color: white;
|
|
background: linear-gradient(#ff7800, #bd0000);
|
|
border-radius: 4px;
|
|
}
|
|
.grade-f{
|
|
color: white;
|
|
background: linear-gradient(#ca0000, #4a0000);
|
|
}
|
|
|
|
.section-question {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
padding: 15px;
|
|
background-color: #feffea;
|
|
box-shadow: 0 0 12px #0004;
|
|
}
|
|
|
|
.section-question:hover {
|
|
box-shadow: 0 0 24px #0008;
|
|
}
|
|
|
|
#warning {
|
|
display: none;
|
|
}
|
|
|
|
#quiz {
|
|
animation-duration: 1s;
|
|
animation-name: fadein;
|
|
}
|
|
|
|
#quiz-title, #quiz-author {
|
|
display: none;
|
|
}
|
|
|
|
.question {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.section-report {
|
|
margin-top: 12px;
|
|
padding: 15px;
|
|
box-shadow: 0 0 12px #0004;
|
|
}
|
|
|
|
.section-report-good {
|
|
background-color: #aaffaa;
|
|
}
|
|
.section-report-warning {
|
|
background-color: #ffa;
|
|
}
|
|
.section-report-bad {
|
|
background-color: #ffd79f;
|
|
}
|
|
.section-report-critical {
|
|
background-color: #fcc;
|
|
}
|
|
|
|
.advisory {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.report-title {
|
|
font-weight: bold;
|
|
}
|
|
.report-type {
|
|
padding: 4px 4px 0px 4px;
|
|
text-shadow: 0 0 2px #0005;
|
|
box-shadow: 2px 2px 2px #0004;
|
|
}
|
|
.report-good {
|
|
color: white;
|
|
background-color: #3C0;
|
|
}
|
|
.report-warning {
|
|
background-color: yellow;
|
|
}
|
|
.report-bad {
|
|
color: white;
|
|
background-color: orange;
|
|
}
|
|
.report-critical {
|
|
color: white;
|
|
background-color: red;
|
|
}
|