Skip to content

Commit

Permalink
fixes for safari
Browse files Browse the repository at this point in the history
  • Loading branch information
@backface
backface committed Aug 30, 2024
1 parent dcad5dc commit 5c92671
Show file tree
Hide file tree
Showing 12 changed files with 120 additions and 56 deletions.
4 changes: 4 additions & 0 deletions input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,4 +150,8 @@ nav .menu a {

.menu {
@apply shadow-2xl
}

summary::marker {
@apply hidden
}
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"@iconify-json/carbon": "^1.1.31",
"@iconify/json": "^2.2.196",
"@iconify/tailwind": "^0.1.4",
"daisyui": "^4.10.5",
"tailwindcss": "^3.4.3"
"daisyui": "^4.12.10",
"tailwindcss": "^3.4.10"
},
"dependencies": {
"@fontsource-variable/noto-sans": "^5.0.5"
Expand Down
7 changes: 6 additions & 1 deletion static/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,9 @@ svg:hover .st2 {fill: var(--secondary);}

/* img {
display: inline
} */
} */

summary::marker {
display:none;
color: var(--primary);
}
102 changes: 65 additions & 37 deletions static/css/tw.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -508,6 +508,14 @@ html {
-webkit-tap-highlight-color: transparent;
}

* {
scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
}

*:hover {
scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
}

