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 ++++ 28 files changed, 1264 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 (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data') 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); +} +`; -- cgit v1.3