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: 8vh;
    }
    100% {
        height: 100vh;
    }
}

/* rem statt vh: die Monatskarte soll auf jedem Gerät gleich groß aussehen ("fix"), nur die
   Aktivitäten-Tabelle (flex:1 1 auto, siehe unten) gleicht unterschiedliche Displayhöhen aus. */
@keyframes openMonthArea {
    0% {
        height: 6.5rem;
        margin-top: 1.5rem;
    }
    100% {
        height: 9.5rem;
        margin-top: 1.5rem;
    }
}

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

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

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

@keyframes closeMonthArea {
    0% {
        height: 9.5rem;
        margin-top: 1.5rem;
    }
    100% {
        height: 6.5rem;
        margin-top: 1.5rem;
    }
}

.HeaderDefaultHeightbg {
    height: 8vh;
}

.HeaderDefaultHeightcolor {
    height: 7vh;
}

.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;
}

.closeSettingsbg {
    animation: closeSettingsbg 1s forwards;
}

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

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

#dashbord_month_area {
    height: 6.5rem;
}

/* 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;
}

/* Kein fester height-Override beim Maximieren mehr nötig: ActivitysTable ist flex:1 1 auto
   (siehe #dashboard) und wächst automatisch in den Platz, den die kollabierende Timer-Karte
   freigibt - inklusive sauberer Animation, weil beides gleichzeitig neu layoutet wird. */

/* 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: 92vh;
    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. update_content bekommt das ebenfalls, da die
   Update-Infos (siehe unten) jetzt deutlich mehr Inhalt haben. welcome_content bleibt
   kurz genug, um weiterhin mittig zentriert zu sein. */
#dashboard,
#update_content {
    align-self: flex-start;
    width: 100%;
}

/* Jahr/Monat/Timer bleiben "fix" (rem-/inhaltsbasiert, gerätunabhängig gleich groß).
   Die Aktivitäten-Tabelle (flex:1 1 auto, siehe ihre eigene Regel) gleicht als einziges
   Element unterschiedliche Displayhöhen aus, statt dass wir jede Karte einzeln pro
   Gerät neu austarieren müssen. */
#dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* "Wow-Moment" beim Öffnen der Update-Infos: sanftes Herein-Poppen statt einfach da zu sein. */
@keyframes updateWow {
    0% { opacity: 0; transform: scale(0.85) translateY(20px); }
    60% { opacity: 1; transform: scale(1.03) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#update_content {
    animation: updateWow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes emojiPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-8deg); }
}

.wow-emoji {
    display: inline-block;
    animation: emojiPulse 1.6s ease-in-out infinite;
}

.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 */
}