benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

optimize shadows & paddings

Browse Source
This commit is contained in:
benjamin
2026-03-11 12:02:53 +01:00
parent 2ac1156e20
commit 68a257e2bd
6 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/modules/shows/show/song/song.component.html
View File

@@ -10,21 +10,14 @@
<div class="song">
<span class="title">{{ iSong.title }}</span>
@if (!edit) {
<span class="keys">
<div class="keys-container">
<div (click)="openKeySelect()" class="keys">
@if (iSong.keyOriginal !== iSong.key) {
<span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
}<span
(click)="openKeySelect()">{{ iSong.key }}</span>
@if (keys) {
<mat-form-field (click)="option.open()" class="transpose">
<mat-select #option [formControl]="keyFormControl">
@for (key of keys; track key) {
<mat-option [value]="key">{{ key }}</mat-option>
}
</mat-select>
</mat-form-field>
}
</span>
<span>{{ iSong.key }}</span>
</div>
</div>
}
@if (!edit) {
<app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
@@ -35,6 +28,20 @@
matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
}
</div>
@if (!edit) {
<div aria-hidden="true" class="song select">
<span></span>
<span> <mat-form-field class="keys-select">
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
@for (key of keys; track key) {
<mat-option [value]="key">{{ key }}</mat-option>
}
</mat-select>
</mat-form-field></span>
<span></span>
<span></span>
</div>
}
}
@if (edit) {
<mat-form-field appearance="outline">

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

@@ -1,6 +1,9 @@
.song {
&:not(.select) {
min-height: 28px;
}
display: grid;
grid-template-columns: auto 70px 25px 25px;
@media screen and (max-width: 860px) {
@@ -16,10 +19,25 @@
overflow: hidden;
}
.keys-container {
display: flex;
flex-direction: column;
}
.keys-select {
height: 0;
overflow: hidden;
line-height: 0;
}
.keys {
display: flex;
align-items: center;
position: relative;
margin-right: 10px;
cursor: pointer;
flex-grow: 0;
height: 100%;
&:hover {
color: var(--color-primary);

5
src/app/widget-modules/components/card/card.component.less
View File

@@ -10,7 +10,8 @@
width: 800px;
position: relative;
color: var(--text);
padding: 5px 0;
padding: 10px 0;
box-shadow: var(--shadow-card-3);
@media screen and (max-width: 860px) {
width: 100vw;
@@ -49,7 +50,7 @@
opacity: 0.7;
color: var(--text);
padding-left: 20px;
padding-top: 20px;
padding-top: 10px;
}
.subheading {

6
src/index.html
View File

@@ -21,7 +21,7 @@
<style>
#load-bg {
background-color: #222;
background: linear-gradient(39deg, var(--bg-deep), var(--bg-mid), var(--bg-soft));
position: fixed;
top: 0;
left: 0;
@@ -83,8 +83,8 @@
</head>
<body>
<app-root></app-root>
<script>importCCLI = {}</script>
<script>setStrophe = {}</script>
<script>importCCLI = {};</script>
<script>setStrophe = {};</script>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<div id="load-bg">

24
src/styles/shadow.less
View File

@@ -1,19 +1,7 @@
.card-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.card-2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.card-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
:root {
--shadow-card-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-card-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--shadow-card-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
--shadow-card-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
--shadow-card-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

4
src/styles/styles.less
View File

@@ -78,6 +78,10 @@ a {
}
}
body .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
background-color: rgba(0, 0, 0);
opacity: 0.05;
}
.content > *:not(router-outlet) {
display: flex;