piomint/app/static/app/css/custom.css

/* LOGIN START PAGE */
@keyframes slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        visibility:hidden;
        position: absolute;
    }
    100% {
        opacity: 1;
        visibility: visible;
        position: relative;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        visibility: visible;
        position: relative;
    }
    100% {
        opacity: 0;
        visibility:hidden;
        position: absolute;
    }
}

@keyframes openSettingsbg {
    0% {
        height: 7vh;
    }
    100% {
        height: 100vh;
    }
}

@keyframes openMonthArea {
    0% {
        height: 15vh;
        margin-top: 1.5rem;
    }
    100% {
        height: 20vh;
        margin-top: 1.5rem;
    }
}

@keyframes shrinkActivitys {
    0% {
        height: 40vh;
    }
    100% {
        height: 35vh;
    }
}

@keyframes growActivitys {
    0% {
        height: 35vh;
    }
    100% {
        height: 40vh;
    }
}

@keyframes openSettingscolor {
    0% {
        height: 6vh;
    }
    100% {
        height: 95vh;
    }
}

@keyframes closeSettingscolor {
    0% {
        height: 95vh;
    }
    100% {
        height: 6vh;
    }
}

@keyframes closeSettingsbg {
    0% {
        height: 100vh;
    }
    100% {
        height: 7vh;
    }
}

@keyframes closeMonthArea {
    0% {
        height: 20vh;
        margin-top: 1.5rem;
    }
    100% {
        height: 15vh;
        margin-top: 1.5rem;
    }
}

.HeaderDefaultHeightbg {
    height: 7vh;
}

.HeaderDefaultHeightcolor {
    height: 6vh;
}

.slide-out {
    animation: slide-out 1s forwards;
}

.fade-in {
    animation: fade-in 1s forwards;
}

.fade-out {
    animation: fade-out 1s forwards;
}

.openSettingsbg {
    animation: openSettingsbg 1s forwards;
}

.openMonthArea {
    animation: openMonthArea 1s forwards;
    /* margin-top: -3rem; */
}

.closeMonthArea {
    animation: closeMonthArea 1s forwards;
}

.shrinkActivitys {
    animation: shrinkActivitys 1s forwards;
}

.growActivitys {
    animation: growActivitys 1s forwards;
}

.closeSettingsbg {
    animation: closeSettingsbg 1s forwards;
}

.openSettingscolor {
    animation: openSettingscolor 1s forwards;
}
.closeSettingscolor {
    animation: closeSettingscolor 1s forwards;
}

.monthEntrys {
    opacity: 0;
    position: absolute;
}

#dashbord_month_area {
    height: 15vh;
}

/* Neu hinzugefügte Icons (Filter-Toggle, Maximieren) in Grau statt Schwarz/Weiß.
   invert(50%) bildet jede Ausgangsfarbe (schwarz, weiß, hell-grau) auf denselben
   neutralen Grauton ab - unabhängig davon, welches der beiden Icons gerade angezeigt wird. */
#toggleSortOptionsIcon,
#openViewOfEntryIcon {
    filter: invert(50%);
}

/* Tabelle maximieren: Timer-Karte klappt weg, Aktivitäten-Tabelle wächst.
   overflow bleibt im normalen Zustand "visible", damit Rand/Schatten der Timer-Karte
   nicht abgeschnitten werden - nur beim Einklappen selbst wird geclippt. */
#timerCard {
    max-height: 20vh;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.4s ease-in-out;
}

#timerCard.timerCollapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

#ActivitysTable {
    transition: height 0.4s ease-in-out;
}

#ActivitysTable.ActivitysTableMaximized {
    height: 65vh !important;
}

/* Filter/Sortierung ein- und ausblenden.
   overflow bleibt im geöffneten Zustand "visible", damit das Dropdown-Menü (sortFieldMenu)
   unterhalb der Zeile nicht abgeschnitten wird - nur beim Einklappen selbst wird geclippt. */
#sortOptionsRow {
    max-height: 3rem;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.3s ease-in-out, opacity 0.25s ease-in-out, margin-top 0.3s ease-in-out;
}

#sortOptionsRow.sortOptionsCollapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0 !important;
    pointer-events: none;
}

.sortFieldOption {
    cursor: pointer;
}

.sortFieldOption:hover,
.sortFieldOption:active {
    background-color: rgb(120,170,86);
    color: white;
}

.header-bg-block {
    padding: 0;
    overflow: hidden;
}

.header-color-block {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    overflow: hidden;
}

.maincontainer {
    height: 93vh;
    transition: height 1s ease, transform 1s ease;
    margin: 0;
    /* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste
       vh-Höhe reicht auf kürzeren Viewports nicht für den ganzen Karten-Stapel, und body hat
       overflow:hidden (verhindert Bounce/Pull-to-refresh) - ohne dieses overflow-y wäre alles
       unterhalb des sichtbaren Bereichs dauerhaft unerreichbar statt nur eng. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* align-self statt der geerbten align-items-center des Elternelements: sonst würde
   überlaufender Inhalt (auf kleinen Displays) mittig "geclippt" und wäre weder oben
   noch unten per Scroll erreichbar. Betrifft nur das Dashboard, nicht die (kurzen,
   weiterhin mittig zentrierten) Willkommens-/Update-Hinweise. */
#dashboard {
    align-self: flex-start;
    width: 100%;
}

.bg-white-color {
    background-color: white;
}

.bg-blue-color {
    background-color: #026670;
    transition: background-color 1s ease, transform 1s ease;
}

a {
    color: rgb(120,170,86);
}

a:hover {
    color: rgb(105, 150, 76);
}

/* BEGINN DES LADEBALKEN VERSUCHS */

.progress-bar {
    width: 100%;
    background-color: #e0e0e0; /* Hellgrauer Hintergrund für die gesamte Leiste */
    border-radius: 25px;
    overflow: hidden;
    height: 30px;
}

.progress {
    background-color: #FFD700; /* Gelb für den Fortschritt */
    height: 100%;
    text-align: center;
    color: black;
    line-height: 30px;
    font-weight: bold;
    border-radius: 25px 0 0 25px; /* Runde Ecken auf der linken Seite */
}