diff --git a/static/css/404.css b/static/css/404.css index 5922034..cca236d 100644 --- a/static/css/404.css +++ b/static/css/404.css @@ -5,7 +5,7 @@ .not-found a.logo { width: 100%; padding: 20px 0; - background-color: var(--alt-bg); + background-color: var(--header-bg); text-align: center; pointer-events: none; } diff --git a/static/css/colorschemes/colors-li.css b/static/css/colorschemes/colors-li.css new file mode 100644 index 0000000..cc656f2 --- /dev/null +++ b/static/css/colorschemes/colors-li.css @@ -0,0 +1,102 @@ +/* Mostly based off of gruvbox */ + +:root { + --main-fg: #06080e; + --main-bg: #c5cde7; + + --main-acc: #3c5197; + + + + --alt-acc: #9aa8d5; + --alt-acc-2: #1e2848; + + --disabled-bg: #1e2848; + + --alt-bg: #9aa8d5; + --alt-bg-2: #a9b4db; + + --invert-fg: #c5cde7; + + + + +/* Color Sheme linking */ + --body-bg: var(--main-bg); + --body-fg: var(--main-fg); + + --link-fg: var(--main-acc); + + --header-bg: var(--alt-bg); + --header-bg-hov: var(--main-acc); + --header-fg: var(--alt-acc-2); + --header-fg-hov: var(--invert-fg); + + --header-shadow: var(--alt-acc-2); + --header-shadow-hov: var(--header-shadow); + + --hamburger-fg: var(--main-acc); + --hamburger-fg-checked: var(--alt-acc-2); + + --langs-bg: var(--header-bg); + --lang-btn-bg: var(--header-bg) ; + --langs-bg-hov: var(--header-bg-hov); + + + --blockquote-border: var(--alt-acc); + + + + + + + --table-bg: var(--alt-bg); + --table-bg-alt: var(--alt-bg-2); + --table-border: var(--body-bg); + + + --maps-bg: var(--alt-bg); + --maps-border: var(--main-acc); + + --button-bg: var(--main-acc); + --button-fg: var(--main-bg); + + + + +--cal-bg: var(--alt-bg); +--cal-fg: var(--body-fg); + +--cal-month-bg: var(--alt-bg-2); +--cal-month-fg: var(--link-fg); + +--cal-weekdays-bg: var(--alt-bg); +--cal-weekdays-fg: var(--cal-fg); + +--cal-day-empty-fg: var(--alt-bg); +--cal-day-empty-bg: var(--disabled-bg); + +--cal-day-busy-fg: var(--cal-fg); +--cal-day-busy-bg: var(--alt-bg); + +--cal-day-hover-fg: var(--main-acc); +--cal-day-hover-bg: var(--alt-bg); + +--cal-event-fg: var(--cal-fg); +--cal-event-bg: var(--main-acc) ; + +--cal-mobile-bg: var(--cal-day-busy-bg); +--cal-mobile-fg: var(--cal-fg); +--cal-mobile-border: var(--main-acc); +--cal-mobile-link: var(--link-fg); + +/* Light Mode Colors */ +} + +@media (prefers-color-scheme: dark) { + :root { +/* Dark Mode Colors */ + +/* Dark Mode Colorsheme Link Overides */ + } +} diff --git a/static/css/colorschemes/colors.css b/static/css/colorschemes/colors.css index 2780c6a..579e484 100644 --- a/static/css/colorschemes/colors.css +++ b/static/css/colorschemes/colors.css @@ -1,11 +1,16 @@ /* Mostly based off of gruvbox */ :root { - --col-0: #FFFFFF; - --col-1: #F0F2F9; - --col-2: #3C5197; - --col-3: #0C101D; - --col-4: #18203A; + + + --bg: #06080E; + --fg: #F0F2F9; + + --acc: #3C5197; + --dark-acc: #0C101D; + + --alt-bg: #18203A; + --col-5: #5F75BF; --col-6: #1E2848; --col-7: #12182B; @@ -14,20 +19,22 @@ /* Color Sheme linking */ - --body-bg: var(--col-3); - --body-fg: var(--col-1); + --body-bg: var(--bg); + --body-fg: var(--fg); - --link-fg: var(--col-5); + --link-fg: var(--acc); - --header-bg: var(--col-4); - --header-bg-hov: var(--col-2); - --header-fg: var(--body-fg); + --header-bg: var(--alt-bg); + --header-bg-hov: var(--acc); - --header-shadow: var(--body-bg); + /* --header-fg: var(--body-fg); */ + + --header-shadow: var(--dark-acc); --header-shadow-hov: var(--header-shadow); - --hamburger-fg: var(--col-1); + --hamburger-fg: var(--fg); --hamburger-fg-checked: var(--hamburger-fg); + --langs-bg: var(--header-bg); --lang-btn-bg: var(--header-bg) ; --langs-bg-hov: var(--header-bg-hov); @@ -45,10 +52,10 @@ --table-border: var(--body-bg); - --maps-bg: var(--col-4); - --maps-border: var(--col-2); + --maps-bg: var(--alt-bg); + --maps-border: var(--acc); - --button-bg: var(--col-2); + --button-bg: var(--acc); --button-fg: var(--body-fg); @@ -80,12 +87,6 @@ --cal-mobile-border: var(--col-2); --cal-mobile-link: var(--link-fg); -/* Light Mode Colors */ - --bg: #f9f5d7; - --fg: #3c3836; - --alt-bg: #d5c4a1; - --acc-1: #076678; - --shadow: #504945; } @media (prefers-color-scheme: dark) {