148 lines
2.3 KiB
SCSS
148 lines
2.3 KiB
SCSS
@charset "utf-8";
|
|
@import "../vendor/bulma/bulma.sass";
|
|
|
|
html, .navbar, .footer {
|
|
background-color: $light;
|
|
}
|
|
|
|
.footer {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
a:visited {
|
|
color: hsl(280, 100%, 50%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html, .navbar, .footer, p, strong, .title, li {
|
|
background-color: $dark;
|
|
color: $white;
|
|
}
|
|
|
|
.subtitle, a:hover {
|
|
color: $light;
|
|
}
|
|
|
|
a {
|
|
color: hsl(217, 71%, 70%);
|
|
}
|
|
}
|
|
|
|
.lightbox {
|
|
opacity: 0;
|
|
z-index: 900;
|
|
position: fixed;
|
|
transition: opacity 0.2s linear;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba($black, 0.5);
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
|
-webkit-backdrop-filter: blur(5px);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
}
|
|
|
|
.lightbox span.spacer {
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.lightbox img {
|
|
display: inline-block;
|
|
box-shadow: 0 0 20px $black;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
@include touch {
|
|
margin-top: 35px;
|
|
max-height: 80%;
|
|
}
|
|
}
|
|
|
|
.lightbox a {
|
|
font-size: $size-1;
|
|
color: $light;
|
|
z-index: 900;
|
|
@include touch {
|
|
height: 100%;
|
|
width: 50%;
|
|
font-size: $size-3;
|
|
}
|
|
}
|
|
|
|
.lightbox a.lightbox-nav-previous {
|
|
z-index: 900;
|
|
@include touch {
|
|
position: absolute;
|
|
left: 0%;
|
|
font-size: $size-3;
|
|
}
|
|
}
|
|
|
|
.lightbox a.lightbox-nav-next {
|
|
z-index: 900;
|
|
@include touch {
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
.lightbox a.close {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 999;
|
|
}
|
|
|
|
.lightbox a.delete {
|
|
z-index: 999;
|
|
position: fixed;
|
|
top: 1%;
|
|
right: 1%;
|
|
}
|
|
|
|
.lightbox:target {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.lightbox-previous {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 50%;
|
|
top: 0%;
|
|
left: 0%;
|
|
}
|
|
|
|
.lightbox-next {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 50%;
|
|
top: 0%;
|
|
left: 50%;
|
|
}
|
|
|
|
.gallery {
|
|
gap: $gap / 4;
|
|
}
|
|
|
|
.thumbnail {
|
|
width: 120px;
|
|
height: 120px;
|
|
vertical-align: middle;
|
|
transition: transform .2s;
|
|
}
|
|
|
|
.thumbnail:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.isso-postbox .form-wrapper .textarea-wrapper .textarea {
|
|
overflow-y: auto;
|
|
}
|