Spaces:
Sleeping
Sleeping
:root { | |
--ntu-blue: #003D7C; | |
--ntu-red: #C11E38; | |
--ntu-gold: #E7B820; | |
--light-blue: #E6F3FF; | |
--white: #FFFFFF; | |
--light-gray: #F0F0F0; | |
/* Core Sizing */ | |
--spacing-sm: 4px; | |
--spacing-md: 8px; | |
--spacing-lg: 16px; | |
--radius-sm: 4px; | |
--radius-md: 8px; | |
--radius-lg: 12px; | |
} | |
body { | |
font-family: 'Arial', sans-serif; | |
background-color: var(--light-blue); | |
color: var(--ntu-blue); | |
} | |
.gradio-container { | |
max-width: 1200px; | |
margin: 0 auto; | |
} | |
.app-title { | |
color: var(--ntu-blue); | |
font-size: 24px; | |
font-weight: bold; | |
text-align: center; | |
margin-bottom: 20px; | |
} | |
.gr-button-primary { | |
background-color: var(--ntu-red); | |
color: var(--white); | |
border: none; | |
border-radius: var(--radius-lg); | |
padding: var(--spacing-md) var(--spacing-lg); | |
font-size: 16px; | |
font-weight: bold; | |
cursor: pointer; | |
transition: background-color 0.3s, transform 0.1s; | |
} | |
.gr-button-primary:hover { | |
background-color: #A5192F; /* Darker red on hover */ | |
color: var(--white); | |
} | |
.gr-button-primary:active { | |
transform: translateY(1px); | |
} | |
.gr-form { | |
background-color: var(--white); | |
border: 1px solid var(--ntu-blue); | |
border-radius: var(--radius-lg); | |
padding: var(--spacing-lg); | |
} | |
.gr-box, .gr-input, .gr-file-drop { | |
background-color: var(--white); | |
border: 1px solid var(--ntu-blue); | |
border-radius: var(--radius-md); | |
padding: var(--spacing-md); | |
} | |
.gr-input:focus, .gr-file-drop:hover { | |
border-color: var(--ntu-red); | |
outline: none; | |
} | |
.gr-panel { | |
background-color: var(--light-gray); | |
border: 1px solid var(--ntu-blue); | |
border-radius: var(--radius-lg); | |
padding: var(--spacing-lg); | |
} | |
.gr-box { | |
background-color: var(--white); | |
border: 1px solid var(--ntu-blue); | |
border-radius: var(--radius-md); | |
padding: var(--spacing-md); | |
} | |
.gr-form { | |
background-color: var(--white); | |
border-radius: var(--radius-lg); | |
padding: var(--spacing-lg); | |
} | |
.gr-block-label { | |
color: var(--ntu-blue); | |
font-weight: bold; | |
} | |
.tabs { | |
border-bottom: 2px solid var(--ntu-blue); | |
margin-bottom: 20px; | |
} | |
.tab-nav { | |
background-color: var(--white); | |
border: 1px solid var(--ntu-blue); | |
border-bottom: none; | |
padding: var(--spacing-md) var(--spacing-lg); | |
margin-right: 5px; | |
border-radius: var(--radius-md) var(--radius-md) 0 0; | |
color: var(--ntu-blue); | |
font-weight: bold; | |
transition: background-color 0.3s, color 0.3s; | |
} | |
.tab-nav:hover, .tab-nav.selected { | |
background-color: var(--ntu-blue); | |
color: var(--white); | |
} | |
.gr-file-drop { | |
border: 2px dashed var(--ntu-blue); | |
background-color: var(--light-blue); | |
transition: border-color 0.3s, background-color 0.3s; | |
} | |
.gr-file-drop:hover { | |
border-color: var(--ntu-red); | |
background-color: var(--white); | |
} | |
.gr-file-drop .icon { | |
color: var(--ntu-gold); | |
} | |
.gr-file-drop:hover .icon { | |
color: var(--ntu-red); | |
} | |
/* Ensure text is always legible on hover */ | |
.gr-button-primary:hover, | |
.tab-nav:hover, | |
.gr-file-drop:hover { | |
color: var(--white); | |
text-shadow: 1px 1px 2px rgba(0,0,0,0.2); | |
} | |
.gr-button-secondary { | |
background-color: var(--light-gray); | |
color: var(--ntu-blue); | |
border: 1px solid var(--ntu-blue); | |
border-radius: var(--radius-lg); | |
padding: var(--spacing-md) var(--spacing-lg); | |
font-size: 16px; | |
font-weight: bold; | |
cursor: pointer; | |
transition: background-color 0.3s, color 0.3s, border-color 0.3s; | |
} | |
.gr-button-secondary:hover { | |
background-color: var(--ntu-blue); | |
color: var(--white); | |
border-color: var(--ntu-blue); | |
} | |
.gr-button-secondary:active { | |
transform: translateY(1px); | |
} |