:root {
color-scheme: light;
--in: 72.06% 0.191 231.6;
Expand Down Expand Up @@ -1552,7 +1560,6 @@ a:hover {
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
border-width: var(--border-btn, 1px);
animation: button-pop var(--animation-btn, 0.25s) ease-out;
transition-property: color, background-color, border-color, opacity, box-shadow, transform;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
Expand Down Expand Up @@ -2325,8 +2332,8 @@ a:hover {
appearance: none;
height: 3rem;
min-height: 3rem;
padding-left: 1rem;
padding-right: 2.5rem;
padding-inline-start: 1rem;
padding-inline-end: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
Expand Down Expand Up @@ -2429,8 +2436,9 @@ a:hover {
align-items: flex-end;
}

.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
.tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
.tabs-lifted:has(.tab-content[class^="rounded-"])
.tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
.tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
border-bottom-color: transparent;
}

Expand Down Expand Up @@ -2490,12 +2498,12 @@ a:hover {
}

:checked + .tab-content:nth-child(2),
.tab-active + .tab-content:nth-child(2) {
:is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) {
border-start-start-radius: 0px;
}

input.tab:checked + .tab-content,
.tab-active + .tab-content {
:is(.tab-active, [aria-selected="true"]) + .tab-content {
display: block;
}

Expand Down Expand Up @@ -2680,6 +2688,12 @@ input.tab:checked + .tab-content,
--tw-rotate: -135deg;
}

@media (prefers-reduced-motion: no-preference) {
.btn {
animation: button-pop var(--animation-btn, 0.25s) ease-out;
}
}

.btn:active:hover,
.btn:active:focus {
animation: button-pop 0s ease-out;
Expand Down Expand Up @@ -3004,6 +3018,10 @@ details.collapse summary::-webkit-details-marker {
margin-inline-start: -1px;
}

.join > :where(*:not(:first-child)):is(.btn) {
margin-inline-start: calc(var(--border-btn) * -1);
}

.link:focus {
outline: 2px solid transparent;
outline-offset: 2px;
Expand Down Expand Up @@ -3562,8 +3580,7 @@ details.collapse summary::-webkit-details-marker {
border-end-start-radius: 0;
}

.tab.tab-active:not(.tab-disabled):not([disabled]),
.tab:is(input:checked) {
.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
--tw-border-opacity: 1;
--tw-text-opacity: 1;
Expand Down Expand Up @@ -3604,8 +3621,7 @@ details.collapse summary::-webkit-details-marker {
padding-top: var(--tab-border, 1px);
}

.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
.tabs-lifted > .tab:is(input:checked) {
.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
background-color: var(--tab-bg);
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
border-inline-start-color: var(--tab-border-color);
Expand All @@ -3617,7 +3633,7 @@ details.collapse summary::-webkit-details-marker {
padding-top: 0;
}

.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
z-index: 1;
content: "";
display: block;
Expand Down Expand Up @@ -3647,30 +3663,30 @@ details.collapse summary::-webkit-details-marker {
background-image: var(--radius-start), var(--radius-end);
}

.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
background-image: var(--radius-end);
background-position: top right;
}

[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
background-image: var(--radius-start);
background-position: top left;
}

.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
background-image: var(--radius-start);
background-position: top left;
}

[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
background-image: var(--radius-end);
background-position: top right;
}

.tabs-lifted
> .tab-active:not(.tab-disabled):not([disabled])
> :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
+ .tabs-lifted
.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
background-image: var(--radius-end);
background-position: top right;
}
Expand All @@ -3679,7 +3695,7 @@ details.collapse summary::-webkit-details-marker {
border-radius: var(--rounded-btn, 0.5rem);
}

:is([dir="rtl"] .table) {
.table:where([dir="rtl"], [dir="rtl"] *) {
text-align: right;
}

Expand All @@ -3705,7 +3721,7 @@ details.collapse summary::-webkit-details-marker {
background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
}

.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
Expand Down Expand Up @@ -3927,7 +3943,7 @@ details.collapse summary::-webkit-details-marker {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] .indicator :where(.indicator-item)) {
.indicator :where(.indicator-item):where([dir="rtl"], [dir="rtl"] *) {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand All @@ -3939,7 +3955,7 @@ details.collapse summary::-webkit-details-marker {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] .indicator :where(.indicator-item.indicator-start)) {
.indicator :where(.indicator-item.indicator-start):where([dir="rtl"], [dir="rtl"] *) {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand All @@ -3951,7 +3967,7 @@ details.collapse summary::-webkit-details-marker {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] .indicator :where(.indicator-item.indicator-center)) {
.indicator :where(.indicator-item.indicator-center):where([dir="rtl"], [dir="rtl"] *) {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand All @@ -3963,7 +3979,7 @@ details.collapse summary::-webkit-details-marker {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] .indicator :where(.indicator-item.indicator-end)) {
.indicator :where(.indicator-item.indicator-end):where([dir="rtl"], [dir="rtl"] *) {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand Down Expand Up @@ -4097,7 +4113,7 @@ details.collapse summary::-webkit-details-marker {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:is([dir="rtl"] .toast:where(.toast-center)) {
.toast:where(.toast-center):where([dir="rtl"], [dir="rtl"] *) {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand Down Expand Up @@ -4192,12 +4208,20 @@ details.collapse summary::-webkit-details-marker {
margin-top: -1px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-inline-start: -1px;
}

.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
margin-inline-start: calc(var(--border-btn) * -1);
}

.modal-top :where(.modal-box) {
width: 100%;
max-width: none;
Expand Down Expand Up @@ -4253,7 +4277,7 @@ details.collapse summary::-webkit-details-marker {
margin-inline-start: -100%;
}

:is([dir="rtl"] .steps-horizontal .step):before {
.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand All @@ -4275,7 +4299,7 @@ details.collapse summary::-webkit-details-marker {
margin-inline-start: 50%;
}

:is([dir="rtl"] .steps-vertical .step):before {
.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Expand Down Expand Up @@ -4313,6 +4337,7 @@ details.collapse summary::-webkit-details-marker {

.tooltip:before {
max-width: 20rem;
white-space: normal;
border-radius: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
Expand Down Expand Up @@ -4862,6 +4887,10 @@ details.collapse summary::-webkit-details-marker {
resize: both;
}

.list-none {
list-style-type: none;
}

.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
Expand Down Expand Up @@ -5194,11 +5223,6 @@ details.collapse summary::-webkit-details-marker {
padding-right: 2rem;
}

.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}

.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
Expand Down Expand Up @@ -5291,10 +5315,6 @@ details.collapse summary::-webkit-details-marker {
padding-top: 0.25rem;
}

.pt-2 {
padding-top: 0.5rem;
}

.pt-3 {
padding-top: 0.75rem;
}
Expand Down Expand Up @@ -5694,6 +5714,10 @@ nav .menu a {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

summary::marker {
display: none;
}

.hover\:cursor-pointer:hover {
cursor: pointer;
}
Expand Down Expand Up @@ -5904,4 +5928,8 @@ nav .menu a {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
display: none;
}
Loading

0 comments on commit 5c92671

Please sign in to comment.