From 68a257e2bd75f29f45b8329587d866384aa7d7c7 Mon Sep 17 00:00:00 2001 From: benjamin Date: Wed, 11 Mar 2026 12:02:53 +0100 Subject: [PATCH] optimize shadows & paddings --- .../shows/show/song/song.component.html | 51 +++++++++++-------- .../shows/show/song/song.component.less | 20 +++++++- .../components/card/card.component.less | 5 +- src/index.html | 42 +++++++-------- src/styles/shadow.less | 24 +++------ src/styles/styles.less | 4 ++ 6 files changed, 82 insertions(+), 64 deletions(-) diff --git a/src/app/modules/shows/show/song/song.component.html b/src/app/modules/shows/show/song/song.component.html index 3d44de3..e616f4e 100644 --- a/src/app/modules/shows/show/song/song.component.html +++ b/src/app/modules/shows/show/song/song.component.html @@ -10,40 +10,47 @@
{{ iSong.title }} @if (!edit) { - - @if (iSong.keyOriginal !== iSong.key) { - {{ iSong.keyOriginal }} →  - }{{ iSong.key }} - @if (keys) { - - - @for (key of keys; track key) { - {{ key }} - } - - - } - +
+
+ @if (iSong.keyOriginal !== iSong.key) { + {{ iSong.keyOriginal }} →  + } + {{ iSong.key }} +
+
} @if (!edit) { + matTooltip="Lied für diese Veranstaltung bearbeiten"> } @if (!edit) { + matTooltip="Lied aus Veranstaltung entfernen"> }
+ @if (!edit) { + + } } @if (edit) { Songtext } @@ -56,7 +63,7 @@ Verwerfen } - @if (!edit && (showText )) { + @if (!edit && (showText)) { #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 @@ - - + +
@@ -98,44 +98,44 @@ /> + id="gear-lg" /> + d="m26.155 213.81q-1.5697 4.1147-2.9258 8.0808-1.3468 3.9568-1.4118 4.1333h-1.2911q-0.04644-0.17647-1.0031-2.9537-0.9474-2.7865-2.5078-6.9291h-0.01858q-1.3654 3.4274-2.5171 6.5575-1.1425 3.1209-1.2168 3.3252h-1.3189q-0.07431-0.26936-1.1982-3.641-1.1146-3.3809-2.9815-8.4523l1.5233-0.59445q0.037153 0.13004 1.0867 3.2695 1.0496 3.1394 2.4057 7.0498h0.01858q1.4304-3.6038 2.4893-6.604 1.0682-3.0001 1.1146-3.1394h1.4397q0.03715 0.15791 1.1239 3.3995 1.096 3.2416 2.2199 6.3439h0.01858q1.4861-4.059 2.5078-7.1148 1.0217-3.0558 1.0589-3.2045z" /> + d="m39.994 219.76q0 1.5047-0.52014 2.7679-0.51086 1.2539-1.3375 2.0713-0.91954 0.91025-1.9505 1.3282-1.031 0.40869-2.2106 0.40869-1.1517 0-2.1735-0.39011-1.0217-0.3994-1.8391-1.1796-0.90096-0.84524-1.4583-2.127-0.54801-1.2911-0.54801-2.8979 0-1.4304 0.43655-2.6007 0.43655-1.1796 1.3096-2.1177 0.80808-0.8731 1.9227-1.3468 1.1146-0.48299 2.3499-0.48299 1.2539 0 2.3221 0.45512 1.0682 0.44584 1.8484 1.2446 0.91025 0.92883 1.3747 2.192 0.4737 1.2539 0.4737 2.675zm-1.5883 0.14862q0-1.2075-0.40868-2.3685-0.3994-1.1703-1.2261-1.9598-0.5573-0.53872-1.2539-0.83595-0.68733-0.29722-1.5419-0.29722-0.83594 0-1.5604 0.30651-0.7152 0.29722-1.3004 0.88239-0.74306 0.74306-1.161 1.8391-0.40868 1.096-0.40868 2.2849 0 1.3375 0.41797 2.3964 0.42726 1.0589 1.1982 1.7926 0.52943 0.51085 1.2539 0.82666 0.72449 0.30651 1.5511 0.30651t1.5419-0.29723q0.72449-0.30651 1.3096-0.87309 0.69662-0.66876 1.1425-1.6998 0.44584-1.0403 0.44584-2.3035z" /> + d="m52.961 225.23-1.161 0.95669q-0.20434-0.21363-1.449-1.6069-1.2446-1.4025-3.8361-4.3655l0.0093-0.0836q0.35295-0.0929 0.93812-0.39939 0.58516-0.3158 0.98456-0.67805 0.34367-0.3158 0.59445-0.78021 0.26007-0.46442 0.26007-1.2446 0-0.7152-0.38082-1.226-0.37153-0.52015-1.031-0.76164-0.53872-0.20435-1.1332-0.2415-0.59445-0.0464-1.096-0.0464-0.33438 0-0.51086 9e-3 -0.17648 0-0.26007 0-0.01858 1.7648-0.02786 3.1116 0 1.3468 0 1.9041 0 1.2725 0.0093 3.4552 0.01858 2.1828 0.02786 2.74h-1.5326q0.0093-0.55729 0.02786-2.1549 0.01858-1.6069 0.01858-3.994 0-0.46441 0-1.7183t-0.04644-4.5698q0.09288 0 0.92883-0.0186 0.83594-0.0186 1.5419-0.0186 0.80808 0 1.5697 0.0929t1.4861 0.3994q0.91954 0.39011 1.4583 1.1518 0.53872 0.75235 0.53872 1.7741 0 1.3189-0.81737 2.2013-0.80808 0.8731-1.5326 1.3004v0.0464q1.2725 1.4861 2.7865 3.0651 1.5233 1.579 1.6347 1.6998z" /> + d="m61.371 222.47q0 0.95669-0.45513 1.6812-0.44584 0.7152-1.2075 1.161-0.69662 0.40868-1.5976 0.62231-0.90096 0.20434-1.997 0.20434-0.59445 0-1.2353-0.0371-0.6316-0.0372-0.73377-0.0464l-0.07431-1.3375q0.13004 0.0186 0.72449 0.0743 0.59445 0.0464 1.4025 0.0464 0.49228 0 1.2725-0.13003 0.78022-0.13004 1.1982-0.33438 0.54801-0.26936 0.83594-0.65018 0.29722-0.38082 0.29722-0.96598 0-0.62232-0.29722-1.0496-0.28794-0.43655-0.96598-0.83594-0.43655-0.26007-1.1332-0.58516t-1.2539-0.66876q-0.9474-0.57587-1.3561-1.2539-0.3994-0.68733-0.3994-1.5233 0-0.85452 0.36224-1.4768 0.37153-0.63161 0.95669-1.0774 0.59445-0.44584 1.449-0.66876 0.86381-0.22292 1.9134-0.22292 0.57587 0 1.161 0.0371 0.59445 0.0279 0.67804 0.0372l0.13004 1.3468q-0.08359-9e-3 -0.67804-0.065-0.59445-0.0557-1.4675-0.0557-0.52014 0-1.0774 0.12075-0.54801 0.11146-0.96598 0.35295-0.37153 0.21363-0.6316 0.59445t-0.26007 0.89168q0 0.45512 0.26936 0.88238 0.27865 0.41798 1.031 0.86381 0.38082 0.23221 1.0031 0.53872 0.6316 0.29723 1.2353 0.65018 0.92883 0.54801 1.3932 1.2632 0.4737 0.70591 0.4737 1.6162z" /> + d="m75.253 225.97h-1.5326q0.0093-0.55729 0.01858-2.0527 0.01858-1.5047 0.01858-3.7432-0.13932 0-1.6533 0-1.514-9e-3 -2.2756-9e-3 -0.91954 0-2.2106 9e-3 -1.2818 0-1.3932 0 0 2.5821 0.0093 3.9104 0.01858 1.3282 0.02786 1.8855h-1.5326q0.0093-0.55729 0.02787-1.9784 0.01858-1.4211 0.01858-4.802 0-1.0217-0.01858-2.4893-0.0093-1.4676-0.02787-3.1673h1.5326q0 1.4118-0.01858 2.7772-0.01858 1.3561-0.01858 2.5821 0.11146 0 1.2075 9e-3 1.1053 0 2.4057 0 1.0031 0 2.415 0 1.4118-9e-3 1.5047-9e-3 0-1.226-0.01858-2.5821t-0.01858-2.7772h1.5326q-0.01858 1.4025-0.03715 3.2416-0.0093 1.8391-0.0093 3.0001 0 2.7308 0.01858 4.189 0.01858 1.449 0.02786 2.0063z" /> + d="m81.142 225.97h-1.5326q0.0093-0.55729 0.02787-1.9877 0.01858-1.4304 0.01858-4.1054 0-1.0589-0.0093-2.7772-0.0093-1.7183-0.03715-3.5667h1.5326q-0.01858 1.3282-0.03715 3.093-0.0093 1.7555-0.0093 2.8701 0 2.8236 0.01858 4.3748 0.01858 1.5419 0.02786 2.0992z" /> + d="m93.281 217.79q0 1.3561-0.88239 2.4521-0.8731 1.096-2.3406 1.4861-0.6316 0.16719-1.384 0.24149-0.74306 0.0743-1.6626 0.0743l0.01858 3.9289h-1.5326q0.0093-0.55729 0.02786-2.062 0.01858-1.514 0.01858-4.672 0-1.0031-0.0093-2.4614t-0.03715-3.2416q0.3994-9e-3 0.78022-9e-3 0.39011 0 0.6316 0 1.6069 0 2.7308 0.20434 1.1332 0.20434 1.9041 0.69662 0.84523 0.52943 1.2911 1.384 0.44584 0.84524 0.44584 1.9784zm-1.5883 0q0-0.9567-0.43655-1.6254-0.43655-0.67805-1.3375-1.0682-0.5573-0.2415-1.2075-0.29723-0.65018-0.065-1.3375-0.065-0.08359 0-0.16719 0-0.08359 0-0.17648 0 0 0.10217-0.01858 1.3932-0.01858 1.2911-0.01858 2.0434 0 0.68733 0 1.6254 0.0093 0.93811 0.0093 1.0682 0.0836 0 0.19505 0 0.11146 0 0.17648 0 0.62232 0 1.3189-0.0836 0.70591-0.0836 1.2075-0.30651 0.8731-0.37153 1.3282-1.031 0.46441-0.65947 0.46441-1.6533z" /> + d="m110.19 219.58q-0.0186 0.66875-0.0371 1.5697-0.0186 0.89167-0.0186 1.4768 0 0.93812 0.0186 2.0992 0.0186 1.1518 0.0186 1.2818-0.0836 9e-3 -0.5573 0.0371-0.4737 0.0371-0.91954 0.0371-2.2106 0-3.9104-0.4737-1.6905-0.4737-2.9351-1.6533-0.77093-0.72449-1.2446-1.7926-0.46442-1.0774-0.46442-2.4521 0-1.6905 0.89168-3.0187 0.90096-1.3375 2.4707-2.1549 1.0682-0.5573 2.4242-0.83595 1.3654-0.28793 2.8422-0.28793 0.2322 0 0.42726 9e-3 0.20434 0 0.36224 0l0.11146 1.3375q-0.0371 0-0.29722 0-0.26008-9e-3 -0.41798-9e-3 -1.4211 0-2.6007 0.2415-1.1796 0.24149-2.062 0.7059-1.1982 0.63161-1.8855 1.7183-0.67805 1.0867-0.67805 2.3128 0 1.5511 0.70591 2.5728 0.7152 1.0124 1.8391 1.5883 1.0031 0.51085 2.1177 0.72448 1.1239 0.20435 2.3128 0.20435 0-0.14862-9e-3 -1.4397-9e-3 -1.3004-0.0371-3.7989z" /> + d="m122.01 225.95q-0.0836 0-1.2354-9e-3 -1.1517-9e-3 -2.8515-9e-3 -1.1796 0-2.1642 9e-3 -0.97527 9e-3 -1.6533 9e-3 0.0186-0.53872 0.0279-2.3314 0.0186-1.7926 0.0186-3.706 0-1.0496-9e-3 -2.7772t-0.0371-3.576q0.65947 0 1.644 9e-3 0.99385 9e-3 2.0434 9e-3 1.7741 0 2.8886-9e-3t1.2075-9e-3v1.2911q-0.0929 0-1.1703-9e-3 -1.0682-0.0186-2.6657-0.0186-0.69662 0-1.3654 9e-3 -0.66876 0-1.0589 0 0 1.0496-0.0186 2.0992-0.0186 1.0403-0.0186 1.9691 0.41798 0 0.98456 9e-3 0.57587 0 1.0217 0 1.6347 0 2.9165-9e-3 1.2911-0.0186 1.3747-0.0186v1.2818q-0.0743 0-1.5326-9e-3 -1.4583-0.0186-2.6657-0.0186-0.44583 0-1.0682 9e-3 -0.61302 0-1.031 0 0 1.7555 9e-3 2.7865 9e-3 1.031 0.0186 1.7276 0.54801 9e-3 1.3282 0.0186 0.78022 0 1.6812 0 1.384 0 2.3221-9e-3 0.94741-9e-3 1.0589-9e-3z" /> + d="m136.29 213.53q-0.0186 1.4583-0.0371 3.3345-9e-3 1.8762-9e-3 2.7029 0 2.6379 0.0186 4.1983 0.0186 1.5511 0.0186 1.6533l-1.2354 0.60373q-2.8051-3.7896-5.2479-6.8362-2.4335-3.0558-2.8144-3.5296l-0.0186 9e-3q0 2.4893 0.0279 6.121 0.0372 3.6224 0.0464 4.1797h-1.449q9e-3 -0.2322 0.0279-1.6533 0.0186-1.4211 0.0186-3.9568 0-1.0124-9e-3 -2.6843-9e-3 -1.6812-0.0372-3.5574l1.4118-0.66876q0.16719 0.21363 2.8422 3.6131 2.6843 3.3995 5.0528 6.316l0.0186-9e-3q0-1.4304-0.0371-4.8113-0.0372-3.3902-0.0372-5.025z" /> + d="m148.54 225.95q-0.0836 0-1.2353-9e-3t-2.8515-9e-3q-1.1796 0-2.1642 9e-3 -0.97527 9e-3 -1.6533 9e-3 0.0186-0.53872 0.0279-2.3314 0.0186-1.7926 0.0186-3.706 0-1.0496-9e-3 -2.7772t-0.0371-3.576q0.65946 0 1.644 9e-3 0.99385 9e-3 2.0434 9e-3 1.7741 0 2.8887-9e-3t1.2075-9e-3v1.2911q-0.0929 0-1.1703-9e-3 -1.0682-0.0186-2.6657-0.0186-0.69663 0-1.3654 9e-3 -0.66876 0-1.0589 0 0 1.0496-0.0186 2.0992-0.0186 1.0403-0.0186 1.9691 0.41797 0 0.98456 9e-3 0.57587 0 1.0217 0 1.6347 0 2.9165-9e-3 1.2911-0.0186 1.3747-0.0186v1.2818q-0.0743 0-1.5326-9e-3 -1.4583-0.0186-2.6657-0.0186-0.44583 0-1.0682 9e-3 -0.61303 0-1.031 0 0 1.7555 9e-3 2.7865 9e-3 1.031 0.0186 1.7276 0.548 9e-3 1.3282 0.0186 0.78022 0 1.6812 0 1.384 0 2.3221-9e-3 0.9474-9e-3 1.0589-9e-3z" /> + d="m161.71 225.23-1.161 0.95669q-0.20434-0.21363-1.449-1.6069-1.2446-1.4025-3.8361-4.3655l9e-3 -0.0836q0.35295-0.0929 0.93811-0.39939 0.58517-0.3158 0.98456-0.67805 0.34367-0.3158 0.59445-0.78021 0.26007-0.46442 0.26007-1.2446 0-0.7152-0.38082-1.226-0.37153-0.52015-1.031-0.76164-0.53872-0.20435-1.1332-0.2415-0.59445-0.0464-1.096-0.0464-0.33438 0-0.51086 9e-3 -0.17647 0-0.26007 0-0.0186 1.7648-0.0279 3.1116 0 1.3468 0 1.9041 0 1.2725 9e-3 3.4552 0.0186 2.1828 0.0279 2.74h-1.5326q9e-3 -0.55729 0.0279-2.1549 0.0186-1.6069 0.0186-3.994 0-0.46441 0-1.7183t-0.0464-4.5698q0.0929 0 0.92883-0.0186 0.83595-0.0186 1.5419-0.0186 0.80808 0 1.5697 0.0929 0.76164 0.0929 1.4861 0.3994 0.91954 0.39011 1.4583 1.1518 0.53872 0.75235 0.53872 1.7741 0 1.3189-0.81737 2.2013-0.80808 0.8731-1.5326 1.3004v0.0464q1.2725 1.4861 2.7865 3.0651 1.5233 1.579 1.6347 1.6998z" /> + d="m174.36 225.48-1.449 0.74307q-0.0372-0.10217-0.58517-1.384-0.53872-1.2818-1.4304-3.2973h-5.5544q-0.97527 2.1642-1.5047 3.3531-0.52943 1.1889-0.58516 1.3282l-1.2446-0.66876q0.2415-0.48299 1.9877-4.254 1.7555-3.7803 3.641-7.9415h1.2075q1.8576 4.1612 3.6503 8.0622 1.7926 3.9011 1.867 4.059zm-3.994-5.1271q-0.50157-1.1332-1.0589-2.3685-0.55729-1.2353-1.1703-2.5821h-0.0371q-0.47371 1.0217-1.1425 2.5171-0.66876 1.4861-1.1053 2.4335l9e-3 9e-3h4.4955z" /> + d="m184.16 214.85q-0.14862 0-1.2446-9e-3 -1.096-9e-3 -3.3159-9e-3 -0.0186 1.9041-0.0279 2.8887-9e-3 0.98456-9e-3 2.6843 0 1.6347 9e-3 3.3252 0.0186 1.6812 0.0279 2.2385h-1.5326q0.0186-0.55729 0.0279-2.2756 0.0186-1.7183 0.0186-3.3624 0-1.6162 0-2.5636 0-0.95669-0.0279-2.9351-1.9784-9e-3 -3.2137 9e-3 -1.2261 9e-3 -1.3468 9e-3v-1.2911q0.9567 0 2.3221 9e-3 1.3747 9e-3 2.9258 9e-3 2.2478 0 3.7525-9e-3 1.514-9e-3 1.6347-9e-3z" /> + d="m196.89 219.76q0 1.5047-0.52014 2.7679-0.51086 1.2539-1.3375 2.0713-0.91954 0.91025-1.9505 1.3282-1.031 0.40869-2.2106 0.40869-1.1517 0-2.1735-0.39011-1.0217-0.3994-1.8391-1.1796-0.90097-0.84524-1.4583-2.127-0.54801-1.2911-0.54801-2.8979 0-1.4304 0.43655-2.6007 0.43654-1.1796 1.3096-2.1177 0.80808-0.8731 1.9227-1.3468 1.1146-0.48299 2.3499-0.48299 1.2539 0 2.3221 0.45512 1.0682 0.44584 1.8484 1.2446 0.91025 0.92883 1.3747 2.192 0.4737 1.2539 0.4737 2.675zm-1.5883 0.14862q0-1.2075-0.40868-2.3685-0.3994-1.1703-1.226-1.9598-0.5573-0.53872-1.2539-0.83595-0.68734-0.29722-1.5419-0.29722-0.83594 0-1.5604 0.30651-0.7152 0.29722-1.3004 0.88239-0.74306 0.74306-1.161 1.8391-0.40869 1.096-0.40869 2.2849 0 1.3375 0.41798 2.3964 0.42726 1.0589 1.1982 1.7926 0.52944 0.51085 1.2539 0.82666 0.72449 0.30651 1.5511 0.30651 0.82666 0 1.5419-0.29723 0.72449-0.30651 1.3096-0.87309 0.69662-0.66876 1.1425-1.6998 0.44583-1.0403 0.44583-2.3035z" /> + d="m209.86 225.23-1.161 0.95669q-0.20434-0.21363-1.449-1.6069-1.2446-1.4025-3.8361-4.3655l9e-3 -0.0836q0.35295-0.0929 0.93812-0.39939 0.58516-0.3158 0.98455-0.67805 0.34367-0.3158 0.59445-0.78021 0.26008-0.46442 0.26008-1.2446 0-0.7152-0.38082-1.226-0.37154-0.52015-1.031-0.76164-0.53872-0.20435-1.1332-0.2415-0.59445-0.0464-1.096-0.0464-0.33438 0-0.51086 9e-3 -0.17647 0-0.26007 0-0.0186 1.7648-0.0279 3.1116 0 1.3468 0 1.9041 0 1.2725 9e-3 3.4552 0.0186 2.1828 0.0279 2.74h-1.5326q9e-3 -0.55729 0.0279-2.1549 0.0186-1.6069 0.0186-3.994 0-0.46441 0-1.7183t-0.0464-4.5698q0.0929 0 0.92883-0.0186 0.83595-0.0186 1.5419-0.0186 0.80808 0 1.5697 0.0929t1.4861 0.3994q0.91954 0.39011 1.4583 1.1518 0.53872 0.75235 0.53872 1.7741 0 1.3189-0.81737 2.2013-0.80808 0.8731-1.5326 1.3004v0.0464q1.2725 1.4861 2.7865 3.0651 1.5233 1.579 1.6347 1.6998z" /> + id="gear-sm" /> diff --git a/src/styles/shadow.less b/src/styles/shadow.less index 0386cf2..d42ebba 100644 --- a/src/styles/shadow.less +++ b/src/styles/shadow.less @@ -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); } diff --git a/src/styles/styles.less b/src/styles/styles.less index 3d1d8ce..d225fc0 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -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;