diff --git a/static/css/main.css b/static/css/main.css index 03bc691..d78977b 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -8,6 +8,7 @@ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); @@ -328,6 +329,9 @@ .my-8 { margin-block: calc(var(--spacing) * 8); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } .mt-2 { margin-top: calc(var(--spacing) * 2); } @@ -743,6 +747,9 @@ .bg-blue-700 { background-color: var(--color-blue-700); } + .bg-blue-800 { + background-color: var(--color-blue-800); + } .bg-gray-100 { background-color: var(--color-gray-100); } @@ -973,6 +980,11 @@ color: var(--color-gray-300); } } + .placeholder-gray-900 { + &::placeholder { + color: var(--color-gray-900); + } + } .opacity-0 { opacity: 0%; } @@ -1156,6 +1168,11 @@ color: var(--color-gray-500); } } + .checked\:text-gray-900 { + &:checked { + color: var(--color-gray-900); + } + } .invalid\:text-\[\#F39\] { &:invalid { color: #F39; @@ -1181,6 +1198,20 @@ } } } + .hover\:\!bg-blue-200 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-200) !important; + } + } + } + .hover\:\!bg-blue-300 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-300) !important; + } + } + } .hover\:\!bg-blue-500 { &:hover { @media (hover: hover) { @@ -1188,6 +1219,13 @@ } } } + .hover\:\!bg-blue-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-700) !important; + } + } + } .hover\:bg-blue-900 { &:hover { @media (hover: hover) { @@ -1209,6 +1247,13 @@ } } } + .hover\:bg-gray-400 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-400); + } + } + } .hover\:bg-gray-600 { &:hover { @media (hover: hover) { @@ -1652,16 +1697,16 @@ background-color: #ef4444; } } - .dark\:bg-blue-700 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-blue-700); - } - } .dark\:bg-blue-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-blue-800); } } + .dark\:bg-gray-500 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-500); + } + } .dark\:bg-gray-700 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-700); @@ -1682,6 +1727,11 @@ color: var(--color-blue-200); } } + .dark\:text-gray-50 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-50); + } + } .dark\:text-gray-200 { @media (prefers-color-scheme: dark) { color: var(--color-gray-200); @@ -1702,6 +1752,20 @@ color: var(--color-white); } } + .dark\:placeholder-gray-300 { + @media (prefers-color-scheme: dark) { + &::placeholder { + color: var(--color-gray-300); + } + } + } + .dark\:checked\:text-gray-500 { + @media (prefers-color-scheme: dark) { + &:checked { + color: var(--color-gray-500); + } + } + } .dark\:hover\:\!bg-blue-700 { @media (prefers-color-scheme: dark) { &:hover { diff --git a/templates/layout.html b/templates/layout.html index c5f7e94..7c8ffad 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -36,11 +36,11 @@ {% endblock title %} - + -