franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix color dependencies

Browse Source
This commit is contained in:
Franzz
2026-04-13 23:02:35 +02:00
parent cb505d9092
commit 52316d9abb
12 changed files with 132 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/project.vue
View File

@@ -111,7 +111,7 @@ export default {
//Check for project change //Check for project change
if(asNewHash.items[0] != asOldHash.items[0]) { if(asNewHash.items[0] != asOldHash.items[0]) {
console.log('Project change: '+(asOldHash.items[0])+' ->', asNewHash.items[0]); this.$parent.hash.items = [asNewHash.items[0]];
this.init(); this.init();
} }
}, },

58
src/styles/_color.scss
View File

@@ -1,19 +1,53 @@
@use "sass:color"; @use "sass:color";
//Default colors
$default: hsl(0, 0%, 27%);
$default-hover: color.adjust($default, $lightness: -10%, $space: hsl);
$default-disabled: color.adjust($default, $lightness: 50%, $space: hsl);
$default-bg: color.adjust($default, $lightness: 60%, $space: hsl);
$default-bg-light: color.adjust($default, $lightness: 65%, $space: hsl);
$default-bg-trans: color.adjust($default, $lightness: 70%, $alpha: -0.2, $space: hsl);
$default-bg-trans-disabled: color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
$default-inv: $default-bg;
$default-inv-bg: $default;
//Feed colors //Feed colors
$post-input-bg: #ffffff; $post-input-bg: #ffffff;
$post: #333; $post: $default;
$post-hover: color.adjust($post, $lightness: -10%, $space: hsl); $post-hover: $default-hover;
$post-bg: rgba(255, 255, 255, .8); $post-bg: $default-bg;
$message: #326526;
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl); $message: hsl(109, 45%, 27%);
$message-bg: #6DFF58; $message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$media: #333; $message-bg: color.adjust($message, $lightness: 60%, $space: hsl);
$media-bg: rgba(255, 255, 255, .8);
$media: hsl(214, 45%, 27%);
$media-hover: color.adjust($media, $lightness: -10%, $space: hsl);
$media-bg: color.adjust($media, $lightness: 60%, $space: hsl);
$media-bg-light: color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
//Over image colors
$over-img: #ffffff;
$over-img-bg: color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
$over-img-shadow: rgba(0, 0, 0, 0.5);
//Settings colors //Settings colors
$title: $post; $title: $default;
$subtitle: #999; $subtitle: #999;
$download-hover: #0078A8;
//Legend colors //Legend colors
$legend: $post; $legend: $default;
//Tracks
$track-start: $message;
$track-end: #FF7814;
//Loader
$loader: $default-bg;
$loader-bg: $default;
//Feedback
$error: #ff0000;
$warning: #ffa500;
$success: #008000;

16
src/styles/_common.scss
View File

@@ -1,3 +1,5 @@
@use "color";
/* Animations */ /* Animations */
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
@@ -102,12 +104,12 @@ a.button {
button, a.button { button, a.button {
@extend .clickable; @extend .clickable;
font-weight: bold; font-weight: bold;
color: #000; color: color.$default;
background: #eee; background: color.$default-bg;
&:hover { &:hover {
color: #eee; color: color.$default-inv;
background: #000; background: color.$default-inv-bg;
} }
} }
@@ -129,13 +131,13 @@ h1 {
p { p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
&.error { &.error {
color: red; color: color.$error;
} }
&.warning { &.warning {
color: orange; color: color.$warning;
} }
&.success { &.success {
color: green; color: color.$success;
} }
} }
} }

33
src/styles/_fa.scss
View File

@@ -1,9 +1,9 @@
@use 'fa/solid' with ( @use 'fa/solid' with (
$fa-css-prefix: fa, $fa-css-prefix: fa,
$fa-font-path: "fonts" $fa-font-path: "fonts"
); );
@use 'fa/mixins'; @use 'fa/mixins';
@use 'fa/core'; @use 'fa/core';
@@ -14,9 +14,9 @@
@use 'fa/animated'; @use 'fa/animated';
@use 'fa/rotated-flipped'; @use 'fa/rotated-flipped';
@use 'fa/stacked'; @use 'fa/stacked';
@use "fa/functions"; @use "fa/functions";
@use "fa/variables"; @use "fa/variables";
.fa { .fa {
&.push { &.push {
@@ -27,27 +27,6 @@
} }
} }
.control-icon {
@extend .fa;
font-size: 28px;
text-align: center;
line-height: 44px;
text-decoration: none;
color: #CCC;
background: none;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
&:hover {
color: white;
}
&:before {
display: block;
width: 44px;
height: 44px;
}
}
/* Navigation */ /* Navigation */
.#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); } .#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); }
.#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); } .#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); }

11
src/styles/_lightbox.scss
View File

