diff --git a/ui.R b/ui.R index 1038269..db7d6d7 100644 --- a/ui.R +++ b/ui.R @@ -37,7 +37,7 @@ ui <- function() { } .bslib-card .card-header { background: #f4f7f9; - padding-bottom: 20px; + padding: 8px 20px 20px 20px; border: none; } .nav.nav-tabs.card-header-tabs { @@ -175,14 +175,12 @@ ui <- function() { } .accordion-scroll-container { background-color: #f4f7f9; - padding: 0 10px 20px 10px; + padding: 0 20px 20px 20px; } - .accordion { border: none; background: #transparent; } - .accordion-item { border: none; margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */ @@ -193,87 +191,29 @@ ui <- function() { .accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: 12px; } - .accordion-item:hover { box-shadow: 0 4px 8px rgba(0,0,0, 0.3); } - .accordion-button { font-weight: 600; font-size: 16px !important; color: #1a1a1a !important; background-color: #ffffff !important; + color: #000; border: none !important; box-shadow: none !important; } + + .accordion-body { + padding: 20px; + font-size: 14px; + line-height: 1.6; + color: #555; + border-top: 1px solid #f0f0f0; /* Dezente Trennung zum Header */ + } + " ) - - - # /* Wenn das Accordion ausgeklappt ist */ - # .accordion-button:not(.collapsed) { - # font-weight: 600 !important; - # background-color: #fcfcfc !important; - # color: #000000 !important; - # } - # /* 4. Der Inhaltsbereich (wenn es offen ist) */ - # .accordion-body { - # padding: 20px !important; - # font-size: 14px; - # line-height: 1.6; - # color: #555; - # background-color: #ffffff !important; - # border-top: 1px solid #f0f0f0 !important; /* Dezente Trennung zum Header */ - # } - # /* Speziell für geschachtelte Accordions (die inneren Ebenen) */ - # .accordion .accordion { - # margin-top: 10px; - # padding: 10px; - # background-color: #fcfcfc !important; /* Leichter Kontrast zur äußeren Card */ - # border-radius: 15px; - # } - # /* Den Text in den Unterpunkten etwas eleganter machen */ - # .accordion-body p { - # color: #444; - # line-height: 1.7; - # font-size: 15px; - # padding: 5px; - # } - # .accordion-button h4 { - # font-weight: 600 !important; - # margin: 0 !important; - # transition: color 0.2s ease; /* Macht den Farbwechsel beim Klicken weicher */ - # color: #1a1a1a !important; - # } - # /* Den aktiven Header der Unterpunkte hervorheben */ - # .accordion-button:not(.collapsed) h4 { - # color: #2b74a9 !important; - # } - # /* 4. Der Hover-Effekt (Damit es beim Drüberfahren reagiert) */ - # .accordion-button:hover, - # .accordion-button:hover h4 { - # color: #666666 !important; /* Ein weiches Dunkelgrau beim Hovern */ - # } - # .accordion-scroll-container { - # /* This says: Max height is 70% of the screen height */ - # max-height: 65vh !important; - # /* Scrollbar only appears when content is too long */ - # overflow-y: auto !important; - # overflow-x: hidden !important; - # /* Smoothness */ - # padding-right: 5px; - # /* Adds a little 'breathing room' at the bottom so the last - # panel isn't hugging the edge of the card */ - # padding-bottom: 50px !important; - # /* Ensures the container stays fluid */ - # display: block; - # } - # .accordion-scroll-container::-webkit-scrollbar-thumb { - # background: #e2e8f0; /* Very soft grey */ - # border: 2px solid #ffffff; /* Gives it a 'floating' look */ - # border-radius: 10px; - # } - # ") ) ), # tags$script(HTML("