float: right;
width: 250px;
height: 100%;
- background: white;
overflow: auto;
.section {
}
.layers-ui {
- .base-layers {
- .leaflet-container {
- width: 100%;
- height: 50px;
- cursor: pointer;
- }
-
- li {
- overflow: hidden;
- border-radius: 3px;
- border: 2px solid #fff;
- margin-bottom: 8px;
- position: relative;
- transition: border-color 0.08s ease-in;
+ .base-layers > * {
+ height: 56px;
- label {
- position: absolute;
- top: 0;
- left: 0;
- padding: 2px 6px;
- border-bottom-right-radius: 3px;
- cursor: pointer;
- font-weight: 600;
- font-size: 16px;
- text-stroke: 2px #fff;
- background: rgba(255,255,255,.9);
- z-index: 1000;
- input[type="radio"] {
- display: none;
- }
- }
-
- &.active { border-color: darken($green, 10%); }
- &:hover {
- border-color: $grey;
- &.active { border-color: darken($green, 20%); }
- }
+ > .btn {
+ --bs-btn-border-color: var(--bs-body-bg);
+ }
+ > .btn:hover {
+ --bs-btn-border-color: var(--bs-primary-border-subtle);
}
}
div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
}
+@include color-mode(dark) {
+ div.direction {
+ filter: invert(1);
+ }
+}
+
td.distance {
font-size: x-small;
}
}
.export_boxy {
- background: $lightgrey;
-
> * {
margin: -1px;
}
.richtext,
.prose {
code {
- background: $lightgrey;
+ background: var(--bs-secondary-bg);
padding: 2px 3px;
}
pre {
- background: $lightgrey;
+ background: var(--bs-secondary-bg);
padding: 2px 3px;
white-space: pre-wrap;
img {
padding: $lineheight;
- background-color: $offwhite;
+ background-color: var(--bs-tertiary-bg);
display: block;
max-width: 100%;
margin: auto;
}
blockquote {
- border-left: $lineheight solid $offwhite;
+ border-left: $lineheight solid var(--bs-tertiary-bg);
padding-left: $lineheight;
margin: 0;
- color: $darkgrey;
+ color: var(--bs-secondary-color);
}
}
}
.site-about #content {
- background-color: $lightgrey;
-
.content-inner {
max-width: 760px;
}