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-size: 16px;
font-weight: 400;
background-color: var(--main-bg-color);
color: var(--link-color);
background-color: var(--island-button-color);
color: var(--island-link-color);
}
</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-weight: 600;
font-size: 20px;
color: var(--main-text-color);
color: var(--island-header-color);
}
div {
width: 85%;
@ -22,7 +22,7 @@
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: var(--overlay-color);
background-color: var(--island-bg-color);
border-radius: 10px;
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>
span {
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-size: 20px;
}
@ -29,7 +29,7 @@
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: var(--overlay-color);
background-color: var(--overlay-island-bg-color);
border-radius: 10px;
z-index: 1000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22
src/lib/themes.css
View File

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

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

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