Skip to content

Commit b2eb60c

Browse files
JManion32JManion32
authoredMar 21, 2025··
[Refactor:System] Remove DockerUI CSS Redundancies (#11500)
### What is the current behavior? <!-- List issue if it fixes/closes/implements one using the "Fixes #<number>" or "Closes #<number>" syntax --> In server.css, there is 40 CSS classes (20 light mode, 20 dark mode) being created for badges in DockerUI. Each class shares several attributes, leading to redundant code. ### What is the new behavior? Refactored the CSS by applying shared attributes to all badge classes simultaneously, reducing redundancy and improving maintainability. Removed the dark mode classes since the category colors automatically update in colors.css and the contrast was low. Old: ![docker main dm](https://github.com/user-attachments/assets/a91a665a-6b9c-41b5-983b-17346d819086) New: ![docker dm](https://github.com/user-attachments/assets/362bead9-6a02-4f7b-ab85-2ed0e62c2b9c)
1 parent e8b4a84 commit b2eb60c

File tree

1 file changed

+7
-258
lines changed

1 file changed

+7
-258
lines changed
 

‎site/public/css/server.css

+7-258
Original file line numberDiff line numberDiff line change
@@ -2089,345 +2089,94 @@ input:checked + .slider::after {
20892089
End of slider switch
20902090
*/
20912091

2092-
.badge-1 {
2093-
background-color: var(--category-color-1);
2092+
.badge-1, .badge-2, .badge-3, .badge-4, .badge-5, .badge-6, .badge-7,
2093+
.badge-8, .badge-9, .badge-10, .badge-11, .badge-12, .badge-13, .badge-14,
2094+
.badge-15, .badge-16, .badge-17, .badge-18, .badge-19, .badge-20 {
20942095
color: var(--text-black);
20952096
min-width: 10px;
20962097
float: none;
20972098
}
20982099

2100+
.badge-1 {
2101+
background-color: var(--category-color-1);
2102+
}
2103+
20992104
.badge-2 {
21002105
background-color: var(--category-color-2);
2101-
color: var(--text-black);
2102-
min-width: 10px;
2103-
float: none;
21042106
}
21052107

21062108
.badge-3 {
21072109
background-color: var(--category-color-3);
2108-
color: var(--text-black);
2109-
min-width: 10px;
2110-
float: none;
21112110
}
21122111

21132112
.badge-4 {
21142113
background-color: var(--category-color-4);
2115-
color: var(--text-black);
2116-
min-width: 10px;
2117-
float: none;
21182114
}
21192115

21202116
.badge-5 {
21212117
background-color: var(--category-color-5);
2122-
color: var(--text-black);
2123-
min-width: 10px;
2124-
float: none;
21252118
}
21262119

21272120
.badge-6 {
21282121
background-color: var(--category-color-6);
2129-
color: var(--text-black);
2130-
min-width: 10px;
2131-
float: none;
21322122
}
21332123

21342124
.badge-7 {
21352125
background-color: var(--category-color-7);
2136-
color: var(--text-black);
2137-
min-width: 10px;
2138-
float: none;
21392126
}
21402127

21412128
.badge-8 {
21422129
background-color: var(--category-color-8);
2143-
color: var(--text-black);
2144-
min-width: 10px;
2145-
float: none;
21462130
}
21472131

21482132
.badge-9 {
21492133
background-color: var(--category-color-9);
2150-
color: var(--text-black);
2151-
min-width: 10px;
2152-
float: none;
21532134
}
21542135

21552136
.badge-10 {
21562137
background-color: var(--category-color-10);
2157-
color: var(--text-black);
2158-
min-width: 10px;
2159-
float: none;
21602138
}
21612139

21622140
.badge-11 {
21632141
background-color: var(--category-color-11);
2164-
color: var(--text-black);
2165-
min-width: 10px;
2166-
float: none;
21672142
}
21682143

21692144
.badge-12 {
21702145
background-color: var(--category-color-12);
2171-
color: var(--text-black);
2172-
min-width: 10px;
2173-
float: none;
21742146
}
21752147

21762148
.badge-13 {
21772149
background-color: var(--category-color-13);
2178-
color: var(--text-black);
2179-
min-width: 10px;
2180-
float: none;
21812150
}
21822151

21832152
.badge-14 {
21842153
background-color: var(--category-color-14);
2185-
color: var(--text-black);
2186-
min-width: 10px;
2187-
float: none;
21882154
}
21892155

21902156
.badge-15 {
21912157
background-color: var(--category-color-15);
2192-
color: var(--text-black);
2193-
min-width: 10px;
2194-
float: none;
21952158
}
21962159

21972160
.badge-16 {
21982161
background-color: var(--category-color-16);
2199-
color: var(--text-black);
2200-
min-width: 10px;
2201-
float: none;
22022162
}
22032163

22042164
.badge-17 {
22052165
background-color: var(--category-color-17);
2206-
color: var(--text-black);
2207-
min-width: 10px;
2208-
float: none;
22092166
}
22102167

22112168
.badge-18 {
22122169
background-color: var(--category-color-18);
2213-
color: var(--text-black);
2214-
min-width: 10px;
2215-
float: none;
22162170
}
22172171

22182172
.badge-19 {
22192173
background-color: var(--category-color-19);
2220-
color: var(--text-black);
2221-
min-width: 10px;
2222-
float: none;
22232174
}
22242175

22252176
.badge-20 {
22262177
background-color: var(--category-color-20);
2227-
color: var(--text-black);
2228-
min-width: 10px;
2229-
float: none;
2230-
}
2231-
2232-
[data-theme="dark"] .badge-1 {
2233-
color: var(--category-color-1);
2234-
border-color: var(--category-color-1);
2235-
background-color: transparent;
2236-
border-width: 1px;
2237-
border-style: solid;
2238-
min-width: 10px;
2239-
float: none;
2240-
}
2241-
2242-
[data-theme="dark"] .badge-2 {
2243-
color: var(--category-color-2);
2244-
border-color: var(--category-color-2);
2245-
background-color: transparent;
2246-
border-width: 1px;
2247-
border-style: solid;
2248-
min-width: 10px;
2249-
float: none;
2250-
}
2251-
2252-
[data-theme="dark"] .badge-3 {
2253-
color: var(--category-color-3);
2254-
border-color: var(--category-color-3);
2255-
background-color: transparent;
2256-
border-width: 1px;
2257-
border-style: solid;
2258-
min-width: 10px;
2259-
float: none;
2260-
}
2261-
2262-
[data-theme="dark"] .badge-4 {
2263-
color: var(--category-color-4);
2264-
border-color: var(--category-color-4);
2265-
background-color: transparent;
2266-
border-width: 1px;
2267-
border-style: solid;
2268-
min-width: 10px;
2269-
float: none;
2270-
}
2271-
2272-
[data-theme="dark"] .badge-5 {
2273-
color: var(--category-color-5);
2274-
border-color: var(--category-color-5);
2275-
background-color: transparent;
2276-
border-width: 1px;
2277-
border-style: solid;
2278-
min-width: 10px;
2279-
float: none;
2280-
}
2281-
2282-
[data-theme="dark"] .badge-6 {
2283-
color: var(--category-color-6);
2284-
border-color: var(--category-color-6);
2285-
background-color: transparent;
2286-
border-width: 1px;
2287-
border-style: solid;
2288-
min-width: 10px;
2289-
float: none;
2290-
}
2291-
2292-
[data-theme="dark"] .badge-7 {
2293-
color: var(--category-color-7);
2294-
border-color: var(--category-color-7);
2295-
background-color: transparent;
2296-
border-width: 1px;
2297-
border-style: solid;
2298-
min-width: 10px;
2299-
float: none;
2300-
}
2301-
2302-
[data-theme="dark"] .badge-8 {
2303-
color: var(--category-color-8);
2304-
border-color: var(--category-color-8);
2305-
background-color: transparent;
2306-
border-width: 1px;
2307-
border-style: solid;
2308-
min-width: 10px;
2309-
float: none;
2310-
}
2311-
2312-
[data-theme="dark"] .badge-9 {
2313-
color: var(--category-color-9);
2314-
border-color: var(--category-color-9);
2315-
background-color: transparent;
2316-
border-width: 1px;
2317-
border-style: solid;
2318-
min-width: 10px;
2319-
float: none;
2320-
}
2321-
2322-
[data-theme="dark"] .badge-10 {
2323-
color: var(--category-color-10);
2324-
border-color: var(--category-color-10);
2325-
background-color: transparent;
2326-
border-width: 1px;
2327-
border-style: solid;
2328-
min-width: 10px;
2329-
float: none;
23302178
}
23312179

2332-
[data-theme="dark"] .badge-11 {
2333-
color: var(--category-color-11);
2334-
border-color: var(--category-color-11);
2335-
background-color: transparent;
2336-
border-width: 1px;
2337-
border-style: solid;
2338-
min-width: 10px;
2339-
float: none;
2340-
}
2341-
2342-
[data-theme="dark"] .badge-12 {
2343-
color: var(--category-color-12);
2344-
border-color: var(--category-color-12);
2345-
background-color: transparent;
2346-
border-width: 1px;
2347-
border-style: solid;
2348-
min-width: 10px;
2349-
float: none;
2350-
}
2351-
2352-
[data-theme="dark"] .badge-13 {
2353-
color: var(--category-color-13);
2354-
border-color: var(--category-color-13);
2355-
background-color: transparent;
2356-
border-width: 1px;
2357-
border-style: solid;
2358-
min-width: 10px;
2359-
float: none;
2360-
}
2361-
2362-
[data-theme="dark"] .badge-14 {
2363-
color: var(--category-color-14);
2364-
border-color: var(--category-color-14);
2365-
background-color: transparent;
2366-
border-width: 1px;
2367-
border-style: solid;
2368-
min-width: 10px;
2369-
float: none;
2370-
}
2371-
2372-
[data-theme="dark"] .badge-15 {
2373-
color: var(--category-color-15);
2374-
border-color: var(--category-color-15);
2375-
background-color: transparent;
2376-
border-width: 1px;
2377-
border-style: solid;
2378-
min-width: 10px;
2379-
float: none;
2380-
}
2381-
2382-
[data-theme="dark"] .badge-16 {
2383-
color: var(--category-color-16);
2384-
border-color: var(--category-color-16);
2385-
background-color: transparent;
2386-
border-width: 1px;
2387-
border-style: solid;
2388-
min-width: 10px;
2389-
float: none;
2390-
}
2391-
2392-
[data-theme="dark"] .badge-17 {
2393-
color: var(--category-color-17);
2394-
border-color: var(--category-color-17);
2395-
background-color: transparent;
2396-
border-width: 1px;
2397-
border-style: solid;
2398-
min-width: 10px;
2399-
float: none;
2400-
}
2401-
2402-
[data-theme="dark"] .badge-18 {
2403-
color: var(--category-color-18);
2404-
border-color: var(--category-color-18);
2405-
background-color: transparent;
2406-
border-width: 1px;
2407-
border-style: solid;
2408-
min-width: 10px;
2409-
float: none;
2410-
}
2411-
2412-
[data-theme="dark"] .badge-19 {
2413-
color: var(--category-color-19);
2414-
border-color: var(--category-color-19);
2415-
background-color: transparent;
2416-
border-width: 1px;
2417-
border-style: solid;
2418-
min-width: 10px;
2419-
float: none;
2420-
}
2421-
2422-
[data-theme="dark"] .badge-20 {
2423-
color: var(--category-color-20);
2424-
border-color: var(--category-color-20);
2425-
background-color: transparent;
2426-
border-width: 1px;
2427-
border-style: solid;
2428-
min-width: 10px;
2429-
float: none;
2430-
}
24312180
/* stylelint-enable no-descending-specificity */
24322181

24332182
.notebook-output-cell-content {

0 commit comments

Comments
 (0)
Please sign in to comment.