mirror of
https://github.com/Xevion/simple-viewer.git
synced 2025-12-10 00:08:36 -06:00
better color styling of icons, text, borders, code tag, tag component, remove old unneeded styling code, move inline styling code out as needed, styling comments
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
This commit is contained in:
Xevion
@@ -3,13 +3,12 @@
|
||||
@import "./../../../bulma/sass/utilities/initial-variables";
|
||||
@import "./../../../bulma/sass/utilities/functions";
|
||||
|
||||
$primary: hsl(172, 91%, 60%);
|
||||
$primary: hsl(163, 100%, 49%);
|
||||
$link: hsl(163, 100%, 49%);
|
||||
$link-hover: findDarkColor($link);
|
||||
$body-background-color: $black-bis;
|
||||
//$background: #0a556d;
|
||||
//$code-background: #bcf6ff;
|
||||
//$code: #033343;
|
||||
$code-background: $grey-darker;
|
||||
$code: $link;
|
||||
|
||||
$card-header-color: $link;
|
||||
$panel-heading-background-color: $black-ter;
|
||||
@@ -20,6 +19,12 @@ $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";
|
||||
@@ -28,136 +33,64 @@ html, body {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
|
||||
//.panel {
|
||||
// background-color: #0a556d;
|
||||
//
|
||||
// .panel-heading {
|
||||
// background-color: #17a0cd;
|
||||
// color: white;
|
||||
// }
|
||||
//}
|
||||
|
||||
//.card {
|
||||
// background-color: #0a556d;
|
||||
// color: white;
|
||||
//
|
||||
// .card-header {
|
||||
// background-color: #17a0cd;
|
||||
// }
|
||||
//
|
||||
// .card-footer {
|
||||
// border-top-color: rgba(207, 245, 255, 0.5);
|
||||
//
|
||||
// .card-footer-item {
|
||||
// background-color: #0c6988;
|
||||
//
|
||||
// &:not(:last-child) {
|
||||
// border-right-color: rgba(207, 245, 255, 0.5);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
// 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: #0b87ac;
|
||||
}
|
||||
|
||||
.tag:not(body).is-info {
|
||||
background-color: #37a0bf;
|
||||
}
|
||||
|
||||
//.panel-block a {
|
||||
// color: #ffffff;
|
||||
//}
|
||||
//
|
||||
//.panel-icon, .icon {
|
||||
// color: #11a3cf;
|
||||
//
|
||||
// a {
|
||||
//
|
||||
// }
|
||||
//}
|
||||
|
||||
.icon a {
|
||||
/*color: inherit;*/
|
||||
border-bottom-color: rgba($link, 0.4);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
//background-color: #0c5167;
|
||||
//color: white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
|
||||
// Make navbar brand title stand out
|
||||
.navbar-brand .navbar-item {
|
||||
//color: white;
|
||||
font-size: 150%;
|
||||
font-weight: 700;
|
||||
|
||||
&:focus, &:hover {
|
||||
text-decoration: none;
|
||||
//color: inherit;
|
||||
}
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
|
||||
background-color: inherit;
|
||||
//color: inherit;
|
||||
}
|
||||
|
||||
|
||||
//a {
|
||||
// color: #38c8f8;
|
||||
//
|
||||
// &:hover {
|
||||
// color: #a4e6ff;
|
||||
// }
|
||||
//}
|
||||
|
||||
.checkbox {
|
||||
//color: white;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
//color: #a4e6ff;
|
||||
}
|
||||
|
||||
a.card-footer-item {
|
||||
//color: #c9f2ff;
|
||||
}
|
||||
|
||||
a.card-footer-item:hover {
|
||||
//color: white;
|
||||
}
|
||||
|
||||
.navbar-item, p, .label, .card-header-title {
|
||||
//color: white;
|
||||
}
|
||||
|
||||
//.media + .media {
|
||||
// border-top-color: rgba(164, 230, 255, 0.5);
|
||||
//}
|
||||
|
||||
#browse.card .card-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content .media {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.card .media {
|
||||
// Cancel out Bulma css
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card .media:not(:last-child) {
|
||||
margin: 0;
|
||||
padding: 1rem 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;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
text-align: right;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user