@@ -1,6 +1,7 @@
@use "common"; @use "common";
@use "fa/variables"; @use "fa/variables";
@use "fa"; @use "fa";
@use "color";
@use "lightbox/lightbox"; @use "lightbox/lightbox";
@@ -97,7 +98,7 @@
.lb-outerContainer { .lb-outerContainer {
margin: 0; margin: 0;
border-radius:0; border-radius:0;
background-color: rgba(255, 255, 255, 0.5); background-color: color.$default-bg-trans;
.lb-container { .lb-container {
overflow: hidden; overflow: hidden;
@@ -151,9 +152,9 @@
} }
a.lb-prev, a.lb-next { a.lb-prev, a.lb-next {
color: white; color: color.$over-img;
text-decoration: none; text-decoration: none;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8); text-shadow: 0px 1px 1px color.$over-img-shadow;
width: 150px; width: 150px;
height: 150px; height: 150px;
position: absolute; position: absolute;
@@ -212,7 +213,7 @@
height: auto; height: auto;
font-size: 1.3333333333em; font-size: 1.3333333333em;
line-height: 1em; line-height: 1em;
color: white; color: color.$over-img;
} }
} }
} }
@@ -220,7 +221,7 @@
.lb-cancel { .lb-cancel {
@include lightbox-icon(cancel); @include lightbox-icon(cancel);
@extend .flicker; @extend .flicker;
color: #CCC; color: color.$default-inv;
text-decoration: none; text-decoration: none;
} }
} }

12
src/styles/_page.admin.scss
View File

@@ -1,3 +1,5 @@
@use "color";
#admin { #admin {
margin: 1em; margin: 1em;
@@ -6,12 +8,12 @@
border-collapse: collapse; border-collapse: collapse;
tr { tr {
th { th {
background: #AAA; background: color.$default-inv-bg;
color: white; color: color.$default-inv;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
} }
td { td {
background: #EEE; background: color.$default-bg-light;
text-align: center; text-align: center;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
@@ -25,10 +27,10 @@
} }
button { button {
color: #AAA; color: color.$default;
background: none; background: none;
&:hover { &:hover {
color: #666; color: color.$default-hover;
} }
} }
} }

28
src/styles/_page.project.feed.scss
View File

@@ -23,7 +23,7 @@
} }
.archived { .archived {
background: #EEE; background: color.$default-bg-light;
} }
} }
@@ -43,7 +43,7 @@
color: color.$post; color: color.$post;
border-radius: var.$block-radius; border-radius: var.$block-radius;
width: calc(100% - var.$block-spacing); width: calc(100% - var.$block-spacing);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
a { a {
color: color.$post; color: color.$post;
@@ -197,22 +197,35 @@
&.media { &.media {
background: color.$media-bg; background: color.$media-bg;
color: color.$message-hover; color: color.$media;
a {
color: color.$media;
&:hover {
color: color.$media-hover;
}
}
.body { .body {
a { a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin: 0; margin: 0;
color: color.$message-hover;
position: relative; position: relative;
line-height: 0; line-height: 0;
&.drill { &.drill {
.comment {
background: color.$media-bg-light;
}
&:hover { &:hover {
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video { .drill-icon {
color: rgba(color.$media-bg, 0.75); .fa-drill-image, .fa-drill-video {
color: color.$media-bg;
}
} }
.comment { .comment {
opacity: 0; opacity: 0;
} }
@@ -225,7 +238,7 @@
color: transparent; color: transparent;
} }
.fa-drill-video { .fa-drill-video {
color: rgba(255, 255, 255, 0.5); color: color.$over-img-bg;
} }
} }
} }
@@ -248,7 +261,6 @@
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
text-align: justify; text-align: justify;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 0 var.$block-radius var.$block-radius; border-radius: 0 0 var.$block-radius var.$block-radius;
transition: opacity 0.3s; transition: opacity 0.3s;
opacity: 1; opacity: 1;

11
src/styles/_page.project.map.scss
View File

@@ -18,6 +18,7 @@ $thumbnail-max-size: 60px;
.maplibregl-popup-content { .maplibregl-popup-content {
padding: var.$block-spacing; padding: var.$block-spacing;
background-color: color.$default-bg-light;
h1 { h1 {
font-size: 1.4em; font-size: 1.4em;
@@ -26,14 +27,14 @@ $thumbnail-max-size: 60px;
} }
.separator { .separator {
border-top: 1px solid #CCC; border-top: 1px solid color.$default-bg;
margin: var.$elem-spacing 0; margin: var.$elem-spacing 0;
} }
/* Marker Popup */ /* Marker Popup */
.info-window { .info-window {
h1 .message-type { h1 .message-type {
color: #CCC; color: color.$default;
font-weight: normal; font-weight: normal;
font-size: calc(1em / 1.4); font-size: calc(1em / 1.4);
margin-left: 0.5em; margin-left: 0.5em;
@@ -45,7 +46,7 @@ $thumbnail-max-size: 60px;
margin: var.$elem-spacing 0 0 0; margin: var.$elem-spacing 0 0 0;
a { a {
color: color.$post; color: color.$default;
} }
} }
@@ -68,12 +69,12 @@ $thumbnail-max-size: 60px;
color: transparent; color: transparent;
} }
.fa-drill-video { .fa-drill-video {
color: rgba(255, 255, 255, 0.5); color: color.$over-img-bg;
} }
&:hover { &:hover {
.fa-drill-video, .fa-drill-image { .fa-drill-video, .fa-drill-image {
color: rgba(255, 255, 255, 0.75); color: color.$default-bg;
} }
} }
} }

30
src/styles/_page.project.panel.scss
View File

@@ -33,7 +33,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
transform: translateX(0); transform: translateX(0);
.map-panel { .map-panel {
box-shadow: 2px 2px var.$block-shadow 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
} }
} }
} }
@@ -77,17 +77,17 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
button, a.button { button, a.button {
background-color: color.$post; background-color: color.$default-inv-bg;
color: color.$post-bg; color: color.$default-inv;
&:hover, &:hover a, &:hover a:visited { &:hover, &:hover a, &:hover a:visited {
background-color: color.$post-input-bg; background-color: color.$default-bg-light;
color: color.$post; color: color.$default;
} }
a, a:visited { a, a:visited {
background-color: color.$post; background-color: color.$default;
color: color.$post-bg; color: color.$default-bg;
text-decoration: none; text-decoration: none;
} }
@@ -104,8 +104,8 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
width: calc(100% - var.$block-spacing); width: calc(100% - var.$block-spacing);
margin: var.$block-spacing; margin: var.$block-spacing;
border-radius: var.$block-radius; border-radius: var.$block-radius;
color: color.$post; color: color.$default;
background: rgba(255, 255, 255, 0.8); background: color.$default-bg-trans;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -123,10 +123,10 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
.map-control { .map-control {
position: absolute; position: absolute;
background-color: color.$post-bg; background-color: color.$default-bg;
padding: var.$elem-spacing; padding: var.$elem-spacing;
border-radius: 3px; border-radius: 3px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
@@ -143,11 +143,11 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
.fa { .fa {
@extend .fa-fw; @extend .fa-fw;
color: color.$post; color: color.$default;
} }
&:hover .fa { &:hover .fa {
color: #000000; color: color.$default-hover;
} }
} }
} }
@@ -191,7 +191,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
#background { #background {
background: #666; background: color.$loader-bg;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -212,7 +212,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
font-size: 3em; font-size: 3em;
top: calc(50% - 0.5em); top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2); left: calc(50% - 1.25em/2);
color: #CCC; color: color.$loader;
} }
} }
} }

