OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Update color vars in Svelte components - BUT NOT PAGES

Browse Source
This commit is contained in:
Fred Boniface 2023-10-06 12:31:17 +01:00
parent e2cefdda08
commit 72495a63be
15 changed files with 46 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/islands/input-island-form.svelte
View File

@ -39,7 +39,7 @@
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
background-color: var(--main-bg-color); background-color: var(--island-button-color);
color: var(--link-color); color: var(--island-link-color);
} }
</style> </style>

4
src/lib/islands/island.svelte
View File

@ -14,7 +14,7 @@
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
color: var(--main-text-color); color: var(--island-header-color);
} }
div { div {
width: 85%; width: 85%;
@ -22,7 +22,7 @@
margin: auto; margin: auto;
margin-top: 25px; margin-top: 25px;
padding: 10px; padding: 10px;
background-color: var(--overlay-color); background-color: var(--island-bg-color);
border-radius: 10px; border-radius: 10px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.19); box-shadow: 2px 2px 30px rgba(0,0,0,0.19);
} }

4
src/lib/islands/overlay-island.svelte
View File

@ -12,7 +12,7 @@
<style> <style>
span { span {
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: var(--main-text-color); color: var(--island-header-color);
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
} }
@ -29,7 +29,7 @@
margin: auto; margin: auto;
margin-top: 25px; margin-top: 25px;
padding: 10px; padding: 10px;
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
border-radius: 10px; border-radius: 10px;
z-index: 1000; z-index: 1000;
} }

4
src/lib/islands/quick-link-island.svelte
View File

@ -47,7 +47,7 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
background-color: var(--main-bg-color); background-color: var(--island-button-color);
color: var(--link-color); color: var(--island-link-color);
} }
</style> </style>

4
src/lib/islands/quick-link-set-island.svelte
View File

@ -109,7 +109,7 @@
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
background-color: var(--main-bg-color); background-color: var(--island-button-color);
color: var(--link-color); color: var(--island-link-color);
} }
</style> </style>

2
src/lib/islands/result-island.svelte
View File

@ -26,6 +26,6 @@
<style> <style>
p { p {
color: white; color: var(--island-text-color);
} }
</style> </style>

4
src/lib/navigation/LogoutButton.svelte
View File

@ -12,8 +12,8 @@
<style> <style>
.logout { .logout {
border: none; border: none;
background-color: var(--overlay-color); background-color: var(--island-button-color);
color: white; color: var(--island-link-color);
width: 35%; width: 35%;
border-radius: 50px; border-radius: 50px;
font-size: 20px; font-size: 20px;

4
src/lib/navigation/done.svelte
View File

@ -15,7 +15,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin: auto; margin: auto;
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
border-radius: 15px; border-radius: 15px;
padding: 20px; padding: 20px;
padding-bottom: 1px; padding-bottom: 1px;
@ -26,6 +26,6 @@
padding-top: 0px; padding-top: 0px;
font-weight: bolder; font-weight: bolder;
overflow-wrap: normal; overflow-wrap: normal;
color: white; color: var(--island-text-color);
} }
</style> </style>

6
src/lib/navigation/header.svelte
View File

@ -17,8 +17,8 @@
<style> <style>
.headerBar { .headerBar {
background: var(--overlay-color-solid); background: var(--island-bg-solid);
color: var(--main-text-color); color: var(--island-header-color);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -27,7 +27,7 @@
padding: 0; padding: 0;
height: 50px; height: 50px;
z-index: 20; z-index: 20;
box-shadow: 0 3px 30px rgba(0,0,0,0.19); box-shadow: 0 3px 30px var(--box-shadow-color);
} }
img { img {

6
src/lib/navigation/loading.svelte
View File

@ -19,7 +19,7 @@
.spinner::before { .spinner::before {
animation: 1.5s linear infinite spinner; animation: 1.5s linear infinite spinner;
animation-play-state: inherit; animation-play-state: inherit;
border: solid 5px var(--overlay-color); border: solid 5px var(--overlay-island-bg-color);
border-bottom-color: white; border-bottom-color: white;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
@ -37,7 +37,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin: auto; margin: auto;
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
border-radius: 15px; border-radius: 15px;
padding: 20px; padding: 20px;
padding-bottom: 1px; padding-bottom: 1px;
@ -48,6 +48,6 @@
padding-top: 50px; padding-top: 50px;
font-weight: bolder; font-weight: bolder;
overflow-wrap: normal; overflow-wrap: normal;
color: white; color: var(--island-text-color);
} }
</style> </style>

6
src/lib/navigation/nav-ldb.svelte
View File

@ -36,18 +36,18 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
background-color: var(--overlay-color); background-color: var(--island-overlay-bg-color);
} }
.footerLink { .footerLink {
width: 30%; width: 30%;
height: 100%; height: 100%;
background-color: var(--overlay-color); background-color: var(--island-overlay-bg-color);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
border-color: rgba(0, 0, 0, 0.24); border-color: var(--box-shadow-color);
text-decoration: double; text-decoration: double;
font-weight: 600; font-weight: 600;
} }

