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 { h1 {
color: red; color: var(--text);
} }

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

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

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

@@ -1,12 +1,14 @@
@import "../../../../styles/shadow"; @import "../../../../styles/shadow";
.song { .song {
background: #fff; background: var(--surface-strong);
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
color: var(--text);
border: 1px solid var(--surface-border);
@media screen and (max-width: 860px) { @media screen and (max-width: 860px) {
width: 100vw; width: 100vw;
@@ -14,7 +16,7 @@
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
margin: -11px -20px 10px; margin: -11px -20px 10px;
border: 1px solid #ddd; border: 1px solid var(--surface-border);
} }
} }
@@ -39,31 +41,31 @@
} }
.song-part { .song-part {
background: #fff; background: var(--surface-strong);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: 300ms all ease-in-out; transition: var(--transition);
cursor: pointer; cursor: pointer;
outline: 0.5px solid #eee; outline: 1px solid var(--divider);
&:hover { &:hover {
outline: 0.5px solid var(--color-primary-light); outline: 1px solid var(--primary-hover);
} }
&.active { &.active {
outline: 0.5px solid var(--color-primary); outline: 1px solid var(--primary-color);
.head { .head {
background-color: var(--color-primary); background-color: var(--primary-color);
color: white; color: var(--text-inverse);
} }
} }
} }
.head { .head {
transition: 300ms all ease-in-out; transition: var(--transition);
background: #eee; background: var(--surface-muted);
padding: 10px; padding: 10px;
font-weight: bold; font-weight: bold;
} }
@@ -100,9 +102,9 @@
a { a {
font-size: 30px; font-size: 30px;
padding: 10px; padding: 10px;
transition: all 300ms ease-in-out; transition: var(--transition);
&:hover { &: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) { .song-row:not(:last-child) {
display: block; display: block;
border-bottom: 1px solid #0002; border-bottom: 1px solid var(--divider);
} }
.song-swipe { .song-swipe {
@@ -21,9 +21,10 @@
} }
.cdk-drag-preview { .cdk-drag-preview {
background-color: white; background-color: var(--surface-strong);
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; 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); 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 { .next-song {
color: #0008; color: var(--text-muted);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 10px; right: 10px;
@@ -62,7 +63,7 @@
} }
.time { .time {
color: #0008; color: var(--text-muted);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 10px; left: 10px;

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

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

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

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

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

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

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

@@ -4,5 +4,5 @@
p.error { p.error {
margin: 8px 10px; 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; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
color: #A6C4F5; color: var(--primary-hover);
} }
.filter-active { .filter-active {
color: #a21; color: var(--danger);
cursor: not-allowed; cursor: not-allowed;
} }

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

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

7
src/styles/styles.less
View File

@@ -7,6 +7,8 @@
--surface-strong: rgba(255, 255, 255, 0.96); --surface-strong: rgba(255, 255, 255, 0.96);
--surface-dark: rgba(30, 36, 52, 0.72); --surface-dark: rgba(30, 36, 52, 0.72);
--surface-border: rgba(41, 46, 73, 0.16); --surface-border: rgba(41, 46, 73, 0.16);
--surface-subtle: rgba(255, 255, 255, 0.38);
--surface-muted: rgba(41, 46, 73, 0.06);
--text: #1f2433; --text: #1f2433;
--text-muted: #5f6b73; --text-muted: #5f6b73;
@@ -26,6 +28,11 @@
--navigation-background: rgba(30, 36, 52, 0.72); --navigation-background: rgba(30, 36, 52, 0.72);
--hover-background: rgba(111, 143, 149, 0.16); --hover-background: rgba(111, 143, 149, 0.16);
--overlay: rgba(18, 24, 37, 0.62);
--overlay-strong: rgba(18, 24, 37, 0.88);
--divider: rgba(31, 36, 51, 0.12);
--link-color: var(--primary-active);
--focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28);
--transition: all 300ms ease-in-out; --transition: all 300ms ease-in-out;
} }