Spaces:
Sleeping
Sleeping
| ui <- fluidPage( | |
| useShinyjs(), | |
| tags$head( | |
| # Google Fonts - Professional pairing | |
| tags$link( | |
| href = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap", | |
| rel = "stylesheet" | |
| ), | |
| tags$style(HTML(" | |
| /* ======================================================================= | |
| WVU BASEBALL ANALYTICS - PROFESSIONAL UI | |
| ======================================================================= */ | |
| /* CSS Variables */ | |
| :root { | |
| --wvu-navy: #002855; | |
| --wvu-navy-dark: #001a3a; | |
| --wvu-navy-light: #003875; | |
| --wvu-gold: #EAAA00; | |
| --wvu-gold-light: #f5c131; | |
| --wvu-gold-dark: #c99400; | |
| --white: #FFFFFF; | |
| --gray-50: #f8fafc; | |
| --gray-100: #f1f5f9; | |
| --gray-200: #e2e8f0; | |
| --gray-300: #cbd5e1; | |
| --gray-400: #94a3b8; | |
| --gray-500: #64748b; | |
| --gray-600: #475569; | |
| --gray-700: #334155; | |
| --gray-800: #1e293b; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| --radius-xl: 20px; | |
| --shadow-xs: 0 1px 2px rgba(0, 40, 85, 0.05); | |
| --shadow-sm: 0 1px 3px rgba(0, 40, 85, 0.08), 0 1px 2px rgba(0, 40, 85, 0.06); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 40, 85, 0.08), 0 2px 4px -2px rgba(0, 40, 85, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 40, 85, 0.1), 0 4px 6px -4px rgba(0, 40, 85, 0.08); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 40, 85, 0.1), 0 8px 10px -6px rgba(0, 40, 85, 0.08); | |
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Reset & Base */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--gray-800); | |
| background: var(--gray-50); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container-fluid { | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| max-width: 100% !important; | |
| } | |
| /* ======================================================================= | |
| LOGIN PAGE - Split Screen Design | |
| ======================================================================= */ | |
| .login-container { | |
| position: fixed; | |
| inset: 0; | |
| display: flex; | |
| background: var(--white); | |
| } | |
| /* Left side - Image */ | |
| .login-image { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| display: none; | |
| } | |
| @media (min-width: 900px) { | |
| .login-image { | |
| display: block; | |
| } | |
| } | |
| .login-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .login-image::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0, 40, 85, 0.7) 0%, | |
| rgba(0, 26, 58, 0.85) 100% | |
| ); | |
| } | |
| .login-image-content { | |
| position: absolute; | |
| bottom: 48px; | |
| left: 48px; | |
| right: 48px; | |
| z-index: 1; | |
| color: var(--white); | |
| } | |
| .login-image-content h2 { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin: 0 0 12px 0; | |
| line-height: 1.2; | |
| } | |
| .login-image-content p { | |
| font-size: 16px; | |
| opacity: 0.85; | |
| margin: 0; | |
| max-width: 400px; | |
| } | |
| /* Right side - Form */ | |
| .login-form-side { | |
| flex: 0 0 480px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 48px; | |
| background: var(--white); | |
| } | |
| @media (max-width: 899px) { | |
| .login-form-side { | |
| flex: 1; | |
| background-image: linear-gradient( | |
| rgba(255, 255, 255, 0.92), | |
| rgba(255, 255, 255, 0.92) | |
| ), url('https://images.sidearmdev.com/crop?url=https%3a%2f%2fdxbhsrqyrr690.cloudfront.net%2fsidearm.nextgen.sites%2fwvuni.sidearmsports.com%2fimages%2f2025%2f2%2f18%2fWVU02765_large.jpg&height=563&width=1000&type=webp'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| } | |
| .login-form-wrapper { | |
| max-width: 340px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .login-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .login-logo img { | |
| height: 56px; | |
| width: auto; | |
| } | |
| .login-logo-text { | |
| border-left: 2px solid var(--gray-200); | |
| padding-left: 16px; | |
| } | |
| .login-logo-text h1 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--wvu-navy); | |
| margin: 0; | |
| line-height: 1.2; | |
| } | |
| .login-logo-text span { | |
| font-size: 13px; | |
| color: var(--gray-500); | |
| font-weight: 500; | |
| } | |
| .login-form-wrapper h2 { | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: var(--wvu-navy); | |
| margin: 0 0 8px 0; | |
| } | |
| .login-form-wrapper .subtitle { | |
| font-size: 15px; | |
| color: var(--gray-500); | |
| margin: 0 0 32px 0; | |
| } | |
| .login-form-wrapper .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .login-form-wrapper .control-label { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--gray-700) !important; | |
| margin-bottom: 6px; | |
| text-transform: none !important; | |
| letter-spacing: 0 !important; | |
| } | |
| .login-form-wrapper .form-control { | |
| width: 100%; | |
| padding: 12px 14px !important; | |
| border: 1.5px solid var(--gray-300) !important; | |
| border-radius: var(--radius-md) !important; | |
| font-size: 15px !important; | |
| font-family: inherit !important; | |
| background: var(--white) !important; | |
| transition: all var(--transition-fast) !important; | |
| } | |
| .login-form-wrapper .form-control:focus { | |
| border-color: var(--wvu-navy) !important; | |
| box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.1) !important; | |
| outline: none !important; | |
| } | |
| .login-form-wrapper .btn { | |
| width: 100%; | |
| padding: 14px 20px !important; | |
| margin-top: 8px; | |
| font-family: inherit !important; | |
| font-size: 15px !important; | |
| font-weight: 600 !important; | |
| background: var(--wvu-navy) !important; | |
| border: none !important; | |
| border-radius: var(--radius-md) !important; | |
| color: var(--white) !important; | |
| cursor: pointer; | |
| transition: all var(--transition-fast) !important; | |
| } | |
| .login-form-wrapper .btn:hover { | |
| background: var(--wvu-navy-light) !important; | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .login-form-wrapper .btn:active { | |
| transform: translateY(0); | |
| } | |
| /* ======================================================================= | |
| NAVIGATION | |
| ======================================================================= */ | |
| .navbar-main { | |
| background: var(--wvu-navy); | |
| padding: 0 24px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 60px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .nav-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| height: 100%; | |
| } | |
| .nav-logo { | |
| height: 36px; | |
| width: auto; | |
| margin-right: 20px; | |
| } | |
| .nav-dropdown { | |
| position: relative; | |
| height: 100%; | |
| } | |
| .nav-dropdown > button { | |
| height: 60px; | |
| padding: 0 18px !important; | |
| background: transparent !important; | |
| border: none !important; | |
| color: rgba(255, 255, 255, 0.9) !important; | |
| font-family: inherit !important; | |
| font-size: 14px !important; | |
| font-weight: 600 !important; | |
| cursor: pointer !important; | |
| transition: all var(--transition-fast) !important; | |
| position: relative !important; | |
| } | |
| .nav-dropdown > button::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%) scaleX(0); | |
| width: calc(100% - 20px); | |
| height: 3px; | |
| background: var(--wvu-gold); | |
| transition: transform var(--transition-base); | |
| border-radius: 3px 3px 0 0; | |
| } | |
| .nav-dropdown:hover > button { | |
| color: var(--white) !important; | |
| background: rgba(255, 255, 255, 0.08) !important; | |
| } | |
| .nav-dropdown:hover > button::after { | |
| transform: translateX(-50%) scaleX(1); | |
| } | |
| .nav-submenu { | |
| position: absolute; | |
| top: calc(100% + 4px); | |
| left: 0; | |
| min-width: 200px; | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-xl); | |
| padding: 6px; | |
| display: none; | |
| z-index: 1000; | |
| border: 1px solid var(--gray-100); | |
| } | |
| .nav-dropdown:hover .nav-submenu { | |
| display: block; | |
| animation: dropdownFade 0.15s ease-out; | |
| } | |
| @keyframes dropdownFade { | |
| from { opacity: 0; transform: translateY(-4px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .nav-submenu::before { | |
| content: ''; | |
| position: absolute; | |
| top: -6px; | |
| left: 0; | |
| right: 0; | |
| height: 6px; | |
| } | |
| .nav-submenu button { | |
| display: block !important; | |
| width: 100% !important; | |
| padding: 10px 14px !important; | |
| background: var(--white) !important; | |
| border: none !important; | |
| border-radius: var(--radius-sm) !important; | |
| color: var(--wvu-navy) !important; | |
| font-family: inherit !important; | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| text-align: left !important; | |
| cursor: pointer !important; | |
| transition: all var(--transition-fast) !important; | |
| } | |
| .nav-submenu button:hover { | |
| background: var(--wvu-gold) !important; | |
| color: var(--wvu-navy) !important; | |
| } | |
| /* ======================================================================= | |
| SELECTION OPTIONS (Header controls) | |
| ======================================================================= */ | |
| #selection_options { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| height: 100%; | |
| padding: 10px 0; | |
| } | |
| #selection_options > div > div { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| #selection_options .form-group { | |
| margin: 0 !important; | |
| } | |
| #selection_options .control-label { | |
| font-size: 10px !important; | |
| font-weight: 600 !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.5px !important; | |
| color: rgba(255, 255, 255, 0.6) !important; | |
| margin-bottom: 4px !important; | |
| display: block !important; | |
| } | |
| /* ======================================================================= | |
| FORM CONTROLS | |
| ======================================================================= */ | |
| .form-control, .selectize-input { | |
| border: 1.5px solid var(--gray-200) !important; | |
| border-radius: var(--radius-md) !important; | |
| padding: 9px 12px !important; | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| background: var(--white) !important; | |
| color: var(--gray-800) !important; | |
| transition: all var(--transition-fast) !important; | |
| box-shadow: var(--shadow-xs) !important; | |
| } | |
| .form-control:focus, .selectize-input.focus { | |
| border-color: var(--wvu-navy) !important; | |
| box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.1), var(--shadow-xs) !important; | |
| outline: none !important; | |
| } | |
| .selectize-input { | |
| min-height: 40px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| } | |
| .selectize-dropdown { | |
| border: 1px solid var(--gray-200) !important; | |
| border-radius: var(--radius-lg) !important; | |
| box-shadow: var(--shadow-lg) !important; | |
| margin-top: 4px !important; | |
| background: var(--white) !important; | |
| overflow: hidden; | |
| } | |
| .selectize-dropdown-content { | |
| max-height: 280px !important; | |
| padding: 6px !important; | |
| } | |
| .selectize-dropdown .option { | |
| padding: 10px 12px !important; | |
| border-radius: var(--radius-sm) !important; | |
| margin: 2px 0 !important; | |
| font-weight: 500 !important; | |
| color: var(--gray-700) !important; | |
| transition: all var(--transition-fast) !important; | |
| } | |
| .selectize-dropdown .option:hover, | |
| .selectize-dropdown .option.active { | |
| background: var(--gray-100) !important; | |
| color: var(--wvu-navy) !important; | |
| } | |
| .selectize-dropdown .option.selected { | |
| background: var(--wvu-navy) !important; | |
| color: var(--white) !important; | |
| } | |
| .control-label { | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| font-size: 13px !important; | |
| font-weight: 600 !important; | |
| color: var(--gray-600) !important; | |
| margin-bottom: 6px !important; | |
| display: block !important; | |
| } | |
| input[type='number'] { | |
| font-family: 'JetBrains Mono', monospace !important; | |
| } | |
| /* ======================================================================= | |
| BUTTONS | |
| ======================================================================= */ | |
| .btn { | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| font-weight: 600 !important; | |
| border-radius: var(--radius-md) !important; | |
| padding: 10px 18px !important; | |
| transition: all var(--transition-fast) !important; | |
| cursor: pointer !important; | |
| } | |
| .btn-primary { | |
| background: var(--wvu-navy) !important; | |
| border: none !important; | |
| color: var(--white) !important; | |
| box-shadow: var(--shadow-sm) !important; | |
| } | |
| .btn-primary:hover { | |
| background: var(--wvu-navy-light) !important; | |
| transform: translateY(-1px) !important; | |
| box-shadow: var(--shadow-md) !important; | |
| } | |
| .btn-default { | |
| background: var(--white) !important; | |
| color: var(--gray-700) !important; | |
| border: 1.5px solid var(--gray-200) !important; | |
| } | |
| .btn-default:hover { | |
| border-color: var(--gray-300) !important; | |
| background: var(--gray-50) !important; | |
| } | |
| .btn-default.shiny-download-link { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| gap: 6px !important; | |
| } | |
| /* ======================================================================= | |
| MAIN CONTENT | |
| ======================================================================= */ | |
| #main_content { | |
| padding: 28px !important; | |
| background: var(--gray-50) !important; | |
| min-height: calc(100vh - 60px) !important; | |
| } | |
| .well, .panel { | |
| background: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| } | |
| /* ======================================================================= | |
| PLOTS | |
| ======================================================================= */ | |
| .shiny-plot-output { | |
| background: var(--white); | |
| border-radius: 0; | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| } | |
| .plotly { | |
| border-radius: 0; | |
| overflow: hidden; | |
| } | |
| /* ======================================================================= | |
| DATA TABLES - Styled to match GT tables with WVU branding | |
| ======================================================================= */ | |
| .dataTables_wrapper { | |
| padding: 20px; | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid var(--wvu-navy); | |
| } | |
| .dataTables_wrapper .dataTables_length, | |
| .dataTables_wrapper .dataTables_filter, | |
| .dataTables_wrapper .dataTables_info, | |
| .dataTables_wrapper .dataTables_paginate { | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| font-size: 13px; | |
| color: var(--wvu-navy); | |
| } | |
| .dataTables_wrapper .dataTables_length select { | |
| border: 1px solid var(--wvu-navy) !important; | |
| border-radius: var(--radius-sm) !important; | |
| padding: 4px 8px !important; | |
| color: var(--wvu-navy) !important; | |
| } | |
| .dataTables_wrapper .dataTables_filter input { | |
| border: 1.5px solid var(--wvu-navy); | |
| border-radius: var(--radius-md); | |
| padding: 8px 12px; | |
| margin-left: 8px; | |
| transition: all var(--transition-fast); | |
| color: var(--wvu-navy); | |
| } | |
| .dataTables_wrapper .dataTables_filter input:focus { | |
| border-color: var(--wvu-gold); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(234, 170, 0, 0.2); | |
| } | |
| .dataTable { | |
| border-collapse: collapse !important; | |
| border-spacing: 0 !important; | |
| width: 100% !important; | |
| border: 1px solid var(--wvu-navy) !important; | |
| } | |
| .dataTable thead th { | |
| background: var(--wvu-gold) !important; | |
| color: var(--wvu-navy) !important; | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| font-size: 12px !important; | |
| font-weight: 700 !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.3px !important; | |
| padding: 12px 14px !important; | |
| border: 0.5px solid var(--wvu-navy) !important; | |
| text-align: center !important; | |
| } | |
| .dataTable thead th:first-child { | |
| border-radius: 0 !important; | |
| } | |
| .dataTable thead th:last-child { | |
| border-radius: 0 !important; | |
| } | |
| /* Sorting icons styling */ | |
| .dataTable thead th.sorting, | |
| .dataTable thead th.sorting_asc, | |
| .dataTable thead th.sorting_desc { | |
| background: var(--wvu-gold) !important; | |
| color: var(--wvu-navy) !important; | |
| } | |
| .dataTable thead th.sorting:after, | |
| .dataTable thead th.sorting_asc:after, | |
| .dataTable thead th.sorting_desc:after { | |
| color: var(--wvu-navy) !important; | |
| opacity: 0.7; | |
| } | |
| .dataTable tbody td { | |
| padding: 10px 14px !important; | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| font-size: 13px !important; | |
| border: 0.5px solid var(--wvu-navy) !important; | |
| color: var(--wvu-navy) !important; | |
| text-align: center !important; | |
| } | |
| .dataTable tbody tr:hover td { | |
| background: rgba(234, 170, 0, 0.1) !important; | |
| } | |
| .dataTable tbody tr:last-child td:first-child { | |
| border-radius: 0; | |
| } | |
| .dataTable tbody tr:last-child td:last-child { | |
| border-radius: 0; | |
| } | |
| /* Filter inputs in header row */ | |
| .dataTable thead input, | |
| .dataTable thead select { | |
| border: 1px solid var(--wvu-navy) !important; | |
| border-radius: var(--radius-sm) !important; | |
| padding: 4px 6px !important; | |
| font-size: 11px !important; | |
| color: var(--wvu-navy) !important; | |
| background: var(--white) !important; | |
| width: 100% !important; | |
| margin-top: 4px !important; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button { | |
| border-radius: var(--radius-sm) !important; | |
| padding: 6px 12px !important; | |
| margin: 0 2px !important; | |
| border: 1px solid var(--wvu-navy) !important; | |
| font-weight: 500 !important; | |
| transition: all var(--transition-fast) !important; | |
| color: var(--wvu-navy) !important; | |
| background: var(--white) !important; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button:hover { | |
| background: var(--wvu-gold) !important; | |
| color: var(--wvu-navy) !important; | |
| border-color: var(--wvu-navy) !important; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button.current { | |
| background: var(--wvu-gold) !important; | |
| color: var(--wvu-navy) !important; | |
| font-weight: 700 !important; | |
| border-color: var(--wvu-navy) !important; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { | |
| color: var(--gray-400) !important; | |
| background: var(--gray-100) !important; | |
| border-color: var(--gray-300) !important; | |
| } | |
| /* ======================================================================= | |
| GT TABLES - Updated to match DataTable styling | |
| ======================================================================= */ | |
| .gt_table { | |
| border-radius: 0 !important; | |
| overflow: hidden !important; | |
| box-shadow: var(--shadow-sm) !important; | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| border: 1px solid var(--wvu-navy) !important; | |
| } | |
| /* ======================================================================= | |
| LAYOUT | |
| ======================================================================= */ | |
| .row { | |
| margin-left: -14px !important; | |
| margin-right: -14px !important; | |
| } | |
| .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, | |
| .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { | |
| padding-left: 14px !important; | |
| padding-right: 14px !important; | |
| } | |
| /* ======================================================================= | |
| ANIMATIONS | |
| ======================================================================= */ | |
| .shiny-bound-output { | |
| animation: contentFade 0.25s ease-out; | |
| } | |
| @keyframes contentFade { | |
| from { opacity: 0; transform: translateY(6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ======================================================================= | |
| RESPONSIVE | |
| ======================================================================= */ | |
| @media (max-width: 1200px) { | |
| .navbar-main { | |
| padding: 0 16px; | |
| } | |
| #main_content { | |
| padding: 20px !important; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .nav-dropdown > button { | |
| padding: 0 12px !important; | |
| font-size: 13px !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .navbar-main { | |
| flex-direction: column; | |
| height: auto; | |
| padding: 12px; | |
| } | |
| .nav-left { | |
| width: 100%; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 0; | |
| } | |
| #selection_options { | |
| width: 100%; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding: 12px 0; | |
| } | |
| #main_content { | |
| padding: 16px !important; | |
| } | |
| } | |
| /* ======================================================================= | |
| SCROLLBAR | |
| ======================================================================= */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--gray-100); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gray-300); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--gray-400); | |
| } | |
| ")) | |
| ), | |
| uiOutput("login_ui"), | |
| uiOutput("app_ui") | |
| ) | |