fixing light mode
This commit is contained in:
parent
5ac44d6784
commit
e0f9c978c1
6 changed files with 103 additions and 39 deletions
|
@ -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 {
|
||||
|
|
|
@ -36,11 +36,11 @@
|
|||
{% endblock title %}
|
||||
</title>
|
||||
</head>
|
||||
<body class="dark:bg-gray-800 flex flex-col h-screen justify-between">
|
||||
<body class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-800 flex flex-col h-screen justify-between">
|
||||
<!---------------------------------------------------------->
|
||||
<!------------------------- NAVBAR ------------------------->
|
||||
<!---------------------------------------------------------->
|
||||
<nav id="navbar" class="bg-gray-200 dark:bg-gray-800">
|
||||
<nav id="navbar" class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex items-center justify-between h-16">
|
||||
<div class="flex items-center sm:hidden">
|
||||
|
@ -254,7 +254,7 @@
|
|||
<!----------------------------------------------------------->
|
||||
<!------------------------- CONTENT ------------------------->
|
||||
<!----------------------------------------------------------->
|
||||
<main class="max-w-7xl mx-auto text-white bg-gray-200 dark:bg-gray-800 w-full mb-auto">
|
||||
<main class="max-w-7xl mx-auto text-gray-900 dark:text-white bg-gray-200 dark:bg-gray-800 w-full mb-auto">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</main>
|
||||
|
@ -268,7 +268,7 @@
|
|||
<!---------------------------------------------------------->
|
||||
<!------------------------- FOOTER ------------------------->
|
||||
<!---------------------------------------------------------->
|
||||
<footer class="max-w-7xl mx-auto relative pt-1 px-2 border-gray-300 dark:border-gray-200 w-full">
|
||||
<footer class="max-w-7xl mx-auto relative pt-1 px-2 bg-gray-200 border-gray-300 dark:border-gray-200 dark:bg-gray-800 w-full">
|
||||
<!-- <div class="container mx-auto px-6">
|
||||
<div class="sm:flex sm:mt-8">
|
||||
<div class="mt-8 sm:mt-0 sm:w-full sm:px-8 flex flex-col md:flex-row justify-between">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<a
|
||||
class="rounded-lg text-white bg-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
|
||||
class="rounded-lg text-white bg-blue-800 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
|
||||
{% if href %}href="{{ href }}"{% endif %}
|
||||
{% if target %}target="{{ target }}"{% endif %}
|
||||
role="button">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{% set formClasses = "bg-gray-500 text-gray-50 placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-600 checked:text-gray-500" -%}
|
||||
{% set formClasses = "bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" -%}
|
||||
{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
|
||||
|
||||
<div id="mt-form" class="form text-lg w-full">
|
||||
|
@ -238,7 +238,7 @@
|
|||
</label>
|
||||
</div> -->
|
||||
<div class="basis-full mt-8">
|
||||
<button type="submit" class="content-right rounded-lg bg-blue-700 h-12 w-24 focus:bg-blue-900 focus:ring focus:ring-blue-700 hover:bg-blue-900 float-right">Submit</button>
|
||||
<button type="submit" class="content-right rounded-lg text-white bg-blue-800 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 float-right">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<button class="rounded-lg bg-blue-700 px-4 py-2 !text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-700 dark:hover:!bg-blue-900 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
|
||||
<button class="rounded-lg bg-blue-800 px-4 py-2 text-white !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-900 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
|
||||
<i>{{ text }}</i>
|
||||
<span class="relative inline-block align-sub size-5 fill-current flex-auto">
|
||||
{{ load_data(path="icons/" ~ icon ~ ".svg") | safe }}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{% set formClasses = "bg-gray-500 text-gray-50 placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-600 checked:text-gray-500" -%}
|
||||
{% set formClasses = "bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" -%}
|
||||
{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
|
||||
|
||||
<!-- <script src="/js/forms.js"></script> -->
|
||||
|
@ -489,35 +489,35 @@
|
|||
</div>
|
||||
|
||||
<div class="basis-full mt-8">
|
||||
<button type="submit" class="content-right rounded-lg bg-blue-700 h-12 w-24 focus:bg-blue-900 focus:ring focus:ring-blue-700 hover:bg-blue-900 float-right">Submit</button>
|
||||
<button type="submit" class="content-right rounded-lg text-white bg-blue-800 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 float-right">Submit</button>
|
||||
</div>
|
||||
|
||||
<div id="warning" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not agreed to the liability release. Please have a guardian read and agree to it first.
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div id="warning" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not agreed to the liability release. Please have a guardian read and agree to it first.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-insurance" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not entered in your insurance name.
|
||||
</span>
|
||||
</div>
|
||||
<div id="warning-insurance" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not entered in your insurance name.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-policy" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not entered in a policy number.
|
||||
</span>
|
||||
</div>
|
||||
<div id="warning-policy" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not entered in a policy number.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="warning-image" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not included a copy of your insurance card.
|
||||
</span>
|
||||
</div>
|
||||
<div id="warning-image" class="invisible basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
|
||||
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
|
||||
{{ load_data(path="icons/triangle-exclamation.svg") | safe }}
|
||||
You have not included a copy of your insurance card.
|
||||
</span>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue