File size: 4,032 Bytes
a0debed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
/* ---------- Proportio Minimal Theme ---------- */
:root{
--primary: #7c1212;
--secondary: #a10907;
--accent: #8f9190;
}
/* Logo visibility and alignment fix */
.gradio-row {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.gradio-column {
display: flex !important;
align-items: center !important;
height: auto !important;
}
/* Target the first column (logo) */
.gradio-column:first-child {
justify-content: center !important;
align-items: center !important;
}
/* Target the second column (text) */
.gradio-column:last-child {
justify-content: flex-start !important;
align-items: center !important;
}
.gradio-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.gradio-image img {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure the brand section is vertically centered */
.p-brand {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.p-title {
margin: 0 !important;
line-height: 1.2 !important;
}
.p-tagline {
margin: 0 !important;
line-height: 1.2 !important;
}
/* Override blue colors with primary red */
.gradio-tabs button {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
}
.gradio-tabs button:hover {
background-color: var(--secondary) !important;
border-color: var(--secondary) !important;
}
.gradio-tabs button[aria-selected="true"] {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: var(--accent) !important;
}
.gradio-tabs button[aria-selected="true"] span {
color: var(--accent) !important;
}
/* Override any blue accents */
.tab-nav button {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
}
/* Target selected tab text colors */
button[role="tab"][aria-selected="true"] {
color: var(--accent) !important;
}
button[role="tab"][aria-selected="true"] span {
color: var(--accent) !important;
}
/* Override blue text in tabs */
.gradio-tabs button span {
color: var(--accent) !important;
}
/* Override blue underlines/borders on selected tabs */
.gradio-tabitem,
.gradio-tabs .tab-nav button[aria-selected="true"]::after,
.gradio-tabs button[aria-selected="true"]::after,
button[role="tab"][aria-selected="true"]::after {
border-bottom-color: var(--secondary) !important;
background-color: var(--secondary) !important;
}
/* Target the tab indicator line - more specific selectors */
.gradio-tabs .tab-nav .tab-indicator,
.gradio-tabs .selected-tab-indicator,
.gradio-tabs button[aria-selected="true"] + .tab-indicator,
.gradio-tabs button[aria-selected="true"]::before,
.gradio-tabs button[data-selected="true"]::before,
div[role="tablist"] button[aria-selected="true"]::before,
div[role="tablist"] button[aria-selected="true"]::after,
.gradio-tabs .tab-nav button::before,
.gradio-tabs .tab-nav button::after {
background-color: var(--secondary) !important;
border-color: var(--secondary) !important;
background: var(--secondary) !important;
}
/* Override any remaining blue accents - comprehensive approach */
.gradio-tabs button[aria-selected="true"] {
border-bottom: 2px solid var(--secondary) !important;
box-shadow: inset 0 -2px 0 var(--secondary) !important;
}
/* Target Gradio's internal tab styling */
.gradio-tabs button[data-selected="true"],
button[role="tab"][data-selected="true"] {
border-bottom-color: var(--secondary) !important;
box-shadow: inset 0 -2px 0 var(--secondary) !important;
}
/* Override blue focus states */
.gradio-tabs button:focus {
outline-color: var(--secondary) !important;
border-color: var(--secondary) !important;
} |