From 0145e8fe9973be3ac60f4014094e18c562c80847 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Wed, 4 Dec 2024 15:49:44 -0500 Subject: [PATCH] Fix SCSS formatting after migration (#1382) The migration tool we used didn't take into account our formatting standards so I'm bulk-formatting the SCSS files to bring them back up to our standards. Basically this just changes the tab size for all the files. --- frontend/app/app.scss | 178 ++-- frontend/app/block/block.scss | 774 +++++++++--------- frontend/app/element/avatar.scss | 84 +- frontend/app/element/button.scss | 292 +++---- frontend/app/element/collapsiblemenu.scss | 52 +- frontend/app/element/copybutton.scss | 10 +- frontend/app/element/emojipalette.scss | 50 +- frontend/app/element/expandablemenu.scss | 68 +- frontend/app/element/flyoutmenu.scss | 86 +- frontend/app/element/iconbutton.scss | 36 +- frontend/app/element/input.scss | 140 ++-- frontend/app/element/magnify.scss | 48 +- frontend/app/element/markdown.scss | 388 ++++----- frontend/app/element/menubutton.scss | 24 +- frontend/app/element/modal.scss | 94 +-- frontend/app/element/multilineinput.scss | 36 +- frontend/app/element/quickelems.scss | 14 +- frontend/app/element/quicktips.scss | 154 ++-- frontend/app/element/toggle.scss | 104 +-- frontend/app/element/typingindicator.scss | 62 +- frontend/app/element/windowdrag.scss | 4 +- frontend/app/mixins.scss | 476 +++++------ frontend/app/modals/about.scss | 116 +-- frontend/app/modals/messagemodal.scss | 2 +- frontend/app/modals/modal.scss | 104 +-- frontend/app/modals/tos.scss | 434 +++++----- frontend/app/modals/typeaheadmodal.scss | 192 ++--- frontend/app/modals/userinputmodal.scss | 96 +-- .../app/notification/notificationbubbles.scss | 10 +- .../app/notification/notificationpopover.scss | 96 +-- frontend/app/reset.scss | 12 +- frontend/app/tab/tabbar.scss | 182 ++-- frontend/app/tab/tabcontent.scss | 50 +- frontend/app/tab/updatebanner.scss | 16 +- frontend/app/view/chat/channels.scss | 40 +- frontend/app/view/chat/chat.scss | 46 +- frontend/app/view/chat/chatmessages.scss | 56 +- frontend/app/view/chat/userlist.scss | 38 +- frontend/app/view/codeeditor/codeeditor.scss | 36 +- frontend/app/view/helpview/helpview.scss | 10 +- frontend/app/view/plotview/plotview.scss | 32 +- frontend/app/view/preview/csvview.scss | 148 ++-- frontend/app/view/preview/preview.scss | 118 +-- .../app/view/quicktipsview/quicktipsview.scss | 6 +- frontend/app/view/sysinfo/sysinfo.scss | 52 +- frontend/app/view/term/term.scss | 220 ++--- frontend/app/view/vdom/vdom.scss | 6 +- frontend/app/view/waveai/waveai.scss | 272 +++--- frontend/app/view/webview/webview.scss | 68 +- frontend/app/workspace/workspace.scss | 114 +-- frontend/layout/lib/tilelayout.scss | 242 +++--- frontend/layout/lib/tilelayout.stories.scss | 8 +- public/style.scss | 50 +- 53 files changed, 3023 insertions(+), 3023 deletions(-) diff --git a/frontend/app/app.scss b/frontend/app/app.scss index d2cc0275d..6e780796e 100644 --- a/frontend/app/app.scss +++ b/frontend/app/app.scss @@ -5,148 +5,148 @@ @use "theme.scss"; body { - display: flex; - flex-direction: row; - width: 100vw; - height: 100vh; - color: var(--main-text-color); - font: var(--base-font); - overflow: hidden; - background: rgb(from var(--main-bg-color) r g b / var(--window-opacity)); - -webkit-font-smoothing: auto; - backface-visibility: hidden; - transform: translateZ(0); + display: flex; + flex-direction: row; + width: 100vw; + height: 100vh; + color: var(--main-text-color); + font: var(--base-font); + overflow: hidden; + background: rgb(from var(--main-bg-color) r g b / var(--window-opacity)); + -webkit-font-smoothing: auto; + backface-visibility: hidden; + transform: translateZ(0); } .is-transparent { - background-color: transparent; + background-color: transparent; } a.plain-link { - color: var(--secondary-text-color); + color: var(--secondary-text-color); } *::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 4px; + height: 4px; } *::-webkit-scrollbar-track { - background-color: var(--scrollbar-background-color); + background-color: var(--scrollbar-background-color); } *::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb-color); - border-radius: 4px; - margin: 0 1px 0 1px; + background-color: var(--scrollbar-thumb-color); + border-radius: 4px; + margin: 0 1px 0 1px; } *::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover-color); + background-color: var(--scrollbar-thumb-hover-color); } .flex-spacer { - flex-grow: 1; + flex-grow: 1; } .text-fixed { - font: var(--fixed-font); + font: var(--fixed-font); } #main, .mainapp { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + + .app-background { + pointer-events: none; + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - - .app-background { - pointer-events: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: var(--zindex-app-background); - } + z-index: var(--zindex-app-background); + } } .error-boundary { - color: var(--error-color); + color: var(--error-color); } /* OverlayScrollbars styling */ .os-scrollbar { - --os-handle-bg: var(--scrollbar-thumb-color); - --os-handle-bg-hover: var(--scrollbar-thumb-hover-color); - --os-handle-bg-active: var(--scrollbar-thumb-active-color); + --os-handle-bg: var(--scrollbar-thumb-color); + --os-handle-bg-hover: var(--scrollbar-thumb-hover-color); + --os-handle-bg-active: var(--scrollbar-thumb-active-color); } .scrollbar-hide-until-hover { - *::-webkit-scrollbar-thumb, - *::-webkit-scrollbar-track { - display: none; - } + *::-webkit-scrollbar-thumb, + *::-webkit-scrollbar-track { + display: none; + } - *::-webkit-scrollbar-corner { - display: none; - } + *::-webkit-scrollbar-corner { + display: none; + } - *:hover::-webkit-scrollbar-thumb { - display: block; - } + *:hover::-webkit-scrollbar-thumb { + display: block; + } } a { - color: var(--accent-color); + color: var(--accent-color); } .prefers-reduced-motion { - * { - transition-duration: none !important; - transition-timing-function: none !important; - transition-property: none !important; - transition-delay: none !important; - } + * { + transition-duration: none !important; + transition-timing-function: none !important; + transition-property: none !important; + transition-delay: none !important; + } } .flash-error-container { - position: absolute; - right: 10px; - bottom: 10px; - z-index: var(--zindex-flash-error-container); + position: absolute; + right: 10px; + bottom: 10px; + z-index: var(--zindex-flash-error-container); + display: flex; + flex-direction: column; + gap: 10px; + + .flash-error { + background: var(--error-color); + color: var(--main-text-color); + border-radius: 4px; + padding: 10px; display: flex; flex-direction: column; - gap: 10px; + width: 280px; + border: 1px solid transparent; + max-height: 100px; + cursor: pointer; - .flash-error { - background: var(--error-color); - color: var(--main-text-color); - border-radius: 4px; - padding: 10px; - display: flex; - flex-direction: column; - width: 280px; - border: 1px solid transparent; - max-height: 100px; - cursor: pointer; - - .flash-error-scroll { - overflow-y: auto; - display: flex; - flex-direction: column; - } - - &.hovered { - border: 1px solid var(--main-text-color); - } - - .flash-error-title { - font-weight: bold; - margin-bottom: 5px; - } - - .flash-error-message { - } + .flash-error-scroll { + overflow-y: auto; + display: flex; + flex-direction: column; } + + &.hovered { + border: 1px solid var(--main-text-color); + } + + .flash-error-title { + font-weight: bold; + margin-bottom: 5px; + } + + .flash-error-message { + } + } } diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index b3db9222e..94598df78 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -4,423 +4,423 @@ @use "../mixins.scss"; .block { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + overflow: hidden; + min-height: 0; + border-radius: var(--block-border-radius); + + .block-frame-icon { + margin-right: 0.5em; + } + + .block-content { + position: relative; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + flex-grow: 1; width: 100%; - height: 100%; overflow: hidden; min-height: 0; - border-radius: var(--block-border-radius); + padding: 5px; - .block-frame-icon { - margin-right: 0.5em; + &.block-no-padding { + padding: 0; } + } - .block-content { - position: relative; + .block-focuselem { + height: 0; + width: 0; + input { + width: 0; + height: 0; + opacity: 0; + pointer-events: none; + } + } + + .block-header-animation-wrap { + max-height: 0; + transition: + max-height 0.3s ease-out, + opacity 0.3s ease-out; + overflow: hidden; + position: absolute; + top: 0; + width: 100%; + height: 30px; + z-index: var(--zindex-header-hover); + + &.is-showing { + max-height: 30px; + } + } + + &.block-preview.block-frame-default .block-frame-default-inner .block-frame-default-header { + background-color: rgb(from var(--block-bg-color) r g b / 70%); + } + + &.block-frame-default { + position: relative; + padding: 1px; + + .block-frame-default-inner { + background-color: var(--block-bg-color); + width: 100%; + height: 100%; + border-radius: var(--block-border-radius); + display: flex; + flex-direction: column; + + .block-frame-default-header { + max-height: var(--header-height); + min-height: var(--header-height); display: flex; - flex-grow: 1; - width: 100%; - overflow: hidden; - min-height: 0; - padding: 5px; + padding: 4px 5px 4px 10px; + align-items: center; + gap: 8px; + font: var(--header-font); + border-bottom: 1px solid var(--border-color); + border-radius: var(--block-border-radius) var(--block-border-radius) 0 0; - &.block-no-padding { - padding: 0; + .block-frame-default-header-iconview { + display: flex; + flex-shrink: 3; + min-width: 17px; + align-items: center; + gap: 8px; + overflow-x: hidden; + + .block-frame-view-icon { + font-size: var(--header-icon-size); + opacity: 0.5; + width: var(--header-icon-width); + i { + margin-right: 0; + } + } + + .block-frame-view-type { + overflow-x: hidden; + text-wrap: nowrap; + text-overflow: ellipsis; + flex-shrink: 1; + min-width: 0; + } + + .block-frame-blockid { + opacity: 0.5; + } } - } - .block-focuselem { - height: 0; - width: 0; - input { - width: 0; - height: 0; - opacity: 0; - pointer-events: none; + .block-frame-text { + @include mixins.ellipsis(); + font: var(--fixed-font); + font-size: 11px; + opacity: 0.7; + flex-grow: 1; + + &.preview-filename { + direction: rtl; + text-align: left; + span { + cursor: pointer; + + &:hover { + background: var(--highlight-bg-color); + } + } + } } - } - .block-header-animation-wrap { - max-height: 0; - transition: - max-height 0.3s ease-out, - opacity 0.3s ease-out; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; - height: 30px; - z-index: var(--zindex-header-hover); + .connection-button { + display: flex; + align-items: center; + flex-wrap: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + font-weight: 400; + color: var(--main-text-color); + border-radius: 2px; + padding: auto; - &.is-showing { - max-height: 30px; + &:hover { + background-color: var(--highlight-bg-color); + } + + .connection-icon-box { + flex: 1 1 auto; + overflow: hidden; + } + + .connection-name { + flex: 1 2 auto; + overflow: hidden; + padding-right: 4px; + } + + .connecting-svg { + position: relative; + top: 5px; + left: 9px; + svg { + fill: var(--warning-color); + } + } } - } - &.block-preview.block-frame-default .block-frame-default-inner .block-frame-default-header { - background-color: rgb(from var(--block-bg-color) r g b / 70%); - } + .block-frame-textelems-wrapper { + display: flex; + flex: 1 2 auto; + min-width: 0; + gap: 8px; + align-items: center; - &.block-frame-default { - position: relative; - padding: 1px; - - .block-frame-default-inner { - background-color: var(--block-bg-color); + .block-frame-div { + display: flex; width: 100%; height: 100%; - border-radius: var(--block-border-radius); - display: flex; - flex-direction: column; - - .block-frame-default-header { - max-height: var(--header-height); - min-height: var(--header-height); - display: flex; - padding: 4px 5px 4px 10px; - align-items: center; - gap: 8px; - font: var(--header-font); - border-bottom: 1px solid var(--border-color); - border-radius: var(--block-border-radius) var(--block-border-radius) 0 0; - - .block-frame-default-header-iconview { - display: flex; - flex-shrink: 3; - min-width: 17px; - align-items: center; - gap: 8px; - overflow-x: hidden; - - .block-frame-view-icon { - font-size: var(--header-icon-size); - opacity: 0.5; - width: var(--header-icon-width); - i { - margin-right: 0; - } - } - - .block-frame-view-type { - overflow-x: hidden; - text-wrap: nowrap; - text-overflow: ellipsis; - flex-shrink: 1; - min-width: 0; - } - - .block-frame-blockid { - opacity: 0.5; - } - } - - .block-frame-text { - @include mixins.ellipsis(); - font: var(--fixed-font); - font-size: 11px; - opacity: 0.7; - flex-grow: 1; - - &.preview-filename { - direction: rtl; - text-align: left; - span { - cursor: pointer; - - &:hover { - background: var(--highlight-bg-color); - } - } - } - } - - .connection-button { - display: flex; - align-items: center; - flex-wrap: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 0; - font-weight: 400; - color: var(--main-text-color); - border-radius: 2px; - padding: auto; - - &:hover { - background-color: var(--highlight-bg-color); - } - - .connection-icon-box { - flex: 1 1 auto; - overflow: hidden; - } - - .connection-name { - flex: 1 2 auto; - overflow: hidden; - padding-right: 4px; - } - - .connecting-svg { - position: relative; - top: 5px; - left: 9px; - svg { - fill: var(--warning-color); - } - } - } - - .block-frame-textelems-wrapper { - display: flex; - flex: 1 2 auto; - min-width: 0; - gap: 8px; - align-items: center; - - .block-frame-div { - display: flex; - width: 100%; - height: 100%; - justify-content: space-between; - align-items: center; - - .input-wrapper { - flex-grow: 1; - - input { - background-color: transparent; - outline: none; - border: none; - color: var(--main-text-color); - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - box-sizing: border-box; - opacity: 0.7; - font-weight: 500; - } - } - - .button { - margin-left: 3px; - } - - // webview specific. for refresh button - .iconbutton { - height: 100%; - width: 27px; - display: flex; - align-items: center; - justify-content: center; - } - } - - .menubutton { - .button { - font-size: 11px; - } - } - } - - .block-frame-end-icons { - display: flex; - flex-shrink: 0; - - .iconbutton { - display: flex; - width: 24px; - padding: 4px 6px; - align-items: center; - } - - .block-frame-magnify { - justify-content: center; - align-items: center; - padding: 0; - - svg { - #arrow1, - #arrow2 { - fill: var(--main-text-color); - } - } - } - } - } - - .block-frame-preview { - background-color: rgb(from var(--block-bg-color) r g b / 70%); - width: 100%; - flex-grow: 1; - border-bottom-left-radius: var(--block-border-radius); - border-bottom-right-radius: var(--block-border-radius); - display: flex; - align-items: center; - justify-content: center; - - .iconbutton { - opacity: 0.7; - font-size: 45px; - margin: -30px 0 0 0; - } - } - } - - --magnified-block-opacity: 0.6; - --magnified-block-blur: 10px; - - &.magnified, - &.ephemeral { - background-color: rgb(from var(--block-bg-color) r g b / var(--magnified-block-opacity)); - backdrop-filter: blur(var(--magnified-block-blur)); - } - - .connstatus-overlay { - position: absolute; - top: calc(var(--header-height) + 6px); - left: 6px; - right: 6px; - z-index: var(--zindex-block-mask-inner); - display: flex; + justify-content: space-between; align-items: center; - justify-content: flex-start; - flex-direction: column; - overflow: hidden; - background: var(--conn-status-overlay-bg-color); - backdrop-filter: blur(50px); - border-radius: 6px; - box-shadow: 0px 13px 16px 0px rgb(from var(--block-bg-color) r g b / 40%); - .connstatus-content { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 10px 8px 10px 12px; + .input-wrapper { + flex-grow: 1; + + input { + background-color: transparent; + outline: none; + border: none; + color: var(--main-text-color); width: 100%; - font: var(--base-font); - color: var(--secondary-text-color); - gap: 12px; - - .connstatus-status-icon-wrapper { - display: flex; - flex-direction: row; - align-items: center; - gap: 12px; - flex-grow: 1; - min-width: 0; - - &.has-error { - align-items: flex-start; - } - - > i { - color: #e6ba1e; - font-size: 16px; - } - - .connstatus-status { - @include mixins.ellipsis(); - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - flex-grow: 1; - width: 100%; - - .connstatus-status-text { - @include mixins.ellipsis(); - max-width: 100%; - font-size: 11px; - font-style: normal; - font-weight: 600; - line-height: 16px; - letter-spacing: 0.11px; - color: white; - } - - .connstatus-error { - @include mixins.ellipsis(); - width: 94%; - font-size: 11px; - font-style: normal; - font-weight: 400; - line-height: 15px; - letter-spacing: 0.11px; - } - } - } - - .connstatus-actions { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 6px; - - button { - i { - font-size: 11px; - opacity: 0.7; - } - } - - .button:last-child { - margin-top: 1.5px; - } - } + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: border-box; + opacity: 0.7; + font-weight: 500; + } } + + .button { + margin-left: 3px; + } + + // webview specific. for refresh button + .iconbutton { + height: 100%; + width: 27px; + display: flex; + align-items: center; + justify-content: center; + } + } + + .menubutton { + .button { + font-size: 11px; + } + } } - .block-mask { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 2px solid transparent; - pointer-events: none; - padding: 2px; - border-radius: calc(var(--block-border-radius) + 2px); - z-index: var(--zindex-block-mask-inner); + .block-frame-end-icons { + display: flex; + flex-shrink: 0; - &.show-block-mask { - user-select: none; - pointer-events: auto; - } - - &.show-block-mask .block-mask-inner { - margin-top: var(--header-height); // TODO fix this magic - background-color: rgb(from var(--block-bg-color) r g b / 50%); - height: calc(100% - var(--header-height)); - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - .bignum { - margin-top: -15%; - font-size: 60px; - font-weight: bold; - opacity: 0.7; - } + .iconbutton { + display: flex; + width: 24px; + padding: 4px 6px; + align-items: center; + } + + .block-frame-magnify { + justify-content: center; + align-items: center; + padding: 0; + + svg { + #arrow1, + #arrow2 { + fill: var(--main-text-color); + } } + } } + } - &.block-focused { - .block-mask { - border: 2px solid var(--accent-color); - } + .block-frame-preview { + background-color: rgb(from var(--block-bg-color) r g b / 70%); + width: 100%; + flex-grow: 1; + border-bottom-left-radius: var(--block-border-radius); + border-bottom-right-radius: var(--block-border-radius); + display: flex; + align-items: center; + justify-content: center; - &.block-no-highlight, - &.block-preview { - .block-mask { - border: 2px solid rgb(from var(--border-color) r g b / 10%) !important; - } - } + .iconbutton { + opacity: 0.7; + font-size: 45px; + margin: -30px 0 0 0; } + } } + + --magnified-block-opacity: 0.6; + --magnified-block-blur: 10px; + + &.magnified, + &.ephemeral { + background-color: rgb(from var(--block-bg-color) r g b / var(--magnified-block-opacity)); + backdrop-filter: blur(var(--magnified-block-blur)); + } + + .connstatus-overlay { + position: absolute; + top: calc(var(--header-height) + 6px); + left: 6px; + right: 6px; + z-index: var(--zindex-block-mask-inner); + display: flex; + align-items: center; + justify-content: flex-start; + flex-direction: column; + overflow: hidden; + background: var(--conn-status-overlay-bg-color); + backdrop-filter: blur(50px); + border-radius: 6px; + box-shadow: 0px 13px 16px 0px rgb(from var(--block-bg-color) r g b / 40%); + + .connstatus-content { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px 8px 10px 12px; + width: 100%; + font: var(--base-font); + color: var(--secondary-text-color); + gap: 12px; + + .connstatus-status-icon-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; + flex-grow: 1; + min-width: 0; + + &.has-error { + align-items: flex-start; + } + + > i { + color: #e6ba1e; + font-size: 16px; + } + + .connstatus-status { + @include mixins.ellipsis(); + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex-grow: 1; + width: 100%; + + .connstatus-status-text { + @include mixins.ellipsis(); + max-width: 100%; + font-size: 11px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0.11px; + color: white; + } + + .connstatus-error { + @include mixins.ellipsis(); + width: 94%; + font-size: 11px; + font-style: normal; + font-weight: 400; + line-height: 15px; + letter-spacing: 0.11px; + } + } + } + + .connstatus-actions { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 6px; + + button { + i { + font-size: 11px; + opacity: 0.7; + } + } + + .button:last-child { + margin-top: 1.5px; + } + } + } + } + + .block-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid transparent; + pointer-events: none; + padding: 2px; + border-radius: calc(var(--block-border-radius) + 2px); + z-index: var(--zindex-block-mask-inner); + + &.show-block-mask { + user-select: none; + pointer-events: auto; + } + + &.show-block-mask .block-mask-inner { + margin-top: var(--header-height); // TODO fix this magic + background-color: rgb(from var(--block-bg-color) r g b / 50%); + height: calc(100% - var(--header-height)); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + .bignum { + margin-top: -15%; + font-size: 60px; + font-weight: bold; + opacity: 0.7; + } + } + } + + &.block-focused { + .block-mask { + border: 2px solid var(--accent-color); + } + + &.block-no-highlight, + &.block-preview { + .block-mask { + border: 2px solid rgb(from var(--border-color) r g b / 10%) !important; + } + } + } + } } diff --git a/frontend/app/element/avatar.scss b/frontend/app/element/avatar.scss index e5495cc44..c84be2409 100644 --- a/frontend/app/element/avatar.scss +++ b/frontend/app/element/avatar.scss @@ -4,54 +4,54 @@ @use "../mixins.scss"; .avatar { - position: relative; - width: 50px; - height: 50px; + position: relative; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: var(--border-color); + display: flex; + justify-content: center; + align-items: center; + color: var(--main-text-color); + font-size: 18px; + text-transform: uppercase; + + .avatar-image { + width: 100%; + height: 100%; border-radius: 50%; - background-color: var(--border-color); - display: flex; - justify-content: center; - align-items: center; - color: var(--main-text-color); - font-size: 18px; - text-transform: uppercase; + object-fit: cover; + } - .avatar-image { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; + .avatar-initials { + font-weight: bold; + } + + .status-indicator { + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: transparent; + + &.online { + background-color: var(--success-color); } - .avatar-initials { - font-weight: bold; + &.offline { + background-color: var(--grey-text-color); } - .status-indicator { - position: absolute; - bottom: 2px; - right: 2px; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: transparent; - - &.online { - background-color: var(--success-color); - } - - &.offline { - background-color: var(--grey-text-color); - } - - &.busy { - background-color: var(--error-color); - } - - &.away { - background-color: var(--warning-color); - } + &.busy { + background-color: var(--error-color); } - @include mixins.avatar-dims-mixin(); + &.away { + background-color: var(--warning-color); + } + } + + @include mixins.avatar-dims-mixin(); } diff --git a/frontend/app/element/button.scss b/frontend/app/element/button.scss index cca0930c0..86e9d202f 100644 --- a/frontend/app/element/button.scss +++ b/frontend/app/element/button.scss @@ -4,163 +4,163 @@ @use "../mixins.scss"; .button { - // override default button appearance - border: 1px solid transparent; - outline: 1px solid transparent; - border: 1px solid transparent; + // override default button appearance + border: 1px solid transparent; + outline: 1px solid transparent; + border: 1px solid transparent; - cursor: pointer; - display: flex; + cursor: pointer; + display: flex; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 20px; + padding-right: 20px; + align-items: center; + gap: 4px; + border-radius: 6px; + height: auto; + line-height: 16px; + white-space: nowrap; + user-select: none; + font-size: 14px; + font-weight: normal; + transition: all 0.3s ease; + + &.solid { + &.green { + color: var(--button-text-color); + background-color: var(--accent-color); + border: 1px solid var(--button-green-border-color); + &:hover { + color: var(--button-text-color); + background-color: var(--button-green-border-color); + } + } + + &.grey { + background-color: var(--button-grey-bg); + border: 1px solid var(--button-grey-bg); + color: var(--main-text-color); + &:hover { + color: var(--main-text-color); + background-color: var(--button-grey-hover-bg); + } + } + + &.red { + background-color: var(--button-red-bg); + border: 1px solid var(--button-red-border-color); + color: var(--main-text-color); + &:hover { + background-color: var(--button-red-hover-bg); + } + } + + &.yellow { + color: var(--button-text-color); + background-color: var(--button-yellow-bg); + border: 1px solid var(--button-yellow-hover-bg); + &:hover { + color: var(--button-text-color); + background-color: var(--button-yellow-hover-bg); + } + } + } + + &.outlined { + background-color: transparent; + &.green { + color: var(--accent-color); + border: 1px solid var(--accent-color); + &:hover { + color: var(--button-green-border-color); + border: 1px solid var(--button-green-border-color); + } + } + + &.grey { + border: 1px solid var(--button-grey-outlined-color); + color: var(--button-grey-outlined-color); + &:hover { + color: var(--main-text-color); + border: 1px solid var(--main-text-color); + } + } + + &.red { + border: 1px solid var(--button-red-bg); + color: var(--button-red-bg); + &:hover { + color: var(--button-red-outlined-color); + border: 1px solid var(--button-red-outlined-color); + } + } + + &.yellow { + color: var(--button-yellow-bg); + border: 1px solid var(--button-yellow-bg); + &:hover { + color: var(--button-yellow-hover-bg); + border: 1px solid var(--button-yellow-hover-bg); + } + } + } + + &.ghost { + background-color: transparent; padding-top: 8px; padding-bottom: 8px; - padding-left: 20px; - padding-right: 20px; - align-items: center; - gap: 4px; - border-radius: 6px; - height: auto; - line-height: 16px; - white-space: nowrap; - user-select: none; - font-size: 14px; - font-weight: normal; - transition: all 0.3s ease; + padding-left: 8px; + padding-right: 8px; - &.solid { - &.green { - color: var(--button-text-color); - background-color: var(--accent-color); - border: 1px solid var(--button-green-border-color); - &:hover { - color: var(--button-text-color); - background-color: var(--button-green-border-color); - } - } - - &.grey { - background-color: var(--button-grey-bg); - border: 1px solid var(--button-grey-bg); - color: var(--main-text-color); - &:hover { - color: var(--main-text-color); - background-color: var(--button-grey-hover-bg); - } - } - - &.red { - background-color: var(--button-red-bg); - border: 1px solid var(--button-red-border-color); - color: var(--main-text-color); - &:hover { - background-color: var(--button-red-hover-bg); - } - } - - &.yellow { - color: var(--button-text-color); - background-color: var(--button-yellow-bg); - border: 1px solid var(--button-yellow-hover-bg); - &:hover { - color: var(--button-text-color); - background-color: var(--button-yellow-hover-bg); - } - } + &.green { + border: none; + color: var(--accent-color); + &:hover { + color: var(--button-green-border-color); + } } - &.outlined { - background-color: transparent; - &.green { - color: var(--accent-color); - border: 1px solid var(--accent-color); - &:hover { - color: var(--button-green-border-color); - border: 1px solid var(--button-green-border-color); - } - } - - &.grey { - border: 1px solid var(--button-grey-outlined-color); - color: var(--button-grey-outlined-color); - &:hover { - color: var(--main-text-color); - border: 1px solid var(--main-text-color); - } - } - - &.red { - border: 1px solid var(--button-red-bg); - color: var(--button-red-bg); - &:hover { - color: var(--button-red-outlined-color); - border: 1px solid var(--button-red-outlined-color); - } - } - - &.yellow { - color: var(--button-yellow-bg); - border: 1px solid var(--button-yellow-bg); - &:hover { - color: var(--button-yellow-hover-bg); - border: 1px solid var(--button-yellow-hover-bg); - } - } + &.grey { + border: none; + color: var(--button-grey-outlined-color); + &:hover { + color: var(--main-text-color); + } } - &.ghost { - background-color: transparent; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 8px; - padding-right: 8px; - - &.green { - border: none; - color: var(--accent-color); - &:hover { - color: var(--button-green-border-color); - } - } - - &.grey { - border: none; - color: var(--button-grey-outlined-color); - &:hover { - color: var(--main-text-color); - } - } - - &.red { - border: none; - color: var(--button-red-bg); - &:hover { - color: var(--button-red-border-color); - } - } - - &.yellow { - border: none; - color: var(--button-yellow-bg); - &:hover { - color: var(--button-yellow-hover-bg); - } - } + &.red { + border: none; + color: var(--button-red-bg); + &:hover { + color: var(--button-red-border-color); + } } - &:disabled { - cursor: default; - opacity: 0.5; - pointer-events: none; + &.yellow { + border: none; + color: var(--button-yellow-bg); + &:hover { + color: var(--button-yellow-hover-bg); + } } + } - &:focus-visible { - outline: 1px solid var(--success-color); - outline-offset: 2px; - } + &:disabled { + cursor: default; + opacity: 0.5; + pointer-events: none; + } - // Include mixins - @include mixins.border-radius-mixin(); - @include mixins.vertical-padding-mixin(); - @include mixins.horizontal-padding-mixin(); - @include mixins.font-size-mixin(); - @include mixins.font-weight-mixin(); + &:focus-visible { + outline: 1px solid var(--success-color); + outline-offset: 2px; + } + + // Include mixins + @include mixins.border-radius-mixin(); + @include mixins.vertical-padding-mixin(); + @include mixins.horizontal-padding-mixin(); + @include mixins.font-size-mixin(); + @include mixins.font-weight-mixin(); } diff --git a/frontend/app/element/collapsiblemenu.scss b/frontend/app/element/collapsiblemenu.scss index b73f1f083..ebdc1645b 100644 --- a/frontend/app/element/collapsiblemenu.scss +++ b/frontend/app/element/collapsiblemenu.scss @@ -4,61 +4,61 @@ @use "../mixins.scss"; .collapsible-menu { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .collapsible-menu-item { - padding: 10px; - cursor: pointer; - user-select: none; - padding: 0; + padding: 10px; + cursor: pointer; + user-select: none; + padding: 0; } .collapsible-menu-item-button { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .collapsible-menu-item-content { - display: flex; - align-items: center; + display: flex; + align-items: center; } .collapsible-menu-item-icon { - margin-right: 10px; /* Space between icon and text */ + margin-right: 10px; /* Space between icon and text */ } .collapsible-menu-item-text { - @include mixins.ellipsis(); - text-decoration: none; + @include mixins.ellipsis(); + text-decoration: none; } .nested-list { - list-style: none; - padding-left: 20px; + list-style: none; + padding-left: 20px; } .nested-list.open { - display: block; + display: block; } .nested-list.closed { - display: none; + display: none; } .collapsible-menu-item-button { - padding: 10px; - color: var(--main-text-color); + padding: 10px; + color: var(--main-text-color); - &:hover { - background-color: var(--button-grey-hover-bg); - border-radius: 4px; - } + &:hover { + background-color: var(--button-grey-hover-bg); + border-radius: 4px; + } } .collapsible-menu-item-button.clickable:hover { - background-color: #f0f0f0; + background-color: #f0f0f0; } diff --git a/frontend/app/element/copybutton.scss b/frontend/app/element/copybutton.scss index 1689a0f97..a74e03f9a 100644 --- a/frontend/app/element/copybutton.scss +++ b/frontend/app/element/copybutton.scss @@ -2,10 +2,10 @@ // SPDX-License-Identifier: Apache-2.0 .copy-button { - &.copied { - opacity: 1; - i { - color: var(--success-color); - } + &.copied { + opacity: 1; + i { + color: var(--success-color); } + } } diff --git a/frontend/app/element/emojipalette.scss b/frontend/app/element/emojipalette.scss index b45118589..f85b19c55 100644 --- a/frontend/app/element/emojipalette.scss +++ b/frontend/app/element/emojipalette.scss @@ -2,39 +2,39 @@ // SPDX-License-Identifier: Apache-2.0 .emoji-palette-content { - padding: 10px; - max-height: 350px; - width: 300px; - display: flex; - flex-direction: column; + padding: 10px; + max-height: 350px; + width: 300px; + display: flex; + flex-direction: column; } .emoji-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)); - gap: 10px; - padding: 10px 0; - width: 100%; - height: 300px; - overflow-y: auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)); + gap: 10px; + padding: 10px 0; + width: 100%; + height: 300px; + overflow-y: auto; } .emoji-button { - font-size: 24px; - padding: 5px; - cursor: pointer; - background: none; - border: none; - transition: background-color 0.3s ease; + font-size: 24px; + padding: 5px; + cursor: pointer; + background: none; + border: none; + transition: background-color 0.3s ease; - &:hover { - background-color: rgba(0, 0, 0, 0.1); - border-radius: 5px; - } + &:hover { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 5px; + } } .no-emojis { - font-size: 14px; - color: #888; - text-align: center; + font-size: 14px; + color: #888; + text-align: center; } diff --git a/frontend/app/element/expandablemenu.scss b/frontend/app/element/expandablemenu.scss index 741ee91f6..06709cc97 100644 --- a/frontend/app/element/expandablemenu.scss +++ b/frontend/app/element/expandablemenu.scss @@ -4,70 +4,70 @@ @use "../mixins.scss"; .expandable-menu { - display: flex; - flex-direction: column; - width: 100%; - overflow: visible; + display: flex; + flex-direction: column; + width: 100%; + overflow: visible; } .expandable-menu-item, .expandable-menu-item-group-title { - display: flex; - align-items: center; - padding: 8px 12px; /* Left and right padding, we'll adjust this for the right side */ - cursor: pointer; - box-sizing: border-box; - border-radius: 4px; + display: flex; + align-items: center; + padding: 8px 12px; /* Left and right padding, we'll adjust this for the right side */ + cursor: pointer; + box-sizing: border-box; + border-radius: 4px; - .label { - @include mixins.ellipsis(); - } + .label { + @include mixins.ellipsis(); + } } .expandable-menu-item-group-title { - &:hover { - background-color: var(--button-grey-hover-bg); - } + &:hover { + background-color: var(--button-grey-hover-bg); + } } .expandable-menu-item { - &.with-hover-effect { - &:hover { - background-color: var(--button-grey-hover-bg); - } + &.with-hover-effect { + &:hover { + background-color: var(--button-grey-hover-bg); } + } } .expandable-menu-item-left, .expandable-menu-item-right { - display: flex; - align-items: center; + display: flex; + align-items: center; } .expandable-menu-item-left { - margin-right: 8px; /* Space for the left element */ + margin-right: 8px; /* Space for the left element */ } .expandable-menu-item-right { - margin-left: auto; /* This keeps the right element (if any) on the far right */ - white-space: nowrap; + margin-left: auto; /* This keeps the right element (if any) on the far right */ + white-space: nowrap; } .expandable-menu-item-content { - flex-grow: 1; /* Ensures the content grows to fill available space between left and right elements */ + flex-grow: 1; /* Ensures the content grows to fill available space between left and right elements */ } .expandable-menu-item-group-content { - max-height: 0; - overflow: hidden; - margin-left: 16px; /* Retaining left indentation */ - margin-right: 0; /* Removing right padding */ + max-height: 0; + overflow: hidden; + margin-left: 16px; /* Retaining left indentation */ + margin-right: 0; /* Removing right padding */ - &.open { - max-height: 1000px; /* Ensure large enough max-height for expansion */ - } + &.open { + max-height: 1000px; /* Ensure large enough max-height for expansion */ + } } .no-indent .expandable-menu-item-group-content { - margin-left: 0; // Remove left indentation when noIndent is true + margin-left: 0; // Remove left indentation when noIndent is true } diff --git a/frontend/app/element/flyoutmenu.scss b/frontend/app/element/flyoutmenu.scss index 83f20c1f6..3b485b145 100644 --- a/frontend/app/element/flyoutmenu.scss +++ b/frontend/app/element/flyoutmenu.scss @@ -4,51 +4,51 @@ @use "../mixins.scss"; .menu { - position: absolute; - z-index: 1000; - display: flex; - max-width: 400px; - min-width: 125px; - padding: 2px; - flex-direction: column; - justify-content: flex-end; - align-items: flex-start; - gap: 1px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.15); - background: #212121; - box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3); + position: absolute; + z-index: 1000; + display: flex; + max-width: 400px; + min-width: 125px; + padding: 2px; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 1px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.15); + background: #212121; + box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3); } .menu-item { - display: flex; - align-items: center; - padding: 4px 6px; - cursor: pointer; - color: var(--main-text-color); - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: normal; - letter-spacing: -0.12px; - width: 100%; + display: flex; + align-items: center; + padding: 4px 6px; + cursor: pointer; + color: var(--main-text-color); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.12px; + width: 100%; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: space-between; + + .label { + @include mixins.ellipsis(); + text-decoration: none; + } +} + +.menu-item { + color: var(--main-text-color); + + &:hover { + background-color: var(--accent-color); + color: var(--button-text-color); border-radius: 2px; - display: flex; - align-items: center; - justify-content: space-between; - - .label { - @include mixins.ellipsis(); - text-decoration: none; - } -} - -.menu-item { - color: var(--main-text-color); - - &:hover { - background-color: var(--accent-color); - color: var(--button-text-color); - border-radius: 2px; - } + } } diff --git a/frontend/app/element/iconbutton.scss b/frontend/app/element/iconbutton.scss index d781a23a9..30039304b 100644 --- a/frontend/app/element/iconbutton.scss +++ b/frontend/app/element/iconbutton.scss @@ -1,25 +1,25 @@ .iconbutton { - cursor: pointer; - opacity: 0.7; - align-items: center; + cursor: pointer; + opacity: 0.7; + align-items: center; - &.bulb { - color: var(--bulb-color); - opacity: 1; + &.bulb { + color: var(--bulb-color); + opacity: 1; - &:hover i::before { - content: "\f672"; - position: relative; - left: -1px; - } + &:hover i::before { + content: "\f672"; + position: relative; + left: -1px; } + } - &:hover { - opacity: 1; - } + &:hover { + opacity: 1; + } - &.disabled { - cursor: default; - opacity: 0.45 !important; - } + &.disabled { + cursor: default; + opacity: 0.45 !important; + } } diff --git a/frontend/app/element/input.scss b/frontend/app/element/input.scss index fda37d42a..daaf40a0e 100644 --- a/frontend/app/element/input.scss +++ b/frontend/app/element/input.scss @@ -4,90 +4,90 @@ @use "../mixins.scss"; .input { - width: 100%; - border: none; - font-size: 12px; - outline: none; - background-color: transparent; - color: var(--form-element-text-color); - background: var(--form-element-bg-color); - border: 2px solid var(--form-element-border-color); - border-radius: 6px; - padding: 4px 7px; + width: 100%; + border: none; + font-size: 12px; + outline: none; + background-color: transparent; + color: var(--form-element-text-color); + background: var(--form-element-bg-color); + border: 2px solid var(--form-element-border-color); + border-radius: 6px; + padding: 4px 7px; - &:focus { - border-color: var(--form-element-primary-color); - } + &:focus { + border-color: var(--form-element-primary-color); + } - &.disabled { - opacity: 0.75; - } + &.disabled { + opacity: 0.75; + } - &.error { - border-color: var(--form-element-error-color); - } + &.error { + border-color: var(--form-element-error-color); + } - // Include mixins - @include mixins.border-radius-mixin(); - @include mixins.vertical-padding-mixin(); - @include mixins.horizontal-padding-mixin(); - @include mixins.font-size-mixin(); - @include mixins.font-weight-mixin(); + // Include mixins + @include mixins.border-radius-mixin(); + @include mixins.vertical-padding-mixin(); + @include mixins.horizontal-padding-mixin(); + @include mixins.font-size-mixin(); + @include mixins.font-weight-mixin(); } /* Styles when an InputGroup is present */ .input-group { + display: flex; + align-items: center; + border-radius: 6px; + position: relative; + width: 100%; + border: 2px solid var(--form-element-border-color); + background: var(--form-element-bg-color); + + /* Focus style for InputGroup */ + &.focused { + border-color: var(--form-element-primary-color); + } + + /* Error state for InputGroup */ + &.error { + border-color: var(--form-element-error-color); + } + + /* Disabled state for InputGroup */ + &.disabled { + opacity: 0.75; + } + + &:hover { + cursor: text; + } + + .input-left-element, + .input-right-element { + padding: 0 5px; display: flex; align-items: center; - border-radius: 6px; - position: relative; - width: 100%; - border: 2px solid var(--form-element-border-color); - background: var(--form-element-bg-color); + justify-content: center; + } - /* Focus style for InputGroup */ - &.focused { - border-color: var(--form-element-primary-color); + .input { + border: none; + flex-grow: 1; + border-radius: none; + + &:focus { + border-color: transparent; } - /* Error state for InputGroup */ &.error { - border-color: var(--form-element-error-color); + border-color: transparent; } + } - /* Disabled state for InputGroup */ - &.disabled { - opacity: 0.75; - } - - &:hover { - cursor: text; - } - - .input-left-element, - .input-right-element { - padding: 0 5px; - display: flex; - align-items: center; - justify-content: center; - } - - .input { - border: none; - flex-grow: 1; - border-radius: none; - - &:focus { - border-color: transparent; - } - - &.error { - border-color: transparent; - } - } - - // Include mixins - @include mixins.border-radius-mixin(); - @include mixins.font-size-mixin(); - @include mixins.font-weight-mixin(); + // Include mixins + @include mixins.border-radius-mixin(); + @include mixins.font-size-mixin(); + @include mixins.font-weight-mixin(); } diff --git a/frontend/app/element/magnify.scss b/frontend/app/element/magnify.scss index 111674fdd..8cfe3522c 100644 --- a/frontend/app/element/magnify.scss +++ b/frontend/app/element/magnify.scss @@ -2,30 +2,30 @@ // SPDX-License-Identifier: Apache-2.0 .magnify-icon { - display: inline-block; - width: 15px; - height: 15px; + display: inline-block; + width: 15px; + height: 15px; + svg { + #arrow1 { + transform: rotate(180deg); + transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself + } + #arrow2 { + transform: rotate(-180deg); + transform-origin: calc(70.833% + 4px) calc(29.167% + 4px); + } + #arrow1, + #arrow2 { + transition: transform 300ms ease-in; + transition-delay: 100ms; + } + } + &.enabled { svg { - #arrow1 { - transform: rotate(180deg); - transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself - } - #arrow2 { - transform: rotate(-180deg); - transform-origin: calc(70.833% + 4px) calc(29.167% + 4px); - } - #arrow1, - #arrow2 { - transition: transform 300ms ease-in; - transition-delay: 100ms; - } - } - &.enabled { - svg { - #arrow1, - #arrow2 { - transform: rotate(0deg); - } - } + #arrow1, + #arrow2 { + transform: rotate(0deg); + } } + } } diff --git a/frontend/app/element/markdown.scss b/frontend/app/element/markdown.scss index 9673f2681..92bb9fff9 100644 --- a/frontend/app/element/markdown.scss +++ b/frontend/app/element/markdown.scss @@ -2,210 +2,210 @@ // SPDX-License-Identifier: Apache-2.0 .markdown { - display: flex; - flex-direction: row; - overflow: hidden; + display: flex; + flex-direction: row; + overflow: hidden; + height: 100%; + width: 100%; + + .content { height: 100%; width: 100%; + overflow: scroll; + line-height: 1.5; + color: var(--main-text-color); + font-family: var(--markdown-font); + font-size: 14px; + overflow-wrap: break-word; - .content { - height: 100%; - width: 100%; - overflow: scroll; + &.non-scrollable { + overflow: hidden; + } + + .heading { + &:first-of-type { + margin-top: 0 !important; + } + color: var(--main-text-color); + margin-top: 16px; + margin-bottom: 8px; + } + + strong { + color: var(--main-text-color); + } + + a { + color: #32afff; + } + + ul { + list-style-type: disc; + list-style-position: outside; + margin-left: 16px; + } + + ol { + list-style-position: outside; + margin-left: 19px; + } + + blockquote { + margin: 4px 10px 4px 10px; + border-radius: 3px; + background-color: var(--panel-bg-color); + padding: 2px 4px 2px 6px; + } + + pre.codeblock { + background-color: var(--panel-bg-color); + margin: 4px 10px; + padding: 0.4em 0.7em; + border-radius: 4px; + position: relative; + + code { line-height: 1.5; - color: var(--main-text-color); - font-family: var(--markdown-font); + white-space: pre-wrap; + word-wrap: break-word; + overflow: auto; + overflow: hidden; + background-color: transparent; + } + + .codeblock-actions { + visibility: hidden; + display: flex; + position: absolute; + top: 0; + right: 0; + border-radius: 4px; + backdrop-filter: blur(8px); + margin: 2px 2px; + padding: 4px 4px; + align-items: center; + justify-content: flex-end; + gap: 4px; + } + + &:hover .codeblock-actions { + visibility: visible; + } + } + + code { + color: var(--main-text-color); + font: var(--fixed-font); + border-radius: 4px; + } + + pre.selected { + outline: 2px solid var(--accent-color); + } + + .heading { + font-weight: semibold; + padding-top: 6px; + } + + .heading.is-1 { + border-bottom: 1px solid var(--border-color); + padding-bottom: 6px; + font-size: 2em; + } + .heading.is-2 { + border-bottom: 1px solid var(--border-color); + padding-bottom: 6px; + font-size: 1.5em; + } + .heading.is-3 { + font-size: 1.25em; + } + .heading.is-4 { + font-size: 1em; + } + .heading.is-5 { + font-size: 0.875em; + } + .heading.is-6 { + font-size: 0.85em; + } + + .waveblock { + margin: 16px 0; + + .wave-block-content { + display: flex; + align-items: center; + padding: 12px; + background-color: var(--highlight-bg-color); + border: 1px solid var(--border-color); + border-radius: 8px; + transition: background-color 0.2s ease; + } + + .wave-block-icon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background-color: black; + border-radius: 8px; + margin-right: 12px; + } + + .wave-block-icon i { + font-size: 18px; + color: var(--secondary-text-color); + } + + .wave-block-info { + display: flex; + flex-direction: column; + } + + .wave-block-filename { font-size: 14px; - overflow-wrap: break-word; + font-weight: 500; + color: var(--main-text-color); + } - &.non-scrollable { - overflow: hidden; - } - - .heading { - &:first-of-type { - margin-top: 0 !important; - } - color: var(--main-text-color); - margin-top: 16px; - margin-bottom: 8px; - } - - strong { - color: var(--main-text-color); - } - - a { - color: #32afff; - } - - ul { - list-style-type: disc; - list-style-position: outside; - margin-left: 16px; - } - - ol { - list-style-position: outside; - margin-left: 19px; - } - - blockquote { - margin: 4px 10px 4px 10px; - border-radius: 3px; - background-color: var(--panel-bg-color); - padding: 2px 4px 2px 6px; - } - - pre.codeblock { - background-color: var(--panel-bg-color); - margin: 4px 10px; - padding: 0.4em 0.7em; - border-radius: 4px; - position: relative; - - code { - line-height: 1.5; - white-space: pre-wrap; - word-wrap: break-word; - overflow: auto; - overflow: hidden; - background-color: transparent; - } - - .codeblock-actions { - visibility: hidden; - display: flex; - position: absolute; - top: 0; - right: 0; - border-radius: 4px; - backdrop-filter: blur(8px); - margin: 2px 2px; - padding: 4px 4px; - align-items: center; - justify-content: flex-end; - gap: 4px; - } - - &:hover .codeblock-actions { - visibility: visible; - } - } - - code { - color: var(--main-text-color); - font: var(--fixed-font); - border-radius: 4px; - } - - pre.selected { - outline: 2px solid var(--accent-color); - } - - .heading { - font-weight: semibold; - padding-top: 6px; - } - - .heading.is-1 { - border-bottom: 1px solid var(--border-color); - padding-bottom: 6px; - font-size: 2em; - } - .heading.is-2 { - border-bottom: 1px solid var(--border-color); - padding-bottom: 6px; - font-size: 1.5em; - } - .heading.is-3 { - font-size: 1.25em; - } - .heading.is-4 { - font-size: 1em; - } - .heading.is-5 { - font-size: 0.875em; - } - .heading.is-6 { - font-size: 0.85em; - } - - .waveblock { - margin: 16px 0; - - .wave-block-content { - display: flex; - align-items: center; - padding: 12px; - background-color: var(--highlight-bg-color); - border: 1px solid var(--border-color); - border-radius: 8px; - transition: background-color 0.2s ease; - } - - .wave-block-icon { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - background-color: black; - border-radius: 8px; - margin-right: 12px; - } - - .wave-block-icon i { - font-size: 18px; - color: var(--secondary-text-color); - } - - .wave-block-info { - display: flex; - flex-direction: column; - } - - .wave-block-filename { - font-size: 14px; - font-weight: 500; - color: var(--main-text-color); - } - - .wave-block-size { - font-size: 12px; - color: var(--secondary-text-color); - } - } + .wave-block-size { + font-size: 12px; + color: var(--secondary-text-color); + } } + } - // The TOC view should scroll independently of the contents view. - .toc { - max-width: 40%; - height: 100%; - overflow: scroll; - border-left: 1px solid var(--border-color); - .toc-inner { - height: fit-content; - position: sticky; - top: 0; - display: flex; - flex-direction: column; - gap: 5px; - text-wrap: wrap; + // The TOC view should scroll independently of the contents view. + .toc { + max-width: 40%; + height: 100%; + overflow: scroll; + border-left: 1px solid var(--border-color); + .toc-inner { + height: fit-content; + position: sticky; + top: 0; + display: flex; + flex-direction: column; + gap: 5px; + text-wrap: wrap; - h4 { - padding-left: 5px; - } + h4 { + padding-left: 5px; + } - .toc-item { - cursor: pointer; - --indent-factor: 1; + .toc-item { + cursor: pointer; + --indent-factor: 1; - // The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly. - // The indent factor is set in the React code and denotes the depth of the item in the TOC tree. - padding-left: calc((var(--indent-factor) - 1) * 10px + 5px); - text-indent: -5px; - } - } + // The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly. + // The indent factor is set in the React code and denotes the depth of the item in the TOC tree. + padding-left: calc((var(--indent-factor) - 1) * 10px + 5px); + text-indent: -5px; + } } + } } diff --git a/frontend/app/element/menubutton.scss b/frontend/app/element/menubutton.scss index e74601aa4..d68980970 100644 --- a/frontend/app/element/menubutton.scss +++ b/frontend/app/element/menubutton.scss @@ -1,15 +1,15 @@ .menubutton { - overflow: hidden; - .menu-anchor { - width: 100%; - .button { - width: 100%; - div { - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - flex-shrink: 1; - } - } + overflow: hidden; + .menu-anchor { + width: 100%; + .button { + width: 100%; + div { + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + flex-shrink: 1; + } } + } } diff --git a/frontend/app/element/modal.scss b/frontend/app/element/modal.scss index 5339d03fb..99f24921f 100644 --- a/frontend/app/element/modal.scss +++ b/frontend/app/element/modal.scss @@ -2,56 +2,56 @@ // SPDX-License-Identifier: Apache-2.0 .modal-container { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100%; - z-index: var(--zindex-elem-modal); - background-color: rgba(21, 23, 21, 0.7); + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100%; + z-index: var(--zindex-elem-modal); + background-color: rgba(21, 23, 21, 0.7); - .modal { - display: flex; - flex-direction: column; - border-radius: 10px; - padding: 0; - width: 80%; - margin-top: 25vh; - margin-left: auto; - margin-right: auto; - background: var(--main-bg-color); - border: 1px solid var(--border-color); + .modal { + display: flex; + flex-direction: column; + border-radius: 10px; + padding: 0; + width: 80%; + margin-top: 25vh; + margin-left: auto; + margin-right: auto; + background: var(--main-bg-color); + border: 1px solid var(--border-color); - .modal-header { - display: flex; - flex-direction: column; - padding: 20px 20px 10px; - border-bottom: 1px solid var(--border-color); + .modal-header { + display: flex; + flex-direction: column; + padding: 20px 20px 10px; + border-bottom: 1px solid var(--border-color); - .modal-title { - margin: 0 0 5px; - color: var(--main-text-color); - font-size: var(--title-font-size); - } + .modal-title { + margin: 0 0 5px; + color: var(--main-text-color); + font-size: var(--title-font-size); + } - p { - margin: 0; - font-size: 0.8rem; - color: var(--secondary-text-color); - } - } - - .modal-content { - padding: 20px; - overflow: auto; - } - - .modal-footer { - display: flex; - flex-direction: row; - justify-content: flex-end; - padding: 15px 20px; - gap: 20px; - } + p { + margin: 0; + font-size: 0.8rem; + color: var(--secondary-text-color); + } } + + .modal-content { + padding: 20px; + overflow: auto; + } + + .modal-footer { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: 15px 20px; + gap: 20px; + } + } } diff --git a/frontend/app/element/multilineinput.scss b/frontend/app/element/multilineinput.scss index 0296eeddc..d9f00b8f4 100644 --- a/frontend/app/element/multilineinput.scss +++ b/frontend/app/element/multilineinput.scss @@ -2,23 +2,23 @@ // SPDX-License-Identifier: Apache-2.0 .multiline-input { - flex-grow: 1; - box-shadow: none; - box-sizing: border-box; - background-color: transparent; - resize: none; - overflow-y: auto; - line-height: 1.5; - color: var(--form-element-text-color); - vertical-align: top; - height: auto; - padding: 0; - border: 1px solid var(--form-element-border-color); - padding: 5px; - border-radius: 4px; - min-height: 26px; + flex-grow: 1; + box-shadow: none; + box-sizing: border-box; + background-color: transparent; + resize: none; + overflow-y: auto; + line-height: 1.5; + color: var(--form-element-text-color); + vertical-align: top; + height: auto; + padding: 0; + border: 1px solid var(--form-element-border-color); + padding: 5px; + border-radius: 4px; + min-height: 26px; - &:focus-visible { - outline: none; - } + &:focus-visible { + outline: none; + } } diff --git a/frontend/app/element/quickelems.scss b/frontend/app/element/quickelems.scss index b4f845323..5d09ceedd 100644 --- a/frontend/app/element/quickelems.scss +++ b/frontend/app/element/quickelems.scss @@ -2,11 +2,11 @@ // SPDX-License-Identifier: Apache-2.0 .centered-div { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - overflow: hidden; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + overflow: hidden; } diff --git a/frontend/app/element/quicktips.scss b/frontend/app/element/quicktips.scss index e3ff547e8..f21c8e36c 100644 --- a/frontend/app/element/quicktips.scss +++ b/frontend/app/element/quicktips.scss @@ -2,85 +2,85 @@ // SPDX-License-Identifier: Apache-2.0 .tips-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + + .tips-section { display: flex; - flex-direction: row; - justify-content: center; - width: 100%; + flex-direction: column; + flex-grow: 1; + gap: 5px; - .tips-section { - display: flex; - flex-direction: column; - flex-grow: 1; - gap: 5px; + .tip-section-header { + font-weight: bold; + margin-bottom: 5px; + margin-top: 10px; + font-size: 16px; - .tip-section-header { - font-weight: bold; - margin-bottom: 5px; - margin-top: 10px; - font-size: 16px; - - &:first-child { - margin-top: 0; - } - } - - .tip { - display: flex; - flex-direction: row; - align-items: center; - - code { - padding: 0.1em 0.4em; - background-color: var(--highlight-bg-color); - } - - .keybinding-group { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 5px; - margin-right: 5px; - align-self: flex-start; - - &:first-child { - margin-left: 0; - } - } - - .keybinding { - display: inline-block; - padding: 0.1em 0.4em; - margin: 0 0.1em; - font: var(--fixed-font); - font-size: 0.85em; - color: var(--keybinding-color); - background-color: var(--highlight-bg-color); - border-radius: 4px; - border: 1px solid var(--keybinding-border-color); - box-shadow: none; - white-space: nowrap; - } - - .icon-wrap { - background-color: var(--highlight-bg-color); - padding: 2px; - color: var(--secondary-text-color); - font-size: 12px; - border-radius: 2px; - margin-right: 5px; - align-self: flex-start; - - svg { - position: relative; - top: 3px; - left: 1px; - height: 13px; - #arrow1, - #arrow2 { - fill: var(--main-text-color); - } - } - } - } + &:first-child { + margin-top: 0; + } } + + .tip { + display: flex; + flex-direction: row; + align-items: center; + + code { + padding: 0.1em 0.4em; + background-color: var(--highlight-bg-color); + } + + .keybinding-group { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 5px; + margin-right: 5px; + align-self: flex-start; + + &:first-child { + margin-left: 0; + } + } + + .keybinding { + display: inline-block; + padding: 0.1em 0.4em; + margin: 0 0.1em; + font: var(--fixed-font); + font-size: 0.85em; + color: var(--keybinding-color); + background-color: var(--highlight-bg-color); + border-radius: 4px; + border: 1px solid var(--keybinding-border-color); + box-shadow: none; + white-space: nowrap; + } + + .icon-wrap { + background-color: var(--highlight-bg-color); + padding: 2px; + color: var(--secondary-text-color); + font-size: 12px; + border-radius: 2px; + margin-right: 5px; + align-self: flex-start; + + svg { + position: relative; + top: 3px; + left: 1px; + height: 13px; + #arrow1, + #arrow2 { + fill: var(--main-text-color); + } + } + } + } + } } diff --git a/frontend/app/element/toggle.scss b/frontend/app/element/toggle.scss index e66dbc43c..3cf0fe87a 100644 --- a/frontend/app/element/toggle.scss +++ b/frontend/app/element/toggle.scss @@ -2,61 +2,61 @@ // SPDX-License-Identifier: Apache-2.0 .check-toggle-wrapper { - user-select: none; - display: flex; - height: 100%; - align-items: center; - justify-content: center; + user-select: none; + display: flex; + height: 100%; + align-items: center; + justify-content: center; - .checkbox-toggle { - position: relative; - display: inline-block; - width: 32px; - height: 20px; + .checkbox-toggle { + position: relative; + display: inline-block; + width: 32px; + height: 20px; - input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: var(--toggle-bg-color); - transition: 0.5s; - border-radius: 33px; - } - - .slider:before { - position: absolute; - content: ""; - height: 16px; - width: 16px; - left: 3px; - bottom: 2px; - background-color: var(--toggle-thumb-color); - transition: 0.5s; - border-radius: 50%; - } - - input:checked + .slider { - background-color: var(--toggle-checked-bg-color); - } - - input:checked + .slider:before { - transform: translateX(11px); - } + input { + opacity: 0; + width: 0; + height: 0; } - label, - .toggle-label { - cursor: pointer; - padding: 0 5px; + .slider { + position: absolute; + cursor: pointer; + content: ""; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--toggle-bg-color); + transition: 0.5s; + border-radius: 33px; } + + .slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 3px; + bottom: 2px; + background-color: var(--toggle-thumb-color); + transition: 0.5s; + border-radius: 50%; + } + + input:checked + .slider { + background-color: var(--toggle-checked-bg-color); + } + + input:checked + .slider:before { + transform: translateX(11px); + } + } + + label, + .toggle-label { + cursor: pointer; + padding: 0 5px; + } } diff --git a/frontend/app/element/typingindicator.scss b/frontend/app/element/typingindicator.scss index dae78ed8f..4d977bd9d 100644 --- a/frontend/app/element/typingindicator.scss +++ b/frontend/app/element/typingindicator.scss @@ -6,41 +6,41 @@ $dot-color: var(--success-color); $speed: 1.5s; .typing { - position: relative; + position: relative; + height: $dot-width; + + span { + content: ""; + animation: blink $speed infinite; + animation-fill-mode: both; height: $dot-width; + width: $dot-width; + background: $dot-color; + position: absolute; + left: 0; + top: 0; + border-radius: 50%; - span { - content: ""; - animation: blink $speed infinite; - animation-fill-mode: both; - height: $dot-width; - width: $dot-width; - background: $dot-color; - position: absolute; - left: 0; - top: 0; - border-radius: 50%; - - &:nth-child(2) { - animation-delay: 0.2s; - margin-left: $dot-width * 1.5; - } - - &:nth-child(3) { - animation-delay: 0.4s; - margin-left: $dot-width * 3; - } + &:nth-child(2) { + animation-delay: 0.2s; + margin-left: $dot-width * 1.5; } + + &:nth-child(3) { + animation-delay: 0.4s; + margin-left: $dot-width * 3; + } + } } @keyframes blink { - 0% { - opacity: 0.1; - } - 20% { - opacity: 1; - } - 100% { - opacity: 0.1; - } + 0% { + opacity: 0.1; + } + 20% { + opacity: 1; + } + 100% { + opacity: 0.1; + } } diff --git a/frontend/app/element/windowdrag.scss b/frontend/app/element/windowdrag.scss index 795e7d645..5b86487f6 100644 --- a/frontend/app/element/windowdrag.scss +++ b/frontend/app/element/windowdrag.scss @@ -2,6 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 .window-drag { - -webkit-app-region: drag; - z-index: var(--zindex-window-drag); + -webkit-app-region: drag; + z-index: var(--zindex-window-drag); } diff --git a/frontend/app/mixins.scss b/frontend/app/mixins.scss index eb451d9bf..4f733e858 100644 --- a/frontend/app/mixins.scss +++ b/frontend/app/mixins.scss @@ -1,268 +1,268 @@ // Copyright 2024, Command Line Inc. // SPDX-License-Identifier: Apache-2.0 -@mixin ellipsis(){ - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +@mixin ellipsis() { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -@mixin border-radius-mixin(){ - &.border-radius-2 { - border-radius: 4px; - } - &.border-radius-3 { - border-radius: 3px; - } - &.border-radius-4 { - border-radius: 4px; - } - &.border-radius-5 { - border-radius: 5px; - } - &.border-radius-6 { - border-radius: 6px; - } - &.border-radius-7 { - border-radius: 7px; - } - &.border-radius-8 { - border-radius: 8px; - } - &.border-radius-9 { - border-radius: 9px; - } - &.border-radius-10 { - border-radius: 10px; - } +@mixin border-radius-mixin() { + &.border-radius-2 { + border-radius: 4px; + } + &.border-radius-3 { + border-radius: 3px; + } + &.border-radius-4 { + border-radius: 4px; + } + &.border-radius-5 { + border-radius: 5px; + } + &.border-radius-6 { + border-radius: 6px; + } + &.border-radius-7 { + border-radius: 7px; + } + &.border-radius-8 { + border-radius: 8px; + } + &.border-radius-9 { + border-radius: 9px; + } + &.border-radius-10 { + border-radius: 10px; + } } -@mixin vertical-padding-mixin(){ - &.vertical-padding-0 { - padding-top: 0px; - padding-bottom: 0px; - } - &.vertical-padding-1 { - padding-top: 1px; - padding-bottom: 1px; - } - &.vertical-padding-2 { - padding-top: 2px; - padding-bottom: 2px; - } - &.vertical-padding-3 { - padding-top: 3px; - padding-bottom: 3px; - } - &.vertical-padding-4 { - padding-top: 4px; - padding-bottom: 4px; - } - &.vertical-padding-5 { - padding-top: 5px; - padding-bottom: 5px; - } - &.vertical-padding-6 { - padding-top: 6px; - padding-bottom: 6px; - } - &.vertical-padding-7 { - padding-top: 7px; - padding-bottom: 7px; - } - &.vertical-padding-8 { - padding-top: 8px; - padding-bottom: 8px; - } - &.vertical-padding-9 { - padding-top: 9px; - padding-bottom: 9px; - } - &.vertical-padding-10 { - padding-top: 10px; - padding-bottom: 10px; - } +@mixin vertical-padding-mixin() { + &.vertical-padding-0 { + padding-top: 0px; + padding-bottom: 0px; + } + &.vertical-padding-1 { + padding-top: 1px; + padding-bottom: 1px; + } + &.vertical-padding-2 { + padding-top: 2px; + padding-bottom: 2px; + } + &.vertical-padding-3 { + padding-top: 3px; + padding-bottom: 3px; + } + &.vertical-padding-4 { + padding-top: 4px; + padding-bottom: 4px; + } + &.vertical-padding-5 { + padding-top: 5px; + padding-bottom: 5px; + } + &.vertical-padding-6 { + padding-top: 6px; + padding-bottom: 6px; + } + &.vertical-padding-7 { + padding-top: 7px; + padding-bottom: 7px; + } + &.vertical-padding-8 { + padding-top: 8px; + padding-bottom: 8px; + } + &.vertical-padding-9 { + padding-top: 9px; + padding-bottom: 9px; + } + &.vertical-padding-10 { + padding-top: 10px; + padding-bottom: 10px; + } } -@mixin horizontal-padding-mixin(){ - &.horizontal-padding-0 { - padding-left: 0px; - padding-right: 0px; - } - &.horizontal-padding-1 { - padding-left: 1px; - padding-right: 1px; - } - &.horizontal-padding-2 { - padding-left: 2px; - padding-right: 2px; - } - &.horizontal-padding-3 { - padding-left: 3px; - padding-right: 3px; - } - &.horizontal-padding-4 { - padding-left: 4px; - padding-right: 4px; - } - &.horizontal-padding-5 { - padding-left: 5px; - padding-right: 5px; - } - &.horizontal-padding-6 { - padding-left: 6px; - padding-right: 6px; - } - &.horizontal-padding-7 { - padding-left: 7px; - padding-right: 7px; - } - &.horizontal-padding-8 { - padding-left: 8px; - padding-right: 8px; - } - &.horizontal-padding-9 { - padding-left: 9px; - padding-right: 9px; - } - &.horizontal-padding-10 { - padding-left: 10px; - padding-right: 10px; - } +@mixin horizontal-padding-mixin() { + &.horizontal-padding-0 { + padding-left: 0px; + padding-right: 0px; + } + &.horizontal-padding-1 { + padding-left: 1px; + padding-right: 1px; + } + &.horizontal-padding-2 { + padding-left: 2px; + padding-right: 2px; + } + &.horizontal-padding-3 { + padding-left: 3px; + padding-right: 3px; + } + &.horizontal-padding-4 { + padding-left: 4px; + padding-right: 4px; + } + &.horizontal-padding-5 { + padding-left: 5px; + padding-right: 5px; + } + &.horizontal-padding-6 { + padding-left: 6px; + padding-right: 6px; + } + &.horizontal-padding-7 { + padding-left: 7px; + padding-right: 7px; + } + &.horizontal-padding-8 { + padding-left: 8px; + padding-right: 8px; + } + &.horizontal-padding-9 { + padding-left: 9px; + padding-right: 9px; + } + &.horizontal-padding-10 { + padding-left: 10px; + padding-right: 10px; + } } -@mixin font-size-mixin(){ - &.font-size-10 { - font-size: 10px; - } - &.font-size-11 { - font-size: 11px; - } - &.font-size-12 { - font-size: 12px; - } - &.font-size-13 { - font-size: 13px; - } - &.font-size-14 { - font-size: 14px; - } - &.font-size-15 { - font-size: 15px; - } - &.font-size-16 { - font-size: 16px; - } - &.font-size-17 { - font-size: 17px; - } - &.font-size-18 { - font-size: 18px; - } - &.font-size-19 { - font-size: 19px; - } - &.font-size-20 { - font-size: 20px; - } - &.font-size-21 { - font-size: 21px; - } - &.font-size-22 { - font-size: 22px; - } - &.font-size-23 { - font-size: 23px; - } - &.font-size-24 { - font-size: 24px; - } - &.font-size-25 { - font-size: 25px; - } - &.font-size-26 { - font-size: 26px; - } +@mixin font-size-mixin() { + &.font-size-10 { + font-size: 10px; + } + &.font-size-11 { + font-size: 11px; + } + &.font-size-12 { + font-size: 12px; + } + &.font-size-13 { + font-size: 13px; + } + &.font-size-14 { + font-size: 14px; + } + &.font-size-15 { + font-size: 15px; + } + &.font-size-16 { + font-size: 16px; + } + &.font-size-17 { + font-size: 17px; + } + &.font-size-18 { + font-size: 18px; + } + &.font-size-19 { + font-size: 19px; + } + &.font-size-20 { + font-size: 20px; + } + &.font-size-21 { + font-size: 21px; + } + &.font-size-22 { + font-size: 22px; + } + &.font-size-23 { + font-size: 23px; + } + &.font-size-24 { + font-size: 24px; + } + &.font-size-25 { + font-size: 25px; + } + &.font-size-26 { + font-size: 26px; + } } -@mixin font-weight-mixin(){ - &.font-weight-100 { - font-weight: 100; - } - &.font-weight-200 { - font-weight: 200; - } - &.font-weight-300 { - font-weight: 300; - } - &.font-weight-400 { - font-weight: 400; - } - &.font-weight-500 { - font-weight: 500; - } - &.font-weight-600 { - font-weight: 600; - } - &.font-weight-700 { - font-weight: 700; - } +@mixin font-weight-mixin() { + &.font-weight-100 { + font-weight: 100; + } + &.font-weight-200 { + font-weight: 200; + } + &.font-weight-300 { + font-weight: 300; + } + &.font-weight-400 { + font-weight: 400; + } + &.font-weight-500 { + font-weight: 500; + } + &.font-weight-600 { + font-weight: 600; + } + &.font-weight-700 { + font-weight: 700; + } } -@mixin avatar-dims-mixin(){ - &.size-xs { - width: 20px; - height: 20px; - font-size: 7px; // 18px * (20 / 50) +@mixin avatar-dims-mixin() { + &.size-xs { + width: 20px; + height: 20px; + font-size: 7px; // 18px * (20 / 50) - .status-indicator { - width: 5px; // scaled indicator size - height: 5px; - } + .status-indicator { + width: 5px; // scaled indicator size + height: 5px; } + } - &.size-sm { - width: 30px; - height: 30px; - font-size: 11px; // 18px * (30 / 50) + &.size-sm { + width: 30px; + height: 30px; + font-size: 11px; // 18px * (30 / 50) - .status-indicator { - width: 7px; - height: 7px; - } + .status-indicator { + width: 7px; + height: 7px; } + } - &.size-md { - width: 40px; - height: 40px; - font-size: 14px; // 18px * (40 / 50) + &.size-md { + width: 40px; + height: 40px; + font-size: 14px; // 18px * (40 / 50) - .status-indicator { - width: 9px; - height: 9px; - } + .status-indicator { + width: 9px; + height: 9px; } + } - &.size-lg { - width: 45px; - height: 45px; - font-size: 16px; // 18px * (45 / 50) + &.size-lg { + width: 45px; + height: 45px; + font-size: 16px; // 18px * (45 / 50) - .status-indicator { - width: 10px; - height: 10px; - } + .status-indicator { + width: 10px; + height: 10px; } + } - &.size-xl { - width: 50px; - height: 50px; - font-size: 18px; // base size + &.size-xl { + width: 50px; + height: 50px; + font-size: 18px; // base size - .status-indicator { - width: 12px; - height: 12px; - } + .status-indicator { + width: 12px; + height: 12px; } + } } diff --git a/frontend/app/modals/about.scss b/frontend/app/modals/about.scss index 9d6db867d..e6a6404d1 100644 --- a/frontend/app/modals/about.scss +++ b/frontend/app/modals/about.scss @@ -2,65 +2,65 @@ // SPDX-License-Identifier: Apache-2.0 .about-modal { - padding-bottom: 34px; + padding-bottom: 34px; - .content-wrapper .modal-content { - margin-bottom: 0; - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 0px 0px; - gap: 24px; + .content-wrapper .modal-content { + margin-bottom: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px 0px; + gap: 24px; - .section-wrapper { - display: flex; - flex-direction: column; - gap: 26px; - width: 100%; - } - - .section { - align-items: center; - gap: 16px; - align-self: stretch; - width: 100%; - text-align: center; - - &.logo-section { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - - .app-name { - font-size: 25px; - } - - .text-standard { - line-height: 20px; - } - } - } - - .section.links { - display: flex; - align-items: flex-start; - gap: 10px; - - .button { - display: flex; - align-items: center; - - .icon-left { - margin-right: 5px; - } - - i { - font-size: 16px; - margin-right: 5px; - } - } - } + .section-wrapper { + display: flex; + flex-direction: column; + gap: 26px; + width: 100%; } + + .section { + align-items: center; + gap: 16px; + align-self: stretch; + width: 100%; + text-align: center; + + &.logo-section { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + + .app-name { + font-size: 25px; + } + + .text-standard { + line-height: 20px; + } + } + } + + .section.links { + display: flex; + align-items: flex-start; + gap: 10px; + + .button { + display: flex; + align-items: center; + + .icon-left { + margin-right: 5px; + } + + i { + font-size: 16px; + margin-right: 5px; + } + } + } + } } diff --git a/frontend/app/modals/messagemodal.scss b/frontend/app/modals/messagemodal.scss index 41113f25b..2c80ae61d 100644 --- a/frontend/app/modals/messagemodal.scss +++ b/frontend/app/modals/messagemodal.scss @@ -2,5 +2,5 @@ // SPDX-License-Identifier: Apache-2.0 .message-modal { - min-width: 400px; + min-width: 400px; } diff --git a/frontend/app/modals/modal.scss b/frontend/app/modals/modal.scss index 46ebe01a6..47fe82525 100644 --- a/frontend/app/modals/modal.scss +++ b/frontend/app/modals/modal.scss @@ -2,71 +2,71 @@ // SPDX-License-Identifier: Apache-2.0 .modal-wrapper { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: var(--zindex-modal-wrapper); + + .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: var(--zindex-modal-wrapper); - - .modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(21, 23, 21, 0.7); - z-index: var(--zindex-modal-backdrop); - } + background-color: rgba(21, 23, 21, 0.7); + z-index: var(--zindex-modal-backdrop); + } } .modal { - position: relative; - z-index: var(--zindex-modal); + position: relative; + z-index: var(--zindex-modal); + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 24px 16px 16px; + border-radius: 8px; + border: 0.5px solid var(--modal-border-color); + background: var(--modal-bg-color); + box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25); + + .modal-close-btn { + position: absolute; + right: 8px; + top: 8px; + padding: 8px 12px; + + i { + font-size: 18px; + } + } + + .content-wrapper { display: flex; flex-direction: column; - align-items: flex-start; - padding: 24px 16px 16px; - border-radius: 8px; - border: 0.5px solid var(--modal-border-color); - background: var(--modal-bg-color); - box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25); + gap: 8px; + width: 100%; - .modal-close-btn { - position: absolute; - right: 8px; - top: 8px; - padding: 8px 12px; - - i { - font-size: 18px; - } + .modal-content { + width: 100%; + padding: 0px 20px; } + } - .content-wrapper { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; + .modal-footer { + display: flex; + justify-content: flex-end; + width: 100%; + padding-top: 16px; + border-top: 1px solid rgba(255, 255, 255, 0.1); - .modal-content { - width: 100%; - padding: 0px 20px; - } - } - - .modal-footer { - display: flex; - justify-content: flex-end; - width: 100%; - padding-top: 16px; - border-top: 1px solid rgba(255, 255, 255, 0.1); - - .button:last-child { - margin-left: 8px; - } + .button:last-child { + margin-left: 8px; } + } } diff --git a/frontend/app/modals/tos.scss b/frontend/app/modals/tos.scss index 72d8015af..012439557 100644 --- a/frontend/app/modals/tos.scss +++ b/frontend/app/modals/tos.scss @@ -2,245 +2,245 @@ // SPDX-License-Identifier: Apache-2.0 .tos-modal { - width: 560px; - border-radius: 10px; - padding: 0; + width: 560px; + border-radius: 10px; + padding: 0; - .modal-inner { + .modal-inner { + display: flex; + flex-direction: column; + overflow-y: auto; + padding: 30px; + width: 100%; + + header.tos-header { + flex-direction: column; + gap: 8px; + border-bottom: none; + padding: 0; + margin-bottom: 36px; + width: 100%; + + .logo { + margin-bottom: 10px; display: flex; - flex-direction: column; - overflow-y: auto; - padding: 30px; + justify-content: center; + } + + .modal-title { + text-align: center; + font-size: 25px; + font-weight: 400; + color: var(--main-text-color); + } + + .modal-subtitle { + color: var(--main-text-color); + text-align: center; + + font-style: normal; + font-weight: 300; + line-height: 20px; + } + } + + .tos-content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + width: 100%; + margin-bottom: 0; + margin-bottom: 20px; + + .check-toggle-wrapper .toggle-label { + color: var(--secondary-text-color); + } + + .tips-wrapper { + display: flex; + flex-direction: row; + justify-content: center; width: 100%; - header.tos-header { - flex-direction: column; - gap: 8px; - border-bottom: none; - padding: 0; - margin-bottom: 36px; - width: 100%; + .tips-section { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 5px; - .logo { - margin-bottom: 10px; - display: flex; - justify-content: center; + .tip-section-header { + font-weight: bold; + margin-bottom: 5px; + margin-top: 10px; + + &:first-child { + margin-top: 0; } + } - .modal-title { - text-align: center; - font-size: 25px; - font-weight: 400; - color: var(--main-text-color); - } - - .modal-subtitle { - color: var(--main-text-color); - text-align: center; - - font-style: normal; - font-weight: 300; - line-height: 20px; - } - } - - .tos-content { + .tip { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 32px; - width: 100%; - margin-bottom: 0; - margin-bottom: 20px; + flex-direction: row; + align-items: center; - .check-toggle-wrapper .toggle-label { - color: var(--secondary-text-color); + .keybinding2 { + font: var(--fixed-font); + background-color: var(--highlight-bg-color); + color: var(--main-text-color); + padding: 2px 8px; + border-radius: 4px; } - .tips-wrapper { - display: flex; - flex-direction: row; - justify-content: center; - width: 100%; + .keybinding-group { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 5px; + margin-right: 5px; - .tips-section { - display: flex; - flex-direction: column; - flex-grow: 1; - gap: 5px; - - .tip-section-header { - font-weight: bold; - margin-bottom: 5px; - margin-top: 10px; - - &:first-child { - margin-top: 0; - } - } - - .tip { - display: flex; - flex-direction: row; - align-items: center; - - .keybinding2 { - font: var(--fixed-font); - background-color: var(--highlight-bg-color); - color: var(--main-text-color); - padding: 2px 8px; - border-radius: 4px; - } - - .keybinding-group { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 5px; - margin-right: 5px; - - &:first-child { - margin-left: 0; - } - } - - .keybinding { - display: inline-block; - padding: 0.1em 0.4em; - margin: 0 0.1em; - font-family: "SF Pro Text", "Segoe UI", sans-serif; - font-size: 0.85em; - color: #e0e0e0; - background-color: #333; - border-radius: 4px; - border: 1px solid #444; - box-shadow: none; - } - - .keybinding3 { - color: black; - display: inline-block; - padding: 0.2em 0.4em; - min-width: 24px; - height: 22px; - margin: 0 0.1em; - font-family: "SF Pro Text", "Segoe UI", sans-serif; - font-size: 0.9em; - border: 1px solid #aaa; - border-radius: 4px; - background-color: #ddd; - color: var(--invert-text-color); - box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); - text-align: center; - } - - .icon-wrap { - background-color: var(--highlight-bg-color); - padding: 2px; - color: var(--secondary-text-color); - font-size: 12px; - border-radius: 2px; - margin-right: 5px; - - svg { - position: relative; - top: 3px; - left: 1px; - height: 13px; - #arrow1, - #arrow2 { - fill: var(--main-text-color); - } - } - } - } - } + &:first-child { + margin-left: 0; + } } - .content-section { - display: flex; - width: 100%; - align-items: center; - gap: 18px; - - .icon-wrapper { - .icon { - font-size: 32px; - color: rgba(255, 255, 255, 0.5); - } - - .fa-people-group { - font-size: 25px; - } - } - - .content-section-inner { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - flex: 1 0 0; - - .content-section-title { - color: var(--main-text-color); - font-style: normal; - line-height: 18px; - font-size: 16px; - margin-bottom: 5px; - } - - .content-section-text { - color: var(--secondary-text-color); - font-style: normal; - line-height: 20px; - - b { - color: var(--main-text-color); - } - } - - .content-section-field { - display: flex; - align-items: center; - gap: 8px; - } - - .check-toggle-wrapper { - margin-top: 5px; - - label { - font-size: 13px; - } - } - } + .keybinding { + display: inline-block; + padding: 0.1em 0.4em; + margin: 0 0.1em; + font-family: "SF Pro Text", "Segoe UI", sans-serif; + font-size: 0.85em; + color: #e0e0e0; + background-color: #333; + border-radius: 4px; + border: 1px solid #444; + box-shadow: none; } + + .keybinding3 { + color: black; + display: inline-block; + padding: 0.2em 0.4em; + min-width: 24px; + height: 22px; + margin: 0 0.1em; + font-family: "SF Pro Text", "Segoe UI", sans-serif; + font-size: 0.9em; + border: 1px solid #aaa; + border-radius: 4px; + background-color: #ddd; + color: var(--invert-text-color); + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); + text-align: center; + } + + .icon-wrap { + background-color: var(--highlight-bg-color); + padding: 2px; + color: var(--secondary-text-color); + font-size: 12px; + border-radius: 2px; + margin-right: 5px; + + svg { + position: relative; + top: 3px; + left: 1px; + height: 13px; + #arrow1, + #arrow2 { + fill: var(--main-text-color); + } + } + } + } + } + } + + .content-section { + display: flex; + width: 100%; + align-items: center; + gap: 18px; + + .icon-wrapper { + .icon { + font-size: 32px; + color: rgba(255, 255, 255, 0.5); + } + + .fa-people-group { + font-size: 25px; + } } - footer { - .content-section-text { - text-align: center; - color: rgba(255, 255, 255, 0.7); - font-size: 11px; + .content-section-inner { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 0 0; + + .content-section-title { + color: var(--main-text-color); + font-style: normal; + line-height: 18px; + font-size: 16px; + margin-bottom: 5px; + } + + .content-section-text { + color: var(--secondary-text-color); + font-style: normal; + line-height: 20px; + + b { + color: var(--main-text-color); } + } - .button-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; + .content-section-field { + display: flex; + align-items: center; + gap: 8px; + } - button { - font-size: 14px; - } + .check-toggle-wrapper { + margin-top: 5px; - button:not(:first-child) { - margin-left: 10px; - } - - button.disabled-button { - cursor: default; - } + label { + font-size: 13px; } + } } + } } + + footer { + .content-section-text { + text-align: center; + color: rgba(255, 255, 255, 0.7); + font-size: 11px; + } + + .button-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + button { + font-size: 14px; + } + + button:not(:first-child) { + margin-left: 10px; + } + + button.disabled-button { + cursor: default; + } + } + } + } } diff --git a/frontend/app/modals/typeaheadmodal.scss b/frontend/app/modals/typeaheadmodal.scss index a6665d058..055915682 100644 --- a/frontend/app/modals/typeaheadmodal.scss +++ b/frontend/app/modals/typeaheadmodal.scss @@ -4,116 +4,116 @@ @use "../mixins.scss"; .type-ahead-modal-backdrop { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: transparent; - z-index: var(--zindex-typeahead-modal-backdrop); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: transparent; + z-index: var(--zindex-typeahead-modal-backdrop); } .type-ahead-modal { - position: absolute; - z-index: var(--zindex-typeahead-modal); + position: absolute; + z-index: var(--zindex-typeahead-modal); + display: flex; + flex-direction: column; + align-items: flex-start; + border-radius: 6px; + border: 1px solid var(--modal-border-color); + background: var(--modal-bg-color); + box-shadow: 0px 13px 16px 0px rgba(0, 0, 0, 0.4); + padding: 6px; + flex-direction: column; + + .label { + opacity: 0.5; + font-size: 13px; + white-space: nowrap; + } + + .input { + border: none; + border-bottom: none; + height: 24px; + border-radius: 0; + + input { + width: 100%; + flex-shrink: 0; + padding: 4px 6px; + height: 24px; + } + + .input-decoration.end-position { + margin: 6px; + + i { + opacity: 0.3; + } + } + } + + &.has-suggestions { + .input { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + } + } + + .suggestions-wrapper { + width: 100%; + overflow: hidden; display: flex; flex-direction: column; - align-items: flex-start; - border-radius: 6px; - border: 1px solid var(--modal-border-color); - background: var(--modal-bg-color); - box-shadow: 0px 13px 16px 0px rgba(0, 0, 0, 0.4); - padding: 6px; - flex-direction: column; + gap: 10px; - .label { - opacity: 0.5; - font-size: 13px; - white-space: nowrap; + .suggestion-header { + font-size: 11px; + font-style: normal; + font-weight: 500; + line-height: 12px; + opacity: 0.7; + letter-spacing: 0.11px; + padding: 4px 0px 0px 4px; } - .input { - border: none; - border-bottom: none; - height: 24px; - border-radius: 0; + .suggestion-item { + width: 100%; + cursor: pointer; + display: flex; + padding: 6px 8px; + align-items: center; + gap: 8px; + align-self: stretch; + border-radius: 4px; - input { - width: 100%; - flex-shrink: 0; - padding: 4px 6px; - height: 24px; - } + &.selected { + background-color: rgb(from var(--accent-color) r g b / 0.5); + color: var(--main-text-color); + } - .input-decoration.end-position { - margin: 6px; + &:hover:not(.selected) { + background-color: var(--highlight-bg-color); + } - i { - opacity: 0.3; - } - } - } - - &.has-suggestions { - .input { - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - } - } - - .suggestions-wrapper { - width: 100%; - overflow: hidden; + .typeahead-item-name { + @include mixins.ellipsis(); display: flex; - flex-direction: column; - gap: 10px; + gap: 8px; + font-size: 11px; + font-weight: 400; + line-height: 14px; - .suggestion-header { - font-size: 11px; - font-style: normal; - font-weight: 500; - line-height: 12px; - opacity: 0.7; - letter-spacing: 0.11px; - padding: 4px 0px 0px 4px; + i { + display: inline-block; + position: relative; + top: 2px; } + } - .suggestion-item { - width: 100%; - cursor: pointer; - display: flex; - padding: 6px 8px; - align-items: center; - gap: 8px; - align-self: stretch; - border-radius: 4px; - - &.selected { - background-color: rgb(from var(--accent-color) r g b / 0.5); - color: var(--main-text-color); - } - - &:hover:not(.selected) { - background-color: var(--highlight-bg-color); - } - - .typeahead-item-name { - @include mixins.ellipsis(); - display: flex; - gap: 8px; - font-size: 11px; - font-weight: 400; - line-height: 14px; - - i { - display: inline-block; - position: relative; - top: 2px; - } - } - - .typeahead-current-checkbox { - margin-left: auto; - } - } + .typeahead-current-checkbox { + margin-left: auto; + } } + } } diff --git a/frontend/app/modals/userinputmodal.scss b/frontend/app/modals/userinputmodal.scss index 6ec38c048..12e6617d6 100644 --- a/frontend/app/modals/userinputmodal.scss +++ b/frontend/app/modals/userinputmodal.scss @@ -2,60 +2,60 @@ // SPDX-License-Identifier: Apache-2.0 .userinput-header { - font-weight: bold; - color: var(--main-text-color); - padding-bottom: 10px; + font-weight: bold; + color: var(--main-text-color); + padding-bottom: 10px; } .userinput-body { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1rem; + margin: 0 1rem 1rem 1rem; + + font: var(--fixed-font); + color: var(--main-text-color); + + .userinput-markdown { + color: inherit; + } + + .userinput-text { + } + + .userinput-inputbox { + resize: none; + background-color: var(--panel-bg-color); + border-radius: 6px; + margin: 0; + border: var(--border-color); + padding: 5px 0 5px 16px; + min-height: 30px; + color: inherit; + + &:hover { + cursor: text; + } + + &:focus { + outline-color: var(--accent-color); + } + } + + .userinput-checkbox-container { display: flex; flex-direction: column; - justify-content: space-between; - gap: 1rem; - margin: 0 1rem 1rem 1rem; + gap: 6px; - font: var(--fixed-font); - color: var(--main-text-color); + .userinput-checkbox-row { + display: flex; + align-items: center; + gap: 6px; - .userinput-markdown { - color: inherit; - } - - .userinput-text { - } - - .userinput-inputbox { - resize: none; - background-color: var(--panel-bg-color); - border-radius: 6px; - margin: 0; - border: var(--border-color); - padding: 5px 0 5px 16px; - min-height: 30px; - color: inherit; - - &:hover { - cursor: text; - } - - &:focus { - outline-color: var(--accent-color); - } - } - - .userinput-checkbox-container { - display: flex; - flex-direction: column; - gap: 6px; - - .userinput-checkbox-row { - display: flex; - align-items: center; - gap: 6px; - - .userinput-checkbox { - accent-color: var(--accent-color); - } - } + .userinput-checkbox { + accent-color: var(--accent-color); + } } + } } diff --git a/frontend/app/notification/notificationbubbles.scss b/frontend/app/notification/notificationbubbles.scss index 345fa40e8..d4474619b 100644 --- a/frontend/app/notification/notificationbubbles.scss +++ b/frontend/app/notification/notificationbubbles.scss @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 .notification-bubbles { - display: flex; - width: 380px; - flex-direction: column; - align-items: flex-start; - row-gap: 8px; + display: flex; + width: 380px; + flex-direction: column; + align-items: flex-start; + row-gap: 8px; } diff --git a/frontend/app/notification/notificationpopover.scss b/frontend/app/notification/notificationpopover.scss index 6a3b983f0..eed18b1ce 100644 --- a/frontend/app/notification/notificationpopover.scss +++ b/frontend/app/notification/notificationpopover.scss @@ -2,63 +2,63 @@ // SPDX-License-Identifier: Apache-2.0 .notification-popover { - padding: 8px 2px 8px 0px; + padding: 8px 2px 8px 0px; + display: flex; + align-items: center; + justify-content: center; + + button { + width: 27px; + height: 26px; display: flex; - align-items: center; justify-content: center; - button { - width: 27px; - height: 26px; - display: flex; - justify-content: center; - - i { - font-size: 17px; - } + i { + font-size: 17px; } + } } .notification-content { + display: flex; + width: 380px; + padding: 10px 0 0; + flex-direction: column; + align-items: flex-start; + column-gap: 8px; + border-radius: 8px; + border: 0.5px solid rgba(255, 255, 255, 0.12); + background: #232323; + box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25); + + .divider { + background: rgba(255, 255, 255, 0.08); + height: 1px; + width: 100%; + } + + .header { display: flex; - width: 380px; - padding: 10px 0 0; - flex-direction: column; - align-items: flex-start; - column-gap: 8px; - border-radius: 8px; - border: 0.5px solid rgba(255, 255, 255, 0.12); - background: #232323; - box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25); + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 10px 8px 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); - .divider { - background: rgba(255, 255, 255, 0.08); - height: 1px; - width: 100%; + span { + color: var(--main-text-color); + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 16px; } + } - .header { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0 10px 8px 10px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - - span { - color: var(--main-text-color); - font-size: 14px; - font-style: normal; - font-weight: 600; - line-height: 16px; - } - } - - .close-all-btn { - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 16px; - color: rgba(255, 255, 255, 0.4); - } + .close-all-btn { + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 16px; + color: rgba(255, 255, 255, 0.4); + } } diff --git a/frontend/app/reset.scss b/frontend/app/reset.scss index aa0063590..facde8776 100644 --- a/frontend/app/reset.scss +++ b/frontend/app/reset.scss @@ -4,16 +4,16 @@ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } * { - margin: 0; + margin: 0; } body { - line-height: 1.2; - -webkit-font-smoothing: antialiased; + line-height: 1.2; + -webkit-font-smoothing: antialiased; } img, @@ -21,12 +21,12 @@ picture, video, canvas, svg { - display: block; + display: block; } input, button, textarea, select { - font: inherit; + font: inherit; } diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index fbff8aff4..675f4c74c 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -2,115 +2,115 @@ // SPDX-License-Identifier: Apache-2.0 .tab-bar-wrapper { - --default-indent: 10px; - --darwin-not-fullscreen-indent: 74px; + --default-indent: 10px; + --darwin-not-fullscreen-indent: 74px; } .darwin:not(.fullscreen) .tab-bar-wrapper { - .window-drag.left { - width: var(--darwin-not-fullscreen-indent); - } + .window-drag.left { + width: var(--darwin-not-fullscreen-indent); + } } .config-error-message { - max-width: 500px; + max-width: 500px; - h3 { - margin-bottom: 10px; - } + h3 { + margin-bottom: 10px; + } - margin-bottom: 20px; + margin-bottom: 20px; } .tab-bar-wrapper { - position: relative; + position: relative; + user-select: none; + display: flex; + flex-direction: row; + width: env(titlebar-area-width); + + .tabs-wrapper { + transition: var(--tabs-wrapper-transition); + height: 32px; + } + + .tab-bar { + position: relative; // Needed for absolute positioning of child tabs + height: 33px; + } + + .dev-label, + .app-menu-button { + font-size: 26px; user-select: none; display: flex; - flex-direction: row; - width: env(titlebar-area-width); + align-items: center; + justify-content: center; + margin: 6px 6px 0 0; + } - .tabs-wrapper { - transition: var(--tabs-wrapper-transition); - height: 32px; + .app-menu-button { + cursor: pointer; + color: var(--secondary-text-color); + + &:hover { + color: var(--main-text-color); + } + } + + .dev-label { + color: var(--accent-color); + } + + .config-error-button { + height: 80%; + margin: auto 4px; + color: black; + flex: 0 0 fit-content; + } + + .add-tab-btn { + width: 22px; + height: 100%; + cursor: pointer; + font-size: 14px; + text-align: center; + user-select: none; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; + + &:hover { + opacity: 1; } - .tab-bar { - position: relative; // Needed for absolute positioning of child tabs - height: 33px; + i { + overflow: hidden; + margin-top: 5px; + font-size: 11px; } + } - .dev-label, - .app-menu-button { - font-size: 26px; - user-select: none; - display: flex; - align-items: center; - justify-content: center; - margin: 6px 6px 0 0; + .window-drag { + height: 100%; + width: var(--default-indent); + flex-shrink: 0; + + &.right { + flex-grow: 1; } + } - .app-menu-button { - cursor: pointer; - color: var(--secondary-text-color); - - &:hover { - color: var(--main-text-color); - } - } - - .dev-label { - color: var(--accent-color); - } - - .config-error-button { - height: 80%; - margin: auto 4px; - color: black; - flex: 0 0 fit-content; - } - - .add-tab-btn { - width: 22px; - height: 100%; - cursor: pointer; - font-size: 14px; - text-align: center; - user-select: none; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; - - &:hover { - opacity: 1; - } - - i { - overflow: hidden; - margin-top: 5px; - font-size: 11px; - } - } - - .window-drag { - height: 100%; - width: var(--default-indent); - flex-shrink: 0; - - &.right { - flex-grow: 1; - } - } - - // Customize scrollbar styles - .os-theme-dark, - .os-theme-light { - box-sizing: border-box; - --os-size: 2px; - --os-padding-perpendicular: 0px; - --os-padding-axis: 0px; - --os-track-border-radius: 2px; - --os-handle-interactive-area-offset: 0px; - --os-handle-border-radius: 2px; - } + // Customize scrollbar styles + .os-theme-dark, + .os-theme-light { + box-sizing: border-box; + --os-size: 2px; + --os-padding-perpendicular: 0px; + --os-padding-axis: 0px; + --os-track-border-radius: 2px; + --os-handle-interactive-area-offset: 0px; + --os-handle-border-radius: 2px; + } } diff --git a/frontend/app/tab/tabcontent.scss b/frontend/app/tab/tabcontent.scss index fdab4154d..5743ab741 100644 --- a/frontend/app/tab/tabcontent.scss +++ b/frontend/app/tab/tabcontent.scss @@ -2,35 +2,35 @@ // SPDX-License-Identifier: Apache-2.0 .tabcontent { + display: flex; + flex-direction: row; + flex-grow: 1; + min-height: 0; + width: 100%; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + padding-top: 3px; + padding-right: 3px; + + .block-container { display: flex; flex-direction: row; - flex-grow: 1; - min-height: 0; - width: 100%; - align-items: center; - justify-content: center; + flex: 1 0 0; + height: 100%; overflow: hidden; - position: relative; - padding-top: 3px; - padding-right: 3px; - - .block-container { - display: flex; - flex-direction: row; - flex: 1 0 0; - height: 100%; - overflow: hidden; - border: 1px solid var(--border-color); - border-radius: 4px; - } + border: 1px solid var(--border-color); + border-radius: 4px; + } } .drag-preview { - display: block; - width: 100px; - height: 20px; - border-radius: 2px; - background-color: aquamarine; - color: black; - text-align: center; + display: block; + width: 100px; + height: 20px; + border-radius: 2px; + background-color: aquamarine; + color: black; + text-align: center; } diff --git a/frontend/app/tab/updatebanner.scss b/frontend/app/tab/updatebanner.scss index 8b99c3265..71d63c821 100644 --- a/frontend/app/tab/updatebanner.scss +++ b/frontend/app/tab/updatebanner.scss @@ -1,11 +1,11 @@ .update-available-button { - height: 80%; - margin: auto 4px; - color: black; - background-color: var(--accent-color); - flex: 0 0 fit-content; + height: 80%; + margin: auto 4px; + color: black; + background-color: var(--accent-color); + flex: 0 0 fit-content; - &:disabled { - opacity: unset !important; - } + &:disabled { + opacity: unset !important; + } } diff --git a/frontend/app/view/chat/channels.scss b/frontend/app/view/chat/channels.scss index eed93867b..bb49f0a62 100644 --- a/frontend/app/view/chat/channels.scss +++ b/frontend/app/view/chat/channels.scss @@ -2,29 +2,29 @@ // SPDX-License-Identifier: Apache-2.0 .channel-list { - width: 180px; - background-color: rgba(255, 255, 255, 0.025); - overflow-x: hidden; - padding: 5px; + width: 180px; + background-color: rgba(255, 255, 255, 0.025); + overflow-x: hidden; + padding: 5px; - .menu-item-button { - padding: 5px 7px; - } + .menu-item-button { + padding: 5px 7px; + } - .nested-list { - padding-left: 10px; - } + .nested-list { + padding-left: 10px; + } - .menu-item-text { - color: rgb(from var(--main-text-color) r g b / 0.7); - } + .menu-item-text { + color: rgb(from var(--main-text-color) r g b / 0.7); + } - .has-children .menu-item-text { - font-size: 14px; - } + .has-children .menu-item-text { + font-size: 14px; + } - .is-open .menu-item-text { - color: var(--main-text-color); - font-weight: bold; - } + .is-open .menu-item-text { + color: var(--main-text-color); + font-weight: bold; + } } diff --git a/frontend/app/view/chat/chat.scss b/frontend/app/view/chat/chat.scss index 0e7d49fb4..77e2b3737 100644 --- a/frontend/app/view/chat/chat.scss +++ b/frontend/app/view/chat/chat.scss @@ -2,30 +2,30 @@ // SPDX-License-Identifier: Apache-2.0 .chat-view { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + + .chat-section { display: flex; - flex-direction: row; - width: 100%; - height: 100%; + flex-direction: column; + flex-grow: 1; - .chat-section { - display: flex; - flex-direction: column; - flex-grow: 1; - - .message-wrapper { - flex-grow: 1; // Make the ChatMessages take up available height - display: flex; - flex-direction: column; - overflow: hidden; // Ensure content doesn't overflow - } - - .chatbox { - display: flex; - align-items: center; - - textarea { - border: none; - } - } + .message-wrapper { + flex-grow: 1; // Make the ChatMessages take up available height + display: flex; + flex-direction: column; + overflow: hidden; // Ensure content doesn't overflow } + + .chatbox { + display: flex; + align-items: center; + + textarea { + border: none; + } + } + } } diff --git a/frontend/app/view/chat/chatmessages.scss b/frontend/app/view/chat/chatmessages.scss index 7321fc764..eb624a5dd 100644 --- a/frontend/app/view/chat/chatmessages.scss +++ b/frontend/app/view/chat/chatmessages.scss @@ -2,50 +2,50 @@ // SPDX-License-Identifier: Apache-2.0 .chat-messages { - height: 100%; - width: 100%; - padding: 10px; - display: flex; - flex-direction: column; - overflow: hidden; + height: 100%; + width: 100%; + padding: 10px; + display: flex; + flex-direction: column; + overflow: hidden; } .chat-message { - display: flex; - align-items: flex-start; - align-items: center; - margin-bottom: 8px; - font-size: 1em; - line-height: 1.4; + display: flex; + align-items: flex-start; + align-items: center; + margin-bottom: 8px; + font-size: 1em; + line-height: 1.4; } .chat-user-icon { - height: 1em; /* Make user icon height match the text height */ - width: 1em; /* Keep the icon proportional */ - border-radius: 50%; - margin-right: 8px; + height: 1em; /* Make user icon height match the text height */ + width: 1em; /* Keep the icon proportional */ + border-radius: 50%; + margin-right: 8px; } .chat-username { - font-weight: bold; - margin-right: 4px; - line-height: 1.4; /* Ensure alignment with the first line of the message */ + font-weight: bold; + margin-right: 4px; + line-height: 1.4; /* Ensure alignment with the first line of the message */ } .chat-text { - display: flex; - align-items: flex-start; - flex-wrap: wrap; + display: flex; + align-items: flex-start; + flex-wrap: wrap; } .chat-text img { - height: 1em; /* Make inline images (rendered via markdown) match the text height */ - width: auto; /* Keep the aspect ratio of images */ - margin: 0 4px; - display: inline; + height: 1em; /* Make inline images (rendered via markdown) match the text height */ + width: auto; /* Keep the aspect ratio of images */ + margin: 0 4px; + display: inline; } .chat-emoji { - margin: 0 2px; - font-size: 1em; /* Match emoji size with the text height */ + margin: 0 2px; + font-size: 1em; /* Match emoji size with the text height */ } diff --git a/frontend/app/view/chat/userlist.scss b/frontend/app/view/chat/userlist.scss index 0e909c5ce..b7da24d4c 100644 --- a/frontend/app/view/chat/userlist.scss +++ b/frontend/app/view/chat/userlist.scss @@ -2,35 +2,35 @@ // SPDX-License-Identifier: Apache-2.0 .user-list { - display: flex; - flex-direction: column; - padding: 10px; - max-width: 250px; - background-color: rgba(255, 255, 255, 0.025); - padding: 5px; + display: flex; + flex-direction: column; + padding: 10px; + max-width: 250px; + background-color: rgba(255, 255, 255, 0.025); + padding: 5px; } .user-status-item { - display: flex; - align-items: center; - padding: 8px; - margin-bottom: 6px; - cursor: pointer; - transition: background-color 0.3s ease; + display: flex; + align-items: center; + padding: 8px; + margin-bottom: 6px; + cursor: pointer; + transition: background-color 0.3s ease; } .user-status-item:hover { - background-color: var(--button-grey-hover-bg); - border-radius: 4px; + background-color: var(--button-grey-hover-bg); + border-radius: 4px; } .user-status-icon { - margin-right: 10px; - display: flex; - align-items: center; + margin-right: 10px; + display: flex; + align-items: center; } .user-status-text { - font-size: 1em; - font-weight: bold; + font-size: 1em; + font-weight: bold; } diff --git a/frontend/app/view/codeeditor/codeeditor.scss b/frontend/app/view/codeeditor/codeeditor.scss index c5896e058..c006157a7 100644 --- a/frontend/app/view/codeeditor/codeeditor.scss +++ b/frontend/app/view/codeeditor/codeeditor.scss @@ -2,28 +2,28 @@ // SPDX-License-Identifier: Apache-2.0 .code-editor-wrapper { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; + align-items: center; + justify-content: center; + + .code-editor { display: flex; flex-direction: column; - width: 100%; height: 100%; - overflow: hidden; - align-items: center; - justify-content: center; + width: 100%; - .code-editor { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; + .monaco-editor .slider { + background: rgba(255, 255, 255, 0.4); + border-radius: 4px; + transition: background 0.2s ease; - .monaco-editor .slider { - background: rgba(255, 255, 255, 0.4); - border-radius: 4px; - transition: background 0.2s ease; - - &:hover { - background: rgba(255, 255, 255, 0.6); - } - } + &:hover { + background: rgba(255, 255, 255, 0.6); + } } + } } diff --git a/frontend/app/view/helpview/helpview.scss b/frontend/app/view/helpview/helpview.scss index 9e5c7263c..62a463709 100644 --- a/frontend/app/view/helpview/helpview.scss +++ b/frontend/app/view/helpview/helpview.scss @@ -2,11 +2,11 @@ // SPDX-License-Identifier: Apache-2.0 .help-view { + width: 100%; + height: 100%; + .docsite-webview { width: 100%; height: 100%; - .docsite-webview { - width: 100%; - height: 100%; - border: 0; - } + border: 0; + } } diff --git a/frontend/app/view/plotview/plotview.scss b/frontend/app/view/plotview/plotview.scss index 9f12d37a4..928d5013e 100644 --- a/frontend/app/view/plotview/plotview.scss +++ b/frontend/app/view/plotview/plotview.scss @@ -2,21 +2,21 @@ // SPDX-License-Identifier: Apache-2.0 .plot-view { + width: 100%; + + .plot-window { + display: flex; + justify-content: center; + } + + .plot-config { width: 100%; - - .plot-window { - display: flex; - justify-content: center; - } - - .plot-config { - width: 100%; - margin: 0; - padding: 0; - resize: none; - height: 50vh; - background-color: var(--panel-bg-color); - color: var(--main-text-color); - font: var(--fixed-font); - } + margin: 0; + padding: 0; + resize: none; + height: 50vh; + background-color: var(--panel-bg-color); + color: var(--main-text-color); + font: var(--fixed-font); + } } diff --git a/frontend/app/view/preview/csvview.scss b/frontend/app/view/preview/csvview.scss index 07514cd71..873a1b3f8 100644 --- a/frontend/app/view/preview/csvview.scss +++ b/frontend/app/view/preview/csvview.scss @@ -4,93 +4,93 @@ @use "../../mixins.scss"; .csv-view { - opacity: 0; /* Start with an opacity of 0, meaning it's invisible */ + opacity: 0; /* Start with an opacity of 0, meaning it's invisible */ - @include mixins.ellipsis(); + @include mixins.ellipsis(); + overflow-x: auto; + overflow-y: hidden; + + .cursor-pointer { + cursor: pointer; + } + + .select-none { + user-select: none; + } + + table.probe { + position: absolute; + visibility: hidden; + } + + table { + border-collapse: collapse; overflow-x: auto; - overflow-y: hidden; + border: 1px solid var(--scrollbar-thumb-hover-color); - .cursor-pointer { - cursor: pointer; - } + thead { + position: relative; + display: block; + width: 100%; + overflow-y: scroll; - .select-none { - user-select: none; - } + tr { + border-bottom: 1px solid var(--scrollbar-thumb-hover-color); - table.probe { - position: absolute; - visibility: hidden; - } + th { + color: var(--main-text-color); + border-right: 1px solid var(--scrollbar-thumb-hover-color); + border-bottom: none; + padding: 2px 10px; + flex-basis: 100%; + flex-grow: 2; + display: block; + text-align: left; + position: relative; - table { - border-collapse: collapse; - overflow-x: auto; - border: 1px solid var(--scrollbar-thumb-hover-color); - - thead { + .inner { + text-align: left; + padding-right: 15px; position: relative; - display: block; - width: 100%; - overflow-y: scroll; + @include mixins.ellipsis(); - tr { - border-bottom: 1px solid var(--scrollbar-thumb-hover-color); - - th { - color: var(--main-text-color); - border-right: 1px solid var(--scrollbar-thumb-hover-color); - border-bottom: none; - padding: 2px 10px; - flex-basis: 100%; - flex-grow: 2; - display: block; - text-align: left; - position: relative; - - .inner { - text-align: left; - padding-right: 15px; - position: relative; - @include mixins.ellipsis(); - - .sort-icon { - position: absolute; - right: 0px; - top: 2px; - width: 9px; - } - } - } - } - } - - tbody { - display: block; - position: relative; - overflow-y: scroll; - overscroll-behavior: contain; - } - - tr { - width: 100%; - display: flex; - - td { - border-right: 1px solid var(--scrollbar-thumb-hover-color); - border-left: 1px solid var(--scrollbar-thumb-hover-color); - padding: 3px 10px; - flex-basis: 100%; - flex-grow: 2; - display: block; - text-align: left; - @include mixins.ellipsis(); + .sort-icon { + position: absolute; + right: 0px; + top: 2px; + width: 9px; } + } } + } } + + tbody { + display: block; + position: relative; + overflow-y: scroll; + overscroll-behavior: contain; + } + + tr { + width: 100%; + display: flex; + + td { + border-right: 1px solid var(--scrollbar-thumb-hover-color); + border-left: 1px solid var(--scrollbar-thumb-hover-color); + padding: 3px 10px; + flex-basis: 100%; + flex-grow: 2; + display: block; + text-align: left; + @include mixins.ellipsis(); + } + } + } } .csv-view.show { - opacity: 1; + opacity: 1; } diff --git a/frontend/app/view/preview/preview.scss b/frontend/app/view/preview/preview.scss index 0d29f58e5..41843ca39 100644 --- a/frontend/app/view/preview/preview.scss +++ b/frontend/app/view/preview/preview.scss @@ -2,82 +2,82 @@ // SPDX-License-Identifier: Apache-2.0 .view-preview { - display: flex; - flex-direction: row; - height: 100%; - flex-grow: 1; - overflow: hidden; - align-items: center; - justify-content: center; - padding: 0 5px; + display: flex; + flex-direction: row; + height: 100%; + flex-grow: 1; + overflow: hidden; + align-items: center; + justify-content: center; + padding: 0 5px; - &.view-preview-markdown { - align-items: start; - justify-content: start; - overflow: auto; - } + &.view-preview-markdown { + align-items: start; + justify-content: start; + overflow: auto; + } - &.view-preview-text { - align-items: start; - justify-content: start; - overflow: auto; + &.view-preview-text { + align-items: start; + justify-content: start; + overflow: auto; - pre { - font: var(--fixed-font); - } + pre { + font: var(--fixed-font); } + } - &.view-preview-image, - &.view-preview-video, - &.view-preview-audio { - video, - audio, - img { - width: 100%; - height: 100%; - padding: 10px; - object-fit: contain; - } - } - &.view-preview-directory { - flex-direction: column; - align-items: start; + &.view-preview-image, + &.view-preview-video, + &.view-preview-audio { + video, + audio, + img { + width: 100%; + height: 100%; + padding: 10px; + object-fit: contain; } + } + &.view-preview-directory { + flex-direction: column; + align-items: start; + } } .full-preview { - display: flex; - flex-direction: column; - width: 100%; - overflow: hidden; + display: flex; + flex-direction: column; + width: 100%; + overflow: hidden; } .view-nav { - display: flex; - flex-shrink: 0; - padding: 0.2rem 0 0.2rem 0; + display: flex; + flex-shrink: 0; + padding: 0.2rem 0 0.2rem 0; - .view-nav-item { - border-radius: 3px; - padding: 0.2rem 0; + .view-nav-item { + border-radius: 3px; + padding: 0.2rem 0; - &.clickable { - cursor: pointer; + &.clickable { + cursor: pointer; - &:hover { - background-color: var(--highlight-bg-color); - } - } - - &.current-file { - background-color: transparent; - cursor: default; - font-weight: bold; - } + &:hover { + background-color: var(--highlight-bg-color); + } } + + &.current-file { + background-color: transparent; + cursor: default; + font-weight: bold; + } + } } .full-preview-content { - flex-grow: 1; - overflow: hidden; + flex-grow: 1; + overflow: hidden; } diff --git a/frontend/app/view/quicktipsview/quicktipsview.scss b/frontend/app/view/quicktipsview/quicktipsview.scss index 6b22bbc31..661f1a7e4 100644 --- a/frontend/app/view/quicktipsview/quicktipsview.scss +++ b/frontend/app/view/quicktipsview/quicktipsview.scss @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 .quicktips-view { - padding: 10px 5px; - overflow: auto; - width: 100%; + padding: 10px 5px; + overflow: auto; + width: 100%; } diff --git a/frontend/app/view/sysinfo/sysinfo.scss b/frontend/app/view/sysinfo/sysinfo.scss index cfa5c1f10..b4572b90f 100644 --- a/frontend/app/view/sysinfo/sysinfo.scss +++ b/frontend/app/view/sysinfo/sysinfo.scss @@ -2,32 +2,32 @@ // SPDX-License-Identifier: Apache-2.0 .sysinfo-view { - flex-flow: column nowrap; - flex-grow: 1; - margin-bottom: 0; - overflow-y: auto; - .sysinfo-inner { - width: 100%; - height: 100%; - display: grid; - grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); - gap: 10px; + flex-flow: column nowrap; + flex-grow: 1; + margin-bottom: 0; + overflow-y: auto; + .sysinfo-inner { + width: 100%; + height: 100%; + display: grid; + grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); + gap: 10px; - &.two-columns { - grid-template-columns: 1fr 1fr; - } - - .sysinfo-plot-content { - min-height: 100px; - svg { - [aria-label="tip"] { - g { - path { - color: var(--border-color); - } - } - } - } - } + &.two-columns { + grid-template-columns: 1fr 1fr; } + + .sysinfo-plot-content { + min-height: 100px; + svg { + [aria-label="tip"] { + g { + path { + color: var(--border-color); + } + } + } + } + } + } } diff --git a/frontend/app/view/term/term.scss b/frontend/app/view/term/term.scss index 9ef67f8b5..b460ef958 100644 --- a/frontend/app/view/term/term.scss +++ b/frontend/app/view/term/term.scss @@ -2,145 +2,145 @@ // SPDX-License-Identifier: Apache-2.0 .connection-btn { - min-height: 0; - overflow: hidden; - line-height: 1; - display: flex; - background-color: orangered; - justify-content: flex-start; - width: 200px; + min-height: 0; + overflow: hidden; + line-height: 1; + display: flex; + background-color: orangered; + justify-content: flex-start; + width: 200px; } .view-term { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + + .term-header { + display: flex; + flex-direction: row; + padding: 4px 10px; + height: 35px; + gap: 10px; + align-items: center; + flex-shrink: 0; + border-bottom: 1px solid var(--border-color); + } + + .term-toolbar { + height: 20px; + border-bottom: 1px solid var(--border-color); + overflow: hidden; + } + + .term-connectelem { + flex-grow: 1; + min-height: 0; + overflow: hidden; + line-height: 1; + margin: 5px; + margin-left: 4px; + } + + .term-htmlelem { display: flex; flex-direction: column; width: 100%; - height: 100%; + flex-grow: 1; + min-height: 0; overflow: hidden; - position: relative; - .term-header { - display: flex; - flex-direction: row; - padding: 4px 10px; - height: 35px; - gap: 10px; - align-items: center; - flex-shrink: 0; - border-bottom: 1px solid var(--border-color); - } - - .term-toolbar { - height: 20px; - border-bottom: 1px solid var(--border-color); - overflow: hidden; + .block-content { + padding: 0; } + } + &.term-mode-term { .term-connectelem { - flex-grow: 1; - min-height: 0; - overflow: hidden; - line-height: 1; - margin: 5px; - margin-left: 4px; + display: flex; } - .term-htmlelem { - display: flex; - flex-direction: column; - width: 100%; - flex-grow: 1; - min-height: 0; - overflow: hidden; + display: none; + } + } - .block-content { - padding: 0; - } + &.term-mode-vdom { + .term-connectelem { + display: none; + } + .term-htmlelem { + display: flex; } - &.term-mode-term { - .term-connectelem { - display: flex; - } - .term-htmlelem { - display: none; - } + .ijson iframe { + width: 100%; + height: 100%; + border: none; } + } - &.term-mode-vdom { - .term-connectelem { - display: none; - } - .term-htmlelem { - display: flex; - } + .term-stickers { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: var(--zindex-termstickers); + pointer-events: none; - .ijson iframe { - width: 100%; - height: 100%; - border: none; - } - } - - .term-stickers { - position: absolute; - top: 0; - left: 0; + .term-sticker-image { + img { + object-fit: contain; width: 100%; height: 100%; - z-index: var(--zindex-termstickers); - pointer-events: none; - - .term-sticker-image { - img { - object-fit: contain; - width: 100%; - height: 100%; - } - } - - .term-sticker-svg { - svg { - object-fit: contain; - width: 100%; - height: 100%; - } - } + } } - .terminal { - .xterm-viewport { - z-index: var(--zindex-xterm-viewport-overlay); + .term-sticker-svg { + svg { + object-fit: contain; + width: 100%; + height: 100%; + } + } + } - &::-webkit-scrollbar { - width: 6px; - height: 6px; - } + .terminal { + .xterm-viewport { + z-index: var(--zindex-xterm-viewport-overlay); - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-background-color); - } + &::-webkit-scrollbar { + width: 6px; + height: 6px; + } - &::-webkit-scrollbar-thumb { - display: none; - background-color: var(--scrollbar-thumb-color); - border-radius: 4px; - margin: 0 1px 0 1px; + &::-webkit-scrollbar-track { + background-color: var(--scrollbar-background-color); + } - &:hover { - background-color: var(--scrollbar-thumb-hover-color); - } - - &:active { - background-color: var(--scrollbar-thumb-active-color); - } - } - } + &::-webkit-scrollbar-thumb { + display: none; + background-color: var(--scrollbar-thumb-color); + border-radius: 4px; + margin: 0 1px 0 1px; &:hover { - .xterm-viewport::-webkit-scrollbar-thumb { - display: block; - } + background-color: var(--scrollbar-thumb-hover-color); } + + &:active { + background-color: var(--scrollbar-thumb-active-color); + } + } } + + &:hover { + .xterm-viewport::-webkit-scrollbar-thumb { + display: block; + } + } + } } diff --git a/frontend/app/view/vdom/vdom.scss b/frontend/app/view/vdom/vdom.scss index b8cd5f300..37ff99dd8 100644 --- a/frontend/app/view/vdom/vdom.scss +++ b/frontend/app/view/vdom/vdom.scss @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 .view-vdom { - overflow: auto; - width: 100%; - min-height: 100%; + overflow: auto; + width: 100%; + min-height: 100%; } diff --git a/frontend/app/view/waveai/waveai.scss b/frontend/app/view/waveai/waveai.scss index c35a5e24e..799680052 100644 --- a/frontend/app/view/waveai/waveai.scss +++ b/frontend/app/view/waveai/waveai.scss @@ -2,151 +2,151 @@ // SPDX-License-Identifier: Apache-2.0 .waveai { - display: flex; - flex-direction: column; - overflow: hidden; - height: 100%; - width: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + height: 100%; + width: 100%; - .waveai-chat { - flex-grow: 1; - > .scrollable { - flex-flow: column nowrap; - margin-bottom: 0; - overflow-y: auto; - min-height: 100%; + .waveai-chat { + flex-grow: 1; + > .scrollable { + flex-flow: column nowrap; + margin-bottom: 0; + overflow-y: auto; + min-height: 100%; - .chat-window { - display: flex; - flex-direction: column; - gap: 8px; - - // This is the filler that will push the chat messages to the bottom until the chat window is full - .filler { - flex: 1 1 auto; - } - } - - .chat-msg-container { - display: flex; - gap: 8px; - .chat-msg { - margin: 10px 0; - display: flex; - align-items: flex-start; - border-radius: 8px; - - &.chat-msg-header { - display: flex; - flex-direction: column; - justify-content: flex-start; - - .icon-box { - padding-top: 0; - border-radius: 4px; - background-color: rgb(from var(--highlight-bg-color) r g b / 0.05); - display: flex; - padding: 6px; - } - } - - &.chat-msg-assistant { - color: var(--main-text-color); - background-color: rgb(from var(--highlight-bg-color) r g b / 0.1); - margin-right: auto; - padding: 10px; - max-width: 85%; - - .markdown { - width: 100%; - - pre { - white-space: pre-wrap; - word-break: break-word; - max-width: 100%; - overflow-x: auto; - margin-left: 0; - } - } - } - &.chat-msg-user { - margin-left: auto; - padding: 10px; - max-width: 85%; - background-color: rgb(from var(--accent-color) r g b / 0.15); - } - - &.chat-msg-error { - color: var(--main-text-color); - background-color: rgb(from var(--error-color) r g b / 0.25); - margin-right: auto; - padding: 10px; - max-width: 85%; - - .markdown { - width: 100%; - - pre { - white-space: pre-wrap; - word-break: break-word; - max-width: 100%; - overflow-x: auto; - margin-left: 0; - } - } - } - - &.typing-indicator { - margin-top: 4px; - } - } - } - } - } - - .waveai-controls { + .chat-window { display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: 10px; - padding: 8px 6px; + flex-direction: column; + gap: 8px; - .waveai-input-wrapper { - padding: 8px 12px; - flex: 1 1 auto; + // This is the filler that will push the chat messages to the bottom until the chat window is full + .filler { + flex: 1 1 auto; + } + } + + .chat-msg-container { + display: flex; + gap: 8px; + .chat-msg { + margin: 10px 0; + display: flex; + align-items: flex-start; + border-radius: 8px; + + &.chat-msg-header { display: flex; flex-direction: column; - justify-content: center; - align-items: flex-start; - border-radius: 6px; - border: 1px solid rgb(from var(--highlight-bg-color) r g b / 0.42); + justify-content: flex-start; - .waveai-input { - color: var(--main-text-color); - background-color: inherit; - resize: none; - width: 100%; - border: transparent; - outline: none; - overflow: auto; - overflow-wrap: anywhere; - font-family: var(--termfontfamily); - font-weight: normal; - line-height: var(--termlineheight); - height: 21px; + .icon-box { + padding-top: 0; + border-radius: 4px; + background-color: rgb(from var(--highlight-bg-color) r g b / 0.05); + display: flex; + padding: 6px; } - } + } - .waveai-submit-button { - border-radius: 100%; - width: 27px; - aspect-ratio: 1 /1; - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - padding: 0; + &.chat-msg-assistant { + color: var(--main-text-color); + background-color: rgb(from var(--highlight-bg-color) r g b / 0.1); + margin-right: auto; + padding: 10px; + max-width: 85%; + + .markdown { + width: 100%; + + pre { + white-space: pre-wrap; + word-break: break-word; + max-width: 100%; + overflow-x: auto; + margin-left: 0; + } + } + } + &.chat-msg-user { + margin-left: auto; + padding: 10px; + max-width: 85%; + background-color: rgb(from var(--accent-color) r g b / 0.15); + } + + &.chat-msg-error { + color: var(--main-text-color); + background-color: rgb(from var(--error-color) r g b / 0.25); + margin-right: auto; + padding: 10px; + max-width: 85%; + + .markdown { + width: 100%; + + pre { + white-space: pre-wrap; + word-break: break-word; + max-width: 100%; + overflow-x: auto; + margin-left: 0; + } + } + } + + &.typing-indicator { + margin-top: 4px; + } } + } } + } + + .waveai-controls { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 10px; + padding: 8px 6px; + + .waveai-input-wrapper { + padding: 8px 12px; + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + border-radius: 6px; + border: 1px solid rgb(from var(--highlight-bg-color) r g b / 0.42); + + .waveai-input { + color: var(--main-text-color); + background-color: inherit; + resize: none; + width: 100%; + border: transparent; + outline: none; + overflow: auto; + overflow-wrap: anywhere; + font-family: var(--termfontfamily); + font-weight: normal; + line-height: var(--termlineheight); + height: 21px; + } + } + + .waveai-submit-button { + border-radius: 100%; + width: 27px; + aspect-ratio: 1 /1; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + padding: 0; + } + } } diff --git a/frontend/app/view/webview/webview.scss b/frontend/app/view/webview/webview.scss index 761e556ba..75ebc8607 100644 --- a/frontend/app/view/webview/webview.scss +++ b/frontend/app/view/webview/webview.scss @@ -2,48 +2,48 @@ // SPDX-License-Identifier: Apache-2.0 .webview { - height: 100%; - width: 100%; - border: none !important; - outline: none !important; - overflow: hidden; - padding: 0; - margin: 0; - user-select: none; + height: 100%; + width: 100%; + border: none !important; + outline: none !important; + overflow: hidden; + padding: 0; + margin: 0; + user-select: none; - // try to force pixel alignment to prevent - // subpixel rendering artifacts - transform: translate3d(0, 0, 0); - will-change: transform; + // try to force pixel alignment to prevent + // subpixel rendering artifacts + transform: translate3d(0, 0, 0); + will-change: transform; } .webview-error { + display: flex; + position: absolute; + background-color: black; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 100; + div { + font-size: x-large; + color: var(--error-color); display: flex; - position: absolute; - background-color: black; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 100; - div { - font-size: x-large; - color: var(--error-color); - display: flex; - margin: auto; - padding: 30px; - } + margin: auto; + padding: 30px; + } } .block-frame-div-url { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.1); - input { - opacity: 1; - } + input { + opacity: 1; + } - .iconbutton { - width: fit-content !important; - margin-right: 5px; - } + .iconbutton { + width: fit-content !important; + margin-right: 5px; + } } diff --git a/frontend/app/workspace/workspace.scss b/frontend/app/workspace/workspace.scss index 19294d6d8..57f49d9f4 100644 --- a/frontend/app/workspace/workspace.scss +++ b/frontend/app/workspace/workspace.scss @@ -2,69 +2,69 @@ // SPDX-License-Identifier: Apache-2.0 .workspace { + display: flex; + flex-direction: column; + width: 100%; + flex-grow: 1; + overflow: hidden; + + .workspace-tabcontent { display: flex; - flex-direction: column; - width: 100%; + flex-direction: row; flex-grow: 1; overflow: hidden; + } - .workspace-tabcontent { - display: flex; - flex-direction: row; - flex-grow: 1; + .workspace-widgets { + display: flex; + flex-direction: column; + width: 50px; + overflow: hidden; + padding-top: 4px; + padding-bottom: 4px; + margin-left: -4px; + user-select: none; + + .widget { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + padding: 8px 2px 8px 0px; + color: var(--secondary-text-color); + font-size: 20px; + overflow: hidden; + border-radius: 4px; + + &:hover:not(.no-hover) { + background-color: var(--highlight-bg-color); + cursor: pointer; + color: white !important; + } + + .widget-icon { + } + + .widget-label { + font-size: 10px; + margin-top: 3px; + width: 100%; + padding: 0 2px; + text-align: center; + white-space: nowrap; overflow: hidden; + } } - .workspace-widgets { - display: flex; - flex-direction: column; - width: 50px; - overflow: hidden; - padding-top: 4px; - padding-bottom: 4px; - margin-left: -4px; - user-select: none; - - .widget { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - padding: 8px 2px 8px 0px; - color: var(--secondary-text-color); - font-size: 20px; - overflow: hidden; - border-radius: 4px; - - &:hover:not(.no-hover) { - background-color: var(--highlight-bg-color); - cursor: pointer; - color: white !important; - } - - .widget-icon { - } - - .widget-label { - font-size: 10px; - margin-top: 3px; - width: 100%; - padding: 0 2px; - text-align: center; - white-space: nowrap; - overflow: hidden; - } - } - - .widget-divider { - margin-right: 2px; - height: 2px; - background-color: var(--border-color); - } - - .widget-spacer { - flex-grow: 1; - } + .widget-divider { + margin-right: 2px; + height: 2px; + background-color: var(--border-color); } + + .widget-spacer { + flex-grow: 1; + } + } } diff --git a/frontend/layout/lib/tilelayout.scss b/frontend/layout/lib/tilelayout.scss index 850e61bcd..53c55efb5 100644 --- a/frontend/layout/lib/tilelayout.scss +++ b/frontend/layout/lib/tilelayout.scss @@ -2,148 +2,148 @@ // SPDX-License-Identifier: Apache-2.0 .tile-layout { - position: relative; + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + + --gap-size-px: 5px; + + .overlay-container, + .display-container, + .placeholder-container { + position: absolute; + display: flex; + top: 0; + left: 0; height: 100%; width: 100%; + min-height: 4rem; + min-width: 4rem; + } + + .display-container { + z-index: var(--zindex-layout-display-container); + } + + .placeholder-container { + z-index: var(--zindex-layout-placeholder-container); + } + + .overlay-container { + z-index: var(--zindex-layout-overlay-container); + } + + .overlay-node { + display: flex; + flex: 0 1 auto; + } + + .resize-handle { + z-index: var(--zindex-layout-resize-handle); + + .line { + visibility: hidden; + } + &.flex-row { + cursor: ew-resize; + .line { + height: 100%; + width: calc(50% + 1px); + border-right: 2px solid var(--accent-color); + } + } + &.flex-column { + cursor: ns-resize; + .line { + height: calc(50% + 1px); + border-bottom: 2px solid var(--accent-color); + } + } + &:hover .line { + visibility: visible; + + // Ignore the prefers-reduced-motion override, since we are not applying a true animation here, just a delay. + transition-property: visibility !important; + transition-delay: var(--animation-time-s) !important; + } + } + + .tile-node { + border-radius: calc(var(--block-border-radius) + 2px); overflow: hidden; + width: 100%; + height: 100%; - --gap-size-px: 5px; - - .overlay-container, - .display-container, - .placeholder-container { - position: absolute; - display: flex; - top: 0; - left: 0; - height: 100%; - width: 100%; - min-height: 4rem; - min-width: 4rem; + &.dragging { + filter: blur(8px); } - .display-container { - z-index: var(--zindex-layout-display-container); + &.resizing { + border: 1px solid var(--accent-color); + backdrop-filter: blur(8px); } - .placeholder-container { - z-index: var(--zindex-layout-placeholder-container); + .tile-leaf { + overflow: hidden; } - .overlay-container { - z-index: var(--zindex-layout-overlay-container); - } + .tile-preview-container { + position: absolute; + top: 10000px; + white-space: nowrap !important; + user-select: none; + -webkit-user-select: none; - .overlay-node { - display: flex; - flex: 0 1 auto; - } - - .resize-handle { - z-index: var(--zindex-layout-resize-handle); - - .line { - visibility: hidden; - } - &.flex-row { - cursor: ew-resize; - .line { - height: 100%; - width: calc(50% + 1px); - border-right: 2px solid var(--accent-color); - } - } - &.flex-column { - cursor: ns-resize; - .line { - height: calc(50% + 1px); - border-bottom: 2px solid var(--accent-color); - } - } - &:hover .line { - visibility: visible; - - // Ignore the prefers-reduced-motion override, since we are not applying a true animation here, just a delay. - transition-property: visibility !important; - transition-delay: var(--animation-time-s) !important; - } - } - - .tile-node { - border-radius: calc(var(--block-border-radius) + 2px); - overflow: hidden; + .tile-preview { width: 100%; height: 100%; - - &.dragging { - filter: blur(8px); - } - - &.resizing { - border: 1px solid var(--accent-color); - backdrop-filter: blur(8px); - } - - .tile-leaf { - overflow: hidden; - } - - .tile-preview-container { - position: absolute; - top: 10000px; - white-space: nowrap !important; - user-select: none; - -webkit-user-select: none; - - .tile-preview { - width: 100%; - height: 100%; - } - } - - &:not(:only-child) .tile-leaf { - padding: calc(var(--gap-size-px) / 2); - } + } } - --block-blur: 2px; - - .magnified-node-backdrop, - .ephemeral-node-backdrop { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - backdrop-filter: blur(var(--block-blur)); + &:not(:only-child) .tile-leaf { + padding: calc(var(--gap-size-px) / 2); } + } - .magnified-node-backdrop { - z-index: var(--zindex-layout-magnified-node-backdrop); - } + --block-blur: 2px; - .ephemeral-node-backdrop { - z-index: var(--zindex-layout-ephemeral-node-backdrop); - } + .magnified-node-backdrop, + .ephemeral-node-backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(var(--block-blur)); + } - &.animate { - .tile-node, - .placeholder { - transition-duration: var(--animation-time-s); - transition-timing-function: linear; - transition-property: transform, width, height, background-color; - } - } + .magnified-node-backdrop { + z-index: var(--zindex-layout-magnified-node-backdrop); + } - .tile-leaf, - .overlay-leaf { - height: 100%; - width: 100%; - } + .ephemeral-node-backdrop { + z-index: var(--zindex-layout-ephemeral-node-backdrop); + } + &.animate { + .tile-node, .placeholder { - background-color: var(--accent-color); - opacity: 0.5; - border-radius: calc(var(--block-border-radius) + 2px); + transition-duration: var(--animation-time-s); + transition-timing-function: linear; + transition-property: transform, width, height, background-color; } + } + + .tile-leaf, + .overlay-leaf { + height: 100%; + width: 100%; + } + + .placeholder { + background-color: var(--accent-color); + opacity: 0.5; + border-radius: calc(var(--block-border-radius) + 2px); + } } diff --git a/frontend/layout/lib/tilelayout.stories.scss b/frontend/layout/lib/tilelayout.stories.scss index b179ffc8f..68a79a5a0 100644 --- a/frontend/layout/lib/tilelayout.stories.scss +++ b/frontend/layout/lib/tilelayout.stories.scss @@ -2,8 +2,8 @@ // SPDX-License-Identifier: Apache-2.0 .placeholder-visible { - .overlay-container, - .placeholder-container { - transform: unset !important; - } + .overlay-container, + .placeholder-container { + transform: unset !important; + } } diff --git a/public/style.scss b/public/style.scss index 2628f4fdb..6883a94bc 100644 --- a/public/style.scss +++ b/public/style.scss @@ -5,57 +5,57 @@ @import "./theme.scss"; body { - display: flex; - flex-direction: row; - width: 100vw; - height: 100vh; - background-color: var(--main-bg-color); - color: var(--main-text-color); - font: var(--base-font); - overflow: hidden; + display: flex; + flex-direction: row; + width: 100vw; + height: 100vh; + background-color: var(--main-bg-color); + color: var(--main-text-color); + font: var(--base-font); + overflow: hidden; } *::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 4px; + height: 4px; } *::-webkit-scrollbar-track { - background-color: var(--scrollbar-background-color) !important; + background-color: var(--scrollbar-background-color) !important; } *::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb-color) !important; - border-radius: 4px; - margin: 0 1px 0 1px; + background-color: var(--scrollbar-thumb-color) !important; + border-radius: 4px; + margin: 0 1px 0 1px; } *::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover-color) !important; + background-color: var(--scrollbar-thumb-hover-color) !important; } .flex-spacer { - flex-grow: 1; + flex-grow: 1; } .text-fixed { - font: var(--fixed-font); + font: var(--fixed-font); } #main, .mainapp { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; } .titlebar { - height: 35px; - border-bottom: 1px solid var(--border-color); - flex-shrink: 0; + height: 35px; + border-bottom: 1px solid var(--border-color); + flex-shrink: 0; } .error-boundary { - color: var(--error-color); + color: var(--error-color); }