Semi-stable version with old variable names
This commit is contained in:
Fabio Herzig
+237
-99
@@ -15,6 +15,7 @@
|
||||
--text-muted: #5e5e5e;
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-border: #cbd5f5;
|
||||
--color-excel: #1D6F42;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@@ -86,13 +87,6 @@ input {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.bgSection.open {
|
||||
width: calc(100vw - 380px);
|
||||
/* - 2 * var(--paddingSite) */
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
.headerDivTrainer {
|
||||
@@ -112,6 +106,16 @@ input {
|
||||
.headingStartgebuerenTabelle {
|
||||
margin-top: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.headingStartgebuerenTabelle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.heading_edit_turnerin,
|
||||
.headingAlleTurnerinnen {
|
||||
margin-top: 0;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -185,6 +189,79 @@ input {
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
/* Basis-Container-Positionierung */
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Das gehoverte Element */
|
||||
.target-element {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Der Tooltip selbst */
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
/* Positionierung: Oben über dem Element, zentriert */
|
||||
bottom: 120%; /* Abstand nach oben */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
/* Styling */
|
||||
background-color: #ffffff;
|
||||
color: #2f2f2f;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 6px rgba(162, 162, 162, 0.1);
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
/* Die 0.5s Verzögerung */
|
||||
transition: visibility 0s linear 0.5s, opacity 0.3s linear;
|
||||
}
|
||||
|
||||
/* Kleiner Pfeil nach unten */
|
||||
.tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #ffffff transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Sichtbar machen beim Hovern über den Container */
|
||||
.tooltip-container:hover .tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
/* Keine Verzögerung beim Verschwinden */
|
||||
transition-delay: 0s;
|
||||
transition: visibility 0s linear 0s, opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.tooltipPaymentStatus {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tooltipPaymentStatus > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Kampfrichter header layout */
|
||||
|
||||
.headerDivTrainer {
|
||||
@@ -369,19 +446,16 @@ div.bezahlstatus.paymentAdmin {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv .editTurnerin,
|
||||
.allTurnerinenDiv .editTurnerinAdmin {
|
||||
.allTurnerinenDiv .editPerson {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv .editTurnerin svg,
|
||||
.allTurnerinenDiv .editTurnerinAdmin svg {
|
||||
.allTurnerinenDiv .editPerson svg{
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv .editTurnerin svg:hover,
|
||||
.allTurnerinenDiv .editTurnerinAdmin svg:hover {
|
||||
.allTurnerinenDiv .editPerson svg:hover {
|
||||
transform: scale(1.2);
|
||||
animation-name: stiftWackler;
|
||||
animation-duration: 0.5s;
|
||||
@@ -447,6 +521,7 @@ div.bezahlstatus.paymentAdmin {
|
||||
.editContainerDivInner>form>input,
|
||||
.editContainerDivInner>form>select,
|
||||
.bulkSelect,
|
||||
.editContainerDivInner .customSelect,
|
||||
.emptyEditForm {
|
||||
border: 1px dashed #777;
|
||||
max-width: 300px;
|
||||
@@ -456,6 +531,16 @@ div.bezahlstatus.paymentAdmin {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bulkSelectDiv .customSelect {
|
||||
border: 1px solid #777;
|
||||
max-width: 300px;
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 300;
|
||||
min-width: min(250px, 100%);
|
||||
}
|
||||
|
||||
.editContainerDivInner>form>input:focus,
|
||||
.editContainerDivInner>form>select:focus,
|
||||
.bulkSelect:focus {
|
||||
@@ -466,6 +551,8 @@ div.bezahlstatus.paymentAdmin {
|
||||
}
|
||||
|
||||
.editContainerDivInner>form>input,
|
||||
.editContainerDivInner .customSelect,
|
||||
.bulkSelectDiv .customSelect,
|
||||
.emptyEditForm {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
@@ -787,8 +874,12 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.trainerBurgerMenuDiv.open svg {
|
||||
transform: rotate(45deg);
|
||||
.trainerBurgerMenuDiv:hover svg, .deleteStartgebuerCell:hover svg {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.trainerBurgerMenuDiv:active svg, .deleteStartgebuerCell:active svg {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.internMenuDiv {
|
||||
@@ -796,8 +887,9 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
box-shadow: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100svh;
|
||||
border-radius: 0 40px 40px 0;
|
||||
bottom: 40px;
|
||||
height: calc(80svh - 80px);
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
transform: translateX(-100%);
|
||||
@@ -805,6 +897,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
padding: 20px;
|
||||
transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internMenuDiv.open {
|
||||
@@ -816,9 +909,8 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
height: 100dvh;
|
||||
max-height: calc(100% - 150px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.text_akt_abt {
|
||||
@@ -828,12 +920,12 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.innerInternMenuDiv form {
|
||||
.internMenuDiv form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.innerInternMenuDiv input[type="submit"],
|
||||
.innerInternMenuDiv select {
|
||||
.internMenuDiv input[type="submit"],
|
||||
.internMenuDiv select {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
@@ -842,28 +934,17 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.innerInternMenuDiv input[type="submit"]:focus,
|
||||
.innerInternMenuDiv select:focus {
|
||||
.internMenuDiv input[type="submit"]:focus,
|
||||
.internMenuDiv select:focus {
|
||||
outline: none;
|
||||
border-color: #2d73ac;
|
||||
box-shadow: 0 0 6px rgba(45, 115, 172, 0.3);
|
||||
}
|
||||
|
||||
.innerInternMenuDiv .button-secondary {
|
||||
background: linear-gradient(135deg, #2d73ac, #1f4f75);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 12px 18px;
|
||||
transition: transform 0.2s ease, background 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.innerInternMenuDiv .button-secondary:hover {
|
||||
background: linear-gradient(135deg, #245d8a, #163b5a);
|
||||
transform: translateY(-2px);
|
||||
.internMenuDiv button.newBtn {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.gruppennav {
|
||||
@@ -1184,15 +1265,18 @@ tr.rowStartgebuer {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
tr.rowStartgebuer:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
tr.rowStartgebuer {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tableStartgebueren {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr.rowStartgebuerTotal {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #ddd;
|
||||
background-color: #fdfdfd;
|
||||
@@ -1240,14 +1324,12 @@ tr.rowStartgebuerTotal {
|
||||
}
|
||||
|
||||
.tableStartgebueren {
|
||||
max-height: 60vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
/* Prevent scroll chaining to body */
|
||||
overscroll-behavior-x: contain;
|
||||
overscroll-behavior-x: none;
|
||||
overscroll-behavior-y: none;
|
||||
|
||||
/* Smooth scrolling on touch devices */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@@ -1294,87 +1376,97 @@ tr.rowStartgebuerTotal {
|
||||
|
||||
/* Container styling */
|
||||
.form_excel {
|
||||
max-width: 400px;
|
||||
padding: 30px;
|
||||
max-width: 420px;
|
||||
padding: 18px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||
text-align: center;
|
||||
border-top: 6px solid #1D6F42;
|
||||
/* Excel Green */
|
||||
border: 4px solid var(--color-excel);
|
||||
}
|
||||
|
||||
.form_excel h4 {
|
||||
.form_excel h3 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Download Template Section */
|
||||
|
||||
.listExcelForm {
|
||||
text-align: left;
|
||||
line-height: 1.25;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.form_excel a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
display: inline-flex;
|
||||
color: var(--color-excel);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form_excel button[type="button"] {
|
||||
background-color: #f3f3f3;
|
||||
color: #1D6F42;
|
||||
border: 1px solid #1D6F42;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
.form_excel a::after {
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: var(--color-excel);
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.form_excel button[type="button"]:hover {
|
||||
background-color: #e8f5e9;
|
||||
transform: translateY(-1px);
|
||||
.form_excel a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/* File Input Styling */
|
||||
.form_excel input[type="file"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 2px dashed #cbd5e0;
|
||||
border-radius: 8px;
|
||||
background-color: #fafafa;
|
||||
padding: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form_excel input[type="file"]::file-selector-button {
|
||||
background: #1D6F42;
|
||||
color: white;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-excel);
|
||||
border: 1px solid var(--color-excel);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 1px;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.form_excel input[type="file"]::file-selector-button:hover {
|
||||
background: var(--color-excel);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Submit Button */
|
||||
.form_excel button[type="submit"] {
|
||||
background-color: #1D6F42;
|
||||
/* Official Excel Green */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
color: var(--color-excel);
|
||||
border: 1px solid var(--color-excel);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(29, 111, 66, 0.2);
|
||||
transition: background 0.3s ease;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.form_excel button[type="submit"]:hover {
|
||||
background-color: #155231;
|
||||
box-shadow: 0 6px 12px rgba(29, 111, 66, 0.3);
|
||||
background: var(--color-excel);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Payment Modal Overlay */
|
||||
@@ -1574,13 +1666,65 @@ span.flatpickr-weekday {
|
||||
color: #cfef00;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.tooltipPaymentStatusContainer {
|
||||
position: absolute;
|
||||
transform: translateY(-100%) translateX(-50%);
|
||||
background-color: #ffffff;
|
||||
color: #2f2f2f;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 6px rgba(162, 162, 162, 0.1);
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.opacity0 {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease !important;
|
||||
}
|
||||
|
||||
.closeWarenkorb {
|
||||
color: #d30741;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.closeWarenkorb:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.closeWarenkorb:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.headerDivWarenkorb {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
select:not(.flatpickr-monthDropdown-months) {
|
||||
appearance: none;
|
||||
/* Standard */
|
||||
-webkit-appearance: none;
|
||||
/* WebKit */
|
||||
-moz-appearance: none;
|
||||
/* Firefox */
|
||||
|
||||
width: 100%;
|
||||
padding: 12px 35px 12px 14px !important;
|
||||
@@ -1590,10 +1734,7 @@ select:not(.flatpickr-monthDropdown-months) {
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
|
||||
<path d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
|
||||
</svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\<path d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 20px;
|
||||
@@ -1602,8 +1743,5 @@ select:not(.flatpickr-monthDropdown-months) {
|
||||
}
|
||||
|
||||
select:open {
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
|
||||
<path d='M18 15L12 9L6 15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
|
||||
</svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\<path d='M18 15L12 9L6 15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");
|
||||
}
|
||||
Reference in New Issue
Block a user