From 4041e9472ac443015d8efc87721466a9da8ec144 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Mon, 3 Mar 2025 19:42:59 +0100 Subject: [PATCH] refactor(source): css (#171) * separate css into several files by topic, move all css into assets Make separate files for all css topics like leaflet and move its into the assets folder. This way only one include from index.ts points to an index.tsx in assets including all the css files. * fix up compiling * extract more css imports, unify imports in a css.tsx file * separate external css & internal css * renamed icons.css in marker-icons.css --------- Co-authored-by: Anton Tranelis --- .../Subcomponents/Controls/LocateControl.tsx | 1 - src/Components/Map/UtopiaMap.css | 188 ------------------ src/Components/Map/UtopiaMap.tsx | 1 - src/Components/Map/UtopiaMapInner.tsx | 2 - .../Profile/Subcomponents/AvatarWidget.tsx | 1 - .../Profile/Subcomponents/ColorPicker.tsx | 1 - .../Profile/Subcomponents/GalleryView.tsx | 2 - .../css/color-picker.css} | 14 +- src/assets/css/custom-file-upload.css | 18 ++ src/assets/css/leaflet.css | 51 +++++ src/assets/css/marker-icons.css | 118 +++++++++++ src/assets/css/masonry.css | 27 +++ src/assets/css/misc.css | 23 +++ src/assets/css/tailwind.css | 24 +++ src/assets/css/toastify.css | 26 +++ src/css.tsx | 15 ++ src/index.css | 105 ---------- src/index.tsx | 3 +- 18 files changed, 311 insertions(+), 309 deletions(-) delete mode 100644 src/Components/Map/UtopiaMap.css rename src/{Components/Profile/Subcomponents/ColorPicker.css => assets/css/color-picker.css} (89%) create mode 100644 src/assets/css/custom-file-upload.css create mode 100644 src/assets/css/leaflet.css create mode 100644 src/assets/css/marker-icons.css create mode 100644 src/assets/css/masonry.css create mode 100644 src/assets/css/misc.css create mode 100644 src/assets/css/tailwind.css create mode 100644 src/assets/css/toastify.css create mode 100644 src/css.tsx delete mode 100644 src/index.css diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx index 3380f6bc..db555bf2 100644 --- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -12,7 +12,6 @@ import TargetSVG from '#assets/target.svg' // eslint-disable-next-line import/no-unassigned-import import 'leaflet.locatecontrol' -import 'leaflet.locatecontrol/dist/L.Control.Locate.css' // Converts leaflet.locatecontrol to a React Component export const LocateControl = () => { diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css deleted file mode 100644 index a1f1a014..00000000 --- a/src/Components/Map/UtopiaMap.css +++ /dev/null @@ -1,188 +0,0 @@ -.leaflet-container { - text-align: left; - background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-attachment: fixed; - background-position: 50% 80%; - } - - input { - box-sizing: border-box; - } - - textarea { - box-sizing: border-box; - } - - .leaflet-control-attribution { - display: none; - } - - .leaflet-control-locate { - display: none; - } - - .leaflet-data-marker { - - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat; - background-position: 6px 32px; - } - - .crosshair-cursor-enabled { - cursor: crosshair; - } - - .leaflet-container { - cursor: inherit; - } - - .calendar-icon { - position: relative; - top: -35px; - left: 10px; - width: 13px; - } - - .user-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; - } - - .circle-icon { - position: relative; - top: -33px; - left: 10px; - width: 13px; - } - - .fire-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; - } - - .tree-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; - } - - .music-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .quest-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .drum-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; - } - - - .compass-icon { - position: relative; - top: -36.5px; - left: 4px; - width: 24px; - } - - .group-icon { - position: relative; - top: -37px; - left: 4px; - width: 24px; - } - - .liebevoll-jetzt-icon{ - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .staff-snake-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .flower-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .network-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .shop-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .plant-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .circle-dot-icon { - position: relative; - top: -36px; - left: 4px; - width: 24px; - } - - .leaflet-popup-scrolled { - overflow-x: hidden; - } - - .leaflet-popup-content-wrapper, .leaflet-popup-tip{ - background-color: theme('colors.base-100'); - color: theme('colors.base-content'); - - } - - .leaflet-tooltip { - background-color: theme('colors.base-100'); - color: theme('colors.base-content'); - border-width: 0px; - } - - .leaflet-tooltip { - border-radius: 1em; - transition: opacity 500ms; - transition-delay: 50ms; - - } - - .leaflet-tooltip-top::before { - border-top-color: theme('colors.base-100'); - } - - .marker-cluster span { - color: #000; - } \ No newline at end of file diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index ed612563..6d89cebb 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -6,7 +6,6 @@ import { ContextWrapper } from '#components/AppShell/ContextWrapper' import { UtopiaMapInner } from './UtopiaMapInner' import type { UtopiaMapProps } from '#types/UtopiaMapProps' -import 'react-toastify/dist/ReactToastify.css' /** * @category Map diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx index 927a7865..25198f21 100644 --- a/src/Components/Map/UtopiaMapInner.tsx +++ b/src/Components/Map/UtopiaMapInner.tsx @@ -8,11 +8,9 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react' import { TileLayer, useMapEvents, GeoJSON, useMap } from 'react-leaflet' -import 'leaflet/dist/leaflet.css' import MarkerClusterGroup from 'react-leaflet-cluster' import { Outlet, useLocation } from 'react-router-dom' import { toast } from 'react-toastify' -import './UtopiaMap.css' import { containsUUID } from '#utils/ContainsUUID' diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx index 94d1e1f4..b16f0def 100644 --- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx +++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx @@ -8,7 +8,6 @@ import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop' import UserSVG from '#assets/user.svg' import { useAppState } from '#components/AppShell/hooks/useAppState' -import 'react-image-crop/dist/ReactCrop.css' import DialogModal from '#components/Templates/DialogModal' import type { Crop } from 'react-image-crop' diff --git a/src/Components/Profile/Subcomponents/ColorPicker.tsx b/src/Components/Profile/Subcomponents/ColorPicker.tsx index 84160fc0..b75ed28b 100644 --- a/src/Components/Profile/Subcomponents/ColorPicker.tsx +++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx @@ -5,7 +5,6 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { HexColorPicker } from 'react-colorful' -import './ColorPicker.css' import useClickOutside from '#components/Profile/hooks/useClickOutside' // eslint-disable-next-line react/prop-types diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx index affd8515..287131ad 100644 --- a/src/Components/Profile/Subcomponents/GalleryView.tsx +++ b/src/Components/Profile/Subcomponents/GalleryView.tsx @@ -1,8 +1,6 @@ import { useState } from 'react' import { RowsPhotoAlbum } from 'react-photo-album' import ReactLightbox from 'yet-another-react-lightbox' -import 'yet-another-react-lightbox/styles.css' -import 'react-photo-album/rows.css' import { useAppState } from '#components/AppShell/hooks/useAppState' diff --git a/src/Components/Profile/Subcomponents/ColorPicker.css b/src/assets/css/color-picker.css similarity index 89% rename from src/Components/Profile/Subcomponents/ColorPicker.css rename to src/assets/css/color-picker.css index 8fb97fb2..202106fd 100644 --- a/src/Components/Profile/Subcomponents/ColorPicker.css +++ b/src/assets/css/color-picker.css @@ -1,20 +1,20 @@ .picker { position: relative; - } - - .swatch { +} + +.swatch { width: 28px; height: 28px; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; - } - - .popover { +} + +.popover { position: absolute; top: 0; left: 36px; border-radius: 9px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/assets/css/custom-file-upload.css b/src/assets/css/custom-file-upload.css new file mode 100644 index 00000000..8594a921 --- /dev/null +++ b/src/assets/css/custom-file-upload.css @@ -0,0 +1,18 @@ +.custom-file-upload { + cursor: pointer; +} + +input[type="file"] { + display: none; +} + +.custom-file-upload:hover .button { + opacity: 0.8; +} + +.custom-file-upload .button { + transition: .5s ease; + opacity: 0; + position: absolute; + transform: translate(8px, 8px); +} \ No newline at end of file diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css new file mode 100644 index 00000000..5c464e19 --- /dev/null +++ b/src/assets/css/leaflet.css @@ -0,0 +1,51 @@ +.leaflet-control-attribution { + display: none; +} + +.leaflet-control-locate { + display: none; +} + +.leaflet-data-marker { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat; + background-position: 6px 32px; +} + +.leaflet-container { + cursor: inherit; +} + +.leaflet-popup-scrolled { + overflow-x: hidden; +} + +.leaflet-popup-content-wrapper, .leaflet-popup-tip{ + background-color: theme('colors.base-100'); + color: theme('colors.base-content'); + +} + +.leaflet-tooltip { + background-color: theme('colors.base-100'); + color: theme('colors.base-content'); + border-width: 0px; +} + +.leaflet-tooltip { + border-radius: 1em; + transition: opacity 500ms; + transition-delay: 50ms; + +} + +.leaflet-tooltip-top::before { + border-top-color: theme('colors.base-100'); +} + +.leaflet-container { + text-align: left; + background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-attachment: fixed; + background-position: 50% 80%; +} \ No newline at end of file diff --git a/src/assets/css/marker-icons.css b/src/assets/css/marker-icons.css new file mode 100644 index 00000000..c69102d3 --- /dev/null +++ b/src/assets/css/marker-icons.css @@ -0,0 +1,118 @@ +.calendar-icon { + position: relative; + top: -35px; + left: 10px; + width: 13px; +} + +.user-icon { + position: relative; + top: -36px; + left: 10px; + width: 13px; +} + +.circle-icon { + position: relative; + top: -33px; + left: 10px; + width: 13px; +} + +.fire-icon { + position: relative; + top: -36px; + left: 10px; + width: 13px; +} + +.tree-icon { + position: relative; + top: -38px; + left: 4px; + width: 24px; +} + +.music-icon { + position: relative; + top: -35px; + left: 4px; + width: 24px; +} + +.quest-icon { + position: relative; + top: -34px; + left: 4px; + width: 24px; +} + +.drum-icon { + position: relative; + top: -38px; + left: 4px; + width: 24px; +} + +.compass-icon { + position: relative; + top: -36.5px; + left: 4px; + width: 24px; +} + +.group-icon { + position: relative; + top: -37px; + left: 4px; + width: 24px; +} + +.liebevoll-jetzt-icon{ + position: relative; + top: -35px; + left: 4px; + width: 24px; +} + +.staff-snake-icon { + position: relative; + top: -35px; + left: 4px; + width: 24px; +} + +.flower-icon { + position: relative; + top: -35px; + left: 4px; + width: 24px; +} + +.network-icon { + position: relative; + top: -35px; + left: 4px; + width: 24px; +} + +.shop-icon { + position: relative; + top: -34px; + left: 4px; + width: 24px; +} + +.plant-icon { + position: relative; + top: -34px; + left: 4px; + width: 24px; +} + +.circle-dot-icon { + position: relative; + top: -36px; + left: 4px; + width: 24px; +} \ No newline at end of file diff --git a/src/assets/css/masonry.css b/src/assets/css/masonry.css new file mode 100644 index 00000000..873e8c58 --- /dev/null +++ b/src/assets/css/masonry.css @@ -0,0 +1,27 @@ +.masonry { + column-count: 1; + column-gap: 1.5rem; +} + +.masonry-item { + break-inside: avoid; + margin-bottom: 1.5rem; +} + +@media (min-width: 640px) { + .masonry { + column-count: 2; + } +} + +@media (min-width: 1024px) { + .masonry { + column-count: 3; + } +} + +@media (min-width: 1536px) { + .masonry { + column-count: 4; + } +} \ No newline at end of file diff --git a/src/assets/css/misc.css b/src/assets/css/misc.css new file mode 100644 index 00000000..fa6234bb --- /dev/null +++ b/src/assets/css/misc.css @@ -0,0 +1,23 @@ +.fade { + mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent); +} + +.placeholder-center::placeholder { + text-align: center; +} + +input { + box-sizing: border-box; +} + +textarea { + box-sizing: border-box; +} + +.crosshair-cursor-enabled { + cursor: crosshair; +} + +.marker-cluster span { + color: #000; +} \ No newline at end of file diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css new file mode 100644 index 00000000..0c34187f --- /dev/null +++ b/src/assets/css/tailwind.css @@ -0,0 +1,24 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +.tw-modal { + z-index: 1200 !important; +} + +.tw-menu li a { + border-radius: 10px; +} + +.tw-modal { + z-index: 1200 !important; + max-height: 100dvh; +} + +.tw-modal-box { + max-height: calc(100dvh - 2em); +} + +.tw-tab-content .container { + height: 100%; +} \ No newline at end of file diff --git a/src/assets/css/toastify.css b/src/assets/css/toastify.css new file mode 100644 index 00000000..aa235288 --- /dev/null +++ b/src/assets/css/toastify.css @@ -0,0 +1,26 @@ +:root { + --toastify-color-info: theme('colors.info'); + --toastify-color-success: theme('colors.success'); + --toastify-color-warning: theme('colors.warning'); + --toastify-color-error: theme('colors.error'); +} + +.Toastify__toast { + border-radius: 1rem; + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + margin-left: 1rem; + margin-right: 1rem; + margin-bottom: 1rem; + background-color: theme('colors.base-100'); + color: theme('colors.base-content'); +} + +.Toastify__toast-container { + z-index: 2001 !important; +} + +.Toastify__toast-container--top-right { + top: 4.75em !important; +} \ No newline at end of file diff --git a/src/css.tsx b/src/css.tsx new file mode 100644 index 00000000..5856b54a --- /dev/null +++ b/src/css.tsx @@ -0,0 +1,15 @@ +import 'leaflet/dist/leaflet.css' +import 'leaflet.locatecontrol/dist/L.Control.Locate.css' +import 'react-image-crop/dist/ReactCrop.css' +import 'react-photo-album/rows.css' +import 'react-toastify/dist/ReactToastify.css' +import 'yet-another-react-lightbox/styles.css' + +import '#assets/css/tailwind.css' +import '#assets/css/masonry.css' +import '#assets/css/toastify.css' +import '#assets/css/custom-file-upload.css' +import '#assets/css/misc.css' +import '#assets/css/marker-icons.css' +import '#assets/css/leaflet.css' +import '#assets/css/color-picker.css' diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 0790b43c..00000000 --- a/src/index.css +++ /dev/null @@ -1,105 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -.fade { - mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent); -} - -.tw-modal { - z-index: 1200 !important; -} - -.tw-menu li a { - border-radius: 10px; -} - -.tw-modal { - z-index: 1200 !important; - max-height: 100dvh; -} - -.tw-modal-box { - max-height: calc(100dvh - 2em); -} - -.Toastify__toast { - border-radius: 1rem; - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - margin-left: 1rem; - margin-right: 1rem; - margin-bottom: 1rem; - background-color: theme('colors.base-100'); - color: theme('colors.base-content'); -} - -.Toastify__toast-container { - z-index: 2001 !important; -} - -.Toastify__toast-container--top-right { - top: 4.75em !important; -} - -:root { - - --toastify-color-info: theme('colors.info'); - --toastify-color-success: theme('colors.success'); - --toastify-color-warning: theme('colors.warning'); - --toastify-color-error: theme('colors.error'); - -} - -.placeholder-center::placeholder { - text-align: center; -} - -.custom-file-upload { - cursor: pointer; -} - -input[type="file"] { - display: none; -} - -.custom-file-upload:hover .button { - opacity: 0.8; -} - -.custom-file-upload .button { - transition: .5s ease; - opacity: 0; - position: absolute; - transform: translate(8px, 8px); - -} - -.tw-tab-content .container { - height: 100%; -} - -.masonry { - column-count: 1; - column-gap: 1.5rem; -} -.masonry-item { - break-inside: avoid; - margin-bottom: 1.5rem; -} -@media (min-width: 640px) { - .masonry { - column-count: 2; - } -} -@media (min-width: 1024px) { - .masonry { - column-count: 3; - } -} -@media (min-width: 1536px) { - .masonry { - column-count: 4; - } -} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 0e6c5864..b84d77a2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ -import './index.css' +// eslint-disable-next-line import/no-unassigned-import +import './css' export * from './Components/Map' export * from './Components/AppShell'