Semi-stable version with old variable names
This commit is contained in:
Fabio Herzig
+148
-47
@@ -9,10 +9,11 @@
|
||||
--accent: #4a5568;
|
||||
--accent-soft: #f0f5ff;
|
||||
--border-subtle: #d4d7e1;
|
||||
--text-main: #191919;
|
||||
--text-main: #36454F;
|
||||
--text-muted: #5e5e5e;
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-border: #cbd5f5;
|
||||
--main-button: #36454F;
|
||||
}
|
||||
|
||||
/* ── Base ─────────────────────────────────────────────── */
|
||||
@@ -71,6 +72,7 @@ input {
|
||||
width: 100vw;
|
||||
box-sizing: border-box !important;
|
||||
background: none;
|
||||
padding: 0 var(--paddingSite) 10px
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
@@ -112,7 +114,6 @@ input {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 0 var(--paddingSite) 10px;
|
||||
}
|
||||
|
||||
.bg-erfassen button[type="submit"] {
|
||||
@@ -139,7 +140,6 @@ input {
|
||||
|
||||
h3.vereine,
|
||||
h3.benutzer {
|
||||
padding: 0 var(--paddingSite);
|
||||
font-weight: 400;
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-main);
|
||||
@@ -149,8 +149,7 @@ h3.benutzer {
|
||||
|
||||
/* ── Inner section (card list) ────────────────────────── */
|
||||
|
||||
.inner-pw-set-bg {
|
||||
padding: 0 var(--paddingSite);
|
||||
.benutzerGrid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
@@ -161,53 +160,62 @@ h3.benutzer {
|
||||
/* ── User / Verein card ───────────────────────────────── */
|
||||
|
||||
.single_pwedit,
|
||||
.newUserLink {
|
||||
.newUserLinkDiv {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--card-radius);
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 24px 28px;
|
||||
transition: box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.single_pwedit:hover,
|
||||
.newUserLink:hover {
|
||||
.newUserLinkDiv:hover {
|
||||
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.single_pwedit.verein,
|
||||
.newUserLink.verein {
|
||||
.newUserLinkDiv.verein {
|
||||
border-left: 4px solid var(--bg-top);
|
||||
}
|
||||
|
||||
/* ── Form fields inside user card ─────────────────────── */
|
||||
|
||||
.single_pwedit form,
|
||||
.newUserLink form {
|
||||
.newUserLinkDiv form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px 24px;
|
||||
align-items: flex-end;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.single_pwedit form {
|
||||
padding: 24px 28px 14px 28px;
|
||||
}
|
||||
|
||||
.newUserLinkDiv {
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.single_pwedit label,
|
||||
.newUserLink label {
|
||||
.newUserLinkDiv label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.single_pwedit .field-group,
|
||||
.newUserLink .field-group {
|
||||
.newUserLinkDiv .field-group {
|
||||
flex: 1 1 200px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.single_pwedit input[type="text"],
|
||||
.newUserLink input[type="text"] {
|
||||
.newUserLinkDiv input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
border: 1px dashed #999;
|
||||
@@ -220,21 +228,21 @@ h3.benutzer {
|
||||
}
|
||||
|
||||
.single_pwedit input[type="text"]:focus,
|
||||
.newUserLink input[type="text"]:focus {
|
||||
.newUserLinkDiv input[type="text"]:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--bg-top);
|
||||
box-shadow: 0 0 0 3px rgba(var(--bg-top-raw) / 0.12);
|
||||
}
|
||||
|
||||
.single_pwedit input[type="text"]::placeholder,
|
||||
.newUserLink input[type="text"]::placeholder {
|
||||
.newUserLinkDiv input[type="text"]::placeholder {
|
||||
color: #b0b0b0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Buttons inside cards ─────────────────────────────── */
|
||||
|
||||
.single_pwedit button[type="submit"],
|
||||
/*.single_pwedit button[type="submit"],
|
||||
.newUserLink button[type="submit"] {
|
||||
appearance: none;
|
||||
border: 1px solid #7777778e;
|
||||
@@ -255,7 +263,7 @@ h3.benutzer {
|
||||
border-color: var(--bg-top);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}*/
|
||||
|
||||
.delete-user-btn,
|
||||
.delete-verein-btn {
|
||||
@@ -268,7 +276,6 @@ h3.benutzer {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
@@ -289,9 +296,30 @@ h3.benutzer {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-left: 8px;
|
||||
transition: all 0.25s ease;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.userActionsDivLink {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px 10px;
|
||||
}
|
||||
|
||||
.userActionsDivLink:not(.mty) {
|
||||
padding: 14px 28px 24px 28px;
|
||||
border-top: 1px solid var(--main-button);
|
||||
}
|
||||
|
||||
.userActionsDivLink.mty {
|
||||
padding: 0 28px 10px 28px;
|
||||
}
|
||||
|
||||
.userActionsDivEdit {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.createOturl:hover {
|
||||
@@ -311,11 +339,12 @@ h3.benutzer {
|
||||
justify-content: center;
|
||||
background-color: #39393941;
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.newUserLink {
|
||||
max-width: 600px;
|
||||
max-height: 500px;
|
||||
.newUserLinkDiv {
|
||||
max-width: min(600px, 80vw);
|
||||
max-height: min(500px, 80vh);
|
||||
overflow-y: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
@@ -356,7 +385,7 @@ h3.benutzer {
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.perm-section-title .perm-badge {
|
||||
@@ -370,9 +399,17 @@ h3.benutzer {
|
||||
background: var(--bg-top);
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.permBadgeCount {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.permBadgeText {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.perm-section-chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -386,14 +423,14 @@ h3.benutzer {
|
||||
|
||||
.perm-section-body {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: hidden auto;
|
||||
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.perm-section.open .perm-section-body {
|
||||
max-height: 500px;
|
||||
max-height: 300px;
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
@@ -509,19 +546,36 @@ table {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.inputPreisProgramm,
|
||||
.inputAktivProgramm {
|
||||
.inputAktivProgramm,
|
||||
.inputOrderIndexProgramm,
|
||||
.labelStartgebuerenWraper {
|
||||
padding: 6px 10px;
|
||||
border: 1px dashed #999;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.2s ease, background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.inputPreisProgramm:focus,
|
||||
.inputAktivProgramm:focus {
|
||||
.inputPreisProgramm,
|
||||
.inputAktivProgramm,
|
||||
.inputOrderIndexProgramm {
|
||||
max-width: 100px;
|
||||
font-size: 0.9rem;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.inputPreisProgramm {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inputPreisProgramm:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.inputAktivProgramm:focus,
|
||||
.inputOrderIndexProgramm:focus {
|
||||
outline: none;
|
||||
border-color: var(--bg-top);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
@@ -534,13 +588,6 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.deleteProgramm {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
@@ -562,7 +609,7 @@ select {
|
||||
/* ── One-time URL Modal ───────────────────────────────── */
|
||||
|
||||
.ot-modal {
|
||||
display: none;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
@@ -888,9 +935,9 @@ select {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.inner-pw-set-bg {
|
||||
.benutzerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -959,7 +1006,7 @@ select {
|
||||
}
|
||||
|
||||
.containerSection {
|
||||
padding: var(--paddingSite) calc(var(--paddingSite) * 1.5);
|
||||
padding: var(--paddingSite) calc(var(--paddingSite) * .5);
|
||||
margin-bottom: var(--paddingSite);
|
||||
}
|
||||
|
||||
@@ -982,4 +1029,58 @@ select {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.containerTrainerKampfrichterPermissions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.inputPasswordUser {
|
||||
color: #fafafa !important;
|
||||
background-color:#fafafa !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.inputPasswordUser:hover, .inputPasswordUser:focus {
|
||||
color: #000000 !important;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.divAblaufdatumLink {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blackBtn {
|
||||
background: var(--main-button);
|
||||
border: 1px solid #fff;
|
||||
color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.blackBtn:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.blackBtn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
h3.normalTitle {
|
||||
color: var(--main-button);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.userNotActive {
|
||||
color: #286690;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user