🎉 Initial commit

README.md

@@ -1,2 +1,23 @@
-# menu-themes
-A collection of additional menu themes for Kando
+<p align="center">
+  <img src="banner.png" />
+</p>
+
+# Menu Themes for Kando
+
+[Kando](https://github.com/kando-menu/kando) comes with several built-in themes.
+This repository contains additional themes that you can use with Kando.
+You can easily [create your own theme](https://github.com/kando-menu/kando/blob/main/docs/menu-themes.md)!
+If you created something cool, feel free to share it with the community by opening a pull request.
+
+To install a theme, simply download this repository and copy the directory of the theme you want to use into the `menu-themes` directory of your Kando installation.
+Depending on your platform, the `menu-themes` directory is located at:
+
+- <img height="14" width="26" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Windows_logo_-_2021_%28Black%29.svg" /> Windows: `%appdata%\kando\menu-themes\`
+- <img height="14" width="26" src="https://cdn.simpleicons.org/apple" /> macOS: `~/Library/Application Support/kando/menu-themes/`
+- <img height="14" width="26" src="https://cdn.simpleicons.org/linux/black" /> Linux: `~/.config/kando/menu-themes/`
+
+## Available Themes
+
+| Theme                                                                                                                                                                                                                                                 | Preview                             |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| [**Minecraft**](./minecraft)<br>This theme mimics the aesthetics of this well know computer game. To get the most out of it, it is recommended to use a pixelated icon theme such as [pixelitos](https://github.com/ItzSelenux/pixelitos-icon-theme)! | ![preview](./minecraft/preview.jpg) |

minecraft/font-info.txt

@@ -0,0 +1,2 @@
+license: Public Domain
+link: https://www.fontspace.com/minecraft-font-f28180

minecraft/theme.css

@@ -0,0 +1,141 @@
+/*//////////////////////////////////////////////////////////////////////////////////////*/
+/*   _  _ ____ _  _ ___  ____                                                           */
+/*   |_/  |__| |\ | |  \ |  |    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-License-Identifier: CC-BY-4.0 */
+
+@font-face {
+  font-family: 'Minecraft';
+  src: url(MinecraftRegular-Bmg3.otf);
+}
+
+#kando-menu {
+
+  .menu-node {
+    --child-distance: 100px;
+    --child-size: 60px;
+
+    --fade-distance: 80px;
+    --fade-size: 45px;
+
+    --connector-width: 10px;
+
+    --menu-transition: 150ms ease;
+
+    transition: var(--menu-transition);
+
+    /* Positioning -------------------------------------------------------------------- */
+
+    /* Child items are positioned around the active node. */
+    &.child {
+      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)));
+    }
+
+    /* Grandchild items are positioned around the child items. They are not visible in
+       this theme, but we still need to position them so that child items can be properly
+       faded in and out. */
+    &.grandchild {
+      transform: translate(calc(var(--fade-distance) * var(--dir-x)),
+          calc(var(--fade-distance) * var(--dir-y)));
+    }
+
+    /* Theme Layers ------------------------------------------------------------------- */
+
+    /* This theme comes with only one layer. This contains the icon of the menu item. */
+
+    /* Icons are drawn pixelated. */
+    .icon-container {
+      color: var(--text-color);
+      margin: 10px;
+      width: calc(100% - 20px);
+      image-rendering: pixelated;
+    }
+
+    /* If a node is clicked, we scale it down a bit. */
+    &.hovered.clicked>.icon-layer {
+      transform: scale(0.95);
+    }
+
+    /* Child items are displayed around the active node. The parent node of the active
+       node is displayed in a similar style. */
+    &.active>.icon-layer,
+    &.parent>.icon-layer,
+    &.child>.icon-layer,
+    &.grandchild>.icon-layer {
+      position: absolute;
+      top: calc(-1 * var(--child-size) / 2);
+      left: calc(-1 * var(--child-size) / 2);
+      width: var(--child-size);
+      height: var(--child-size);
+      background-image: url('icon.png');
+      background-size: contain;
+      image-rendering: pixelated;
+    }
+
+    &.grandchild>.icon-layer {
+      top: calc(-1 * var(--fade-size) / 2);
+      left: calc(-1 * var(--fade-size) / 2);
+      width: var(--fade-size);
+      height: var(--fade-size);
+    }
+
+    /* Hovered child or parent items are highlighted. */
+    &.parent.hovered>.icon-layer,
+    &.child.hovered>.icon-layer {
+      background-image: url('icon-highlight.png');
+    }
+
+    /* Grandchild items are transparent. */
+    &.grandchild {
+      opacity: 0;
+    }
+
+    /* We disable any transition for dragged items. */
+    &.dragged {
+      transition: none;
+    }
+
+    /* Connectors --------------------------------------------------------------------- */
+
+    .connector {
+      transition: var(--menu-transition);
+      height: var(--connector-width);
+      top: calc(-1 * var(--connector-width) / 2);
+
+      border-width: 5px 60px 5px 60px;
+      border-style: solid;
+      border-image: url('connector.png');
+      border-image-slice: 5 60 5 60;
+      border-image-repeat: round;
+      image-rendering: pixelated;
+
+      opacity: 0;
+    }
+
+    &:has(.dragged)>.connector,
+    &:has(.clicked)>.connector {
+      transition: none;
+    }
+
+    &.parent>.connector,
+    &:has(.dragged)>.connector,
+    &:has(.clicked)>.connector {
+      opacity: 1;
+    }
+  }
+
+  /* Center Text ---------------------------------------------------------------------- */
+
+  .center-text {
+    font-family: 'Minecraft', sans-serif;
+    text-shadow: 2px 2px 0px black;
+    color: var(--text-color);
+    font-size: 18px;
+    line-height: 20px;
+  }
+}

minecraft/theme.json5

@@ -0,0 +1,39 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//   _  _ ____ _  _ ___  ____                                                           //
+//   |_/  |__| |\ | |  \ |  |    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-License-Identifier: CC0-1.0
+
+{
+  name: "Minecraft",
+  author: "Simon Schneegans",
+  license: "CC-BY-4.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,
+
+  // The width at which the center text is wrapped.
+  centerTextWrapWidth: 120,
+
+  // This theme draws child items below their parent items.
+  drawChildrenBelow: true,
+
+  // 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: {
+    "text-color": "rgb(255, 255, 255)",
+  },
+
+  // This theme is very simple and only uses one layer for the menu items.
+  layers: [{ class: "icon-layer", content: "icon" }],
+}