mirror of
https://github.com/Findus23/se-simulator.git
synced 2024-09-19 15:53:45 +02:00
220 lines
3.6 KiB
SCSS
220 lines
3.6 KiB
SCSS
$link-color: #07C;
|
|
$link-hover-color: #3af;
|
|
$mobile-break-point: 500px;
|
|
|
|
@mixin mobile-only() {
|
|
@media (max-width: $mobile-break-point) {
|
|
@content ;
|
|
}
|
|
}
|
|
|
|
@mixin desktop-only() {
|
|
@media (min-width: $mobile-break-point) {
|
|
@content ;
|
|
}
|
|
}
|
|
|
|
@import "../../milligram/src/milligram";
|
|
@import "awesomplete.custom";
|
|
@import "pagination";
|
|
|
|
body {
|
|
font-size: 15px;
|
|
color: #111;
|
|
}
|
|
|
|
pre > code {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 15px 5px 15px;
|
|
&:not(.singlequestion) {
|
|
border-bottom: solid lightgray 1px;
|
|
}
|
|
border-right: solid 10px transparent;
|
|
.contentbox {
|
|
margin-left: 10px;
|
|
width: 100%;
|
|
.sitename {
|
|
color: grey;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.rightwrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: right;
|
|
@include mobile-only {
|
|
justify-content: left;
|
|
}
|
|
.metadata {
|
|
font-size: 12px;
|
|
color: grey;
|
|
}
|
|
}
|
|
.contentfooter {
|
|
display: flex;
|
|
justify-content: right;
|
|
margin: 0;
|
|
.authorbox {
|
|
background: #E1ECF9;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
color: #111;
|
|
}
|
|
|
|
}
|
|
}
|
|
.title {
|
|
font-size: 20px;
|
|
color: $link-color;
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
.vote {
|
|
width: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
div {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
}
|
|
a {
|
|
font-size: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
cursor: pointer;
|
|
transition: border-color .3s;
|
|
}
|
|
.up {
|
|
border-width: 0 15px 15px 15px;
|
|
border-color: transparent transparent #858c93 transparent;
|
|
&:hover, &:focus, &.active {
|
|
border-color: transparent transparent darken(#858c93, 20%) transparent;
|
|
}
|
|
}
|
|
.down {
|
|
border-width: 15px 15px 0 15px;
|
|
border-color: #858c93 transparent transparent transparent;
|
|
&:hover, &:focus, &.active {
|
|
border-color: darken(#858c93, 20%) transparent transparent transparent;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
h1, h2 {
|
|
border-bottom: solid 1px lightgray;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 0;
|
|
margin-top: 10px;
|
|
color: inherit;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 18px
|
|
}
|
|
|
|
.siteheader {
|
|
background: #ebf2f5;
|
|
transition: background-color .3s, color .3s;
|
|
display: flex;
|
|
height: 50px;
|
|
align-items: center;
|
|
.gotolink {
|
|
margin-left: auto;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
#quizselector {
|
|
margin: 15px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
> .awesomplete {
|
|
margin-right: 5px;
|
|
width: 70%;
|
|
input {
|
|
font-size: 20px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#quizchoices {
|
|
margin: 15px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
button {
|
|
height: 32px;
|
|
background-color: lightgray;
|
|
color: #606c76;
|
|
border: none;
|
|
transition: opacity .3s;
|
|
&:hover, &:focus {
|
|
opacity: .6;
|
|
background-color: lightgray;
|
|
color: #606c76;
|
|
}
|
|
}
|
|
|
|
#result {
|
|
> div {
|
|
width: 100%;
|
|
padding: 20px 0;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#correct {
|
|
background-color: $success;
|
|
}
|
|
|
|
#incorrect {
|
|
background-color: $warning;
|
|
}
|
|
|
|
#stats {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
|
|
footer {
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
a {
|
|
color: #111;
|
|
|
|
}
|
|
}
|
|
|
|
:target {
|
|
animation: target-fade 3s 1;
|
|
}
|
|
|
|
@keyframes target-fade {
|
|
0% { background-color: rgba(0,0,0,.1); }
|
|
100% { background-color: rgba(0,0,0,0); }
|
|
}
|