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

Add navbar styling

Browse Source
This commit is contained in:
Millicool
2026-02-06 15:43:43 +01:00
parent 5a6882b500
commit bc7e9ad756
1 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ui.R
View File

@@ -60,6 +60,52 @@ ui <- function() {
border: 5px solid white !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) */
.card {
border-radius: 20px !important;