antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-12 23:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(source): css (#171)

Browse Source 
* 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 <mail@antontranelis.de>
This commit is contained in:
Ulf Gebhardt 2025-03-03 19:42:59 +01:00 committed by GitHub
parent 18e561b8b9
commit 4041e9472a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 311 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Components/Map/Subcomponents/Controls/LocateControl.tsx
View File

@ -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 = () => {

188
src/Components/Map/UtopiaMap.css
View File

@ -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;
}

1
src/Components/Map/UtopiaMap.tsx
View File

@ -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

2
src/Components/Map/UtopiaMapInner.tsx
View File

@ -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'

1
src/Components/Profile/Subcomponents/AvatarWidget.tsx
View File

@ -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'

1
src/Components/Profile/Subcomponents/ColorPicker.tsx
View File

@ -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

2
src/Components/Profile/Subcomponents/GalleryView.tsx
View File

@ -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'

14
src/Components/Profile/Subcomponents/ColorPicker.css → src/assets/css/color-picker.css
View File

@ -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);
}
}

18
src/assets/css/custom-file-upload.css Normal file
View File

@ -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);
}

51
src/assets/css/leaflet.css Normal file
View File

@ -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%;
}

118
src/assets/css/marker-icons.css Normal file
View File

@ -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;
}

27
src/assets/css/masonry.css Normal file
View File

@ -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;
}
}

23
src/assets/css/misc.css Normal file
View File

@ -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;
}

24
src/assets/css/tailwind.css Normal file
View File

@ -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%;
}

26
src/assets/css/toastify.css Normal file
View File

@ -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;
}

15
src/css.tsx Normal file
View File

@ -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'

105
src/index.css
View File

@ -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;
}
}

3
src/index.tsx
View File

@ -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'