4
src/styles/_page.project.scss
View File

@@ -47,12 +47,12 @@
top: 1px; top: 1px;
} }
.fa-track-start, .fa-track-end { .fa-track-start, .fa-track-end {
color: color.$message; color: color.$track-start;
font-size: 14px; font-size: 14px;
top: 1px; top: 1px;
} }
.fa-track-end { .fa-track-end {
color: #FF7814; color: color.$track-end;
} }
} }
} }

18
src/styles/_page.project.settings.scss
View File

@@ -10,7 +10,7 @@
flex: 0 1 auto; flex: 0 1 auto;
.logo { .logo {
background: rgba(255, 255, 255, .4); background: color.$default-bg;
padding: 2rem 1rem; padding: 2rem 1rem;
border-radius: var.$block-radius var.$block-radius 0 0; border-radius: var.$block-radius var.$block-radius 0 0;
@@ -54,15 +54,15 @@
.settings-footer { .settings-footer {
flex: 0 1 auto; flex: 0 1 auto;
background: rgba(255, 255, 255, .4); background: color.$default-bg;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
font-size: 0.7em; font-size: 0.7em;
padding: 0.3rem; padding: 0.3rem;
text-align: center; text-align: center;
color: #888; color: color.$default;
a { a {
color: #777; color: color.$default;
text-decoration: none; text-decoration: none;
} }
} }
@@ -104,10 +104,10 @@
} }
.download { .download {
color: color.$legend; color: color.$default;
&:hover { &:hover {
color: #0078A8; color: color.$download-hover;
} }
} }
} }
@@ -118,8 +118,8 @@
width: calc(100% - 6em); width: calc(100% - 6em);
&:disabled { &:disabled {
color: #999; color: color.$default-disabled;
background: rgba(255,255,255,0.2); background: color.$default-bg-trans-disabled;
} }
} }
button#nl_btn { button#nl_btn {
@@ -134,7 +134,7 @@
} }
&.loading { &.loading {
background-color: color.$message; background-color: color.$message;
color: white; color: color.$post-input-bg;
span { span {
@extend .flicker; @extend .flicker;
} }

8
src/styles/_page.upload.scss
View File

@@ -1,3 +1,5 @@
@use "color";
#upload { #upload {
padding: 1em; padding: 1em;
@@ -5,13 +7,13 @@
border-radius: 3px; border-radius: 3px;
margin-top: 1rem; margin-top: 1rem;
padding: 0 1rem 1rem 1rem; padding: 0 1rem 1rem 1rem;
border-bottom: 1px solid #EEE; border-bottom: 1px solid color.$default-bg;
} }
.progress { .progress {
.bar { .bar {
height: 18px; height: 18px;
background: green; background: color.$success;
} }
} }
@@ -33,7 +35,7 @@
width: calc(100% - 2rem); width: calc(100% - 2rem);
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em; padding: 0.5em;
background: #EEE; background: color.$default-bg;
} }
.save { .save {