163 lines
3.0 KiB
CSS
163 lines
3.0 KiB
CSS
:root {
|
|
--yellow-gradient: linear-gradient(45deg, #ffe88d, #fff8b7);
|
|
--yellow-gradient-bright: linear-gradient(45deg, #ffeba1, #fffacb);
|
|
--blue-gradient-subtle: linear-gradient(45deg, #e7ebff, #e7efff);
|
|
--blue-gradient-glassy: linear-gradient(45deg, #fff9, #fff9);
|
|
--red-gradient: linear-gradient(45deg, #ffd2cc, #ffcccc);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
background: var(--blue-gradient-subtle);
|
|
}
|
|
|
|
body {
|
|
max-width: 600px;
|
|
margin: auto;
|
|
}
|
|
|
|
header {
|
|
border: solid 2px;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
header .top-half, header .lower-half {
|
|
text-align: center;
|
|
}
|
|
|
|
header .top-half {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
header .lower-half input {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
header .top-half .view-test-id-tag {
|
|
color: #333333;
|
|
font-size: 16pt;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
header .top-half .view-test-main-tag {
|
|
color: #000;
|
|
font-size: 20pt;
|
|
font-weight: 600;
|
|
}
|
|
|
|
header .lower-half a.generic-button,
|
|
header .lower-half a.sub-button,
|
|
main * a.sub-button,
|
|
main * a.scary-button
|
|
{
|
|
text-decoration: none;
|
|
border-radius: 15px;
|
|
color: #000;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
margin: 4px;
|
|
margin-top: 0;
|
|
padding: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
header .lower-half a.generic-button {
|
|
background: var(--yellow-gradient);
|
|
}
|
|
|
|
header .lower-half a.generic-button:hover {
|
|
background: var(--yellow-gradient-bright);
|
|
}
|
|
|
|
header .lower-half a.sub-button,
|
|
main * a.sub-button
|
|
{
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
main * div.controls
|
|
{
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
margin-top: 13px;
|
|
grid-auto-columns: max-content;
|
|
justify-content: end;
|
|
}
|
|
|
|
main * a.sub-button {
|
|
}
|
|
|
|
main * a.scary-button
|
|
{
|
|
background: var(--red-gradient);
|
|
color: #500;
|
|
}
|
|
|
|
main .test-short,
|
|
main .question-short,
|
|
main .response-option
|
|
{
|
|
padding: 20px;
|
|
background: var(--blue-gradient-glassy);
|
|
margin-top: 16px;
|
|
border-radius: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
main .test-short a.test-link,
|
|
main .question-short a.question-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
main .test-short a.test-link .main-label {
|
|
color: #002;
|
|
font-weight: 700;
|
|
font-size: 16pt;
|
|
}
|
|
|
|
main .test-short a.test-link .sub-label,
|
|
main .question-short a.question-link .sub-label {
|
|
color: #333;
|
|
margin-right: 11px;
|
|
}
|
|
|
|
main .test-short a.test-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
main .question-short a.question-link .main-label {
|
|
color: #002;
|
|
font-weight: 600;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
main * .sub-title {
|
|
display: block;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
main .response-option a.response-option-mark {
|
|
font-size: 16pt;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
padding: 2px 10px 3px 10px;
|
|
margin-right: 12px;
|
|
color: #001;
|
|
border-radius: 24px;
|
|
border: solid 1px;
|
|
font-family: monospace;
|
|
}
|