abgame/static/css/base.css

443 lines
7.8 KiB
CSS

#content::-webkit-scrollbar {
width: 0;
}
body {
font-family: 'Courier New', Courier, monospace;
background-color: var(--bg);
border-color: var(--br);
color: var(--fg);
}
hr {
display: none;
}
a {
color: var(--fg-lnk);
}
strong {
font-weight: bolder;
font-size: large;
}
a #help {
height: 0;
overflow: hidden;
text-decoration: none;
}
a:hover #help {
position: absolute;
top: 70px;
left: 50%;
height: auto;
width: 50%;
margin: auto;
padding: 20px;
padding-bottom: 5px;
overflow: visible;
text-decoration: none;
background-color: var(--bg-a);
color: var(--fg-a);
border: 4px solid var(--bg);
border-radius: 25px;
display: inline-block;
text-align: center;
transform: translate(-50%);
}
textarea {
height: 250px;
width: 100%;
background-color: var(--bg-b);
color: var(--fg-b);
border: 1px solid var(--bg-a);
}
#background {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#background::before {
content: ' ';
display: block;
background: url('/ab.jpg');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
opacity: 0.1;
}
#header {
border-radius: 10px;
text-align: center;
width: 100%;
margin-top: 10px;
padding-top: 25px;
padding-bottom: 25px;
background-color: var(--bg-header);
color: var(--fg-header);
font-weight: bolder;
font-size: large;
}
#content {
min-width: 400px;
max-width: 900px;
max-height: 100%;
overflow: hidden;
width: 65%;
margin: 0;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form {
padding: 20px;
}
.ab {
float: none;
border-radius: 10px;
margin-top: 10px;
display: flex;
padding: 5px;
background-color: var(--bg-ab);
}
.a {
float: left;
flex: 1 0 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: var(--bg-a);
color: var(--fg-a);
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.b {
float: left;
flex: 1 0 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: var(--bg-b);
color: var(--fg-b);
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
cursor: pointer;
}
.ab input:checked+label {
background-color: var(--bg-ab-chkd);
border: 1px solid var(--br-ab-chkd);
color: var(--fg-ab-chkd);
}
.separator {
float: left;
width: 10%;
box-sizing: border-box;
writing-mode: vertical-lr;
transform: rotate(210deg);
font-size: x-small;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
color: var(--fg-sep);
}
#footer {
margin-top: 10px;
}
#questions {
font-size: small;
text-align: center;
width: 45%;
float: left;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
color: var(--fg-que);
font-weight: bold;
}
#next {
text-align: center;
width: 45%;
float: left;
border: 0px;
border-radius: 10px;
height: 56px;
margin-top: 7px;
background-color: var(--bg-nxt);
color: var(--fg-nxt);
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
font-size: medium;
display: block;
cursor: pointer;
}
.box {
width: 45%;
float: left;
}
@media only screen and (max-width:1600px) {
#content {
min-width: 75%;
}
}
@media only screen and (max-width:1280px) {
#content {
min-width: 95%;
}
}
@media only screen and (max-width:640px) {
#content {
min-width: 95%;
transform: none;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%);
}
#next {
min-width: 100%;
margin-top: 20px;
}
#questions {
min-width: 100%;
padding-top: 0px;
padding-bottom: 5px;
}
.a {
font-size: small;
}
.b {
font-size: small;
}
.toggle {
min-width: 100%;
}
.toggle_label {
min-width: 100%;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: var(--bg) !important;
}
#header {
background-color: var(--bg-header) !important;
color: var(--fg-header) !important;
}
.a {
border-color: transparent !important;
background-color: var(--bg-a) !important;
color: var(--fg-a) !important;
}
.b {
border-color: transparent !important;
background-color: var(--bg-b) !important;
color: var(--fg-b) !important;
}
.ab {
background-color: var(--bg-ab) !important;
}
.ab input:checked+label {
background-color: var(--bg-ab-chkd) !important;
border-color: var(--br-ab-chkd) !important;
color: var(--fg-ab-chkd) !important;
}
.separator {
color: var(--fg-sep);
}
#next {
border-color: initial !important;
background-color: var(--bg-nxt) !important;
color: var(--fg-nxt) !important;
}
#questions {
color: var(--fg-que) !important;
}
a {
color: var(--fg-lnk) !important;
}
a:hover #help {
width: 80%;
}
}
#toggle_checkbox {
display: none;
}
.spacer {
width: 10%;
float: left;
}
.toggle {
width: 10%;
height: 64px;
float: left;
display: none;
}
.toggle_label {
display: block;
position: relative;
top: 35px;
right: 0;
left: 0;
width: 80%;
height: 56px;
margin: 0 auto;
background-color: var(--bg-ab);
border-radius: 25px;
transform: translateY(-50%);
cursor: pointer;
transition: 0.3s ease background-color;
overflow: hidden;
}
#star {
position: absolute;
top: 13px;
left: 13px;
width: 30px;
height: 30px;
transform: scale(1);
border-radius: 50%;
transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
z-index: 1;
}
#star-1 {
position: relative;
}
#star-2 {
position: absolute;
transform: rotateZ(36deg);
}
.star {
top: 0;
left: -7px;
font-size: 54px;
line-height: 28px;
color: var(--bg-a);
transition: 0.3s ease color;
}
#moon {
position: absolute;
bottom: -52px;
right: 8px;
width: 40px;
height: 40px;
background-color: var(--bg-a);
border-radius: 50%;
transition: 0.3s ease bottom;
}
#moon:before {
content: "";
position: absolute;
top: -12px;
left: -17px;
width: 40px;
height: 40px;
background-color: var(--bg-ab);
border-radius: 50%;
transition: 0.3s ease background-color;
}
#toggle_checkbox:checked+label {
background-color: var(--bg-b);
}
#toggle_checkbox:checked+label #star {
top: 0px;
left: 640px;
transform: scale(0.3);
background-color: var(--bg);
}
#toggle_checkbox:checked+label .star {
color: var(--bg-a);
}
#toggle_checkbox:checked+label #moon {
bottom: 8px;
}
#toggle_checkbox:checked+label #moon:before {
background-color: var(--bg-b);
}