mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat: better mobile menu
This commit is contained in:
ZhenShuo Leo
@@ -11,6 +11,7 @@
|
||||
--spacing: 0.25rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-md: 28rem;
|
||||
--container-xl: 36rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-7xl: 80rem;
|
||||
@@ -36,6 +37,7 @@
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--leading-snug: 1.375;
|
||||
--leading-relaxed: 1.625;
|
||||
@@ -267,12 +269,18 @@
|
||||
.end-6 {
|
||||
inset-inline-end: calc(var(--spacing) * 6);
|
||||
}
|
||||
.end-8 {
|
||||
inset-inline-end: calc(var(--spacing) * 8);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-5 {
|
||||
top: calc(var(--spacing) * 5);
|
||||
}
|
||||
.top-20 {
|
||||
top: calc(var(--spacing) * 20);
|
||||
}
|
||||
@@ -303,9 +311,6 @@
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
@@ -408,6 +413,9 @@
|
||||
.ms-6 {
|
||||
margin-inline-start: calc(var(--spacing) * 6);
|
||||
}
|
||||
.ms-7 {
|
||||
margin-inline-start: calc(var(--spacing) * 7);
|
||||
}
|
||||
.ms-auto {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
@@ -1015,29 +1023,6 @@
|
||||
height: var(--scrollbar-height, 16px);
|
||||
}
|
||||
}
|
||||
.scrollbar-thin {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: var(--scrollbar-track-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-thumb-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: var(--scrollbar-corner);
|
||||
border-radius: var(--scrollbar-corner-radius);
|
||||
}
|
||||
@supports (-moz-appearance:none) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@@ -1068,6 +1053,9 @@
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
@@ -1090,6 +1078,9 @@
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1099,9 +1090,15 @@
|
||||
.h-8 {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-14 {
|
||||
height: calc(var(--spacing) * 14);
|
||||
}
|
||||
.h-24 {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
@@ -1168,6 +1165,9 @@
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1177,6 +1177,9 @@
|
||||
.w-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
@@ -1231,6 +1234,9 @@
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: var(--container-md);
|
||||
}
|
||||
.max-w-prose {
|
||||
max-width: 65ch;
|
||||
}
|
||||
@@ -1359,6 +1365,9 @@
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.grid-rows-\[0fr\] {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -1386,16 +1395,12 @@
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-3 {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.space-y-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-3 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -1410,6 +1415,13 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-10 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -1420,6 +1432,9 @@
|
||||
.gap-x-5 {
|
||||
column-gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-x-6 {
|
||||
column-gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.space-x-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1658,15 +1673,15 @@
|
||||
.bg-neutral-50 {
|
||||
background-color: rgba(var(--color-neutral-50), 1);
|
||||
}
|
||||
.bg-neutral-50\/97 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 97%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 97%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral-100 {
|
||||
background-color: rgba(var(--color-neutral-100), 1);
|
||||
}
|
||||
.bg-neutral-100\/50 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral-100\/75 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1772,6 +1787,9 @@
|
||||
.p-1\.5 {
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1835,6 +1853,9 @@
|
||||
.py-16 {
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.py-20 {
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
}
|
||||
.py-\[0\.4rem\] {
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
@@ -1871,9 +1892,6 @@
|
||||
.pt-16 {
|
||||
padding-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
.pt-\[5px\] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr-8 {
|
||||
padding-right: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -1892,6 +1910,9 @@
|
||||
.pb-32 {
|
||||
padding-bottom: calc(var(--spacing) * 32);
|
||||
}
|
||||
.pl-0 {
|
||||
padding-left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -2005,6 +2026,10 @@
|
||||
--tw-tracking: var(--tracking-normal);
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
.tracking-tight {
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
@@ -2221,11 +2246,21 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[grid-template-rows\] {
|
||||
transition-property: grid-template-rows;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[height\] {
|
||||
transition-property: height;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[opacity\,visibility\] {
|
||||
transition-property: opacity,visibility;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[transform\,_opacity\] {
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -2302,12 +2337,6 @@
|
||||
.\!\[clip\:rect\(0\,0\,0\,0\)\] {
|
||||
clip: rect(0,0,0,0) !important;
|
||||
}
|
||||
.scrollbar-thumb-neutral-400 {
|
||||
--scrollbar-thumb: oklch(70.8% 0 0);
|
||||
}
|
||||
.scrollbar-track-neutral-200 {
|
||||
--scrollbar-track: oklch(92.2% 0 0);
|
||||
}
|
||||
.group-open\:rotate-0 {
|
||||
&:is(:where(.group):is([open], :popover-open, :open) *) {
|
||||
rotate: 0deg;
|
||||
@@ -2403,6 +2432,21 @@
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
.peer-checked\:visible {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.peer-checked\:opacity-100 {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
.peer-checked\/full\:grid-rows-\[1fr\] {
|
||||
&:is(:where(.peer\/full):checked ~ *) {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
.before\:absolute {
|
||||
&::before {
|
||||
content: var(--tw-content);
|
||||
@@ -3025,6 +3069,11 @@
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
.dark\:block {
|
||||
&:is(.dark *) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dark\:flex {
|
||||
&:is(.dark *) {
|
||||
display: flex;
|
||||
@@ -3148,6 +3197,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900 {
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-neutral-900), 1);
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900\/50 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent);
|
||||
@@ -3156,6 +3210,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900\/99 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 99%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 99%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-primary-300 {
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-primary-300), 1);
|
||||
@@ -3260,16 +3322,6 @@
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-thumb-neutral-600 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-thumb: oklch(43.9% 0 0);
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-track-neutral-800 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-track: oklch(26.9% 0 0);
|
||||
}
|
||||
}
|
||||
.dark\:hover\:\!bg-primary-700 {
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@@ -3345,6 +3397,30 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_\.menuhide_span\]\:text-sm\! {
|
||||
& .translation .menuhide span {
|
||||
font-size: var(--text-sm) !important;
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_button_\.icon\]\:text-4xl\! {
|
||||
& .translation button .icon {
|
||||
font-size: var(--text-4xl) !important;
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_button_span\]\:text-base\! {
|
||||
& .translation button span {
|
||||
font-size: var(--text-base) !important;
|
||||
line-height: var(--tw-leading, var(--text-base--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_span\]\:text-2xl {
|
||||
& span {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.highlight-wrapper {
|
||||
@@ -4170,6 +4246,9 @@ body.zen-mode-enable {
|
||||
color: var(--adm-todo-text);
|
||||
}
|
||||
}
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -4407,21 +4486,98 @@ pre {
|
||||
.medium-zoom-image--opened {
|
||||
z-index: 100;
|
||||
}
|
||||
.nested-menu:hover + .menuhide {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
@layer utilities {
|
||||
.bf-border-color {
|
||||
border-color: rgba(var(--color-neutral-300), 1);
|
||||
&:is(.dark *) {
|
||||
border-color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
}
|
||||
.bf-border-color-hover {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bf-icon-color-hover {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bf-scrollbar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: var(--scrollbar-track-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-thumb-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: var(--scrollbar-corner);
|
||||
border-radius: var(--scrollbar-corner-radius);
|
||||
}
|
||||
@supports (-moz-appearance:none) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
--scrollbar-thumb: oklch(70.8% 0 0);
|
||||
--scrollbar-track: oklch(92.2% 0 0);
|
||||
&:is(.dark *) {
|
||||
--scrollbar-thumb: oklch(43.9% 0 0);
|
||||
}
|
||||
&:is(.dark *) {
|
||||
--scrollbar-track: oklch(26.9% 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuhide:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
body:has(#mobile-menu-toggle:checked) {
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 853px) {
|
||||
body {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
#bmc-wbtn {
|
||||
z-index: 50 !important;
|
||||
}
|
||||
.nested-menu {
|
||||
position: relative;
|
||||
}
|
||||
.menuhide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
}
|
||||
.nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.active {
|
||||
text-decoration-line: underline;
|
||||
|
||||
Reference in New Issue
Block a user