mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-06 08:14:40 +00:00
refactor: theme switcher and login button
Change text in theme switcher to icons. Change text and icon in login button.
This commit is contained in:
parent
b9284e70e2
commit
9d824375ff
GPG key ID:
858E8EE696525EED
2 changed files with 66 additions and 143 deletions
31
index.html
31
index.html
|
|
@ -52,21 +52,38 @@
|
|||
</div>
|
||||
<div class="flex flex-row items-center justify-center gap-6">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<span class="mr-4 text-sm font-medium text-gray-900 ms-3 dark:text-gray-300">light</span>
|
||||
<span class="mr-4 text-sm font-medium text-gray-900 ms-3 dark:text-gray-300"><svg
|
||||
class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd"
|
||||
d="M13 3a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0V3ZM6.343 4.929A1 1 0 0 0 4.93 6.343l1.414 1.414a1 1 0 0 0 1.414-1.414L6.343 4.929Zm12.728 1.414a1 1 0 0 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 1.414 1.414l1.414-1.414ZM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-9 4a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2H3Zm16 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2h-2ZM7.757 17.657a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414Zm9.9-1.414a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM13 19a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<input type="checkbox" class="sr-only peer" id="theme-toggle">
|
||||
<div
|
||||
class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900 ms-3 dark:text-gray-300">dark</span>
|
||||
<span class="text-sm font-medium text-gray-900 ms-3 dark:text-gray-300"><svg
|
||||
class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd"
|
||||
d="M11.675 2.015a.998.998 0 0 0-.403.011C6.09 2.4 2 6.722 2 12c0 5.523 4.477 10 10 10 4.356 0 8.058-2.784 9.43-6.667a1 1 0 0 0-1.02-1.33c-.08.006-.105.005-.127.005h-.001l-.028-.002A5.227 5.227 0 0 0 20 14a8 8 0 0 1-8-8c0-.952.121-1.752.404-2.558a.996.996 0 0 0 .096-.428V3a1 1 0 0 0-.825-.985Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
<a href="https://auth.wah.su"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Sign in
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 14 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M1 5h12m0 0L9 1m4 4L9 9" />
|
||||
<svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.857 3A1.857 1.857 0 0 0 3 4.857v4.286C3 10.169 3.831 11 4.857 11h4.286A1.857 1.857 0 0 0 11 9.143V4.857A1.857 1.857 0 0 0 9.143 3H4.857Zm10 0A1.857 1.857 0 0 0 13 4.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 9.143V4.857A1.857 1.857 0 0 0 19.143 3h-4.286Zm-10 10A1.857 1.857 0 0 0 3 14.857v4.286C3 20.169 3.831 21 4.857 21h4.286A1.857 1.857 0 0 0 11 19.143v-4.286A1.857 1.857 0 0 0 9.143 13H4.857Zm10 0A1.857 1.857 0 0 0 13 14.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 19.143v-4.286A1.857 1.857 0 0 0 19.143 13h-4.286Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p class="ml-2">Dashboard</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1166,10 +1166,22 @@ input:checked + .toggle-bg {
|
|||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.ms-2 {
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.ms-3 {
|
||||
margin-inline-start: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-14 {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
|
@ -1182,28 +1194,8 @@ input:checked + .toggle-bg {
|
|||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.ms-3 {
|
||||
margin-inline-start: 0.75rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.ml-16 {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.ml-24 {
|
||||
margin-left: 6rem;
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -1266,6 +1258,10 @@ input:checked + .toggle-bg {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
|
@ -1278,6 +1274,10 @@ input:checked + .toggle-bg {
|
|||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-64 {
|
||||
width: 16rem;
|
||||
}
|
||||
|
|
@ -1286,10 +1286,6 @@ input:checked + .toggle-bg {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
||||
.max-w-\[1440px\] {
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
|
@ -1302,18 +1298,6 @@ input:checked + .toggle-bg {
|
|||
max-width: 840px;
|
||||
}
|
||||
|
||||
.max-w-\[340px\] {
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.max-w-\[240px\] {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.max-w-\[140px\] {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -1432,10 +1416,6 @@ input:checked + .toggle-bg {
|
|||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
|
@ -1450,10 +1430,6 @@ input:checked + .toggle-bg {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
|
@ -1633,26 +1609,6 @@ input:checked + .toggle-bg {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.px-16 {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.px-32 {
|
||||
padding-left: 8rem;
|
||||
padding-right: 8rem;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -1683,8 +1639,8 @@ input:checked + .toggle-bg {
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-8xl {
|
||||
font-size: 6rem;
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1698,16 +1654,6 @@ input:checked + .toggle-bg {
|
|||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1995,21 +1941,11 @@ input:checked + .toggle-bg {
|
|||
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:ml-0 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -2022,11 +1958,6 @@ input:checked + .toggle-bg {
|
|||
font-size: 6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.md\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
|
|
@ -2101,16 +2032,6 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(17 24 39 / 0.8);
|
||||
}
|
||||
|
||||
.dark\:bg-slate-800:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-green-300:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(132 225 188 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-green-400:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(49 196 141 / var(--tw-bg-opacity));
|
||||
|
|
@ -2121,14 +2042,9 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(240 82 82 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-yellow-200:where(.dark, .dark *) {
|
||||
.dark\:bg-slate-800:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 233 106 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-red-400:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 128 128 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-slate-900:where(.dark, .dark *) {
|
||||
|
|
@ -2136,39 +2052,24 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-yellow-200:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 233 106 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-blue-500:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-gray-400:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-white:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-gray-300:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-50:where(.dark, .dark *) {
|
||||
.dark\:text-gray-400:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 250 252 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-100:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(241 245 249 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-300:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity));
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-200:where(.dark, .dark *) {
|
||||
|
|
@ -2176,14 +2077,19 @@ input:checked + .toggle-bg {
|
|||
color: rgb(226 232 240 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-500:where(.dark, .dark *) {
|
||||
.dark\:text-slate-300:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(100 116 139 / var(--tw-text-opacity));
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-slate-400:where(.dark, .dark *) {
|
||||
.dark\:text-slate-50:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(148 163 184 / var(--tw-text-opacity));
|
||||
color: rgb(248 250 252 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-white:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-blue-700:hover:where(.dark, .dark *) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue