From 09d6313949f3fb390ff871bd6b485053dbe0c700 Mon Sep 17 00:00:00 2001 From: Jacob Coffee Date: Sat, 4 Nov 2023 13:56:02 -0500 Subject: [PATCH] feat: update styling --- litestar_sphinx_theme/style.css | 21 ++++++++++++++----- .../theme/static/litestar-sphinx-theme.css | 2 +- tailwind.config.js | 7 ++++++- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/litestar_sphinx_theme/style.css b/litestar_sphinx_theme/style.css index 634bf11..bcfed80 100644 --- a/litestar_sphinx_theme/style.css +++ b/litestar_sphinx_theme/style.css @@ -1,6 +1,14 @@ @tailwind components; @tailwind utilities; +:root { + --litestar-blue: #202235; + --litestar-gold: #EDB641; + --litestar-yellow: #FFD480; + --litestar-gray: #DCDFE4; + --litestar-light: #ffffff; + --litestar-dark: #202020; +} [aria-expanded="true"] .menu-state-indicator { transform: rotate(-180deg); @@ -10,8 +18,6 @@ transition: transform .2s ease; } - - table.docutils { clear: left; float: left; @@ -21,7 +27,6 @@ table.docutils { /* theme customization */ html[data-theme="dark"] { - --litestar-gray: #DCDFE4; --color-background-primary: #18181b; --color-background-secondary: #27272a; --pst-color-on-background: #27272a; @@ -31,7 +36,6 @@ html[data-theme="dark"] { } html[data-theme="light"] { - --litestar-blue: #202235; --color-background-primary: #f8f9fb; --color-background-secondary: #fff; --pst-color-text-muted: #111827; @@ -41,10 +45,17 @@ html[data-theme="light"] { html[data-theme="light"], html[data-theme="dark"] { --pst-color-background: var(--color-background-primary); - --litestar-gold: #EDB641; --pst-color-primary: var(--litestar-gold); } +html[data-theme="dark"] { + --pst-color-secondary: var(--litestar-light); +} + +html[data-theme="light"] { + --pst-color-secondary: var(--litestar-dark); +} + h1, h2 { color: unset; } diff --git a/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css b/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css index 2c1c8c8..f724ed0 100644 --- a/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css +++ b/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css @@ -1 +1 @@ -.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-left-8{left:-2rem}.top-full{top:100%}.z-10{z-index:10}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-11{height:2.75rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.w-11{width:2.75rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-max{width:-moz-max-content;width:max-content}.max-w-md{max-width:28rem}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.overflow-hidden{overflow:hidden}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:.5rem}.bg-gray-50{background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-50,.bg-white{--tw-bg-opacity:1}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-2{padding:.5rem}.p-4{padding:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.\!no-underline{text-decoration-line:none!important}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-gray-900\/5{--tw-ring-color:#1118270d}[aria-expanded=true] .menu-state-indicator{transform:rotate(-180deg)}.menu-state-indicator{transition:transform .2s ease}table.docutils{clear:left;float:left;margin:0 1rem 1rem}html[data-theme=dark]{--litestar-gray:#dcdfe4;--color-background-primary:#18181b;--color-background-secondary:#27272a;--pst-color-on-background:#27272a;--pst-color-border:#2f2f2f;--pst-color-text-muted:#f3f4f6;--pst-color-inline-code:var(--litestar-gray)}html[data-theme=light]{--litestar-blue:#202235;--color-background-primary:#f8f9fb;--color-background-secondary:#fff;--pst-color-text-muted:#111827;--pst-color-inline-code:var(--litestar-blue)}html[data-theme=dark],html[data-theme=light]{--pst-color-background:var(--color-background-primary);--litestar-gold:#edb641;--pst-color-primary:var(--litestar-gold)}h1,h2{color:unset}@media (min-width:960px){.bd-page-width{max-width:100rem}}.bd-sidebar-primary{display:block;flex:0 0 18%}.bd-header .navbar-nav .nav-item{font-weight:600}.bd-content,.bd-sidebar-secondary{background-color:var(--color-background-secondary)}.sd-tab-content{box-shadow:0 -.0625rem var(--sd-color-tabs-overline)}div.literal-block-wrapper,pre{border:none}.code-block-caption{background-color:var(--pst-color-surface)}.navbar-persistent--mobile{margin-left:unset}.navbar-persistent--mobile:last-of-type{padding-left:1rem}#navbar-icon-links a{padding-top:.2rem}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:\!text-litestar-gold:hover{--tw-text-opacity:1!important;color:rgb(237 182 65/var(--tw-text-opacity))!important}.hover\:text-litestar-gold:hover{--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}.group:hover .group-hover\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:text-litestar-gold{--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:\!bg-zinc-700){--tw-bg-opacity:1!important;background-color:rgb(63 63 70/var(--tw-bg-opacity))!important}:is([data-theme=dark] .dark\:bg-zinc-900){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity))}:is([data-theme=dark] .dark\:text-gray-100){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:text-gray-200){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:hover\:bg-zinc-800:hover){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity))}:is([data-theme=dark] .dark\:hover\:text-litestar-gold:hover){--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}:is([data-theme=dark] .group:hover .dark\:group-hover\:bg-zinc-700){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity))}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem}} \ No newline at end of file +.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-left-8{left:-2rem}.top-full{top:100%}.z-10{z-index:10}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-11{height:2.75rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.w-11{width:2.75rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-max{width:-moz-max-content;width:max-content}.max-w-md{max-width:28rem}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.overflow-hidden{overflow:hidden}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:.5rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-2{padding:.5rem}.p-4{padding:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.\!no-underline{text-decoration-line:none!important}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-gray-900\/5{--tw-ring-color:#1118270d}:root{--litestar-blue:#202235;--litestar-gold:#edb641;--litestar-yellow:#ffd480;--litestar-gray:#dcdfe4;--litestar-light:#fff;--litestar-dark:#202020}[aria-expanded=true] .menu-state-indicator{transform:rotate(-180deg)}.menu-state-indicator{transition:transform .2s ease}table.docutils{clear:left;float:left;margin:0 1rem 1rem}html[data-theme=dark]{--color-background-primary:#18181b;--color-background-secondary:#27272a;--pst-color-on-background:#27272a;--pst-color-border:#2f2f2f;--pst-color-text-muted:#f3f4f6;--pst-color-inline-code:var(--litestar-gray)}html[data-theme=light]{--color-background-primary:#f8f9fb;--color-background-secondary:#fff;--pst-color-text-muted:#111827;--pst-color-inline-code:var(--litestar-blue)}html[data-theme=dark],html[data-theme=light]{--pst-color-background:var(--color-background-primary);--pst-color-primary:var(--litestar-gold)}html[data-theme=dark]{--pst-color-secondary:var(--litestar-light)}html[data-theme=light]{--pst-color-secondary:var(--litestar-dark)}h1,h2{color:unset}@media (min-width:960px){.bd-page-width{max-width:100rem}}.bd-sidebar-primary{display:block;flex:0 0 18%}.bd-header .navbar-nav .nav-item{font-weight:600}.bd-content,.bd-sidebar-secondary{background-color:var(--color-background-secondary)}.sd-tab-content{box-shadow:0 -.0625rem var(--sd-color-tabs-overline)}div.literal-block-wrapper,pre{border:none}.code-block-caption{background-color:var(--pst-color-surface)}.navbar-persistent--mobile{margin-left:unset}.navbar-persistent--mobile:last-of-type{padding-left:1rem}#navbar-icon-links a{padding-top:.2rem}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:\!text-litestar-gold:hover{--tw-text-opacity:1!important;color:rgb(237 182 65/var(--tw-text-opacity))!important}.hover\:text-litestar-gold:hover{--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}.group:hover .group-hover\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:text-litestar-gold{--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:\!bg-zinc-700){--tw-bg-opacity:1!important;background-color:rgb(63 63 70/var(--tw-bg-opacity))!important}:is([data-theme=dark] .dark\:bg-zinc-900){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity))}:is([data-theme=dark] .dark\:text-gray-100){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:text-gray-200){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is([data-theme=dark] .dark\:hover\:bg-zinc-800:hover){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity))}:is([data-theme=dark] .dark\:hover\:text-litestar-gold:hover){--tw-text-opacity:1;color:rgb(237 182 65/var(--tw-text-opacity))}:is([data-theme=dark] .group:hover .dark\:group-hover\:bg-zinc-700){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity))}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem}} diff --git a/tailwind.config.js b/tailwind.config.js index 72247d0..0ae848e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,12 @@ module.exports = { theme: { extend: { colors: { - "litestar-gold": "#EDB641" + "litestar-blue": "#202235", + "litestar-gold": "#EDB641", + "litestar-yellow": "#FFD480", + "litestar-gray": "#DCDFE4", + "litestar-light": "#ffffff", + "litestar-dark": "#202020", } } }