Semi-stable version with old variable names
This commit is contained in:
Fabio Herzig
@@ -2,7 +2,7 @@
|
||||
--main: #fe3f18;
|
||||
--bg-top-raw: 254 63 24;
|
||||
--main-box-shadow: rgb(from var(--main) r g b / 0.05);
|
||||
--accent: #cfef00;
|
||||
--accent: #fe3f18;
|
||||
--accent-hover: #c5e300;
|
||||
--paddingSite: 40px;
|
||||
--card-radius: 20px;
|
||||
@@ -12,6 +12,7 @@
|
||||
--border-subtle: #d4d7e1;
|
||||
--text-main: #191919;
|
||||
--text-muted: #5e5e5e;
|
||||
--main-button: #36454F;
|
||||
}
|
||||
|
||||
/* --- BASE & TYPOGRAPHY --- */
|
||||
@@ -62,7 +63,7 @@ body {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--paddingSite);
|
||||
background: linear-gradient(135deg, var(--main), #d85a00);
|
||||
background: var(--main);
|
||||
color: #fff;
|
||||
margin-bottom: var(--paddingSite);
|
||||
position: relative;
|
||||
@@ -82,7 +83,7 @@ body {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv {
|
||||
.mainContentDiv {
|
||||
padding: 0 var(--paddingSite);
|
||||
}
|
||||
|
||||
@@ -127,7 +128,7 @@ body {
|
||||
max-width: 450px;
|
||||
transform: translateX(-100%);
|
||||
z-index: 100;
|
||||
padding: 20px;
|
||||
padding: 30px;
|
||||
transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -141,9 +142,8 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
height: 100dvh;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.text_akt_abt {
|
||||
@@ -207,6 +207,20 @@ body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.textInputAbtTitel {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--main);
|
||||
font-size: 1.5rem;
|
||||
color: #191919;
|
||||
background: none;
|
||||
width: max-content;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.deleteProgramm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -243,45 +257,26 @@ body {
|
||||
}
|
||||
|
||||
/* Sidebar Menu Button Styling */
|
||||
.header-text-conatiner {
|
||||
.headerOptionConatiner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
padding-top: 20px;
|
||||
gap: 15px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.header-text-conatiner button {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
padding: 12px 20px;
|
||||
border-radius: 100px;
|
||||
background: var(--accent);
|
||||
border: 1px solid transparent;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 6px rgba(207, 239, 0, 0.2);
|
||||
.headerOptionConatiner > button {
|
||||
|
||||
}
|
||||
|
||||
.header-text-conatiner button:hover {
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(207, 239, 0, 0.3);
|
||||
}
|
||||
|
||||
.header-text-conatiner button:active {
|
||||
transform: scale(0.98) translateY(0);
|
||||
}
|
||||
|
||||
.header-text-conatiner label {
|
||||
.headerOptionConatiner label {
|
||||
font-weight: 400;
|
||||
color: var(--text-main);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.header-text-conatiner input[type="number"] {
|
||||
.headerOptionConatiner input[type="number"] {
|
||||
padding: 12px 15px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
@@ -292,7 +287,7 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-text-conatiner input[type="number"]:focus {
|
||||
.headerOptionConatiner input[type="number"]:focus {
|
||||
border-color: var(--main);
|
||||
box-shadow: 0 0 0 3px rgba(40, 102, 110, 0.1);
|
||||
}
|
||||
@@ -309,6 +304,7 @@ body {
|
||||
transition: all 0.3s ease;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.geraet-table thead {
|
||||
@@ -465,45 +461,177 @@ body {
|
||||
|
||||
/* Invalid / Unassigned Wrapper */
|
||||
.invalidAbtDiv {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin: 20px 20px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.invalidAbtDiv .geraet-table {
|
||||
box-shadow: none;
|
||||
border-color: #fecdd3;
|
||||
border-color: #d93f4a;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invalidAbtDiv .geraet-table thead {
|
||||
background: #ffe4e6;
|
||||
background: #d93f4a;
|
||||
}
|
||||
|
||||
.invalidAbtDiv .geraet-table thead th {
|
||||
color: #e11d48;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Horizontal scroll area for departments */
|
||||
.allTurnerinenDiv>div {
|
||||
|
||||
.singleAbtDiv {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv>div>div:last-child {
|
||||
.singleAbtDataContainer {
|
||||
overflow-x: auto;
|
||||
padding: 10px 0 20px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv>div>div:last-child::-webkit-scrollbar {
|
||||
.singleAbtDataContainer::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv>div>div:last-child::-webkit-scrollbar-track {
|
||||
.singleAbtDataContainer::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.allTurnerinenDiv>div>div:last-child::-webkit-scrollbar-thumb {
|
||||
.singleAbtDataContainer::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.buttonMoveDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.buttonMove {
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input.abtIndexInput::-webkit-outer-spin-button,
|
||||
input.abtIndexInput::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input.abtIndexInput[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.abtIndexInput {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nichtBezahlt {
|
||||
color: #e11d48;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timePicker {
|
||||
border: none;
|
||||
border-bottom: 1px solid #000;
|
||||
background: none;
|
||||
padding: 4px 8px;
|
||||
font-size: 1rem;
|
||||
color: var(--main);
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addTimetypeButton {
|
||||
color: #2dac79;
|
||||
}
|
||||
|
||||
.removeTimetypeButton {
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.subHeaderAbt {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 4px 8px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
align-self: start;
|
||||
margin-top: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subHeaderAbt .customSelect {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
bottom: 0px;
|
||||
transform: translateY(120%) translateX(-10%);
|
||||
padding: 6px;
|
||||
background: #fff;
|
||||
border: 1px solid #7b7676;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.buttonsDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user