benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

color palette rework #2

Browse Source
This commit is contained in:
benjamin
2026-03-09 16:53:55 +01:00
parent 0c2157bd0a
commit 4e8a50374e
11 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.less
View File

@@ -1,3 +1,3 @@
h1 {
color: red;
color: var(--text);
}

14
src/app/modules/guest/guest.component.less
View File

@@ -1,5 +1,5 @@
.page {
background: #0009;
background: var(--overlay);
position: fixed;
top: 0;
bottom: 0;
@@ -7,15 +7,15 @@
right: 0;
backdrop-filter: blur(8px);
--swiper-scrollbar-bg-color: #fff3;
--swiper-scrollbar-drag-bg-color: #fff9;
--swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
--swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
--swiper-scrollbar-sides-offset: 20px;
--swiper-scrollbar-top: 100px;
--swiper-scrollbar-bottom: auto;
}
.title {
color: white;
color: var(--text-inverse);
padding: 70px 20px 0;
display: flex;
justify-content: space-between;
@@ -23,7 +23,7 @@
.left {
font-size: 1.8em;
color: #fff;
color: var(--text-inverse);
}
}
@@ -35,7 +35,7 @@
.legal {
padding: 0 20px;
font-size: 0.6em;
color: #fff9;
color: rgba(247, 251, 255, 0.72);
}
.view {
@@ -44,7 +44,7 @@
bottom: 0;
left: 0;
right: 0;
color: white;
color: var(--text-inverse);
}
app-song-text {

28
src/app/modules/presentation/remote/remote.component.less
View File

@@ -1,12 +1,14 @@
@import "../../../../styles/shadow";
.song {
background: #fff;
background: var(--surface-strong);
width: 100%;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
box-sizing: border-box;
color: var(--text);
border: 1px solid var(--surface-border);
@media screen and (max-width: 860px) {
width: 100vw;
@@ -14,7 +16,7 @@
border-radius: 0;
box-sizing: border-box;
margin: -11px -20px 10px;
border: 1px solid #ddd;
border: 1px solid var(--surface-border);
}
}
@@ -39,31 +41,31 @@
}
.song-part {
background: #fff;
background: var(--surface-strong);
border-radius: 8px;
overflow: hidden;
transition: 300ms all ease-in-out;
transition: var(--transition);
cursor: pointer;
outline: 0.5px solid #eee;
outline: 1px solid var(--divider);
&:hover {
outline: 0.5px solid var(--color-primary-light);
outline: 1px solid var(--primary-hover);
}
&.active {
outline: 0.5px solid var(--color-primary);
outline: 1px solid var(--primary-color);
.head {
background-color: var(--color-primary);
color: white;
background-color: var(--primary-color);
color: var(--text-inverse);
}
}
}
.head {
transition: 300ms all ease-in-out;
background: #eee;
transition: var(--transition);
background: var(--surface-muted);
padding: 10px;
font-weight: bold;
}
@@ -100,9 +102,9 @@
a {
font-size: 30px;
padding: 10px;
transition: all 300ms ease-in-out;
transition: var(--transition);
&:hover {
color: #4286f4;
color: var(--link-color);
}
}

9
src/app/modules/shows/show/show.component.less
View File

@@ -5,7 +5,7 @@
.song-row:not(:last-child) {
display: block;
border-bottom: 1px solid #0002;
border-bottom: 1px solid var(--divider);
}
.song-swipe {
@@ -21,9 +21,10 @@
}
.cdk-drag-preview {
background-color: white;
background-color: var(--surface-strong);
box-sizing: border-box;
border-radius: 4px;
border: 1px solid var(--surface-border);
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
@@ -51,7 +52,7 @@
}
.next-song {
color: #0008;
color: var(--text-muted);
position: fixed;
bottom: 0;
right: 10px;
@@ -62,7 +63,7 @@
}
.time {
color: #0008;
color: var(--text-muted);
position: fixed;
bottom: 0;
left: 10px;

4
src/app/modules/shows/show/song/song.component.less
View File

@@ -49,8 +49,8 @@
grid-template-columns: 1em auto;
.key {
color: #00b;
text-shadow: 0 0 1px #00b;
color: var(--primary-active);
text-shadow: 0 0 1px var(--primary-hover);
}
}
}

2
src/app/modules/user/info/info.component.less
View File

@@ -1,5 +1,5 @@
.warn {
color: #621700;
color: var(--danger);
}
p {

10
src/app/modules/user/login/login.component.less
View File

@@ -4,7 +4,7 @@
p.error {
margin: 8px 10px;
color: darkred;
color: var(--danger);
}
.login {
@@ -12,9 +12,11 @@ p.error {
padding: 20px;
width: 400px;
margin: 100px 0;
background: #fffa;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: 8px;
font-size: 18px;
color: var(--text);
position: relative;
@media screen and (max-width: 860px) {
margin: 20px;
@@ -33,11 +35,11 @@ button {
.btn-password {
margin-bottom: 20px;
color: #888;
color: var(--text-soft);
}
.btn-user {
color: #888;
color: var(--text-soft);
}
.frame {

2
src/app/modules/user/password/password.component.less
View File

@@ -4,5 +4,5 @@
p.error {
margin: 8px 10px;
color: darkred;
color: var(--danger);
}

4
src/app/widget-modules/components/list-header/list-header.component.less
View File

@@ -10,11 +10,11 @@
display: flex;
align-items: center;
justify-content: flex-end;
color: #A6C4F5;
color: var(--primary-hover);
}
.filter-active {
color: #a21;
color: var(--danger);
cursor: not-allowed;
}

10
src/app/widget-modules/components/song-text/song-text.component.less
View File

@@ -54,8 +54,8 @@
}
.chord {
color: #00b;
text-shadow: 0 0 1px #00b;
color: var(--primary-active);
text-shadow: 0 0 1px var(--primary-hover);
}
.offset {
@@ -68,14 +68,14 @@
}
.error {
color: red;
color: var(--danger);
font-size: 1.2em;
font-weight: bold;
}
.comment {
color: #00b;
border-left: 2px solid #00b;
color: var(--primary-active);
border-left: 2px solid var(--primary-hover);
padding-left: 6px;
font-style: italic;
}