mirror of
https://github.com/Xevion/simple-viewer.git
synced 2025-12-06 01:16:24 -06:00
392aa6a269
inline styling is still very much present and needs to be uplifted out of there, but I'm still not sure of what to name everything. I wish I knew the best practices here. very frustrating that there's no one in the world who cares enough to let me consult for free
97 lines
1.8 KiB
SCSS
97 lines
1.8 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "./../../../bulma/sass/utilities/initial-variables";
|
|
@import "./../../../bulma/sass/utilities/functions";
|
|
|
|
$primary: hsl(163, 100%, 49%);
|
|
$link: hsl(163, 100%, 49%);
|
|
$link-hover: findDarkColor($link);
|
|
$body-background-color: $black-bis;
|
|
$code-background: $grey-darker;
|
|
$code: $link;
|
|
|
|
$card-header-color: $link;
|
|
$panel-heading-background-color: $black-ter;
|
|
$panel-shadow: hsla(172, 91%, 60%, 0.02);
|
|
$text: hsl(0, 0%, 70%);
|
|
$text-strong: hsl(0, 0%, 90%);
|
|
|
|
// Dark Mode
|
|
$scheme-main: $black;
|
|
$scheme-invert: $white;
|
|
$border: rgba($link, 0.4);
|
|
$navbar-item-hover-background-color: rgba(0, 0, 0, 0);
|
|
$panel-block-color: lighten($link, 50);
|
|
$panel-icon-color: $link;
|
|
$card-footer-border-top: 1px solid transparentize($white, 0.7);
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
|
|
@import "./../../../bulma/bulma.sass";
|
|
|
|
html, body {
|
|
height: 100%
|
|
}
|
|
|
|
// Can't figure out how to color panel bottom border with variables
|
|
.panel-block:not(:last-child), .panel-tabs:not(:last-child) {
|
|
border-bottom-color: rgba($link, 0.4);
|
|
}
|
|
|
|
.navbar {
|
|
font-family: 'Open Sans', sans-serif;
|
|
|
|
// Make navbar brand title stand out
|
|
.navbar-brand .navbar-item {
|
|
font-size: 150%;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
#browse.card .card-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.card .media {
|
|
// Cancel out Bulma css
|
|
&:not(:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
margin: 0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.panel-icon {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
// Decrease tag size a bit
|
|
.tag:not(body) {
|
|
font-size: 0.7rem;
|
|
line-height: 1.3;
|
|
padding: 0 0.6em;
|
|
}
|
|
|
|
// Vertically center all icons
|
|
.icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.media {
|
|
width: 100%;
|
|
|
|
b, span, a, p {
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.media-filename {
|
|
text-decoration: underline;
|
|
text-decoration-color: lighten($link, 15%);
|
|
}
|
|
|
|
.media-fileid {
|
|
color: $link;
|
|
}
|
|
}
|