crispypin.cc_old/docs/style.css

182 lines
No EOL
3.5 KiB
CSS

body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background-color: #181818;
color: #bfb;
display: -ms-grid;
display: grid;
-ms-grid-rows: 50px auto 1fr auto;
grid-template-rows: 50px auto 1fr auto;
-ms-grid-columns: 20px 1fr 20px;
grid-template-columns: 20px 1fr 20px;
margin: 0;
min-height: 100vh;
}
nav {
grid-column: 1 / -1;
}
nav ul {
list-style-type: none;
margin: 0;
display: -ms-grid;
display: grid;
padding: 5px 25px;
grid-gap: 5px;
-ms-grid-columns: (minmax(175px, auto))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
}
nav li {
padding: 8px;
}
nav a {
font-size: 24px;
color: #000;
text-decoration: none;
display: block;
text-align: center;
}
header {
grid-column: 1 / -1;
background-color: #181818;
padding: 0;
}
header h1 {
font-size: 40px;
margin: 0;
}
footer {
grid-column: 1 / -1;
margin: 25px;
}
main {
padding: 0 20px;
grid-column: 2 / -2;
background-color: #282828;
}
.visual {
margin: 20px;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
background-color: #000;
}
.controlbar {
background-color: #181818;
padding: 2px 5px;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.controlbar button, .controlbar input {
padding: 4px 6px;
height: 25px;
border: 1px solid #000;
border: 0;
cursor: pointer;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 2px;
}
.controlbar .slider {
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border-radius: 0;
height: 25px;
padding: 0;
margin: 2px;
cursor: pointer;
}
.controlbar .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 1px;
width: 25px;
height: 25px;
background-color: #46c;
margin: 0;
border-radius: 0;
border: 1px solid #000;
}
.controlbar .slider::-moz-range-thumb {
/*TODO make this look the same as on chrome*/
-moz-appearance: none;
width: 25px;
height: 100%;
background-color: #46c;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #000;
}
.controlbar label {
background-color: #181818;
color: #fb8;
margin: 2px;
font-family: 'Consolas', 'Courier New', Courier, monospace;
}
.controlbar .play-button {
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
}
.clickable, nav li, .controlbar button, .controlbar input, .scroll-reset {
background-color: #4a4;
}
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover, .scroll-reset:hover {
background-color: #4af;
}
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active, .scroll-reset:active {
background-color: #46c;
}
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled, .scroll-reset:disabled {
background-color: #8b8;
text-decoration: line-through;
color: #000;
cursor: default;
}
.scroll-reset {
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
border-radius: 25%;
background-image: url("uparrow.png");
cursor: pointer;
}
.img-right {
float: right;
}
/*# sourceMappingURL=style.css.map */