From 80791358c5800cb199e4ee77bcee63cea1c52a92 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 5 Apr 2025 17:59:14 +0200 Subject: [PATCH] Format css files --- src/common/Spinners/BarSpinner/barSpinner.css | 40 +++--- src/common/customloader.css | 6 +- src/components/CoreSyncStatus.css | 108 ++++++++-------- src/components/Group/Forum/texteditor.css | 117 +++++++++--------- src/components/ReactionPicker.css | 47 ++++--- src/index.css | 44 +++---- 6 files changed, 178 insertions(+), 184 deletions(-) diff --git a/src/common/Spinners/BarSpinner/barSpinner.css b/src/common/Spinners/BarSpinner/barSpinner.css index 529bc50..916b5f5 100644 --- a/src/common/Spinners/BarSpinner/barSpinner.css +++ b/src/common/Spinners/BarSpinner/barSpinner.css @@ -1,19 +1,27 @@ /* HTML:
*/ .loader-bar { - width: 45px; - aspect-ratio: .75; - --c:no-repeat linear-gradient(currentColor 0 0); - background: - var(--c) 0% 100%, - var(--c) 50% 100%, - var(--c) 100% 100%; - background-size: 20% 65%; - animation: l8 1s infinite linear; + width: 45px; + aspect-ratio: 0.75; + --c: no-repeat linear-gradient(currentColor 0 0); + background: var(--c) 0% 100%, var(--c) 50% 100%, var(--c) 100% 100%; + background-size: 20% 65%; + animation: l8 1s infinite linear; +} + +@keyframes l8 { + 16.67% { + background-position: 0% 0%, 50% 100%, 100% 100%; } - @keyframes l8 { - 16.67% {background-position: 0% 0% ,50% 100%,100% 100%} - 33.33% {background-position: 0% 0% ,50% 0% ,100% 100%} - 50% {background-position: 0% 0% ,50% 0% ,100% 0% } - 66.67% {background-position: 0% 100%,50% 0% ,100% 0% } - 83.33% {background-position: 0% 100%,50% 100%,100% 0% } - } \ No newline at end of file + 33.33% { + background-position: 0% 0%, 50% 0%, 100% 100%; + } + 50% { + background-position: 0% 0%, 50% 0%, 100% 0%; + } + 66.67% { + background-position: 0% 100%, 50% 0%, 100% 0%; + } + 83.33% { + background-position: 0% 100%, 50% 100%, 100% 0%; + } +} diff --git a/src/common/customloader.css b/src/common/customloader.css index ff3dfbc..b77864d 100644 --- a/src/common/customloader.css +++ b/src/common/customloader.css @@ -1,7 +1,6 @@ - .lds-ellipsis { - color: white - } + color: white; +} .lds-ellipsis, .lds-ellipsis div { box-sizing: border-box; @@ -61,4 +60,3 @@ transform: translate(24px, 0); } } - diff --git a/src/components/CoreSyncStatus.css b/src/components/CoreSyncStatus.css index 87bf9d7..6624845 100644 --- a/src/components/CoreSyncStatus.css +++ b/src/components/CoreSyncStatus.css @@ -1,59 +1,59 @@ - .lineHeight { - line-height: 33%; - } +.lineHeight { + line-height: 33%; +} - .tooltip { - display: inline-block; - position: relative; - text-align: left; - } +.tooltip { + display: inline-block; + position: relative; + text-align: left; +} - .tooltip .bottom { - min-width: 225px; - max-width: 250px; - top: 35px; - right: 0px; - /* transform: translate(-50%, 0); */ - padding: 10px 10px; - color: var(--black); - background-color: var(--bg-2); - font-weight: normal; - font-size: 13px; - border-radius: 8px; - position: absolute; - z-index: 99999999; - box-sizing: border-box; - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); - border: 1px solid var(--black); - visibility: hidden; - opacity: 0; - transition: opacity 0.2s; - } +.tooltip .bottom { + min-width: 225px; + max-width: 250px; + top: 35px; + right: 0px; + /* transform: translate(-50%, 0); */ + padding: 10px 10px; + color: var(--black); + background-color: var(--bg-2); + font-weight: normal; + font-size: 13px; + border-radius: 8px; + position: absolute; + z-index: 99999999; + box-sizing: border-box; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); + border: 1px solid var(--black); + visibility: hidden; + opacity: 0; + transition: opacity 0.2s; +} - .tooltip:hover .bottom { - visibility: visible; - opacity: 1; - z-index: 100; - } +.tooltip:hover .bottom { + visibility: visible; + opacity: 1; + z-index: 100; +} - .tooltip .bottom i { - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -12px; - width: 24px; - height: 12px; - overflow: hidden; - } +.tooltip .bottom i { + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -12px; + width: 24px; + height: 12px; + overflow: hidden; +} - .tooltip .bottom i::after { - content: ''; - position: absolute; - width: 12px; - height: 12px; - left: 50%; - transform: translate(-50%, 50%) rotate(45deg); - background-color: var(--white); - border: 1px solid var(--black); - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); - } \ No newline at end of file +.tooltip .bottom i::after { + content: ""; + position: absolute; + width: 12px; + height: 12px; + left: 50%; + transform: translate(-50%, 50%) rotate(45deg); + background-color: var(--white); + border: 1px solid var(--black); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); +} diff --git a/src/components/Group/Forum/texteditor.css b/src/components/Group/Forum/texteditor.css index e3bbd50..ac6d2ed 100644 --- a/src/components/Group/Forum/texteditor.css +++ b/src/components/Group/Forum/texteditor.css @@ -1,71 +1,70 @@ .ql-editor { - min-height: 200px; - width: 100%; - color: black; - font-size: 16px; - font-family: Roboto; - max-height: 225px; - overflow-y: scroll; - padding: 0px !important; - } + min-height: 200px; + width: 100%; + color: black; + font-size: 16px; + font-family: Roboto; + max-height: 225px; + overflow-y: scroll; + padding: 0px !important; +} - .ql-editor::-webkit-scrollbar-track { - background-color: transparent; - cursor: default; - } - .ql-editor::-webkit-scrollbar-track:hover { - background-color: transparent; - } - - .ql-editor::-webkit-scrollbar { - width: 16px; - height: 10px; - background-color: rgba(229, 229, 229, 0.70); - } - - .ql-editor::-webkit-scrollbar-thumb { - background-color: #B0B0B0; - border-radius: 8px; - background-clip: content-box; - border: 4px solid transparent; - } - - - .ql-editor img { - cursor: default; - } - - .ql-editor-display { - min-height: 20px; - width: 100%; - color: black; - font-size: 16px; - font-family: Roboto; - padding: 0px !important; - } - - .ql-editor-display img { - cursor: default; - } - - .ql-container { - font-size: 16px - } +.ql-editor::-webkit-scrollbar-track { + background-color: transparent; + cursor: default; +} +.ql-editor::-webkit-scrollbar-track:hover { + background-color: transparent; +} - .ql-toolbar .ql-stroke { - fill: none !important; - stroke: black !important; +.ql-editor::-webkit-scrollbar { + width: 16px; + height: 10px; + background-color: rgba(229, 229, 229, 0.7); +} + +.ql-editor::-webkit-scrollbar-thumb { + background-color: #b0b0b0; + border-radius: 8px; + background-clip: content-box; + border: 4px solid transparent; +} + +.ql-editor img { + cursor: default; +} + +.ql-editor-display { + min-height: 20px; + width: 100%; + color: black; + font-size: 16px; + font-family: Roboto; + padding: 0px !important; +} + +.ql-editor-display img { + cursor: default; +} + +.ql-container { + font-size: 16px; +} + +.ql-toolbar .ql-stroke { + fill: none !important; + stroke: black !important; } .ql-toolbar .ql-fill { - fill: black !important; - stroke: none !important; + fill: black !important; + stroke: none !important; } .ql-toolbar .ql-picker { - color: black !important; + color: black !important; } .ql-toolbar .ql-picker-options { - background-color: white !important; -} \ No newline at end of file + background-color: white !important; +} diff --git a/src/components/ReactionPicker.css b/src/components/ReactionPicker.css index 89dbe39..6d0a354 100644 --- a/src/components/ReactionPicker.css +++ b/src/components/ReactionPicker.css @@ -1,27 +1,26 @@ .reaction-container { - position: relative; /* Parent must be positioned relatively */ - } - - .emoji-picker { - position: absolute; /* Picker positioned absolutely relative to the parent */ - right: 0; - z-index: 9000000000; /* Ensure picker appears above other content */ - } - - .message-container { - overflow: visible; /* Ensure the message container doesn't cut off the picker */ - } - + position: relative; /* Parent must be positioned relatively */ +} - .reaction-container { - position: relative; - } - - .emoji-picker { - overflow: hidden; - width: auto - } +.emoji-picker { + position: absolute; /* Picker positioned absolutely relative to the parent */ + right: 0; + z-index: 9000000000; /* Ensure picker appears above other content */ +} - .EmojiPickerReact.epr-dark-theme { - --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */ - } \ No newline at end of file +.message-container { + overflow: visible; /* Ensure the message container doesn't cut off the picker */ +} + +.reaction-container { + position: relative; +} + +.emoji-picker { + overflow: hidden; + width: auto; +} + +.EmojiPickerReact.epr-dark-theme { + --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */ +} diff --git a/src/index.css b/src/index.css index 867382c..6b24232 100644 --- a/src/index.css +++ b/src/index.css @@ -1,43 +1,40 @@ @font-face { - font-family: 'Inter'; - src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype'); + font-family: "Inter"; + src: url("./styles/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; } - @font-face { - font-family: 'Inter'; - src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype'); + font-family: "Inter"; + src: url("./styles/fonts/Inter-ExtraBold.ttf") format("truetype"); font-weight: 800; } @font-face { - font-family: 'Inter'; - src: url('./styles/fonts/Inter-Bold.ttf') format('truetype'); + font-family: "Inter"; + src: url("./styles/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; } @font-face { - font-family: 'Inter'; - src: url('./styles/fonts/Inter-Regular.ttf') format('truetype'); + font-family: "Inter"; + src: url("./styles/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; } - :root { padding: 0px; margin: 0px; box-sizing: border-box !important; word-break: break-word; - --color-instance : #1E1E20; + --color-instance: #1e1e20; --color-instance-popover-bg: #222222; --Mail-Background: rgba(49, 51, 56, 1); --new-message-text: black; - - --bg-primary : rgba(31, 32, 35, 1); + --bg-primary: rgba(31, 32, 35, 1); --bg-2: #27282c; --bg-3: rgba(0, 0, 0, 0.1); - --unread: #4297e2; - --danger: #B14646; - --apps-circle: #1F2023; - --green: #5EB049; + --unread: #4297e2; + --danger: #b14646; + --apps-circle: #1f2023; + --green: #5eb049; } body { @@ -97,10 +94,8 @@ body { initial-value: transparent; } - .scrollable-container { transition: --var1 0.4s; - } .scrollable-container:hover { @@ -115,11 +110,6 @@ body { opacity: 0; } - - - - - /* Mobile-specific scrollbar styles */ @media only screen and (max-width: 600px) { ::-webkit-scrollbar { @@ -137,11 +127,11 @@ body { background-color: whitesmoke; } -html, body { - overscroll-behavior:none !important; +html, +body { + overscroll-behavior: none !important; } .swiper { width: 100%; } -