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/spaces/space-options.js | 137 +++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js') 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); +} +`; -- cgit v1.3