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
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();
}
},

58
src/styles/_color.scss
View File

@@ -1,19 +1,53 @@
@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
$post-input-bg: #ffffff;
$post: #333;
$post-hover: color.adjust($post, $lightness: -10%, $space: hsl);
$post-bg: rgba(255, 255, 255, .8);
$message: #326526;
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$message-bg: #6DFF58;
$media: #333;
$media-bg: rgba(255, 255, 255, .8);
$post-input-bg: #ffffff;
$post: $default;
$post-hover: $default-hover;
$post-bg: $default-bg;
$message: hsl(109, 45%, 27%);
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$message-bg: color.adjust($message, $lightness: 60%, $space: hsl);
$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
$title: $post;
$subtitle: #999;
$title: $default;
$subtitle: #999;
$download-hover: #0078A8;
//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 */
@-webkit-keyframes fadeIn {
@@ -102,12 +104,12 @@ a.button {
button, a.button {
@extend .clickable;
font-weight: bold;
color: #000;
background: #eee;
color: color.$default;
background: color.$default-bg;
&:hover {
color: #eee;
background: #000;
color: color.$default-inv;
background: color.$default-inv-bg;
}
}
@@ -129,13 +131,13 @@ h1 {
p {
margin: 0 0 1em 0;
&.error {
color: red;
color: color.$error;
}
&.warning {
color: orange;
color: color.$warning;
}
&.success {
color: green;
color: color.$success;
}
}
}

21
src/styles/_fa.scss
View File

@@ -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 */
.#{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); }

11
src/styles/_lightbox.scss
View File

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

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

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

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

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

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

@@ -18,6 +18,7 @@ $thumbnail-max-size: 60px;
.maplibregl-popup-content {
padding: var.$block-spacing;
background-color: color.$default-bg-light;
h1 {
font-size: 1.4em;
@@ -26,14 +27,14 @@ $thumbnail-max-size: 60px;
}
.separator {
border-top: 1px solid #CCC;
border-top: 1px solid color.$default-bg;
margin: var.$elem-spacing 0;
}
/* Marker Popup */
.info-window {
h1 .message-type {
color: #CCC;
color: color.$default;
font-weight: normal;
font-size: calc(1em / 1.4);
margin-left: 0.5em;
@@ -45,7 +46,7 @@ $thumbnail-max-size: 60px;
margin: var.$elem-spacing 0 0 0;
a {
color: color.$post;
color: color.$default;
}
}
@@ -68,12 +69,12 @@ $thumbnail-max-size: 60px;
color: transparent;
}
.fa-drill-video {
color: rgba(255, 255, 255, 0.5);
color: color.$over-img-bg;
}
&:hover {
.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);
.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 {
background-color: color.$post;
color: color.$post-bg;
background-color: color.$default-inv-bg;
color: color.$default-inv;
&:hover, &:hover a, &:hover a:visited {
background-color: color.$post-input-bg;
color: color.$post;
background-color: color.$default-bg-light;
color: color.$default;
}
a, a:visited {
background-color: color.$post;
color: color.$post-bg;
background-color: color.$default;
color: color.$default-bg;
text-decoration: none;
}
@@ -104,8 +104,8 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$post;
background: rgba(255, 255, 255, 0.8);
color: color.$default;
background: color.$default-bg-trans;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@@ -123,10 +123,10 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
.map-control {
position: absolute;
background-color: color.$post-bg;
background-color: color.$default-bg;
padding: var.$elem-spacing;
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;
line-height: 1.5;
@@ -143,11 +143,11 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
.fa {
@extend .fa-fw;
color: color.$post;
color: color.$default;
}
&:hover .fa {
color: #000000;
color: color.$default-hover;
}
}
}
@@ -191,7 +191,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
}
#background {
background: #666;
background: color.$loader-bg;
position: absolute;
left: 0;
top: 0;
@@ -212,7 +212,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
font-size: 3em;
top: calc(50% - 0.5em);
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;
}
.fa-track-start, .fa-track-end {
color: color.$message;
color: color.$track-start;
font-size: 14px;
top: 1px;
}
.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;
.logo {
background: rgba(255, 255, 255, .4);
background: color.$default-bg;
padding: 2rem 1rem;
border-radius: var.$block-radius var.$block-radius 0 0;
@@ -54,15 +54,15 @@
.settings-footer {
flex: 0 1 auto;
background: rgba(255, 255, 255, .4);
background: color.$default-bg;
border-radius: 0 0 3px 3px;
font-size: 0.7em;
padding: 0.3rem;
text-align: center;
color: #888;
color: color.$default;
a {
color: #777;
color: color.$default;
text-decoration: none;
}
}
@@ -104,10 +104,10 @@
}
.download {
color: color.$legend;
color: color.$default;
&:hover {
color: #0078A8;
color: color.$download-hover;
}
}
}
@@ -118,8 +118,8 @@
width: calc(100% - 6em);
&:disabled {
color: #999;
background: rgba(255,255,255,0.2);
color: color.$default-disabled;
background: color.$default-bg-trans-disabled;
}
}
button#nl_btn {
@@ -134,7 +134,7 @@
}
&.loading {
background-color: color.$message;
color: white;
color: color.$post-input-bg;
span {
@extend .flicker;
}

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

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