From d06784958d73159b5e4abafe5114804662114ed7 Mon Sep 17 00:00:00 2001 From: Ryan Schanzenbacher Date: Thu, 9 Jul 2026 22:15:53 -0400 Subject: move ubersicht modules in tree --- .../lib/styles/components/data/battery.js | 134 +++++++ .../lib/styles/components/data/browser-track.js | 40 ++ .../lib/styles/components/data/cpu.js | 16 + .../lib/styles/components/data/crypto.js | 9 + .../styles/components/data/data-widget-loader.js | 32 ++ .../lib/styles/components/data/data-widget.js | 65 ++++ .../lib/styles/components/data/date-display.js | 10 + .../lib/styles/components/data/github.js | 10 + .../lib/styles/components/data/gpu.js | 15 + .../lib/styles/components/data/graph.js | 49 +++ .../lib/styles/components/data/keyboard.js | 10 + .../lib/styles/components/data/memory.js | 30 ++ .../lib/styles/components/data/mic.js | 83 +++++ .../lib/styles/components/data/mpd.js | 80 ++++ .../lib/styles/components/data/music.js | 11 + .../lib/styles/components/data/netstats.js | 48 +++ .../lib/styles/components/data/next-meeting.js | 71 ++++ .../lib/styles/components/data/notifications.js | 68 ++++ .../lib/styles/components/data/sound.js | 83 +++++ .../lib/styles/components/data/specter.js | 55 +++ .../lib/styles/components/data/spotify.js | 15 + .../lib/styles/components/data/stock.js | 15 + .../lib/styles/components/data/time.js | 85 +++++ .../lib/styles/components/data/viscosity-vpn.js | 17 + .../lib/styles/components/data/weather.js | 163 ++++++++ .../lib/styles/components/data/wifi.js | 13 + .../lib/styles/components/data/youtube-music.js | 11 + .../lib/styles/components/data/zoom.js | 26 ++ .../lib/styles/components/missives.js | 89 +++++ .../lib/styles/components/process.js | 161 ++++++++ .../settings/aerospace-display-manager.js | 101 +++++ .../lib/styles/components/settings/color-picker.js | 83 +++++ .../lib/styles/components/settings/icon-picker.js | 155 ++++++++ .../lib/styles/components/settings/settings.js | 408 +++++++++++++++++++++ .../components/settings/user-widgets-creator.js | 170 +++++++++ .../lib/styles/components/side-icon.js | 15 + .../lib/styles/components/spaces/space-options.js | 137 +++++++ .../lib/styles/components/spaces/space.js | 152 ++++++++ .../lib/styles/components/spaces/spaces.js | 50 +++ 39 files changed, 2785 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components') diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js new file mode 100755 index 0000000..5c0c413 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js @@ -0,0 +1,134 @@ +// Styles for /lib/components/data/battery.jsx component +export const batteryStyles = /* css */ ` +.battery { + position: relative; + background-color: var(--magenta); + overflow: hidden; +} +.battery--caffeinate, +.simple-bar--no-color-in-data .battery--caffeinate { + color: var(--black); + background-color: var(--white); +} +.simple-bar--widgets-background-color-as-foreground .battery { + color: var(--magenta); + background-color: transparent; +} +.simple-bar--widgets-background-color-as-foreground .battery--caffeinate { + color: var(--foreground); +} +.battery__icon { + position: relative; + width: 16px; + height: 9px; + margin-top: -2px; + margin-right: 10px; +} +.battery__icon::after { + content: ''; + position: absolute; + top: calc(10% + 1px); + left: calc(100% + 2px); + width: 2px; + height: 80%; + border-radius: 0 3px 3px 0; + background-color: currentColor; +} +.simple-bar--no-color-in-data .battery__icon::after { + background-color: currentColor; +} +.battery__icon-inner { + position: relative; + width: 100%; + height: 100%; + border-radius: 3px; + border: 1px solid currentColor; + overflow: hidden; +} +.battery__charging-icon { + position: absolute; + top: -1px; + left: calc(50% - 6px); + width: 11px; + height: 11px; + fill: currentColor; + stroke: var(--magenta); + stroke-width: 2; +} +.simple-bar--no-color-in-data .battery__charging-icon { + stroke: var(--minor); +} +.battery--caffeinate .battery__charging-icon { + stroke: var(--white); +} +.simple-bar--widgets-background-color-as-foreground .battery__charging-icon { + stroke: var(--background); +} +.simple-bar--no-color-in-data .battery__icon-inner { + fill: currentColor; + border: 1px solid currentColor; +} +.battery__icon-filler { + position: absolute; + top: 1px; + left: 1px; + width: calc(100% - 2px); + height: calc(100% - 2px); + background-color: currentColor; + border-radius: 2px; + transform: scaleX(0); + transform-origin: left center; + transition: transform 160ms var(--transition-easing); + z-index: 0; +} +.simple-bar--no-color-in-data .battery__icon-filler { + background-color: currentColor; + opacity: 0.8; +} +.simple-bar--no-color-in-data .battery--caffeinate .battery__icon::after, +.simple-bar--no-color-in-data .battery--caffeinate .battery__icon-filler { + background-color: currentColor; +} +.battery--low .battery__icon-filler { + background-color: var(--red); +} +.battery--low-power-mode .battery__icon-filler { + background-color: var(--yellow); +} +.battery__caffeinate-icon { + position: absolute; + top: calc(50% - 12px); + right: -4px; + width: 26px !important; + height: 26px !important; + opacity: 0.15; +} +.battery__caffeinate-icon g path { + animation: coffee-spur-sliding-up 1600ms var(--transition-easing) infinite; +} +.simple-bar--animations-disabled .battery__caffeinate-icon g path { + animation: none; +} +.battery__caffeinate-icon g path:nth-child(2) { + animation-delay: -600ms; +} +.battery__caffeinate-icon g path:nth-child(3) { + animation-delay: -280ms; +} +@keyframes coffee-spur-sliding-up { + 0% { + opacity: 0; + transform: translateY(3px); + } + 20% { + opacity: 0.7; + } + 80% { + opacity: 0.7; + } + 100% { + opacity: 0; + transform: translateY(-4px); + } +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js new file mode 100755 index 0000000..c70a1ee --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js @@ -0,0 +1,40 @@ +// Styles for /lib/components/data/browser-track.jsx +export const browserTrackStyles = /* css */ ` +.browser-track { + position: relative; + background-color: var(--green); +} +.simple-bar--widgets-background-color-as-foreground .browser-track { + color: var(--green); + background-color: transparent; +} +.browser-track__icons { + position: relative; +} +.browser-track__icons > svg:nth-of-type(1), +.browser-track__icons > svg:nth-of-type(2) { + width: 10px; + height: 10px; + fill: currentColor; +} +.browser-track__icons > svg:nth-of-type(1) { + margin-right: 7px; +} +.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(1) { + fill: currentColor; +} +.browser-track__icons > svg:nth-of-type(2) { + position: absolute; + bottom: -1px; + right: 2px; + stroke: var(--green); + stroke-width: 3px; +} +.simple-bar--widgets-background-color-as-foreground .browser-track__icons > svg:nth-of-type(2) { + stroke: var(--background); +} +.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(2) { + fill: currentColor; + stroke: var(--minor); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js new file mode 100755 index 0000000..672c246 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js @@ -0,0 +1,16 @@ +// Styles for /lib/components/data/cpu.jsx component +export const cpuStyles = /* css */ ` +.cpu { + color: var(--foreground); + background-color: var(--minor); +} +.cpu--graph { + min-width: 90px; + padding: 0; +} +.cpu__usage { + width: 4ch; + padding: 3px; + text-align: right; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js new file mode 100755 index 0000000..3c9b0ae --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js @@ -0,0 +1,9 @@ +// Styles for /lib/components/data/crypto.jsx component +export const cryptoStyles = /* css */ ` +.crypto { + color: var(--foreground); + background-color: var(--minor); +} +.simple-bar--widgets-background-color-as-foreground .crypto { + background-color: transparent; +}`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js new file mode 100755 index 0000000..62710aa --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js @@ -0,0 +1,32 @@ +// Styles for /lib/components/data/data-widget-loader.jsx component +export const dataWidgetLoaderStyles = /* css */ ` +.data-widget-loader { + animation: data-widget-loader-appearance 320ms var(--transition-easing); +} +@keyframes data-widget-loader-appearance { + 0% { + opacity: 0; + } +} +.data-widget-loader::before { + content: ""; + width: 10px; + height: 10px; + margin-right: 7px; + background-color: currentColor; + border-radius: 50%; + opacity: 0.75; +} +.data-widget-loader__inner { + border: 2px solid transparent; + border-bottom-color: currentColor; + box-sizing: border-box; + border-radius: 50%; + animation: data-widget-loader-spining 640ms ease infinite; +} +@keyframes data-widget-loader-spining { + 100% { + transform: rotate(360deg); + } +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js new file mode 100755 index 0000000..f0b5cf1 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js @@ -0,0 +1,65 @@ +// Styles for /lib/components/data/data-widget.jsx component +export const dataWidgetStyles = /* css */ ` +.data-widget { + display: flex; + align-items: center; + margin: var(--item-outer-margin); + padding: var(--item-inner-margin); + color: var(--background); + font-family: var(--font); + font-size: inherit; + background-color: var(--minor); + text-decoration: none; + white-space: nowrap; + border-radius: var(--item-radius); + border: 0; + outline: none; + cursor: default; + user-select: none; + -webkit-user-select: none; + box-shadow: var(--light-shadow); + transition: all 160ms var(--transition-easing); +} +.simple-bar--no-shadow .data-widget { + box-shadow: none; +} +.simple-bar--no-color-in-data .data-widget { + color: var(--foreground); + background-color: var(--minor); +} +.simple-bar--widgets-background-color-as-foreground .data-widget { + background-color: transparent; + box-shadow: none; +} +.simple-bar--widgets-background-color-as-foreground.simple-bar--no-color-in-data .data-widget { + color: var(--foreground) !important; + background-color: transparent; +} +.data-widget--clickable { + cursor: pointer; +} +.data-widget--clickable:hover { + box-shadow: var(--light-shadow), var(--hover-ring); +} +.data-widget--clickable:active { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.data-widget > svg { + width: 14px; + height: 14px; + margin-right: 7px; + fill: currentColor; +} +.data-widget__inner { + max-width: var(--item-max-width); + display: flex; + flew-wrap: nowrap; + overflow: hidden; +} +.data-widget__slider { + display: flex; + align-items: center; + white-space: nowrap; + transition: transform 160ms var(--transition-easing); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js new file mode 100755 index 0000000..c152449 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js @@ -0,0 +1,10 @@ +// Styles for /lib/components/data/date-display.jsx component +export const dateStyles = /* css */ ` +.date-display { + background-color: var(--cyan); +} +.simple-bar--widgets-background-color-as-foreground .date-display { + color: var(--cyan); + background-color: transparent; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js new file mode 100755 index 0000000..f451ddc --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js @@ -0,0 +1,10 @@ +// Styles for /lib/components/data/github.jsx component +export const githubStyles = /* css */ ` +.github { + position: relative; + color: var(--foreground); + background-color: var(--minor); + overflow: hidden; + z-index: 0; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js new file mode 100755 index 0000000..c3f4b78 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js @@ -0,0 +1,15 @@ +// Styles for /lib/components/data/gpu.jsx component +export const gpuStyles = /* css */ ` +.gpu { + color: var(--foreground); + background-color: var(--minor); +} +.gpu--graph { + min-width: 70px; + padding: 0; +} +.gpu__usage { + width: 4ch; + text-align: right; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js new file mode 100755 index 0000000..0bf3609 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js @@ -0,0 +1,49 @@ +// Styles for /lib/components/data/graph.jsx component +export const graphStyles = /* css */ ` +.graph { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + gap: 4px; + overflow: hidden; + border-radius: inherit; +} +.graph__bars { + flex: 1 1 100%; + height: 75%; + display: flex; + align-items: flex-end; + justify-content: flex-end; + pointer-events: none; +} +.graph__bar { + min-height: 1px; + opacity: 0.75; +} +.graph__data { + position: absolute; + top: 3px; + left: 3px; + width: calc(100% - 6px); + flex: 0 0 auto; + display: flex; + justify-content: space-between; + gap: 2px; +} +.graph__data-item { + display: flex; + align-items: center; + gap: 3px; +} +.graph__data-item-icon { + flex: 0 0 10px; + width: 10px; + height: 10px; + fill: currentColor; +} +.graph__data-item-value { + font-size: calc(var(--font-size) - 2px); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js new file mode 100755 index 0000000..dfc4f70 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js @@ -0,0 +1,10 @@ +// Styles for /lib/components/data/keyboard.jsx component +export const keyboardStyles = /* css */ ` +.keyboard { + background-color: var(--main-alt); +} +.simple-bar--widgets-background-color-as-foreground .keyboard { + color: var(--main-alt); + background-color: transparent; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js new file mode 100755 index 0000000..d0239bb --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js @@ -0,0 +1,30 @@ +// Styles for /lib/components/data/memory.jsx component +export const memoryStyles = /* css */ ` +.memory { + color: var(--foreground); + background-color: var(--minor); +} +.memory--low { + --pie-color: var(--green); +} +.memory--medium { + --pie-color: var(--yellow); +} +.memory--high { + --pie-color: var(--red); +} +.memory__pie { + flex: 0 0 21px; + width: 21px; + height: 21px; + border-radius: 50%; +} +.memory__content { + display: flex; + gap: 4px; + padding-left: 5px; +} +.memory--high .memory__content { + color: var(--red); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js new file mode 100755 index 0000000..7a58f10 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js @@ -0,0 +1,83 @@ +// Styles for /lib/components/data/mic.jsx component +export const micStyles = /* css */ ` +.mic { +font-variant-numeric: tabular-nums; + background-color: var(--orange); + transform: translateZ(0); +} +.simple-bar--widgets-background-color-as-foreground .mic { + color: var(--orange); + background-color: transparent; +} +.mic__slider-container { + --slider-size: 10px; + + position: relative; + max-width: 0; + height: 100%; + display: flex; + align-items: center; + padding: 0; + overflow: hidden; + opacity: 0.7; + border-radius: var(--item-radius); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 0ms var(--transition-easing); +} +.mic:hover .mic__slider-container, +.mic--dragging .mic__slider-container { + max-width: 100px; + clip-path: inset(-100vh -100vw); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 320ms 320ms var(--transition-easing) +} +.mic__slider-container:hover { + opacity: 1; +} +.mic__slider { + width: 100px; + height: var(--slider-size); + appearance: none; + background-color: var(--background); + border-radius: var(--item-radius); + outline: none; + -webkit-appearance: none; +} +.simple-bar--widgets-background-color-as-foreground .mic__slider { + background-color: var(--foreground); +} +.mic__slider::-webkit-slider-thumb { + width: var(--slider-size); + height: var(--slider-size); + background-color: var(--foreground); + border-radius: var(--item-radius); + cursor: pointer; + -webkit-appearance: none; + transform-origin: center; + transition: transform 160ms var(--transition-easing); +} +.simple-bar--widgets-background-color-as-foreground .mic__slider::-webkit-slider-thumb { + background-color: var(--orange); +} +.mic__slider::-webkit-slider-thumb:hover { + transform: scale(1.5); +} +.mic__display { + display: flex; + align-items: center; + margin-right: 4px; + overflow: hidden; +} +.mic__display:active { + color: currentColor; +} +.mic__display > svg { + flex-shrink: 0; + width: 14px; + height: 14px; + margin-right: 3px; + fill: currentColor; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js new file mode 100755 index 0000000..da159ab --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js @@ -0,0 +1,80 @@ +// Styles for /lib/components/data/mpd.jsx component +export const mpdStyles = /* css */ ` +.mpd { + position: relative; + background-color: var(--cyan); +} +.simple-bar--widgets-background-color-as-foreground .mpd { + color: var(--cyan); + background-color: transparent; +} +.mpd__outer { + display: flex; + gap: 4px; +} +.mpd__inner { + max-width: 140px; + display: flex; + flew-wrap: nowrap; + overflow: hidden; +} +.mpd__info { + white-space: nowrap; + transition: transform 160ms var(--transition-easing); +} +.mpd__slider-container { + --slider-size: 10px; + + position: relative; + max-width: 0; + height: 100%; + display: flex; + align-items: center; + padding: 0; + clip-path: inset(0); + opacity: 0.7; + border-radius: var(--item-radius); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 0ms var(--transition-easing); +} +.mpd:hover .mpd__slider-container, +.mpd--dragging .mpd__slider-container { + max-width: 100px; + clip-path: inset(-100vh -100vw); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 320ms 320ms var(--transition-easing) +} +.mpd__slider-container:hover { + opacity: 1; +} +.mpd__slider { + width: 100px; + height: var(--slider-size); + appearance: none; + background-color: var(--background); + border-radius: var(--item-radius); + outline: none; + -webkit-appearance: none; +} +.simple-bar--widgets-background-color-as-foreground .mpd__slider { + background-color: var(--foreground); +} +.mpd__slider::-webkit-slider-thumb { + width: var(--slider-size); + height: var(--slider-size); + background-color: var(--foreground); + border-radius: var(--item-radius); + cursor: pointer; + -webkit-appearance: none; + transform-origin: center; + transition: transform 160ms var(--transition-easing); +} +.simple-bar--widgets-background-color-as-foreground .mpd__slider::-webkit-slider-thumb { + background-color: var(--blue); +} +.mpd__slider::-webkit-slider-thumb:hover { + transform: scale(1.5); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js new file mode 100755 index 0000000..5de3b1f --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js @@ -0,0 +1,11 @@ +// Styles for /lib/components/data/music.jsx component +export const musicStyles = /* css */ ` +.music { + position: relative; + background-color: var(--green); +} +.simple-bar--widgets-background-color-as-foreground .music { + color: var(--green); + background-color: transparent; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js new file mode 100755 index 0000000..384d970 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js @@ -0,0 +1,48 @@ +// Styles for /lib/components/data/netstats.jsx component +export const netstatsStyles = /* css */ ` +.netstats { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + color: var(--foreground); + background-color: var(--minor); + z-index: 0; +} +.netstats--graph { + min-width: 120px; + padding: 0; +} +.simple-bar--widgets-background-color-as-foreground .netstats { + background-color: transparent; +} +.netstats__item { + width: 9ch; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + padding: 0 4px; +} +.netstats__value { + display: flex; + align-items: baseline; + justify-content: flex-end; + margin: 0 auto; +} +.netstats__value > em { + font-size: 0.8em; + font-style: normal; +} +.netstats__icon { + flex: 0 0 12px; + width: 12px; + height: 12px; +} +.netstats__icon--download { + fill: var(--magenta); +} +.netstats__icon--upload { + fill: var(--blue); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js new file mode 100755 index 0000000..c4a0a0f --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js @@ -0,0 +1,71 @@ +// Styles for /lib/components/data/next-meeting.jsx component +export const nextMeetingStyles = /* css */ ` +.next-meeting { + background-color: var(--cyan); +} +.simple-bar--widgets-background-color-as-foreground .next-meeting { + color: var(--cyan); + background-color: transparent; +} +.simple-bar--no-color-in-data .next-meeting { + background-color: var(--minor); +} +.next-meeting--upcoming { + background-color: var(--yellow) !important; +} +.simple-bar--widgets-background-color-as-foreground .next-meeting--upcoming { + color: var(--yellow); + background-color: transparent !important; +} +.next-meeting--urgent { + background-color: var(--red) !important; + animation: next-meeting-pulse 1.5s ease-in-out infinite; +} +.simple-bar--widgets-background-color-as-foreground .next-meeting--urgent { + color: var(--red); + background-color: transparent !important; +} +@keyframes next-meeting-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } +} +.simple-bar--animations-disabled .next-meeting--urgent { + animation: none; +} +.next-meeting__title { + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-right: 6px; +} +.next-meeting__time { + font-weight: 600; + opacity: 0.9; +} +.next-meeting__join { + margin-left: 6px; + padding: 2px 6px; + background-color: rgba(255, 255, 255, 0.2); + border: none; + border-radius: 3px; + color: inherit; + font-family: inherit; + font-size: 10px; + font-weight: 600; + cursor: pointer; + transition: background-color 160ms var(--transition-easing), + transform 160ms var(--transition-easing); +} +.next-meeting__join:hover { + background-color: rgba(255, 255, 255, 0.35); + transform: translateY(-1px); +} +.next-meeting__join:active { + transform: translateY(0); +} +.next-meeting__join:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js new file mode 100755 index 0000000..a1008c8 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js @@ -0,0 +1,68 @@ +// Styles for /lib/components/data/notifications.jsx component +export const notificationsStyles = /* css */ ` +.notifications { + display: flex; + align-items: center; + gap: 5px; + margin-left: 5px; +} +.notification-pill { + display: flex; + align-items: center; + gap: 5px; + padding: 7px 8px; + background-color: var(--red); + border: none; + border-radius: var(--item-radius); + color: var(--white); + font-family: inherit; + font-size: 11px; + cursor: pointer; + transition: background-color 160ms var(--transition-easing), + transform 160ms var(--transition-easing); +} +.notification-pill:hover { + filter: brightness(1.2); + transform: translateY(-1px); +} +.notification-pill:active { + transform: translateY(0); +} +.notification-pill:focus { + outline: none; + box-shadow: var(--focus-ring); +} +.simple-bar--no-color-in-data .notification-pill { + background-color: var(--minor); + color: var(--foreground); +} +.simple-bar--widgets-background-color-as-foreground .notification-pill { + background-color: transparent; + color: var(--red); + border: 1px solid var(--red); +} +.simple-bar--widgets-background-color-as-foreground .notification-pill:hover { + background-color: var(--red); + color: var(--white); +} +.notification-pill__icon { + width: 14px; + height: 14px; + fill: currentColor; + flex-shrink: 0; +} +.notification-pill__badge { + background-color: rgba(0, 0, 0, 0.3); + color: var(--white); + padding: 1px 5px; + border-radius: 6px; + font-size: 10px; + font-weight: 600; + min-width: 8px; + text-align: center; +} +.simple-bar--widgets-background-color-as-foreground .notification-pill__badge { + background-color: var(--red); + color: var(--white); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js new file mode 100755 index 0000000..a45a862 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js @@ -0,0 +1,83 @@ +// Styles for /lib/components/data/sound.jsx component +export const soundStyles = /* css */ ` +.sound { + font-variant-numeric: tabular-nums; + background-color: var(--blue); + transform: translateZ(0); +} +.simple-bar--widgets-background-color-as-foreground .sound { + color: var(--blue); + background-color: transparent; +} +.sound__slider-container { + --slider-size: 10px; + + position: relative; + max-width: 0; + height: 100%; + display: flex; + align-items: center; + padding: 0; + clip-path: inset(0); + opacity: 0.7; + border-radius: var(--item-radius); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 0ms var(--transition-easing); +} +.sound:hover .sound__slider-container, +.sound--dragging .sound__slider-container { + max-width: 100px; + clip-path: inset(-100vh -100vw); + transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing), + opacity 320ms var(--transition-easing), + clip-path 320ms 320ms var(--transition-easing) +} +.sound__slider-container:hover { + opacity: 1; +} +.sound__slider { + width: 100px; + height: var(--slider-size); + appearance: none; + background-color: var(--background); + border-radius: var(--item-radius); + outline: none; + -webkit-appearance: none; +} +.simple-bar--widgets-background-color-as-foreground .sound__slider { + background-color: var(--foreground); +} +.sound__slider::-webkit-slider-thumb { + width: var(--slider-size); + height: var(--slider-size); + background-color: var(--foreground); + border-radius: var(--item-radius); + cursor: pointer; + -webkit-appearance: none; + transform-origin: center; + transition: transform 160ms var(--transition-easing); +} +.simple-bar--widgets-background-color-as-foreground .sound__slider::-webkit-slider-thumb { + background-color: var(--blue); +} +.sound__slider::-webkit-slider-thumb:hover { + transform: scale(1.5); +} +.sound__display { + display: flex; + align-items: center; + margin-right: 4px; + overflow: hidden; +} +.sound__display:active { + color: currentColor; +} +.sound__display > svg { + flex-shrink: 0; + width: 14px; + height: 14px; + margin-right: 3px; + fill: currentColor; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js new file mode 100755 index 0000000..03d97a3 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js @@ -0,0 +1,55 @@ +// Styles for /lib/components/data/specter.jsx component +export const specterStyles = /* css */ ` +.specter { + position: absolute; + bottom: 0; + right: 30px; + display: flex; + align-items: flex-end; + z-index: 2; + pointer-events: none; + touch-action: none; +} +.simple-bar--animations-disabled .specter { + display: none; +} +.specter > span { + flex: 0 0 5px; + height: 15px; + max-height: 15px; + margin-left: 1px; + background-color: var(--main); + opacity: 0.1; + transform-origin: bottom; +} +.simple-bar--no-color-in-data .specter > span, +.simple-bar--widgets-background-color-as-foreground .specter > span { + background-color: currentColor; +} +.specter > span { + animation: specter-waving 640ms var(--transition-easing) infinite; +} +.simple-bar--animations-disabled .specter > span { + animation: none; +} +.specter > span:nth-of-type(1) { + animation-delay: -460ms; +} +.specter > span:nth-of-type(2) { + animation-delay: -320ms; +} +.specter > span:nth-of-type(3) { + animation-delay: -200ms; +} +.specter > span:nth-of-type(4) { + animation-delay: -240ms; +} +.specter > span:nth-of-type(5) { + animation-delay: -150ms; +} +@keyframes specter-waving { + 50% { + transform: scaleY(0.2); + } +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js new file mode 100755 index 0000000..0f9db7a --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js @@ -0,0 +1,15 @@ +// Styles for /lib/components/data/spotify.jsx component +export const spotifyStyles = /* css */ ` +.spotify { + position: relative; + background-color: var(--green); +} +.simple-bar--widgets-background-color-as-foreground .spotify { + color: var(--green); + background-color: transparent; +} + +.spotify--hidden-metadata > svg { + margin-right: 0; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js new file mode 100755 index 0000000..2c1eacd --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js @@ -0,0 +1,15 @@ +// Styles for /lib/components/data/stock.jsx component +export const stockStyles = /* css */ ` +.stock { + color: var(--foreground); + background-color: var(--minor); +} +.simple-bar--widgets-background-color-as-foreground .stock { + background-color: transparent; +} +.stockUp { + color: var(--green); +} +.stockDown { + color: var(--red); +}`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js new file mode 100755 index 0000000..ac04f90 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js @@ -0,0 +1,85 @@ +// Styles for /lib/components/data/time.jsx component +export const timeStyles = /* css */ ` +.time { + position: relative; + font-variant-numeric: tabular-nums; + background-color: var(--yellow); + overflow: hidden; + z-index: 0; +} +.simple-bar--widgets-background-color-as-foreground .time { + color: var(--yellow); + background-color: transparent; +} +.time__filler { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: scaleX(0); + background-color: rgba(0, 0, 0, 0.15); + transform-origin: left; + pointer-events: none; + touch-action: none; + z-index: -1; +} +.simple-bar--widgets-background-color-as-foreground .time__filler { + background-color: transparent; +} +.time__icon { + position: relative; + flex: 0 0 15px; + width: 15px; + height: 15px; + margin-right: 7px; + border: 1px solid var(--background); + border-radius: 50%; +} +.simple-bar--widgets-background-color-as-foreground .time__icon { + border: 1px solid var(--yellow); +} +.simple-bar--no-color-in-data .time__icon { + border: 1px solid var(--foreground); +} +.time__hours, +.time__minutes { + position: absolute; + bottom: 50%; + width: 1px; + left: 50%; + margin-left: -1px; + background-color: var(--background); + transform-origin: bottom; + transition: transform 160ms var(--transition-easing); + will-change: transform; +} +.simple-bar--widgets-background-color-as-foreground .time__hours, +.simple-bar--widgets-background-color-as-foreground .time__minutes { + background-color: var(--yellow); +} +.simple-bar--no-color-in-data .time__hours, +.simple-bar--no-color-in-data .time__minutes { + background-color: var(--foreground); +} +.time__hours { + height: 28%; +} +.time__minutes { + height: 43%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx) { + .time__icon { + flex: 0 0 16px; + width: 16px; + height: 16px; + } + .time__hours, + .time__minutes { + margin-left: 0; + } +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js new file mode 100755 index 0000000..b486b18 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js @@ -0,0 +1,17 @@ +// Styles for /lib/components/data/viscosity-vpn.jsx component +export const viscosityVPNStyles = /* css */ ` +.viscosity-vpn { + background-color: var(--red); +} +.simple-bar--widgets-background-color-as-foreground .viscosity-vpn { + color: var(--red); + background-color: transparent; +} +.viscosity-vpn--disconnected { + background-color: var(--minor); +} +.simple-bar--widgets-background-color-as-foreground .viscosity-vpn--disconnected { + color: var(--minor); + background-color: transparent; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js new file mode 100755 index 0000000..0b48abe --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js @@ -0,0 +1,163 @@ +// Styles for /lib/components/data/weather.jsx component +export const weatherStyles = /* css */ ` +.weather { + position: relative; + color: var(--foreground); + background-color: var(--minor); + overflow: hidden; + z-index: 0; +} +.simple-bar--widgets-background-color-as-foreground .weather { + background-color: transparent; +} +.weather__gradient { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.65; + z-index: -1; +} +.weather--sunrise .weather__gradient { + background: linear-gradient(to top right, var(--main), var(--red), var(--yellow), var(--blue)); +} +.weather--sunset .weather__gradient { + background: linear-gradient(to bottom right, var(--blue), var(--yellow), var(--red), var(--magenta), var(--main)); +} +.simple-bar--no-color-in-data .weather__gradient { + display: none; +} +.sun-icon, +.moon-icon { + transform-origin: 50% 50%; + animation: sunny-and-moon-scale-and-rotate 2560ms ease infinite; +} +.simple-bar--animations-disabled .sun-icon, +.simple-bar--animations-disabled .moon-icon { + animation: none; +} +@keyframes sunny-and-moon-scale-and-rotate { + 50% { + transform: rotate(14deg); + } +} +.cloud-icon { + transform: translateY(-1%) rotate(5deg); + animation: cloud-levitating 2560ms ease-in-out infinite; +} +.simple-bar--animations-disabled .cloud-icon { + animation: none; +} +@keyframes cloud-levitating { + 50% { + transform: translateY(10%) rotate(-3deg); + } +} +.rain-icon > g > path { + animation: rain-translate 2560ms ease-in-out infinite; +} +.simple-bar--animations-disabled .rain-icon > g > path { + animation: none; +} +.rain-icon > g > path:nth-child(2) { + animation-delay: 320ms; +} +.rain-icon > g > path:nth-child(1) { + animation-delay: 640ms; +} +@keyframes rain-translate { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 0; + transform: translateY(10%); + } +} +.snow-icon > g > path { + animation: snow-translate 2560ms ease-in-out infinite; +} +.simple-bar--animations-disabled .snow-icon > g > path { + animation: none; +} +.snow-icon > g > path:nth-child(5) { + animation-delay: 320ms; +} +.snow-icon > g > path:nth-child(4) { + animation-delay: 640ms; +} +.snow-icon > g > path:nth-child(3) { + animation-delay: 960ms; +} +.snow-icon > g > path:nth-child(2) { + animation-delay: 1280ms; +} +.snow-icon > g > path:nth-child(1) { + animation-delay: 1600ms; +} +@keyframes phasing-snow { + 50% { + opacity: 0.1; + } +} +.fog-icon > g > path { + animation: fog-phasing 2560ms ease-in-out infinite; +} +.simple-bar--animations-disabled .fog-icon > g > path { + animation: none; +} +.fog-icon > g > path:nth-child(8) { + animation-delay: -640ms; +} +.fog-icon > g > path:nth-child(7) { + animation-delay: -320ms; +} +.fog-icon > g > path:nth-child(5) { + animation-delay: 320ms; +} +.fog-icon > g > path:nth-child(4) { + animation-delay: 640ms; +} +.fog-icon > g > path:nth-child(3) { + animation-delay: 960ms; +} +.fog-icon > g > path:nth-child(2) { + animation-delay: 1280ms; +} +.fog-icon > g > path:nth-child(1) { + animation-delay: 1600ms; +} +@keyframes fog-phasing { + 50% { + opacity: 0.2; + } +} +.storm-icon > g > path { + animation: flashing-storm 2560ms ease-in-out infinite; +} +.simple-bar--animations-disabled .storm-icon > g > path { + animation: none; +} +.storm-icon > g > path:nth-child(2) { + animation-delay: 320ms; +} +.storm-icon > g > path:nth-child(1) { + animation-delay: 640ms; +} +@keyframes flashing-storm { + 15%, + 30%, + 34% { + opacity: 1; + } + 16%, + 31% { + opacity: 0; + } +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js new file mode 100755 index 0000000..8d2cc97 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js @@ -0,0 +1,13 @@ +// Styles for /lib/components/data/wifi.jsx component +export const wifiStyles = /* css */ ` +.wifi { + background-color: var(--red); +} +.simple-bar--widgets-background-color-as-foreground .wifi { + color: var(--red); + background-color: transparent; +} +.wifi--hidden-name > svg { + margin-right: 0; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js new file mode 100755 index 0000000..703be21 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js @@ -0,0 +1,11 @@ +// Styles for /lib/components/data/youtube-music.jsx component +export const youtubeMusicStyles = /* css */ ` +.youtube-music { + position: relative; + background-color: var(--red); +} +.simple-bar--widgets-background-color-as-foreground .youtube-music { + color: var(--red); + background-color: transparent; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js new file mode 100755 index 0000000..55b125c --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js @@ -0,0 +1,26 @@ +// Styles for /lib/components/data/zoom.jsx component +export const zoomStyles = /* css */ ` +.zoom { + position: relative; + display: flex; + align-items: center; + background-color: var(--minor); +} +.simple-bar--widgets-background-color-as-foreground .zoom { + color: var(--minor); + background-color: transparent; +} +.simple-bar--no-color-in-data .zoom { + background-color: var(--minor); +} +.zoom__icon { + width: 14px; + height: 14px; + fill: var(--red); + margin: 0 1px 0 4px; + transform: translateZ(0); +} +.zoom__icon--on { + fill: var(--green); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js new file mode 100755 index 0000000..18e7b17 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js @@ -0,0 +1,89 @@ +// Styles for /lib/components/missives/{missive|missives}.jsx components +export const missivesStyles = /* css */ ` +.missives { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; +} +.missive { + --gradient-size: 100px; + + position: absolute; + top: 0; + width: fit-content; + height: 100%; + display: flex; + align-items: center; + gap: 10px; + padding: 0 16px; + box-sizing: border-box; + background-color: var(--background); + pointer-events: auto; + transition: transform 160ms var(--transition-easing); +} +.missive::after { + content: ""; + position: absolute; + top: 0; + height: 100%; + width: var(--gradient-size); + pointer-events: none; +} +.missive--left { + left: 0; + animation: left-missive-appearance 320ms var(--transition-easing); +} +@keyframes left-missive-appearance { + 0% { + transform: translateX(-100%); + } +} +.missive--left::after { + left: 100%; + background: linear-gradient(to right, var(--background) 0%, transparent 100%); +} +.missive--right { + right: 0; + flex-direction: row-reverse; + animation: right-missive-appearance 320ms var(--transition-easing); +} +@keyframes right-missive-appearance { + 0% { + transform: translateX(100%); + } +} +.missive--right::after { + right: 100%; + background: linear-gradient(to left, var(--background) 0%, transparent 100%); +} +.missive__text { + max-width: calc(100vw - var(--gradient-size)); + overflow: hidden; +} +.missive__close { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + fill: var(--foreground); + background-color: transparent; + border: 0; + cursor: pointer; + user-select: none; + border-radius: var(--item-radius); + transition: box-shadow 160ms var(--transition-easing); +} +.missive__close:hover { + box-shadow: var(--light-shadow), var(--hover-ring); +} +.missive__close-icon { + flex: 0 0 10px; + width: 10px; + height: 10px; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js new file mode 100755 index 0000000..f674ac2 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js @@ -0,0 +1,161 @@ +// Styles for /lib/components/{yabai|aerospace}/process.jsx components +export const styles = /* css */ ` +.process { + display: flex; + pointer-events: none; + touch-action: none; +} +.process--centered { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.process:empty { + display: none; +} +.process__container { + display: flex; + align-items: stretch; + box-sizing: border-box; + pointer-events: auto; + touch-action: auto; +} +.process--centered .process__container { + height: var(--bar-height); + margin: 0 auto; + padding: var(--bar-inner-margin); +} +.simple-bar--no-bar-background .process__container:not(:empty) { + padding: 4px 5px; + background-color: var(--background); + box-shadow: var(--light-shadow); + border-radius: var(--bar-radius); +} +.process__layout { + display: flex; + align-items: center; + padding: var(--item-inner-margin); + color: var(--white); + font-family: var(--font); + font-size: var(--font-size); + background-color: var(--main-alt); + border-radius: var(--item-radius); + box-shadow: var(--light-shadow); +} +.simple-bar--spaces-background-color-as-foreground .process__layout { + color: var(--foreground); + font-weight: 700; + background-color: transparent; + box-shadow: none; +} +.process__skhd-mode { + display: flex; + align-items: center; + padding: var(--item-inner-margin); + color: var(--foreground); + background-color: var(--minor); + font-family: var(--font); + font-size: var(--font-size); + border-radius: var(--item-radius); + box-shadow: var(--light-shadow); + font-style: italic; + text-transform: uppercase; +} +.process__window { + display: flex; + align-items: center; + gap: 3px; + margin: var(--item-outer-margin); + padding: var(--item-inner-margin); + color: currentColor; + font-family: var(--font); + font-size: var(--font-size); + background-color: var(--minor); + border-radius: var(--item-radius); + border: 0; + outline: none; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing), + border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing); + z-index: 0; +} +.simple-bar--spaces-background-color-as-foreground .process__window { + background-color: transparent; + box-shadow: none; +} +.simple-bar--no-shadow .process__container, +.simple-bar--no-bar-background.simple-bar--no-shadow .process__container, +.simple-bar--no-shadow .process__layout, +.simple-bar--no-shadow .process__skhd-mode, +.simple-bar--no-shadow .process__window { + box-shadow: none; +} +.process__window:only-child { + margin: 0; +} +.process__window--only-current { + background-color: var(--minor); +} +.process__window--focused { + color: var(--minor); + background-color: var(--foreground); +} +.process__stack-index { + padding: 2px 5px; + color: var(--foreground); + background-color: var(--background); + font-size: calc(var(--font-size) - 1px); + border-radius: var(--item-radius); +} +.process__window--focused .process__stack-index { + color: var(--white); + background-color: var(--main-alt); +} +.simple-bar--spaces-background-color-as-foreground .process__window--focused { + color: var(--foreground); + background-color: transparent; + box-shadow: var(--light-shadow), 0 0 0 1px var(--foreground); +} +.process__window:not(.process__window--only-current):not(.process__window--focused):is(:hover, :active) { + box-shadow: var(--light-shadow), var(--hover-ring); +} +.process__icon { + flex: 0 0 11px; + width: 11px; + height: 11px; + fill: currentColor; + transition: margin-right 160ms var(--transition-easing); +} +.process__window--only-current .process__icon, +.process__window--focused .process__icon, +.process__window--expanded .process__icon { + margin-right: 6px; +} +.process__window--only-icon .process__icon { + margin-right: 0; +} +.process__inner { + max-width: 0; + display: flex; + flex-wrap: nowrap; + overflow: hidden; + transition: max-width 160ms var(--transition-easing); +} +.process__window--focused .process__inner, +.process__window--expanded .process__inner { + max-width: var(--item-max-width); +} +.process__window--only-current .process__inner { + max-width: 400px; +} +.process__name { + margin-top: 2px; + white-space: nowrap; + transition: transform 160ms var(--transition-easing); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js new file mode 100755 index 0000000..fb0dba6 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js @@ -0,0 +1,101 @@ +export const aerospaceDisplayManagerStyles = /* css */ ` +.aerospace-display-manager { + flex: 1 1 100%; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px; +} +.aerospace-display-manager::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--main-alt); + border-radius: var(--item-radius); + opacity: 0.1; + z-index: -1; +} +.aerospace-display-manager__label > em { + padding: 2px 3px; + font-size: calc(var(--font-size) - 2px); + color: var(--foreground); + background-color: var(--minor); + border-radius: 2px; +} +.aerospace-display-manager__displays { + display: flex; + flex-direction: column; + gap: 6px; +} +.aerospace-display-manager__display { + display: flex; + align-items: center; + gap: 2px; +} +.aerospace-display-manager__display > input { + width: 8ch; + padding: 2px 4px; + box-sizing: border-box; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + background-color: var(--white); + border: 0; + outline: none; + border-radius: 4px; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.aerospace-display-manager__display > input:hover { + box-shadow: var(--hover-ring); +} +.aerospace-display-manager__display > input:focus { + box-shadow: var(--focus-ring); +} +.aerospace-display-manager__remove-display { + padding: 3px 6px; + box-sizing: border-box; + background-color: var(--red); + border-radius: var(--item-radius); + border: 0; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.aerospace-display-manager__remove-display:hover { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.aerospace-display-manager__remove-display > svg { + width: 8px; + height: 8px; + fill: var(--white); +} +.aerospace-display-manager__add { + width: fit-content; + display: flex; + align-items: center; + padding: 7px 10px; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + background-color: var(--green); + border-radius: var(--item-radius); + border: 0; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.aerospace-display-manager__add:hover { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.aerospace-display-manager__add > svg { + width: 10px; + height: 10px; + margin-right: 1ch; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js new file mode 100755 index 0000000..4064efd --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js @@ -0,0 +1,83 @@ +export const colorPickerStyles = /* css */ ` +.color-picker { + margin-right: 1ch; +} +.color-picker__button { + width: 20px; + height: 20px; + border-radius: 50%; + border: 0; + cursor: pointer; +} +.color-picker__colors { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 35px; + box-sizing: border-box; + -webkit-backdrop-filter: blur(5px); + border-radius: var(--item-radius); + z-index: 1; +} +.color-picker__colors > button, +.color-picker__custom-color-preview { + width: 20px; + height: 20px; + margin: 0 10px; + border-radius: 50%; + border: 0; + cursor: pointer; + box-shadow: var(--light-shadow); +} +.color-picker__custom-color { + position: absolute; + bottom: 10px; + left: 0; + width: 100%; + height: 25px; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + pointer-events: none; + touch-action: none; +} +.color-picker__custom-color > * { + pointer-events: auto; + touch-action: auto; +} +.color-picker__custom-color-preview { + cursor: default; +} +input.color-picker__custom-color-input { + width: 48ch; +} +.color-picker__custom-color-submit { + margin-left: 8px; + padding: 7px 10px; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + background-color: var(--green); + border-radius: var(--item-radius); + border: 0; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.color-picker__custom-color-submit:not(:disabled) { + box-shadow: var(--light-shadow); +} +.color-picker__custom-color-submit:not(:disabled):hover { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.color-picker__custom-color-submit:disabled { + opacity: 0.5; + cursor: not-allowed; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js new file mode 100755 index 0000000..0c853d5 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js @@ -0,0 +1,155 @@ +export const iconPickerStyles = /* css */ ` +.icon-picker { + margin-right: 1ch; +} +.icon-picker__button { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + fill: var(--foreground); + background-color: transparent; + border: 0; + cursor: pointer; + user-select: none; +} +.icon-picker__button > svg { + width: 24px; + height: 24px; +} +.icon-picker__dropdown { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + -webkit-backdrop-filter: blur(5px); + border-radius: var(--item-radius); + overflow: hidden; + z-index: 1; +} +.icon-picker__search { + position: relative; + padding: 8px; + background-color: var(--main-alt); + border-bottom: 1px solid var(--foreground-alt); + display: flex; + align-items: center; + gap: 12px; +} +.icon-picker__back { + display: flex; + align-items: center; + padding: 10px 14px; + height: 28px; + background-color: var(--background); + border: 1px solid var(--foreground-alt); + border-radius: var(--item-radius); + color: var(--foreground); + font-family: var(--font); + font-size: 13px; + font-weight: 500; + cursor: pointer; + white-space: nowrap; + box-sizing: border-box; + transition: color 160ms var(--transition-easing), + background-color 160ms var(--transition-easing), + box-shadow 160ms var(--transition-easing); +} +.icon-picker__back:hover { + color: var(--background); + background-color: var(--foreground); + box-shadow: var(--hover-ring); +} +.icon-picker__back > svg { + width: 10px; + height: 10px; + margin-right: 6px; + fill: currentColor; +} +.icon-picker__search-input { + flex: 1; + height: 28px; + padding: 0 35px 0 14px; + border: 1px solid var(--foreground-alt); + border-radius: var(--item-radius); + background-color: var(--background); + color: var(--foreground); + font-size: 14px; + font-family: var(--font); + outline: none; + box-sizing: border-box; + position: relative; + transition: border 160ms var(--transition-easing), + box-shadow 160ms var(--transition-easing); +} +.icon-picker__search-input:focus { + border-color: var(--foreground); + box-shadow: var(--focus-ring); +} +.icon-picker__search-input::placeholder { + color: var(--foreground-alt); + opacity: 0.7; +} +.icon-picker__search-clear { + position: absolute; + right: 24px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--foreground-alt); + cursor: pointer; + font-size: 16px; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: color 160ms var(--transition-easing), + background-color 160ms var(--transition-easing); +} +.icon-picker__search-clear:hover { + color: var(--foreground); + background-color: var(--main-alt); +} +.icon-picker__icons { + flex: 1; + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; + padding: 10px; + box-sizing: border-box; + overflow: auto; +} +.icon-picker__icons > button { + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + margin: 5px; + border: 0; + background-color: var(--main-alt); + border-radius: var(--item-radius); + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; +} +.icon-picker__icons > button > svg { + width: 24px; + height: 24px; + fill: var(--background); +} +.icon-picker__no-results { + width: 100%; + text-align: center; + color: var(--foreground-alt); + font-style: italic; + padding: 20px; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js new file mode 100755 index 0000000..2fa37b0 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js @@ -0,0 +1,408 @@ +// Styles for /lib/components/settings/settings.jsx component +import { userWidgetsCreatorStyles } from "./user-widgets-creator"; +import { aerospaceDisplayManagerStyles } from "./aerospace-display-manager"; + +export const settingsStyles = /* css */ ` +.settings { + z-index: 1; +} +.settings__overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} +.simple-bar--floating .settings__overlay, +.simple-bar--no-bar-background .settings__overlay { + display: none; +} +.simple-bar--on-bottom .settings__overlay { + top: unset; + bottom: 28px; +} +.settings__outer { + --settings-width: 620px; + position: fixed; + left: calc(50% - (var(--settings-width) / 2)); + top: calc(var(--bar-height) + 10px); + width: var(--settings-width); + display: flex; + flex-direction: column; + align-items: stretch; + padding: 20px; + background-color: var(--main); + border-radius: var(--item-radius); + box-shadow: var(--light-shadow); + z-index: 1; +} +.simple-bar--floating .settings__outer { + top: calc(var(--bar-height) + 20px); +} +.simple-bar--on-bottom .settings__outer { + top: unset; + bottom: calc(var(--bar-height) + 10px); +} +.settings__header { + display: flex; + align-items: center; + margin-bottom: 14px; + font-size: calc(var(--font-size) * 1.4); + font-weight: 700; +} +.settings__header-dot { + flex: 0 0 12px; + width: 12px; + height: 12px; + border-radius: 50%; + margin-right: 9px; +} +.settings__header-dot--close { + padding: 0; + background-color: var(--red); + cursor: pointer; + user-select: none; + border: 0; + -webkit-user-select: none; +} +.settings__header-dot--disabled { + background-color: grey; + opacity: 0.3; +} +.settings__tabs { + width: fit-content; + display: flex; + gap: 10px; + margin-bottom: 10px; + padding: 5px; + background-color: var(--minor); + border-radius: var(--item-radius); +} +.settings__tab { + flex: 0 0 auto; + display: flex; + align-items: center; + padding: 5px; + font-family: var(--font); + font-size: var(--font-size); + color: var(--foreground); + text-align: center; + background-color: transparent; + border-radius: var(--item-radius); + border: 0; + outline: none; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing), + box-shadow 160ms var(--transition-easing); +} +.settings__tab:hover { + box-shadow: var(--hover-ring); +} +.settings__tab:active { + box-shadow: var(--focus-ring); +} +.settings__tab--current { + color: var(--background); + background-color: var(--foreground); +} +.settings__inner { + display: flex; + align-items: flex-start; + flex-wrap: nowrap; + overflow: clip; +} +.settings__category { + flex: 0 0 100%; + max-height: 70vh; + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 0 10px 25px 0; + box-sizing: border-box; + overflow: auto; + transition: transform 160ms var(--transition-easing); +} +.settings__category::-webkit-scrollbar { + width: 5px; + height: 5px; +} +.settings__category::-webkit-scrollbar-track { + background-color: var(--main-alt); + opacity: 0.1; + border-radius: var(--item-radius); +} +.settings__category::-webkit-scrollbar-thumb { + background: var(--foreground); + border-radius: var(--item-radius); +} +.settings__inner-title { + flex: 0 0 100%; + font-size: calc(var(--font-size) * 1.2); + font-weight: 700; +} +.settings__item-title { + flex: 0 0 100%; + margin: 8px 0; + font-weight: 700; +} +.settings__item, +.settings__item-option { + position: relative; + flex: 1 0 32%; + display: flex; + align-items: center; + gap: 4px; +} +.settings__item--full-width { + flex: 1 1 100%; +} +.settings__item--color { + flex: 0 0 32%; + flex-direction: column; + align-items: stretch; +} +.settings__item--radio { + flex: 0 0 100%; + display: flex; + flex-wrap: wrap; +} +.settings__item--textarea { + flex-direction: column; + align-items: stretch; + padding: 5px; +} +.settings__item--color > label, +.settings__item--full-width.settings__item--text > label, +.settings__item--full-width.settings__item--textarea > label { + flex: 0 0 auto; + white-space: nowrap; +} +.settings__item--text > input, +.settings__item--textarea > textarea { + flex: 1 1 auto; + width: auto; + padding: 2px 4px; + box-sizing: border-box; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + background-color: var(--white); + border: 0; + outline: none; + border-radius: 4px; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.settings__item--textarea > textarea { + resize: vertical; +} +.settings__item--color > input, +.settings__item--full-width.settings__item--text > input, +.settings__item--full-width.settings__item--textarea > textarea { + flex: 1 1 100%; +} +.settings__item--text > input:hover, +.settings__item--textarea > textarea:hover { + box-shadow: var(--hover-ring); +} +.settings__item--text > input:focus, +.settings__item--textarea > textarea:focus { + box-shadow: var(--focus-ring); +} +.settings__item--color > input { + padding-left: 24px; +} +.settings__item-color-pill { + position: absolute; + bottom: 1px; + left: 2px; + height: 14px; + width: 14px; + border-radius: 2px; + border: 1px solid gray; +} +.settings__item > label > em { + padding: 2px 3px; + font-size: calc(var(--font-size) - 2px); + color: var(--foreground); + background-color: var(--minor); + border-radius: 2px; +} +.settings__documentation { + width: 100%; + margin-top: 5px; + padding: 10px; + color: var(--white); + background-color: var(--main-alt); + font-weight: 700; + border-radius: 5px; +} +.settings__documentation-icon { + display: inline-block; + width: 18px; + height: 18px; + margin-right: 8px; + margin-top: -2px; + vertical-align: middle; + fill: currentColor; +} +.settings__documentation a { + color: currentColor; +} +.settings__infos { + width: 100%; + margin-top: 5px; + padding: 10px; + color: var(--foreground); + background-color: var(--minor); + border-radius: 5px; +} +.settings__infos-title { + margin-bottom: 7px; + font-size: calc(var(--font-size) * 1.1); + font-weight: 700; +} +.settings__info { + font-style: italic; +} +.settings__bottom { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 10px; +} +.settings__pending-changes { + margin: 0 10px; +} +.settings__refresh-button, +.settings__import-button, +.settings__export-button { + padding: 7px 10px; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + border-radius: var(--item-radius); + border: 0; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.settings__import-button, +.settings__export-button { + margin-right: 10px; + color: var(--foreground); + background-color: var(--minor); +} +.settings__export-button { + margin-left: 10px; +} +.settings__refresh-button { + background-color: var(--green); +} +.settings__refresh-button:not(:disabled), +.settings__import-button:not(:disabled), +.settings__export-button:not(:disabled) { + box-shadow: var(--light-shadow); +} +.settings__refresh-button:not(:disabled):hover, +.settings__import-button:not(:disabled):hover, +.settings__export-button:not(:disabled):hover { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.settings__refresh-button:disabled, +.settings__import-button:disabled, +.settings__export-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} +.settings__import-export-label { + margin-right: auto; +} +.settings__widgets { + width: 100%; +} +.settings__widgets-breadcrumb { + height: 28px; + display: flex; + align-items: center; + gap: 6px; + padding: 2px 0 5px; + margin-bottom: 5px; +} +.settings__widgets-breadcrumb-title { + font-size: calc(var(--font-size) * 1.2); + font-weight: 700; +} +button.settings__widgets-breadcrumb-title { + padding: 0; + color: inherit; + font-family: inherit; + background-color: transparent; + text-decoration: underline; + cursor: pointer; + border: 0; +} +.settings__widgets-breadcrumb-current { + margin-bottom: -2px; +} +.settings__widgets-breadcrumb-back { + display: flex; + align-items: center; + margin-left: auto; + padding: 2px 10px; + background-color: var(--minor); + border: 1px solid var(--foreground-alt); + border-radius: var(--item-radius); + color: var(--foreground); + font-family: var(--font); + font-size: 13px; + font-weight: 500; + cursor: pointer; + white-space: nowrap; + box-sizing: border-box; + transition: color 160ms var(--transition-easing), + background-color 160ms var(--transition-easing), + box-shadow 160ms var(--transition-easing); +} +.settings__widgets-breadcrumb-back:hover { + box-shadow: var(--hover-ring); +} +.settings__widgets-breadcrumb-back-icon { + flex: 0 0 8px; + width: 8px; + height: 8px; + margin-right: 6px; + fill: currentColor; +} +.settings__widgets-list { + display: flex; + flex-direction: column; + gap: 6px; +} +.settings__widgets-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px; + background-color: var(--minor); + border-radius: var(--item-radius); +} +.settings__widgets-item:not(.settings__widgets-item--process) { + cursor: pointer; +} +.settings__widgets-item-icon { + flex: 0 0 10px; + width: 10px; + height: 10px; + margin-left: auto; + fill: currentcolor; +} +.settings__widget-settings { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +${userWidgetsCreatorStyles} +${aerospaceDisplayManagerStyles} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js new file mode 100755 index 0000000..417826a --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js @@ -0,0 +1,170 @@ +import { colorPickerStyles } from "./color-picker"; +import { iconPickerStyles } from "./icon-picker"; + +export const userWidgetsCreatorStyles = /* css */ ` + .user-widgets-creator { + position: relative; + width: 100%; + display: flex; + flex-direction: column; + padding-bottom: 25px; + border-radius: var(--item-radius); + } + .user-widgets-creator__add { + position: sticky; + bottom: 0; + display: flex; + align-items: center; + margin: 0 auto; + padding: 7px 10px; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + background-color: var(--green); + border-radius: var(--item-radius); + border: 0; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); + } + .user-widgets-creator__add:hover { + box-shadow: var(--light-shadow), var(--focus-ring); + } + .user-widgets-creator__add > svg { + width: 10px; + height: 10px; + margin-right: 1ch; + } + .user-widget-creator { + position: relative; + display: flex; + align-items: center; + margin-bottom: 15px; + padding: 5px; + z-index: 0; + } + .user-widget-creator::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--main-alt); + border-radius: var(--item-radius); + opacity: 0.1; + z-index: -1; + } + .user-widget-creator__sort-buttons { + position: absolute; + top: 0; + left: 17px; + height: 100%; + display: flex; + flex-direction: column; + pointer-events: none; + touch-action: none; + } + .user-widget-creator__sort-button { + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + background-color: transparent; + border: 0; + cursor: pointer; + pointer-events: auto; + touch-action: auto; + } + .user-widget-creator__sort-button--before { + margin-bottom: 5px; + } + .user-widget-creator__sort-button--after { + margin-top: auto; + } + .user-widget-creator__sort-button > svg { + width: 22px; + height: 22px; + fill: var(--foreground); + } + .user-widget-creator__remove { + position: absolute; + top: 2px; + right: 2px; + padding: 5px; + background-color: var(--red); + border-radius: var(--item-radius); + border: 0; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); + } + .user-widget-creator__remove:hover { + box-shadow: var(--light-shadow), var(--focus-ring); + } + .user-widget-creator__remove > svg { + width: 10px; + height: 10px; + fill: var(--white); + } + .user-widget-creator__index { + position: absolute; + top: calc(50% - 40px); + left: 20px; + } + .user-widget-creator__right { + flex: 1 1 100%; + display: flex; + flex-direction: column; + } + .user-widget-creator__right-top { + display: flex; + align-items: center; + } + .user-widget-creator__right-top > label { + margin: 0 1ch 0 2ch; + } + .user-widget-creator__input-group { + display: flex; + align-items: center; + margin: 2px 0; + } + .user-widget-creator input[type="text"] { + width: auto; + margin: 3px 0; + padding: 2px 4px; + box-sizing: border-box; + font-family: var(--font); + font-size: calc(var(--font-size) * 0.9); + border: 0; + outline: none; + border-radius: 4px; + transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing); + } + .user-widget-creator input[type="text"]:hover { + box-shadow: var(--hover-ring); + } + .user-widget-creator input[type="text"]:focus { + box-shadow: var(--focus-ring); + } + .user-widget-creator__input-group label { + white-space: nowrap; + } + .user-widget-creator__input-group input[type="text"] { + flex: 1 1 100%; + margin-left: 1ch; + } + .user-widget-creator__input-group input[type="checkbox"]:not(:first-child) { + margin-left: 16px; + } + .user-widget-creator__input-group input[type="checkbox"] { + margin-right: 6px; + } + ${colorPickerStyles} + ${iconPickerStyles} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js new file mode 100755 index 0000000..9d4535d --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js @@ -0,0 +1,15 @@ +// Styles for /lib/components/side-icon.jsx component +export const sideIconStyles = /* css */ ` +.side-icon { + display: flex; + align-items: center; + margin: 0 5px; + color: #fff; +} + +.side-icon__svg { + width: 14px; + height: 14px; + fill: currentColor; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js new file mode 100755 index 0000000..1f43895 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js @@ -0,0 +1,137 @@ +export const spaceOptionsStyles = /* css */ ` +.space-options { + position: absolute; + top: calc(100% + 3px); + left: calc(50% - 22px); + height: 90%; + width: 50px; + height: 18px; + display: flex; + align-items: stretch; + background-color: var(--white); + opacity: 0; + pointer-events: none; + touch-action: none; + border-radius: 3px; + box-shadow: var(--light-shadow); + transform-origin: top center; + transform: translateZ(0) scale(0); + transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing); + z-index: 1; +} +.simple-bar--on-bottom .space-options { + top: unset; + bottom: calc(100% + 3px); + transform-origin: bottom center; +} +.simple-bar--inline-spaces-options .space-options { + height: 100%; + top: 0; + left: 100%; + border-radius: 3px; + transform-origin: center; +} +.space--hovered .space-options { + opacity: 1; + transform: translateZ(0); + pointer-events: auto; + touch-action: auto; + transition: opacity 160ms 1s var(--transition-easing), transform 160ms 1s var(--transition-easing); +} +.space--hovered.space--no-delay .space-options { + transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing); +} +.space-options::before { + content: ""; + position: absolute; + bottom: 100%; + left: 0; + width: 100%; + height: 3px; + z-index: 2; +} +.space-options::after { + content: ''; + position: absolute; + top: -3px; + left: calc(50% - 4px); + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 3px solid var(--white); +} +.simple-bar--on-bottom .space-options::after { + top: unset; + bottom: -3px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 3px solid var(--white); + border-bottom: none; +} +.simple-bar--inline-spaces-options .space-options::after { + top: calc(50% - 4px); + left: -3px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-right: 3px solid var(--white); + border-left: none; +} +.space-options__option { + position: relative; + flex: 1 1 100%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transform: translateZ(0); + transition: background-color 160ms var(--transition-easing), opacity 160ms var(--transition-easing); +} +.space-options__option:last-child { + opacity: 0.8; + background-color: var(--red); +} +.space--fullscreen .space-options__option:last-child, +.space:first-of-type:only-of-type .space-options__option:last-child, +.space:first-of-type:nth-last-of-type(2) .space-options__option:last-child { + pointer-events: none; + touch-action: none; + opacity: 0.5; + filter: grayscale(100%); +} +.space:first-of-type .space-options__option--move-prev, +.space:nth-last-of-type(1) .space-options__option--move-next, +.space:first-of-type:only-of-type .space-options__option--move-prev, +.space:first-of-type:only-of-type .space-options__option--move-next, +.space:first-of-type:nth-last-of-type(1) .space-options__option--move-prev, +.space:first-of-type:nth-last-of-type(1) .space-options__option--move-next { + opacity: 0.2; + pointer-events: none; + touch-action: none; +} +.space .space-options__option:first-of-type { + border-radius: 3px 0 0 3px; +} +.space-options__option:last-of-type { + border-radius: 0 3px 3px 0; +} +.space-options__option:not(:last-child):hover { + background-color: var(--transparent-dark); +} +.space-options__option:last-child:hover { + opacity: 1; +} +.space-options__option > svg { + width: 8px; + height: 8px; + fill: var(--black); + curor: pointer; + user-select: none; + -webkit-user-select: none; +} +.space-options__option:last-child > svg { + fill: var(--white); +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js new file mode 100755 index 0000000..0e6d1cb --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js @@ -0,0 +1,152 @@ +export const spaceStyles = /* css */ ` +.space, .stickies { + position: relative; + display: flex; + align-items: center; + animation: space-appearance 320ms var(--transition-easing); +} + +@keyframes space-appearance { + 0% { + opacity: 0; + } +} +.space__inner, +.spaces__add, +.stickies__inner { + height: 100%; + display: flex; + align-items: center; + margin: var(--item-outer-margin); + padding: var(--item-inner-margin); + color: currentColor; + font-family: var(--font); + background-color: var(--minor); + border-radius: var(--item-radius); + border: 0; + outline: none; + box-shadow: var(--light-shadow); + cursor: pointer; + user-select: none; + -webkit-user-select: none; + transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing), + border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing); + z-index: 0; +} +.space__inner:disabled { + cursor: default; +} +.stickies__inner { + padding-block: 0; + background-color: var(--background); + box-shadow: none; + cursor: default; +} +.simple-bar--spaces-background-color-as-foreground .space__inner, +.simple-bar--spaces-background-color-as-foreground .spaces__add, +.simple-bar--spaces-background-color-as-foreground .stickies__inner { + background-color: transparent; + box-shadow: none; +} +.simple-bar--no-shadow .space__inner, +.simple-bar--no-shadow .spaces__add, +.simple-bar--no-shadow .stickies__inner { + box-shadow: none; +} +.space:first-of-type .space__inner { + margin-left: 0; +} +.space:hover .space__inner { + z-index: 1; +} +.spaces__add { + height: auto; + background-color: transparent; + box-shadow: none; +} +.spaces__add:hover { + background-color: var(--minor); +} +.space--fullscreen .space__inner { + color: var(--minor); + background-color: var(--yellow); +} +.simple-bar--spaces-background-color-as-foreground .space--fullscreen .space__inner { + color: var(--yellow); + background-color: transparent; +} +.space--focused .space__inner { + color: var(--minor); + background-color: var(--foreground); +} +.simple-bar--spaces-background-color-as-foreground .space--focused .space__inner { + color: var(--foreground); + background-color: transparent; +} +.space--visible .space__inner { + box-shadow: var(--light-shadow), var(--foreground-shadow); +} +.simple-bar--no-shadow .space--visible .space__inner { + box-shadow: none; +} +.space:not(.space--focused) .space__inner:not(:disabled):hover, +.spaces__add:hover { + box-shadow: var(--light-shadow), var(--hover-ring); +} +.space:not(.space--focused) .space__inner:not(:disabled):active, +.spaces__add:active { + box-shadow: var(--light-shadow), var(--focus-ring); +} +.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):hover, +.simple-bar--no-shadow .spaces__add:hover { + box-shadow: var(--hover-ring); +} +.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):active, +.simple-bar--no-shadow .spaces__add:active { +box-shadow: var(--focus-ring); +} +.space__label { + display: block; + margin: 0; + color: currentColor; + font-family: inherit; + font-size: var(--font-size); + line-height: 1; + text-align: center; + background-color: transparent; + border: 0; + border-radius: 2px; + outline: none; +} +.space__label:not(:read-only):focus { + box-shadow: var(--focus-ring); +} +.simple-bar--spaces-background-color-as-foreground .space--focused .space__label { + font-weight: 700; +} +.space__icon { + flex: 0 0 11px; + width: 11px; + height: 11px; + margin-left: 6px; + fill: currentColor; + opacity: 0.5; + transform: translateZ(0); +} +.stickies__inner .space__icon:first-child { + margin: 0; +} +.space__icon--focused { + opacity: 1; +} +.space__icon--fullscreen { + fill: var(--yellow); +} +.space__icon--topmost { + fill: var(--orange); +} +.space--focused .space__icon--fullscreen { + stroke: rgba(0, 0, 0, 0.3); + stroke-width: 2px; +} +`; diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js new file mode 100755 index 0000000..8657b9c --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js @@ -0,0 +1,50 @@ +// Styles for /lib/components/{yabai|aerospace}/*.jsx components +import { spaceStyles } from "./space"; +import { spaceOptionsStyles } from "./space-options"; + +export const styles = /* css */ ` +.spaces { + flex: 0 0 auto; + display: flex; + align-items: stretch; +} +.simple-bar--no-bar-background .spaces { + padding: 4px 5px; + background-color: var(--background); + box-shadow: var(--light-shadow); + border-radius: var(--bar-radius); +} +.simple-bar--no-bar-background.simple-bar--no-shadow .spaces { + box-shadow: none; +} +.simple-bar--process-aligned-to-left .spaces { + margin-right: 4px; +} +.spaces__separator { + align-self: center; + flex: 0 0 5px; + width: 5px; + height: 5px; + margin: var(--item-outer-margin); + background-color: var(--foreground); + border-radius: 50%; + opacity: 0.35; +} +${spaceStyles} +${spaceOptionsStyles} +.spaces__add > svg { + width: 10px; + height: 10px; + fill: currentColor; +} +.spaces__end-separator { + align-self: center; + flex: 0 0 4px; + width: 4px; + height: 4px; + margin: var(--item-outer-margin); + background-color: var(--main-alt); + border-radius: 50%; + opacity: 0.35; +} +`; -- cgit v1.3