crispypin.cc_old/docs/style.scss

181 lines
2.8 KiB
SCSS
Raw Normal View History

2021-06-25 01:33:18 +02:00
$main-item: #4a4;
$main-item-hover: #4af;
$main-item-active: #46c;
$main-item-disabled: #8b8;
$main-bg: #181818;
$main-page-bg: #282828;
2021-06-25 14:47:20 +02:00
$main-color: #cff;
2021-06-25 01:33:18 +02:00
body {
2022-01-18 18:04:48 +01:00
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background-color: $main-bg;
color: $main-color;
2021-06-25 01:33:18 +02:00
2022-01-18 18:04:48 +01:00
display: grid;
grid-template-rows: 50px auto 1fr auto;
2021-06-25 01:33:18 +02:00
2022-01-18 18:04:48 +01:00
grid-template-columns: 20px 1fr 20px;
margin: 0;
min-height: 100vh;
2021-06-25 01:33:18 +02:00
}
2022-01-18 17:57:42 +01:00
a:visited {
2022-01-18 18:04:48 +01:00
color: #b8f;
2022-01-18 17:57:42 +01:00
}
2021-06-25 01:33:18 +02:00
nav {
2022-01-18 18:04:48 +01:00
grid-column: 1 / -1;
ul {
list-style-type: none;
margin: 0;
display: grid;
padding: 5px 25px;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
}
li {
@extend .clickable;
padding: 8px;
}
a {
font-size: 24px;
color: #000;
text-decoration: none;
display: block;
text-align: center;
&:visited {
color: #000;
}
}
2021-06-25 01:33:18 +02:00
}
header {
2022-01-18 18:04:48 +01:00
grid-column: 1 / -1;
background-color: $main-bg;
padding: 0;
h1 {
font-size: 40px;
margin: 0;
}
2021-06-25 01:33:18 +02:00
}
footer {
2022-01-18 18:04:48 +01:00
grid-column: 1 / -1;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
p {
margin: 5px;
}
2021-06-25 01:33:18 +02:00
}
main {
2022-01-18 18:04:48 +01:00
padding: 0 20px;
grid-column: 2 / -2;
background-color: $main-page-bg;
2021-06-25 01:33:18 +02:00
}
2021-06-26 21:49:40 +02:00
.demo-render {
2022-01-18 18:04:48 +01:00
margin: 20px;
width: min-content;
background-color: #000;
2021-06-25 01:33:18 +02:00
}
.controlbar {
2022-01-18 18:04:48 +01:00
background-color: $main-bg;
padding: 2px 5px;
height: max-content;
display: flex;
justify-content: space-evenly;
align-content: stretch;
flex-wrap: wrap;
button, input {
@extend .clickable;
padding: 4px 6px;
height: 25px;
border: 1px solid #000;
border: 0;
cursor: pointer;
flex-grow: 1;
margin: 2px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border-radius: 0;
height: 25px;
padding: 0;
margin: 2px;
cursor: pointer;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 1px;
width: 25px;
height: 25px;
background-color: $main-item-active;
margin: 0;
border-radius: 0;
border: 1px solid #000;
}
&::-moz-range-thumb {
/*TODO make this look the same as on chrome*/
-moz-appearance: none;
width: 25px;
height: 100%;
background-color: $main-item-active;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #000;
}
}
label {
background-color: $main-bg;
color: #fb8;
margin: 2px;
font-family: 'Consolas', 'Courier New', Courier, monospace;
}
.play-button {
flex-basis: 35%;
}
2021-06-25 01:33:18 +02:00
}
.clickable {
2022-01-18 18:04:48 +01:00
border-radius: 4px;
background-color: $main-item;
&:hover {
background-color: $main-item-hover;
}
&:active {
background-color: $main-item-active;
}
&:disabled {
background-color: $main-item-disabled;
text-decoration: line-through;
color: #000;
cursor: default;
}
2021-06-25 01:33:18 +02:00
}
.scroll-reset {
2022-01-18 18:04:48 +01:00
@extend .clickable;
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
background-image: url("uparrow.png");
cursor: pointer;
2021-06-25 01:33:18 +02:00
}