Add navbar styling
This commit is contained in:
46
ui.R
46
ui.R
@@ -60,6 +60,52 @@ ui <- function() {
|
|||||||
border: 5px solid white !important;
|
border: 5px solid white !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
/* NAVSET CARD TABS (Modern & Fluid) */
|
||||||
|
/* Match the outer card to your existing 20px radius */
|
||||||
|
.card.bslib-card.bslib-navset {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
/* The Header area where tabs sit */
|
||||||
|
.card-header.bslib-nav-tabs-spacer {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-bottom: 1px solid #f0f0f0 !important;
|
||||||
|
padding: 10px 15px !important;
|
||||||
|
}
|
||||||
|
/* Force the card body to hide all overflow (Vertical and Horizontal) */
|
||||||
|
.card-body {
|
||||||
|
overflow: hidden !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
/* Ensure the plotly container doesn't create internal scrolling */
|
||||||
|
.js-plotly-plot, .plot-container {
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
/* Target the specific plot ID to be extra safe */
|
||||||
|
#grph_top3 {
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
/* Individual Tab Styling - Rounded and Clean */
|
||||||
|
.nav-tabs .nav-link {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 12px !important; /* Slightly smaller than card for nested look */
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #495057 !important; /* Muted grey */
|
||||||
|
padding: 8px 18px !important;
|
||||||
|
font-weight: 500;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
/* Active Tab - No movement, just color change */
|
||||||
|
.nav-tabs .nav-link.active {
|
||||||
|
background-color: #f4f7f9 !important; /* Matches your body background */
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
/* Clean up the tab content area */
|
||||||
|
.tab-content {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
/* 3. ALLE CARDS (Diagramme & Container) */
|
/* 3. ALLE CARDS (Diagramme & Container) */
|
||||||
.card {
|
.card {
|
||||||
border-radius: 20px !important;
|
border-radius: 20px !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user