Millicool/shiny-app
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial improved accordion design

Browse Source
This commit is contained in:
C0d3v
2026-02-07 20:35:54 +01:00
parent 09ef5ecff0
commit 2fd7e150f3
1 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
ui.R
View File

@@ -105,9 +105,8 @@ ui <- function() {
.bslib-card .card-body {
padding: 0;
}
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container{
#hhmap {
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#grph_top3 {
height: 100% !important;
@@ -163,37 +162,43 @@ ui <- function() {
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.accordion-scroll-container {
background-color: #f4f7f9;
padding: 0 10px 20px 10px;
}
.accordion {
border: none;
background: #transparent;
}
.accordion-item {
border: none;
margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow: hidden;
}
.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;
border: none !important;
box-shadow: none !important;
}
"
)
# /* 1. Das gesamte Accordion-Container-Design */
# .accordion {
# border: none !important;
# background: transparent !important;
# }
# /* 2. Die einzelnen Accordion-Items (die 'Streifen') */
# .accordion-item {
# border: none !important;
# margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
# border-radius: 15px !important; /* Abgerundete Ecken für jedes Item */
# box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Weicher Schatten */
# overflow: hidden;
# background-color: #ffffff !important;
# transition: box-shadow 0.2s ease;
# }
# .accordion-item:hover {
# transform: none !important;
# box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
# }
# /* Erzeugt dauerhafte Fettschrift für alle Accordion-Titel */
# .accordion-button {
# font-weight: 600 !important; /* Extra fett */
# font-size: 16px !important;
# color: #1a1a1a !important;
# background-color: #ffffff !important;
# border: none !important;
# box-shadow: none !important;
# }
# /* Wenn das Accordion ausgeklappt ist */
# .accordion-button:not(.collapsed) {
# font-weight: 600 !important;