diff --git a/Kuma-Style-RepTV-2025-08-05.css.css b/Kuma-Style-RepTV-2025-08-05.css.css new file mode 100644 index 0000000..3d4a0aa --- /dev/null +++ b/Kuma-Style-RepTV-2025-08-05.css.css @@ -0,0 +1,224 @@ +@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap'); +.overall-status { + background-color: #00000025!important; +} + +html { + background-color: #000000!important; +} +.main { + background-color: #000000!important; +} +.monitor-list.shadow-box { + background: none!important; +} +.container { + background-color: #000000!important; +} + +h1 { + font-family: "Comfortaa"!important; + color: #FFFFFF +} + +.title-flex > span { + font-family: "Comfortaa"!important; + color: #FFFFFF +} + +* { + font-family: Comfortaa!important; + color: #FFFFFF +} + +:root { + --min-item-width: 28ch; + --max-item-width: .5fr; + --grid-spacing: .25rem; + --item-padding: .25rem; +} + +/* Let items expand on small screens */ +@media (max-width: 600px) { + :root { + --max-item-width: 1fr; + } +} + +/* Cap item width for better appearance on large screens */ +@media (min-width: 2560px) { + :root { + --max-item-width: 300px; + } +} + +/* Readability on 4K screens at distance */ +@media (min-width: 3840px) { + .item-name { + font-size 1.3em; + font-weight: 700; + letter-spacing: 0.8px; + } + .badge { + font-size: .9em; + } + .wrap > .d-flex { + font-size: .9em; + font-weight: 500; + letter-spacing: .8px; + } +} + +/* Expand container */ +.container { + max-width: 100% +} + +/* Grid layout */ +.monitor-list > .monitor-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width))); + grid-gap: var(--grid-spacing); +} + +.item { + width: 100%; + padding: var(--item-padding) !important; + border: #3d3d3d solid 2px; +} + +.item > .row { + flex-direction: column; +} + +.row > div { + width: 100%; +} + +/* Text readability */ +.item-name { + color: #f1f1f1; +} + +/* Badge movement */ +.row { + position: relative; +} +body:not(.mobile) .badge { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +/* Header compacting */ +.main { + position: relative; +} +.overall-status { + padding: .5rem !important; +} +body:not(.mobile) .overall-status { + position: absolute; + top: 0; + right: 0; + width: 50%; +} + +/* Tweaks for mobile size */ +body.mobile {} + +/* Footer compacting */ +footer .alert-heading { + padding: 0 !important; +} + +/* Margin resets */ +.mb-4, .mb-5 { + margin-bottom: .5rem !important; +} + +.mt-4 { + margin-top: .5rem !important; +} + +.mt-5 { + margin-top: 0 !important; +} + + +/* Reduce glaring blue maintenance color */ +.bg-maintenance { + background-color: #4962bd !important; +} + +.rounded-pill { + display: none!important; +} + +html { + background-image: url(https://res.tyleo.dev/backgrounds/web/webpack_rep.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-color: #000000; +} + +.title-flex { + background: none!important; +} +.item { + border: none!important; +} +.mb-4 { + background: none!important; +} +.main { + background: none!important; +} + +h1 { + background: none!important; +} +.container { + background: none!important; +} +.mt-3 { + background: none!important; +} +.beat-hover-area.empty { + display: none!important; +} +.title-flex { + background: none!important; +} +.mt-3 { + background: none!important; +} +.dark { + background: none!important; +} + +.item:hover { + border: none!important; + background: none!important; +} + +.btn { + background: none!important; + border-width: 3px!important; + border-color: #222222!important; + color: #FFFFFF!important; +} + +.btn:hover { + background: none!important; + border-width: 3px!important; + border-color: #555555!important; + color: #FFFFFF!important; +} + +.incident { + color: #FFFFFF!important; +} \ No newline at end of file