4
src/lib/navigation/nav.svelte
View File

@ -45,12 +45,12 @@
flex: 12; flex: 12;
width: 30%; width: 30%;
height: 100%; height: 100%;
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
border-color: rgba(0, 0, 0, 0.24); border-color: var(--box-shadow-color);
text-decoration: double; text-decoration: double;
font-weight: 600; font-weight: 600;
} }

10
src/lib/overlays/welcome.svelte
View File

@ -58,17 +58,17 @@
margin: auto; margin: auto;
margin-top: 25px; margin-top: 25px;
padding: 10px; padding: 10px;
background-color: grey; background-color: var(--overlay-island-color);
border-radius: 10px; border-radius: 10px;
z-index: 2500; z-index: 2500;
box-shadow: 1px 1px 3px rgba(0,0,0,0.19); box-shadow: 1px 1px 3px var(--box-shadow-color);
} }
.navButton { .navButton {
border-radius: 50px; border-radius: 50px;
border: none; border: none;
color: white; color: var(--island-link-color);
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
width: 50px; width: 50px;
height: 50px; height: 50px;
font-size: 20px; font-size: 20px;
@ -96,6 +96,6 @@
} }
div { div {
color: white; color: var(--island-text-color);
} }
</style> </style>

22
src/lib/themes.css
View File

@ -9,7 +9,7 @@
--second-text-color: #0afdfd; --second-text-color: #0afdfd;
--note-text-color: #9de7ff; --note-text-color: #9de7ff;
--link-color: azure; --link-color: azure;
--box-border-color: ; --box-border-color: rgba(0,0,0,0.19);
--link-visited-color: azure; --link-visited-color: azure;
--main-alert-color: #ed6d00; --main-alert-color: #ed6d00;
--second-alert-color: #e77f00; /* Use as second arg in radial gradient */ --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
@ -21,18 +21,14 @@
:root { :root {
--main-bg-color: #404c55; --main-bg-color: #404c55;
--second-bg-color: #2b343c; --second-bg-color: #2b343c;
--accent-color: #007979; --island-bg-color: ;
--island-color: #3c6f79de; --island-bg-solid: ;
--main-heading-color: #00b7b7; --island-button-color: ;
--main-text-color: #0afdfd; --island-link-color: ;
--note-text-color: #9de7ff; --island-header-color: ;
--link-color: azure; --island-text-color: ;
--box-border-color: rgba(0,0,0,0.19); --overlay-island-bg-color: ;
--link-visited-color: azure; --box-shadow-color: rgba(0,0,0,0.19);
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00;
--main-warning-color: orange;
--board-name-color: #fcfc09;
} }
*/ */
/* /*

12
src/lib/train/train-detail.svelte
View File

@ -104,7 +104,7 @@
width: 95%; width: 95%;
max-width: 600px; max-width: 600px;
height: auto; height: auto;
background-color: var(--overlay-color); background-color: var(--overlay-island-bg-color);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;
@ -117,12 +117,12 @@
padding-top: 12px; padding-top: 12px;
padding-bottom: 10px; padding-bottom: 10px;
font-family: ubuntu, monospace; font-family: ubuntu, monospace;
color: white; color: var(--island-text-color);
} }
#container-arrow { #container-arrow {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-weight: 600; font-weight: 600;
color: white; color: var(--island-text-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
@ -142,14 +142,14 @@
.pis { .pis {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: azure; color: var(--island-header-color);
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.svc-detail { .svc-detail {
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
color: white; color: var(--island-text-color);
} }
.validity { .validity {
font-size: 14px; font-size: 14px;
@ -158,6 +158,6 @@
margin: auto; margin: auto;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: white; color: var(--island-text-color);
} }
</style> </style>