resources/assets/sass/app.scss
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
@import "variables";
// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "node_modules/dropzone/dist/dropzone";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/codemirror/theme/ambiance";
@import "node_modules/codemirror/addon/dialog/dialog";
body {
min-height: 100vh;
}
.CodeMirror {
height: 100% !important;
}
.alert p {
font-family: "Lucida Console", Monaco, monospace;
unicode-bidi: embed;
white-space: pre;
}
#pixels {
table {
background: black;
td {
width: 20px;
height: 20px;
border: 1px solid $text-color;
}
.clickable {
cursor: pointer;
}
}
#colour,
.colour-container {
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid $text-color;
outline: none;
overflow: visible;
}
.colour-container {
background: black;
}
}
.modal {
background: radial-gradient(transparent, grey);
}
.show {
opacity: 1;
}
.modal-dialog {
margin-top: 13em;
}
.combined-alerts {
margin-bottom: 22px;
.alert {
margin-bottom: 0;
}
.alert:nth-child(1) {
border-bottom: none;
}
.alert:nth-child(2) {
border-top: none;
}
}
.panel,
body {
background: none;
}
.logo {
position: absolute;
max-width: 20%;
left: 0;
top: 5px;
}
.searchform,
.deleteform {
display: inline-block;
}
#uploader {
width: 100%;
}
.compatibility-block {
min-height: 36px;
}
.compatibility {
display: inline-block;
float: right;
width: auto;
}
.pagination {
font-weight: bold;
}
.collab-icon {
height: 22px;
}
.u2f {
color: #51f033;
font-weight: bold;
}
.u2f:nth-of-type(2) {
color: #33f051;
}
.spacer {
margin-right: 10px;
}
.compact {
overflow: scroll;
max-height: 100px;
.form-control {
height: 22px;
}
}
@media screen and (prefers-color-scheme: dark) {
body,
.navbar-default,
.navbar-default .navbar-brand,
.panel-default .panel-heading,
input,
select,
select option,
.pagination > li > a,
.navbar-default .navbar-nav li a,
.pagination > li > span,
.pagination > .disabled > span,
.form-control,
.modal-content {
background-color: #222;
color: #fff;
}
code,
pre {
background-color: #333;
}
pre {
color: #f5f5f5;
}
.table-striped > tbody > tr:nth-of-type(odd),
.dropdown-menu {
background-color: #0a1520;
}
a {
color: #98ccf7;
}
a:hover,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav li a:hover {
color: #2ab27b;
}
}