Add new styles to elements
This commit is contained in:
153
ui.R
153
ui.R
@@ -6,6 +6,159 @@ ui <- function() {
|
|||||||
style = "color: #003064; background: #dae5ed; padding: 20px 0px 20px 20px; background-clip: padding-box; font-family: Lato,Arial,Helvetica,sans-serif;font-weight: 400", #text-align: center
|
style = "color: #003064; background: #dae5ed; padding: 20px 0px 20px 20px; background-clip: padding-box; font-family: Lato,Arial,Helvetica,sans-serif;font-weight: 400", #text-align: center
|
||||||
class = "display-4"
|
class = "display-4"
|
||||||
),
|
),
|
||||||
|
tags$head(
|
||||||
|
tags$style(
|
||||||
|
HTML("
|
||||||
|
.selectize-dropdown-content .option {
|
||||||
|
border-bottom: 1px solid #dee2e6; /* Die Trennlinie */
|
||||||
|
padding: 8px 10px; /* Abstand zwischen Text und Linie */
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
background: white !important; /* Der Hintergrund der Legenden-Box */
|
||||||
|
opacity: 1 !important; /* Die Box selbst ist nicht transparent */
|
||||||
|
}
|
||||||
|
/* Erzwingt den Dropdown-Pfeil auch bei Multiple Inputs */
|
||||||
|
.selectize-control.multi .selectize-input:after {
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 15px;
|
||||||
|
margin-top: -3px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 5px 5px 0 5px;
|
||||||
|
border-color: #333 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
/* Platz für den Pfeil lassen, damit Text nicht darunter rutscht */
|
||||||
|
.selectize-control.multi .selectize-input {
|
||||||
|
padding-right: 35px !important;
|
||||||
|
}
|
||||||
|
/* 1. GRUND-LAYOUT */
|
||||||
|
body {
|
||||||
|
background-color: #f4f7f9 !important; /* Ganz leichtes Blaugrau für Tiefe */
|
||||||
|
}
|
||||||
|
/* 2. DIE KARTE (HHMAP) */
|
||||||
|
#hhmap {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
|
||||||
|
border: 5px solid white !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
/* 3. ALLE CARDS (Diagramme & Container) */
|
||||||
|
.card {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: 0 10px 30px rgba(149, 157, 165, 0.15) !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
transition: box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
transform: none !important; /* Sanfter Schwebeprozess beim Hovern */
|
||||||
|
}
|
||||||
|
/* 4. SIDEBAR & INPUTS */
|
||||||
|
.sidebar {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-right: none !important;
|
||||||
|
box-shadow: 5px 0 25px rgba(0,0,0,0.03) !important;
|
||||||
|
border-radius: 0 25px 25px 0 !important;
|
||||||
|
}
|
||||||
|
.selectize-input {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
border: 1px solid #e2e8f0 !important;
|
||||||
|
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02) !important;
|
||||||
|
padding: 10px 15px !important;
|
||||||
|
}
|
||||||
|
.selectize-input.focus {
|
||||||
|
border-color: #3182bd !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(49, 130, 189, 0.1) !important;
|
||||||
|
}
|
||||||
|
/* 5. BUTTONS (Falls du welche hast) */
|
||||||
|
.btn {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
|
||||||
|
transition: background-color 0.2s, box-shadow 0.2s !important;
|
||||||
|
}
|
||||||
|
.btn:active {
|
||||||
|
transform: scale(0.98); /* Drück-Effekt */
|
||||||
|
}
|
||||||
|
/* 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;
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
")
|
||||||
|
)
|
||||||
|
),
|
||||||
navset_card_tab(
|
navset_card_tab(
|
||||||
nav_panel("Karte",
|
nav_panel("Karte",
|
||||||
page_sidebar(
|
page_sidebar(
|
||||||
|
|||||||
Reference in New Issue
Block a user