From 2fa0ff29dc261493306453cb5237fad6ddbacaa8 Mon Sep 17 00:00:00 2001 From: RanXom Date: Fri, 12 Jun 2026 01:01:44 +0530 Subject: [PATCH 1/2] style(cses): add transparency and color changes for dark mode --- websites/cses.fi.css | 100 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 websites/cses.fi.css diff --git a/websites/cses.fi.css b/websites/cses.fi.css new file mode 100644 index 00000000..bf6143c5 --- /dev/null +++ b/websites/cses.fi.css @@ -0,0 +1,100 @@ +/* cses-background */ +html, +body { + background: transparent !important; +} + +/* cses-header */ +.header { + background: rgba(10, 10, 10, 0.35) !important; + + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + + border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; + + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important; +} + +/* cses-main-content */ +.content { + background: rgba(15, 15, 15, 0.45) !important; + + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + + border: 1px solid rgba(255, 255, 255, 0.06) !important; + + border-radius: 12px !important; +} + +/* cses-sidebar */ +.sidebar { + background: rgba(15, 15, 15, 0.55) !important; + + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + + border: 1px solid rgba(255, 255, 255, 0.06) !important; + + border-radius: 12px !important; +} + +/* cses-homepage-cards */ +.boxes > div { + background: rgba(15, 15, 15, 0.45) !important; + + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + + border-radius: 12px !important; + + border: 1px solid rgba(255, 255, 255, 0.06) !important; +} + +/* cses-task-rows */ +.task-list li { + transition: + background-color 150ms ease, + transform 150ms ease !important; +} + +.task-list li:hover { + background: rgba(255, 255, 255, 0.06) !important; +} + +/* cses-navigation */ +.nav a { + transition: opacity 150ms ease !important; +} + +.nav a:hover { + opacity: 1 !important; +} + +/* cses-forms */ +input[type="text"], +input[type="password"], +textarea, +select { + background: rgba(20, 20, 20, 0.35) !important; + + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + + border: 1px solid rgba(255, 255, 255, 0.08) !important; +} + +/* cses-tables */ +table { + background: transparent !important; +} + +tbody tr:nth-child(even) { + background: rgba(255, 255, 255, 0.03) !important; +} + +/* cses-separators */ +hr { + opacity: 0.25 !important; +} From 531969db39321d7053c0fa5745cbe91de061182c Mon Sep 17 00:00:00 2001 From: RanXom Date: Fri, 12 Jun 2026 01:27:58 +0530 Subject: [PATCH 2/2] style(cses): margin and padding overhaul and force dark reader --- websites/cses.fi.css | 133 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 108 insertions(+), 25 deletions(-) diff --git a/websites/cses.fi.css b/websites/cses.fi.css index bf6143c5..7f0a20f3 100644 --- a/websites/cses.fi.css +++ b/websites/cses.fi.css @@ -2,9 +2,35 @@ html, body { background: transparent !important; + color-scheme: dark !important; } -/* cses-header */ +/* global text */ +body, +p, +li, +td, +th, +h1, +h2, +h3, +h4, +label, +strong, +b { + color: #e8e8e8 !important; +} + +/* links */ +a { + color: #6fb4ff !important; +} + +a:hover { + color: #8fc7ff !important; +} + +/* header */ .header { background: rgba(10, 10, 10, 0.35) !important; @@ -16,8 +42,9 @@ body { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important; } -/* cses-main-content */ -.content { +/* content containers */ +.content, +.boxes > div { background: rgba(15, 15, 15, 0.45) !important; backdrop-filter: blur(12px) !important; @@ -26,9 +53,11 @@ body { border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 12px !important; + + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } -/* cses-sidebar */ +/* sidebar */ .sidebar { background: rgba(15, 15, 15, 0.55) !important; @@ -38,21 +67,34 @@ body { border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 12px !important; + + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; + + margin-left: 1rem !important; } -/* cses-homepage-cards */ -.boxes > div { - background: rgba(15, 15, 15, 0.45) !important; +/* breathing room */ +.nav { + margin-top: 0.75rem !important; + margin-bottom: 1.25rem !important; +} - backdrop-filter: blur(12px) !important; - -webkit-backdrop-filter: blur(12px) !important; +.content { + margin-top: 1rem !important; +} - border-radius: 12px !important; +.sidebar { + margin-top: 1rem !important; +} - border: 1px solid rgba(255, 255, 255, 0.06) !important; +/* nav tabs */ +.nav a, +.nav .current { + padding: 0.35rem 0.75rem !important; + border-radius: 8px !important; } -/* cses-task-rows */ +/* task rows */ .task-list li { transition: background-color 150ms ease, @@ -63,29 +105,59 @@ body { background: rgba(255, 255, 255, 0.06) !important; } -/* cses-navigation */ -.nav a { - transition: opacity 150ms ease !important; -} - -.nav a:hover { - opacity: 1 !important; -} - -/* cses-forms */ +/* inputs */ input[type="text"], input[type="password"], textarea, select { background: rgba(20, 20, 20, 0.35) !important; + color: #e8e8e8 !important; + + border: 1px solid rgba(255, 255, 255, 0.08) !important; + + border-radius: 8px !important; + backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; +} - border: 1px solid rgba(255, 255, 255, 0.08) !important; +/* buttons */ +button, +input[type="submit"], +input[type="button"] { + background: rgba(255, 255, 255, 0.08) !important; + + color: #e8e8e8 !important; + + border: 1px solid rgba(255, 255, 255, 0.12) !important; + + border-radius: 8px !important; + + padding: 0.5rem 1rem !important; + + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + + transition: + background-color 150ms ease, + border-color 150ms ease !important; +} + +button:hover, +input[type="submit"]:hover, +input[type="button"]:hover { + background: rgba(255, 255, 255, 0.14) !important; + + border-color: rgba(255, 255, 255, 0.2) !important; } -/* cses-tables */ +/* file picker */ +input[type="file"] { + color: #e8e8e8 !important; +} + +/* tables */ table { background: transparent !important; } @@ -94,7 +166,18 @@ tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03) !important; } -/* cses-separators */ +th { + background: rgba(255, 255, 255, 0.05) !important; +} + +/* code & examples */ +pre, +code { + background: rgba(255, 255, 255, 0.04) !important; + border-radius: 6px !important; +} + +/* separators */ hr { opacity: 0.25 !important; }