TFC/tfcconnection-zola
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixing light mode

Browse source
This commit is contained in:
Chris Cochrun 2025-07-03 11:04:46 -05:00
parent 5ac44d6784
commit e0f9c978c1
6 changed files with 103 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

74
static/css/main.css
View file

@ -8,6 +8,7 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace; monospace;
--color-blue-200: oklch(88.2% 0.059 254.128); --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-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-600: oklch(54.6% 0.245 262.881);
@ -328,6 +329,9 @@
.my-8 { .my-8 {
margin-block: calc(var(--spacing) * 8); margin-block: calc(var(--spacing) * 8);
} }
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-2 { .mt-2 {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
} }
@ -743,6 +747,9 @@
.bg-blue-700 { .bg-blue-700 {
background-color: var(--color-blue-700); background-color: var(--color-blue-700);
} }
.bg-blue-800 {
background-color: var(--color-blue-800);
}
.bg-gray-100 { .bg-gray-100 {
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
@ -973,6 +980,11 @@
color: var(--color-gray-300); color: var(--color-gray-300);
} }
} }
.placeholder-gray-900 {
&::placeholder {
color: var(--color-gray-900);
}
}
.opacity-0 { .opacity-0 {
opacity: 0%; opacity: 0%;
} }
@ -1156,6 +1168,11 @@
color: var(--color-gray-500); color: var(--color-gray-500);
} }
} }
.checked\:text-gray-900 {
&:checked {
color: var(--color-gray-900);
}
}
.invalid\:text-\[\#F39\] { .invalid\:text-\[\#F39\] {
&:invalid { &:invalid {
color: #F39; 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\:\!bg-blue-500 {
&:hover { &:hover {
@media (hover: 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\:bg-blue-900 {
&:hover { &:hover {
@media (hover: 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\:bg-gray-600 {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@ -1652,16 +1697,16 @@
background-color: #ef4444; background-color: #ef4444;
} }
} }
.dark\:bg-blue-700 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-blue-700);
}
}
.dark\:bg-blue-800 { .dark\:bg-blue-800 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: var(--color-blue-800); 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 { .dark\:bg-gray-700 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: var(--color-gray-700); background-color: var(--color-gray-700);
@ -1682,6 +1727,11 @@
color: var(--color-blue-200); color: var(--color-blue-200);
} }
} }
.dark\:text-gray-50 {
@media (prefers-color-scheme: dark) {
color: var(--color-gray-50);
}
}
.dark\:text-gray-200 { .dark\:text-gray-200 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--color-gray-200); color: var(--color-gray-200);
@ -1702,6 +1752,20 @@
color: var(--color-white); 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 { .dark\:hover\:\!bg-blue-700 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
&:hover { &:hover {

8
templates/layout.html
View file

@ -36,11 +36,11 @@
{% endblock title %} {% endblock title %}
</title> </title>
</head> </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 -------------------------> <!------------------------- 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="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="relative flex items-center justify-between h-16">
<div class="flex items-center sm:hidden"> <div class="flex items-center sm:hidden">
@ -254,7 +254,7 @@
<!-----------------------------------------------------------> <!----------------------------------------------------------->
<!------------------------- CONTENT -------------------------> <!------------------------- 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 %} {% block content %}
{% endblock content %} {% endblock content %}
</main> </main>
@ -268,7 +268,7 @@
<!----------------------------------------------------------> <!---------------------------------------------------------->
<!------------------------- FOOTER -------------------------> <!------------------------- 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="container mx-auto px-6">
<div class="sm:flex sm:mt-8"> <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"> <div class="mt-8 sm:mt-0 sm:w-full sm:px-8 flex flex-col md:flex-row justify-between">

2
templates/shortcodes/button.html
View file

@ -1,5 +1,5 @@
<a <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 href %}href="{{ href }}"{% endif %}
{% if target %}target="{{ target }}"{% endif %} {% if target %}target="{{ target }}"{% endif %}
role="button"> role="button">

4
templates/shortcodes/camp_form.html
View file

@ -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>" -%} {% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
<div id="mt-form" class="form text-lg w-full"> <div id="mt-form" class="form text-lg w-full">
@ -238,7 +238,7 @@
</label> </label>
</div> --> </div> -->
<div class="basis-full mt-8"> <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>
</form> </form>
</div> </div>

2
templates/shortcodes/floating_button.html
View file

@ -6,7 +6,7 @@
} }
</script> </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> <i>{{ text }}</i>
<span class="relative inline-block align-sub size-5 fill-current flex-auto"> <span class="relative inline-block align-sub size-5 fill-current flex-auto">
{{ load_data(path="icons/" ~ icon ~ ".svg") | safe }} {{ load_data(path="icons/" ~ icon ~ ".svg") | safe }}

52
templates/shortcodes/health_form.html
View file

@ -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>" -%} {% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
<!-- <script src="/js/forms.js"></script> --> <!-- <script src="/js/forms.js"></script> -->
@ -489,35 +489,35 @@
</div> </div>
<div class="basis-full mt-8"> <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>
<div id="warning" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]"> <!-- <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"> <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
{{ load_data(path="icons/triangle-exclamation.svg") | safe }} {{ 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. You have not agreed to the liability release. Please have a guardian read and agree to it first.
</span> </span>
</div> </div>
<div id="warning-insurance" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]"> <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"> <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
{{ load_data(path="icons/triangle-exclamation.svg") | safe }} {{ load_data(path="icons/triangle-exclamation.svg") | safe }}
You have not entered in your insurance name. You have not entered in your insurance name.
</span> </span>
</div> </div>
<div id="warning-policy" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]"> <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"> <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
{{ load_data(path="icons/triangle-exclamation.svg") | safe }} {{ load_data(path="icons/triangle-exclamation.svg") | safe }}
You have not entered in a policy number. You have not entered in a policy number.
</span> </span>
</div> </div>
<div id="warning-image" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]"> <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"> <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
{{ load_data(path="icons/triangle-exclamation.svg") | safe }} {{ load_data(path="icons/triangle-exclamation.svg") | safe }}
You have not included a copy of your insurance card. You have not included a copy of your insurance card.
</span> </span>
</div> </div> -->
</form> </form>
</div> </div>