-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🎉 Added Nether Labels to menu-themes
- Loading branch information
Showing
7 changed files
with
248 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: Elfi Ox <https://github.com/elfi-ox> | ||
| SPDX-License-Identifier: CC-BY-4.0 | ||
| --> | ||
|
|
||
| <p align="center"> | ||
| <img src="banner.jpg" /> | ||
| </p> | ||
|
|
||
| With its dark and classy colors, this theme features labels on your items and submenus and a sleek overall appearance. If, however, you're style is more bright or flashy, you can fully customize this theme with its 7 colors options. | ||
|
|
||
| This theme is a Modified version of the "Rainbow Labels" theme made by Simon Schneegans. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| # SPDX-FileCopyrightText: Elfi Ox <https://github.com/elfi-ox> | ||
| # SPDX-License-Identifier: CC0-1.0 | ||
|
|
||
| version = 1 | ||
|
|
||
| [[annotations]] | ||
| path = ["*.jpg", "*.png"] | ||
| precedence = "aggregate" | ||
| SPDX-FileCopyrightText = "Elfi Ox <https://github.com/elfi-ox>" | ||
| SPDX-License-Identifier = "CC0-1.0" |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| /*//////////////////////////////////////////////////////////////////////////////////////*/ | ||
| /* _ _ ____ _ _ ___ ____ */ | ||
| /* |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform */ | ||
| /* | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando */ | ||
| /* */ | ||
| /*//////////////////////////////////////////////////////////////////////////////////////*/ | ||
|
|
||
| /* SPDX-FileCopyrightText: Simon Schneegans <[email protected]> */ | ||
| /* SPDX-FileCopyrightText: Elfi Ox <https://github.com/elfi-ox> */ | ||
| /* SPDX-License-Identifier: CC0-1.0 */ | ||
|
|
||
| .menu-node { | ||
| --child-distance: 80px; | ||
| --grandchild-distance: 16px; | ||
| --center-size: 80px; | ||
| --icon-size: 40px; | ||
| --connector-width: 10px; | ||
| --menu-transition: transform 200ms ease, opacity 200ms ease; | ||
| --connector-transition: width 200ms ease, opacity 200ms ease; | ||
|
|
||
|
|
||
| transition: var(--menu-transition); | ||
|
|
||
| /* Positioning ---------------------------------------------------------------------- */ | ||
|
|
||
| /* Child items are positioned around the active node. */ | ||
| &.child.type-submenu { | ||
| transform: translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)), | ||
| calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y))); | ||
| } | ||
|
|
||
| &.child:not(.type-submenu) { | ||
| transform: translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)), | ||
| calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y))) !important; | ||
| } | ||
|
|
||
| /* Grandchild items are positioned around the child items. */ | ||
| &.grandchild { | ||
| transform: translate(calc(var(--grandchild-distance) * var(--dir-x)), | ||
| calc(var(--grandchild-distance) * var(--dir-y))); | ||
| } | ||
|
|
||
| /* Theme Layers --------------------------------------------------------------------- */ | ||
|
|
||
| /* We hide all icons by default. They will be shown further down in this file for the | ||
| the child items. */ | ||
| .icon-container { | ||
| position: relative; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| opacity: 0; | ||
| clip-path: circle(45% at 50% 50%); | ||
| transition: var(--menu-transition); | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| .label-layer, | ||
| .icon-layer { | ||
| position: absolute; | ||
| transition: var(--menu-transition); | ||
| } | ||
|
|
||
| .label-layer { | ||
| opacity: 0; | ||
| background-color: var(--label-background-color); | ||
| color: var(--text-color); | ||
| border: 2px solid var(--border-color); | ||
| white-space: nowrap; | ||
| height: var(--icon-size); | ||
| border-radius: var(--icon-size); | ||
| top: calc(-1 * var(--icon-size) / 2); | ||
| padding: calc(var(--icon-size) / 5) calc(var(--icon-size) / 3); | ||
| font-size: calc(var(--icon-size) / 2.7); | ||
| } | ||
|
|
||
| &.hovered>.label-layer { | ||
| color: var(--hover-color); | ||
| border-color: var(--hover-color); | ||
| box-shadow: 0 0 6px var(--hover-color) inset; | ||
| } | ||
|
|
||
| &.right>.label-layer { | ||
| left: calc(-1 * var(--icon-size)/2); | ||
| padding-left: calc(var(--icon-size) + 5px); | ||
| } | ||
|
|
||
| &.left>.label-layer { | ||
| right: calc(-1 * var(--icon-size)/2); | ||
| padding-right: calc(var(--icon-size) + 5px); | ||
| } | ||
|
|
||
| &.top>.label-layer { | ||
| bottom: calc(0.4 * var(--icon-size)); | ||
| top: inherit; | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
| &.bottom>.label-layer { | ||
| top: calc(0.4 * var(--icon-size)); | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
| .icon-layer { | ||
| top: calc(-1 * var(--icon-size) / 2); | ||
| left: calc(-1 * var(--icon-size) / 2); | ||
| width: var(--icon-size); | ||
| height: var(--icon-size); | ||
| border-radius: 50%; | ||
| box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); | ||
| background-color: var(--circle-color); | ||
| z-index: 1; | ||
| } | ||
|
|
||
| &.active>.icon-layer { | ||
| top: calc(-1 * var(--center-size) / 2); | ||
| left: calc(-1 * var(--center-size) / 2); | ||
| width: var(--center-size); | ||
| height: var(--center-size); | ||
| } | ||
|
|
||
| &.grandchild>.icon-layer { | ||
| top: calc(-1 * var(--grandchild-size) / 2); | ||
| left: calc(-1 * var(--grandchild-size) / 2); | ||
| width: var(--grandchild-size); | ||
| height: var(--grandchild-size); | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| /* The active menu item is the center of the menu. */ | ||
| &.child>.label-layer { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| /* Show the icons of the parent and child items. */ | ||
| &.active>.icon-layer>.icon-container, | ||
| &.parent>.icon-layer>.icon-container, | ||
| &.child>.icon-layer>.icon-container { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| /* We disable any transition for dragged submenu items. */ | ||
| &.dragged.type-submenu { | ||
| transition: none; | ||
| } | ||
|
|
||
| /* Connectors ----------------------------------------------------------------------- */ | ||
|
|
||
| .connector { | ||
| transition: var(--connector-transition); | ||
| height: var(--connector-width); | ||
| top: calc(-1 * var(--connector-width) / 2); | ||
| background-color: var(--connector-color); | ||
| opacity: 0; | ||
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| &:has(>.dragged)>.connector, | ||
| &:has(>.clicked)>.connector { | ||
| transition: none; | ||
| } | ||
|
|
||
| &:has(>.parent)>.connector, | ||
| &:has(>.active.type-submenu)>.connector, | ||
| &:has(>.dragged.type-submenu)>.connector { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| /* Center Text ------------------------------------------------------------------------ */ | ||
|
|
||
| .center-text { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| ////////////////////////////////////////////////////////////////////////////////////////// | ||
| // _ _ ____ _ _ ___ ____ // | ||
| // |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform // | ||
| // | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando // | ||
| // // | ||
| ////////////////////////////////////////////////////////////////////////////////////////// | ||
|
|
||
| // SPDX-FileCopyrightText: Simon Schneegans <[email protected]> | ||
| // SPDX-FileCopyrightText: Elfi Ox <https://github.com/elfi-ox> */ | ||
| // SPDX-License-Identifier: CC0-1.0 | ||
|
|
||
| { | ||
| name: 'Nether Labels', | ||
| author: 'Simon Schneegans, Elfi Ox', | ||
| license: 'CC0-1.0', | ||
| themeVersion: '1.0', | ||
|
|
||
| // This theme was created for Kando's theme engine version 1. Kando will use this to | ||
| // check if the theme is compatible with the current version of Kando. | ||
| engineVersion: 1, | ||
|
|
||
| // When a menu is opened too close to a screen's edge, it is moved away from the edge | ||
| // by this amount of pixels. | ||
| maxMenuRadius: 160, | ||
|
|
||
| // This theme draws child items below their parent items. | ||
| drawChildrenBelow: false, | ||
|
|
||
| // These colors can be configured by the user and are vailable in the CSS file as CSS | ||
| // variables. The default values are used if the user does not provide any values. | ||
| colors: { | ||
| 'accent-color': '#D3ADFF', | ||
| 'hover-color': '#D3ADFF', | ||
| 'connector-color': '#D3ADFF', | ||
| 'circle-color' : '#131219', | ||
| 'border-color': '#131219', | ||
| 'label-background-color': '#0A0A0A', | ||
| 'text-color' : '#FFFFFF' | ||
| }, | ||
|
|
||
| // This theme uses two layers, one for the icon and the background and one for the arrow | ||
| // which points to the hovered item. | ||
| layers: [ | ||
| { class: 'icon-layer', content: 'icon' }, | ||
| { class: 'label-layer', content: 'name' }, | ||
| ], | ||
| } |