+
{games}
}
diff --git a/visions/ui/static/glimmer-style-base.css b/visions/ui/static/glimmer-style-base.css
deleted file mode 100644
index ca799af9..00000000
--- a/visions/ui/static/glimmer-style-base.css
+++ /dev/null
@@ -1,309 +0,0 @@
-:root {
- --size-xsm: 8px;
- --size-sm: 16px;
- --size-md: 24px;
- --size-lg: 32px;
-
- --spacing-sm: 4px;
- --spacing-md: 8px;
- --spacing-lg: 16px;
-
- --radius-sm: 4px;
- --radius-md: 8px;
- --radius-lg: 16px;
- --radius-full: 100px;;
-}
-
-body {
- background-color: var(--color-surface-background);
- color: var(--color-surface-text);
- font: var(--typography-body);
-}
-
-.layout-row {
- display: flex;
- align-items: center;
- flex-direction: row;
-}
-
-.layout-row__gap-sm {
- gap: var(--spacing-sm);
-}
-
-.layout-centered {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- padding: 0;
-}
-
-.list {
- list-style-type: none;
- padding: 0px;
-}
-
-.list__item {
- border: var(--border-transparent);
- padding: var(--spacing-sm);
- transition: border 300ms ease-in-out;
-}
-
-.list__item_selected {
- border: var(--border-active);
-}
-
-.list__item:hover {
- border: var(--border-hover);
-}
-
-.tabs {
- list-style-type: none;
- padding: var(--spacing-sm);
-}
-
-.tabs_horizontal {
- list-style-type: none;
- padding: var(--spacing-sm);
- display: flex;
-}
-
-.tabs__item {
- padding: var(--spacing-md);
-}
-
-.button {
- font: var(--typography-default);
- padding: var(--spacing-md);
- border: var(--border-invisible);
-}
-
-.notebook {
- display: grid;
- grid-template-columns: 200px 1fr;
-}
-
-.notebook_reverse {
- display: grid;
- grid-template-columns: 1fr 200px;
-
- > .notebook__navbar {
- grid-row-start: 1;
- grid-row-end: 1;
- grid-column-start: 2;
- grid-column-end: 2;
- }
-
- > .notebook__page {
- grid-row-start: 1;
- grid-row-end: 1;
- grid-column-start: 1;
- grid-column-end: 1;
- }
-}
-
-.notebook_vertical {
-}
-
-.notebook__page {
- height: 100%;
-}
-
-.notebook__navbar {
- width: 200px;
-}
-
-.sidebar-left {
- display: flex;
- height: 100%;
-}
-
-.sidebar-right {
- display: flex;
- height: 100%;
- flex-direction: row-reverse;
-}
-
-/*
-.sidebar_expanded {
- display: grid;
- grid-template-columns: 1fr;
- transition: grid-template-columns 300ms ease;
-}
-
-.sidebar_collapsed {
- display: grid;
- grid-template-columns: 0fr;
- transition: grid-template-columns 300ms ease;
-}
-
-.sidebar__inner {
- overflow: hidden;
- min-width: 0;
-}
-*/
-
-.image {
- max-width: 100%;
- transition: opacity 300ms ease-in-out;
-}
-
-.image_fade-in {
- opacity: 1;
-}
-
-.image_fade-out {
- opacity: 0;
-}
-
-.panel {
- background-color: var(--color-surface-raised1-background);
- color: var(--color-surface-raised1-text);
-
- padding-left: var(--spacing-md);
- padding-right: var(--spacing-md);
- padding-bottom: var(--spacing-md);
-
- border: var(--border-default);
- border-radius: var(--radius-md);
-}
-
-.panel__title {
- margin: 0px;
-}
-
-.panel_clickable:hover {
- border: var(--border-hover);
-}
-
-.expansion-animation-vertical__wrapper_open {
- display: grid;
- grid-template-rows: 1fr;
- transition: grid-template-rows 300ms ease;
-}
-
-.expansion-animation-vertical__wrapper_closed {
- display: grid;
- grid-template-rows: 0fr;
- transition: grid-template-rows 300ms ease;
-}
-
-.expansion-animation__inner {
- overflow: hidden;
- min-height: 0;
-}
-
-.expansion-animation-horizontal__wrapper_open {
- display: grid;
- grid-template-columns: 1fr;
- transition: grid-template-columns 300ms ease;
-}
-
-.expansion-animation-horizontal__wrapper_closed {
- display: grid;
- grid-template-columns: 0fr;
- transition: grid-template-columns 300ms ease;
-}
-
-.toggle {
- position: relative;
- display: inline-block;
- width: calc(var(--size-md) * 2);
- height: var(--size-md);
-
- input {
- opacity: 0;
- width: 0;
- height: 0;
- }
-}
-
-.toggle__slider {
- position: absolute;
- background-color: var(--color-component-secondary-background);
- border-radius: var(--radius-full);
- width: 100%;
- height: 100%;
- transition: transform 300ms ease-in-out;
-}
-
-.toggle__slider_enabled {
- background-color: var(--color-component-accent-background);
-}
-
-.toggle__slider::before {
- content: "";
- position: absolute;
- height: calc(var(--size-md) - var(--spacing-sm) * 2);
- width: calc(var(--size-md) - var(--spacing-sm) * 2);
- background-color: var(--color-component-secondary-text);
- border-radius: 25px;
- top: var(--spacing-sm);
- left: var(--spacing-sm);
- transition: transform 300ms ease-in-out;
-}
-
-.toggle__slider_enabled::before {
- transform: translateX(var(--size-md));
-}
-
-.range {
- display: flex;
- background-color: var(--color-surface-raised1-background);
- padding: var(--spacing-md);
- align-items: center;
- gap: var(--spacing-lg);
-}
-
-.range__body {
- display: flex;
- gap: var(--spacing-sm);
-}
-
-.range__meter {
- display: flex;
-}
-
-.range__step-bar {
- height: var(--size-md);
- width: var(--size-xsm);
- border: var(--border-default);
-}
-
-.range__step-dot {
- height: var(--size-md);
- width: var(--size-md);
- border: var(--border-default);
- border-radius: var(--radius-full);
-}
-
-.text-entry {
- padding: var(--spacing-md);
- padding-left: var(--spacing-lg);
- padding-right: var(--spacing-lg);
- border-radius: var(--radius-lg);
-}
-
-.dialog {
- padding: var(--spacing-md);
- border: 2px solid var(--accent-300);
- border-radius: var(--radius-md);
- background-color: var(--color-surface-raised2-background);
- color: var(--color-surface-raised2-text);
-}
-
-.dialog__title {
- margin: 0px;
- padding: 0px;
- padding-bottom: var(--spacing-lg);
-}
-
-.dialog__header {
- display: flex;
- justify-content: space-between;
- gap: var(--spacing-lg);
-
- .button {
- align-self: start;
- }
-}
diff --git a/visions/ui/static/glimmer-style-bundle-0.1.2.css b/visions/ui/static/glimmer-style-bundle-0.1.2.css
new file mode 100644
index 00000000..be4c2f51
--- /dev/null
+++ b/visions/ui/static/glimmer-style-bundle-0.1.2.css
@@ -0,0 +1,730 @@
+:root {
+ --size-xsm: 8px;
+ --size-sm: 16px;
+ --size-md: 24px;
+ --size-lg: 32px;
+
+ --spacing-sm: 4px;
+ --spacing-md: 8px;
+ --spacing-lg: 16px;
+
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 16px;
+ --radius-full: 100px;;
+}
+
+body {
+ background-color: var(--color-surface-background);
+ color: var(--color-surface-text);
+ font: var(--typography-body);
+}
+
+.button {
+ padding: var(--spacing-md);
+ border: var(--border-invisible);
+ font: var(--typography-body);
+}
+
+.button_primary {
+ background-color: var(--color-component-primary-background);
+ color: var(--color-component-primary-text);
+}
+
+.button_secondary {
+ background-color: var(--color-component-secondary-background);
+ color: var(--color-component-secondary-text);
+}
+
+.button_primary-destructive {
+ background-color: var(--color-component-warning-background);
+ color: var(--color-component-warning-text);
+}
+
+.button_secondary-destructive {
+ background-color: var(--warning-100);
+ color: var(--neutral-900);
+}
+
+.layout-row {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+}
+
+.layout-row__gap-sm {
+ gap: var(--spacing-sm);
+}
+
+.layout-centered {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ padding: 0;
+}
+
+.list {
+ list-style-type: none;
+ padding: 0px;
+}
+
+.list__item {
+ border: var(--border-transparent);
+ padding: var(--spacing-sm);
+ transition: border 300ms ease-in-out;
+}
+
+.list__item_selected {
+ border: var(--border-active);
+}
+
+.list__item:hover {
+ border: var(--border-hover);
+}
+
+.tabs {
+ list-style-type: none;
+ padding: var(--spacing-sm);
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ background-color: var(--color-surface-raised1-background);
+}
+
+.tabs_horizontal {
+ list-style-type: none;
+ padding: var(--spacing-sm);
+ display: flex;
+}
+
+.tabs__item {
+ padding: var(--spacing-md);
+}
+
+.notebook {
+ display: grid;
+ grid-template-columns: 200px 1fr;
+}
+
+.notebook_reverse {
+ display: grid;
+ grid-template-columns: 1fr 200px;
+
+ > .notebook__navbar {
+ grid-row-start: 1;
+ grid-row-end: 1;
+ grid-column-start: 2;
+ grid-column-end: 2;
+ }
+
+ > .notebook__page {
+ grid-row-start: 1;
+ grid-row-end: 1;
+ grid-column-start: 1;
+ grid-column-end: 1;
+ }
+}
+
+.notebook_vertical {
+}
+
+.notebook__page {
+ height: 100%;
+}
+
+.notebook__navbar {
+ width: 200px;
+}
+
+.sidebar-left {
+ display: flex;
+ height: 100%;
+}
+
+.sidebar-right {
+ display: flex;
+ height: 100%;
+ flex-direction: row-reverse;
+}
+
+.image {
+ max-width: 100%;
+ transition: opacity 300ms ease-in-out;
+}
+
+.image_fade-in {
+ opacity: 1;
+}
+
+.image_fade-out {
+ opacity: 0;
+}
+
+.panel {
+ background-color: var(--color-surface-raised1-background);
+ color: var(--color-surface-raised1-text);
+
+ padding-left: var(--spacing-md);
+ padding-right: var(--spacing-md);
+ padding-bottom: var(--spacing-md);
+
+ border: var(--border-default);
+ border-radius: var(--radius-md);
+}
+
+.panel__title {
+ margin: 0px;
+}
+
+.panel_clickable:hover {
+ border: var(--border-hover);
+}
+
+.expansion-animation-vertical__wrapper_open {
+ display: grid;
+ grid-template-rows: 1fr;
+ transition: grid-template-rows 300ms ease;
+}
+
+.expansion-animation-vertical__wrapper_closed {
+ display: grid;
+ grid-template-rows: 0fr;
+ transition: grid-template-rows 300ms ease;
+}
+
+.expansion-animation__inner {
+ overflow: hidden;
+ min-height: 0;
+}
+
+.expansion-animation-horizontal__wrapper_open {
+ display: grid;
+ grid-template-columns: 1fr;
+ transition: grid-template-columns 300ms ease;
+}
+
+.expansion-animation-horizontal__wrapper_closed {
+ display: grid;
+ grid-template-columns: 0fr;
+ transition: grid-template-columns 300ms ease;
+}
+
+.toggle {
+ position: relative;
+ display: inline-block;
+ width: calc(var(--size-md) * 2);
+ height: var(--size-md);
+
+ input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+}
+
+.toggle__slider {
+ position: absolute;
+ background-color: var(--color-component-secondary-background);
+ border-radius: var(--radius-full);
+ width: 100%;
+ height: 100%;
+ transition: transform 300ms ease-in-out;
+}
+
+.toggle__slider_enabled {
+ background-color: var(--color-component-primary-background);
+ transition: background-color 300ms ease-in-out;
+}
+
+.toggle__slider::before {
+ content: "";
+ position: absolute;
+ height: calc(var(--size-md) - var(--spacing-sm) * 2);
+ width: calc(var(--size-md) - var(--spacing-sm) * 2);
+ background-color: var(--color-component-accent-text);
+ border-radius: 25px;
+ top: var(--spacing-sm);
+ left: var(--spacing-sm);
+ transition: transform 300ms ease-in-out;
+}
+
+.toggle__slider_enabled::before {
+ transform: translateX(var(--size-md));
+}
+
+.range {
+ display: flex;
+ background-color: var(--color-surface-raised1-background);
+ padding: var(--spacing-md);
+ align-items: center;
+ gap: var(--spacing-lg);
+}
+
+.range__body {
+ display: flex;
+ gap: var(--spacing-sm);
+}
+
+.range__meter {
+ display: flex;
+}
+
+.range__step-bar {
+ height: var(--size-md);
+ width: var(--size-xsm);
+ border: var(--border-default);
+}
+
+.range__step-dot {
+ height: var(--size-md);
+ width: var(--size-md);
+ border: var(--border-default);
+ border-radius: var(--radius-full);
+}
+
+.text-entry {
+ padding: var(--spacing-md);
+ padding-left: var(--spacing-lg);
+ padding-right: var(--spacing-lg);
+ border-radius: var(--radius-lg);
+}
+
+.dialog {
+ padding: var(--spacing-md);
+ border: 2px solid var(--accent-300);
+ border-radius: var(--radius-md);
+ background-color: var(--color-surface-raised1-background);
+ color: var(--color-surface-raised1-text);
+ max-height: 75%;
+ max-width: 75%;
+}
+
+.dialog__title {
+ margin: 0px;
+ padding: 0px;
+ padding-bottom: var(--spacing-lg);
+}
+
+.dialog__header {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--spacing-lg);
+
+ .button {
+ align-self: start;
+ }
+}
+
+[data-theme="summer"] {
+ --primary-100: hsl(296, 51%, 89%);
+ --primary-300: hsl(288, 51%, 65%);
+ --primary-500: hsl(280, 44%, 57%);
+ --primary-700: hsl(284, 43%, 35%);
+ --primary-900: hsl(287, 43%, 22%);
+ --secondary-100: hsl(68, 50%, 67%);
+ --secondary-300: hsl(66, 45%, 60%);
+ --secondary-500: hsl(64, 42%, 50%);
+ --secondary-700: hsl(68, 45%, 35%);
+ --secondary-900: hsl(71, 37%, 25%);
+ --neutral-100: hsl(0, 0%, 99%);
+ --neutral-200: hsl(0, 0%, 90%);
+ --neutral-300: hsl(0, 0%, 85%);
+ --neutral-400: hsl(0, 0%, 80%);
+ --neutral-500: hsl(0, 0%, 75%);
+ --neutral-600: hsl(0, 0%, 70%);
+ --neutral-700: hsl(0, 0%, 50%);
+ --neutral-800: hsl(0, 0%, 30%);
+ --neutral-900: hsl(0, 0%, 10%);
+ --accent-100: hsl(22, 47%, 79%);
+ --accent-300: hsl(17, 41%, 60%);
+ --accent-500: hsl(13, 35%, 57%);
+ --accent-700: hsl(16, 35%, 47%);
+ --accent-900: hsl(18, 40%, 34%);
+ --warning-100: hsl(0, 60%, 90%);
+ --warning-300: hsl(0, 60%, 80%);
+ --warning-500: hsl(0, 60%, 75%);
+ --warning-700: hsl(0, 60%, 70%);
+ --warning-900: hsl(0, 60%, 65%);
+
+ --typography-family-default: Helvetica;
+ --typography-weight-base: 500;
+ --typography-weight-bold: 800;
+ --typography-size-sm: 14px;
+ --typography-size-base: 16px;
+ --typography-size-lg: 24p;
+
+ --color-component-primary-background: var(--primary-700);
+ --color-component-primary-text: var(--neutral-100);
+ --color-container-primary-background: var(--primary-100);
+ --color-container-primary-text: var(--neutral-900);
+
+ --color-component-secondary-background: var(--secondary-300);
+ --color-component-secondary-text: var(--neutral-900);
+ --color-container-secondary-background: var(--secondary-200);
+ --color-container-secondary-text: var(--neutral-900);
+
+ --color-component-neutral-background: var(--neutral-400);
+ --color-component-neutral-text: var(--neutral-900);
+ --color-container-neutral-background: var(--neutral-200);
+ --color-container-neutral-text: var(--neutral-900);
+
+ --color-component-accent-background: var(--accent-700);
+ --color-component-accent-text: var(--neutral-100);
+ --color-container-accent-background: var(--accent-100);
+ --color-container-accent-text: var(--neutral-900);
+
+ --color-component-warning-background: var(--warning-700);
+ --color-component-warning-text: var(--neutral-900);
+ --color-container-warning-background: var(--warning-100);
+ --color-container-warning-text: var(--neutral-900);
+
+ --color-surface-background: var(--neutral-100);
+ --color-surface-text: var(--neutral-900);
+
+ --color-surface-raised1-background: var(--neutral-200);
+ --color-surface-raised1-text: var(--neutral-800);
+ --color-surface-raised2-background: var(--neutral-300);
+ --color-surface-raised2-text: var(--neutral-800);
+ --color-surface-raised3-background: var(--neutral-400);
+ --color-surface-raised3-text: var(--neutral-900);
+ --color-surface-raised4-background: var(--neutral-500);
+ --color-surface-raised4-text: var(--neutral-900);
+ --color-surface-raised5-background: var(--neutral-600);
+ --color-surface-raised5-text: var(--neutral-900);
+
+ --font-family: "Fira Sans", Helvetica, sans-serif;
+ --typography-body: 16px var(--font-family);
+ --typography-heading: 24px var(--font-family);
+ --typography-weight-bold: 800;
+
+ --border-default: 2px solid var(--neutral-600);
+ --border-transparent: 2px solid transparent;
+ --border-active: 2px solid var(--primary-700);
+ --border-hover: 2px solid var(--accent-300);
+
+ .list__item {
+ border-radius: var(--radius-sm);
+ }
+
+ .tabs__item {
+ background-color: var(--color-component-secondary-background);
+ color: var(--color-component-secondary-text);
+ border-radius: var(--radius-lg);
+ }
+
+ .tabs__item_selected {
+ background-color: var(--color-component-primary-background);
+ color: var(--color-component-primary-text);
+ }
+
+
+ .button {
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-md);
+ }
+
+ .sidebar {
+ > .button {
+ background-color: var(--accent-300);
+ color: var(--accent-900);
+ border-radius: var(--radius-sm);
+ }
+ }
+
+ .range {
+ border-radius: var(--space-md);
+ }
+
+ .range__step_filled {
+ background-color: var(--primary-700);
+ }
+
+ .range__step_unfilled {
+ background-color: var(--neutral-100);
+ }
+
+ .range__step_unavailable {
+ background-color: var(--neutral-900);
+ }
+
+ .range__step_hover {
+ background-color: var(--secondary-700);
+ }
+}
+
+[data-theme="neon"] {
+ --neutral-100: hsl(225, 48%, 90%);
+ --neutral-200: hsl(225, 48%, 85%);
+ --neutral-300: hsl(225, 48%, 80%);
+ --neutral-400: hsl(225, 48%, 70%);
+ --neutral-500: hsl(225, 48%, 60%);
+ --neutral-600: hsl(225, 48%, 40%);
+ --neutral-700: hsl(225, 48%, 30%);
+ --neutral-800: hsl(225, 48%, 20%);
+ --neutral-900: hsl(225, 48%, 10%);
+ --primary-100: hsl(260, 100%, 95%);
+ --primary-300: hsl(260, 100%, 80%);
+ --primary-500: hsl(260, 100%, 60%);
+ --primary-700: hsl(260, 100%, 40%);
+ --primary-900: hsl(260, 100%, 20%);
+ --secondary-100: hsl(182, 100%, 90%);
+ --secondary-300: hsl(182, 100%, 70%);
+ --secondary-500: hsl(182, 100%, 40%);
+ --secondary-700: hsl(182, 100%, 20%);
+ --secondary-900: hsl(182, 100%, 10%);
+ --accent-100: hsl(20, 99%, 90%);
+ --accent-300: hsl(20, 99%, 75%);
+ --accent-500: hsl(20, 99%, 60%);
+ --accent-700: hsl(20, 99%, 40%);
+ --accent-900: hsl(20, 99%, 20%);
+ --warning-100: hsl(0, 100%, 95%);
+ --warning-300: hsl(0, 100%, 80%);
+ --warning-500: hsl(0, 100%, 60%);
+ --warning-700: hsl(0, 100%, 40%);
+ --warning-900: hsl(0, 100%, 20%);
+
+ --typography-family-default: Helvetica;
+ --typography-weight-base: 500;
+ --typography-size-sm: 14px;
+ --typography-size-base: 16px;
+ --typography-size-lg: 24px;
+
+ --color-component-primary-background: var(--primary-500);
+ --color-component-primary-text: var(--primary-100);
+ --color-container-primary-background: var(--primary-100);
+ --color-container-primary-text: var(--primary-900);
+
+ --color-component-secondary-background: var(--secondary-700);
+ --color-component-secondary-text: var(--secondary-100);
+ --color-container-secondary-background: var(--secondary-100);
+ --color-container-secondary-text: var(--secondary-900);
+
+ --color-component-neutral-background: var(--neutral-700);
+ --color-component-neutral-text: var(--neutral-200);
+ --color-container-neutral-background: var(--neutral-200);
+ --color-container-neutral-text: var(--neutral-900);
+
+ --color-component-accent-background: var(--accent-700);
+ --color-component-accent-text: var(--accent-100);
+ --color-container-accent-background: var(--accent-100);
+ --color-container-accent-text: var(--accent-900);
+
+ --color-component-warning-background: var(--warning-700);
+ --color-component-warning-text: var(--warning-100);
+ --color-container-warning-background: var(--warning-100);
+ --color-container-warning-text: var(--warning-900);
+
+ --color-surface-background: var(--neutral-900);
+ --color-surface-text: var(--neutral-100);
+
+ --color-surface-raised1-background: var(--neutral-800);
+ --color-surface-raised1-text: var(--neutral-100);
+ --color-surface-raised2-background: var(--neutral-700);
+ --color-surface-raised2-text: var(--neutral-100);
+ --color-surface-raised3-background: var(--neutral-600);
+ --color-surface-raised3-text: var(--neutral-100);
+ --color-surface-raised4-background: var(--neutral-500);
+ --color-surface-raised4-text: var(--neutral-900);
+ --color-surface-raised5-background: var(--neutral-400);
+ --color-surface-raised5-text: var(--neutral-900);
+
+ --font-family: "Michroma", Helvetica, sans-serif;
+ --typography-body: 16px var(--font-family);
+ --typography-heading: 24px var(--font-family);
+
+ --border-default: 2px solid var(--neutral-600);
+ --border-transparent: 2px solid transparent;
+ --border-active: 2px solid var(--primary-500);
+ --border-hover: 2px solid var(--accent-300);
+
+ .panel {
+ position: relative;
+ border: 0px;
+ border-radius: 0px;
+ padding-left: var(--spacing-md);
+ padding-right: var(--spacing-md);
+ padding-bottom: var(--spacing-md);
+ margin: var(--spacing-md);
+ background-color: rgba(0, 0, 0, 0);
+ }
+
+ .panel__inner::before {
+ content: "";
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ clip-path: polygon(
+ 0 4px,
+ 4px 0,
+
+ 70% 0,
+ calc(70% + 8px) 8px,
+ calc(100% - 4px) 8px,
+ 100% 12px,
+
+ 100% calc(100% - 8px),
+ calc(100% - 8px) 100%,
+
+ 8px 100%,
+ 2px calc(100% - 6px),
+ 2px 75%,
+ 0 calc(75% - 2px)
+ );
+ background-color: var(--secondary-500);
+ transition: background-color 300ms ease-in-out;
+ }
+ .panel_clickable > .panel__inner:hover::before {
+ background-color: var(--accent-300);
+ }
+ .panel__inner::after {
+ content: "";
+ position: absolute;
+ left: 0%;
+ top: 0%;
+ width: 100%;
+ height: 100%;
+ background: var(--color-surface-raised1-background);
+ box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
+ clip-path: polygon(
+ 2px 6px,
+ 8px 0px,
+ 30px 0px,
+ 36px 6px,
+
+ calc(70% + 6px) 6px,
+ calc(70% + 10px) 10px,
+ calc(100% - 6px) 10px,
+ calc(100% - 2px) 14px,
+
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 6px) calc(100% - 2px),
+
+ 10px calc(100% - 2px),
+ 4px calc(100% - 8px),
+ 4px calc(75% + 2px),
+ 2px 75%
+ );
+ }
+
+ .panel__content {
+ position: relative;
+ z-index: 1;
+ }
+
+ .list__item {
+ border-radius: var(--radius-sm);
+ }
+
+ .tabs_horizontal {
+ background-color: var(--color-surface-raised1-background);
+ gap: var(--space-sm);
+ }
+
+ .tabs__item {
+ background-color: var(--color-component-secondary-background);
+ color: var(--color-component-secondary-text);
+ }
+
+ .tabs__item_selected {
+ background-color: var(--color-component-primary-background);
+ color: var(--color-component-primary-text);
+ }
+
+ .sidebar {
+ > .button {
+ background-color: var(--accent-700);
+ color: var(--accent-100);
+ border-radius: var(--radius-sm);
+ }
+ }
+
+ .range__step_filled {
+ background-color: var(--primary-500);
+ }
+
+ .range__step_unfilled {
+ background-color: var(--neutral-100);
+ }
+
+ .range__step_unavailable {
+ background-color: var(--neutral-900);
+ }
+
+ .range__step_hover {
+ background-color: var(--accent-300);
+ }
+
+ .dialog {
+ box-shadow: 0px 0px var(--spacing-md) 0px var(--secondary-300);
+ position: relative;
+ border: 0px;
+ border-radius: 0px;
+ }
+
+ .dialog__inner::before {
+ content: "";
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ clip-path: polygon(
+ 2px 0px,
+ calc(100% - 2px) 0px,
+ 100% 2px,
+ 100% calc(100% - 2px),
+ calc(100% - 2px) 100%,
+ 2px 100%,
+ 0px calc(100% - 2px),
+ 0px 2px
+ );
+ background-color: var(--secondary-500);
+ }
+
+ .dialog__inner::after {
+ content: "";
+ position: absolute;
+ left: 0%;
+ top: 0%;
+ width: 100%;
+ height: 100%;
+ background: var(--color-surface-raised1-background);
+ box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
+ clip-path: polygon(
+ 2px 2px,
+ 2px 0px,
+ 30px 0px,
+ 34px 4px,
+
+ calc(70% + 4px) 4px,
+ calc(70% + 6px) 6px,
+ calc(100% - 6px) 6px,
+ calc(100% - 2px) 10px,
+
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 6px) calc(100% - 2px),
+
+ 10px calc(100% - 2px),
+ 4px calc(100% - 8px),
+ 4px calc(75% + 2px),
+ 2px 75%
+ );
+ }
+
+ .dialog__content {
+ position: relative;
+ z-index: 1;
+ }
+
+ .dialog__title {
+ }
+
+ .dialog__header {
+ }
+}
+
+
+
diff --git a/visions/ui/static/glimmer-style-default.css b/visions/ui/static/glimmer-style-default.css
deleted file mode 100644
index e34708a3..00000000
--- a/visions/ui/static/glimmer-style-default.css
+++ /dev/null
@@ -1,176 +0,0 @@
-[data-theme="default"] {
- --primary-100: hsl(220, 100%, 90%);
- --primary-300: hsl(220, 100%, 80%);
- --primary-500: hsl(240, 100%, 65%);
- --primary-700: hsl(240, 100%, 35%);
- --primary-900: hsl(240, 100%, 15%);
- --secondary-100: hsl(280, 100%, 90%);
- --secondary-300: hsl(280, 100%, 80%);
- --secondary-500: hsl(280, 100%, 65%);
- --secondary-700: hsl(280, 100%, 35%);
- --secondary-900: hsl(280, 100%, 15%);
- --neutral-100: hsl(0, 0%, 99%);
- --neutral-200: hsl(0, 0%, 90%);
- --neutral-300: hsl(0, 0%, 80%);
- --neutral-400: hsl(0, 0%, 70%);
- --neutral-500: hsl(0, 0%, 65%);
- --neutral-600: hsl(0, 0%, 50%);
- --neutral-700: hsl(0, 0%, 40%);
- --neutral-800: hsl(0, 0%, 20%);
- --neutral-900: hsl(0, 0%, 10%);
- --accent-100: hsl(120, 50%, 90%);
- --accent-300: hsl(120, 80%, 80%);
- --accent-500: hsl(120, 100%, 65%);
- --accent-700: hsl(120, 100%, 40%);
- --accent-900: hsl(120, 100%, 15%);
- --warning-100: hsl(0, 100%, 90%);
- --warning-300: hsl(0, 100%, 80%);
- --warning-500: hsl(0, 100%, 65%);
- --warning-700: hsl(0, 100%, 40%);
- --warning-900: hsl(0, 100%, 15%);
-
- --typography-family-default: Helvetica;
- --typography-weight-base: 500;
- --typography-size-sm: 14px;
- --typography-size-base: 16px;
- --typography-size-lg: 24p;
-
- --color-component-primary-background: var(--primary-700);
- --color-component-primary-text: var(--primary-100);
- --color-container-primary-background: var(--primary-100);
- --color-container-primary-text: var(--primary-900);
-
- --color-component-secondary-background: var(--secondary-300);
- --color-component-secondary-text: var(--secondary-900);
- --color-container-secondary-background: var(--secondary-200);
- --color-container-secondary-text: var(--secondary-900);
-
- --color-component-neutral-background: var(--neutral-300);
- --color-component-neutral-text: var(--neutral-900);
- --color-container-neutral-background: var(--neutral-200);
- --color-container-neutral-text: var(--neutral-900);
-
- --color-component-accent-background: var(--accent-700);
- --color-component-accent-text: var(--accent-100);
- --color-container-accent-background: var(--accent-100);
- --color-container-accent-text: var(--accent-900);
-
- --color-component-warning-background: var(--warning-700);
- --color-component-warning-text: var(--warning-100);
- --color-container-warning-background: var(--warning-100);
- --color-container-warning-text: var(--warning-900);
-
- --color-surface-background: var(--neutral-100);
- --color-surface-text: var(--neutral-900);
-
- --color-surface-raised1-background: var(--neutral-200);
- --color-surface-raised1-text: var(--neutral-800);
- --color-surface-raised2-background: var(--neutral-300);
- --color-surface-raised2-text: var(--neutral-800);
- --color-surface-raised3-background: var(--neutral-400);
- --color-surface-raised3-text: var(--neutral-900);
- --color-surface-raised4-background: var(--neutral-500);
- --color-surface-raised4-text: var(--neutral-900);
- --color-surface-raised5-background: var(--neutral-600);
- --color-surface-raised5-text: var(--neutral-100);
-
- --font-family: "Fira Sans", Helvetica, sans-serif;
- --typography-body: 16px var(--font-family);
- --typography-bold: 600 16px var(--font-family);
- --typography-heading: 24px var(--font-family);
-
- --border-default: 2px solid var(--neutral-600);
- --border-transparent: 2px solid transparent;
- --border-active: 2px solid var(--primary-700);
- --border-hover: 2px solid var(--accent-300);
-
- .list__item {
- border-radius: var(--radius-sm);
- }
-
- .tabs_horizontal {
- background-color: var(--color-surface-raised1-background);
- border-radius: var(--radius-full);
- }
-
- .tabs__item {
- background-color: var(--color-component-secondary-background);
- color: var(--color-component-secondary-text);
- border-radius: var(--radius-full);
- }
-
- .tabs__item_selected {
- background-color: var(--color-component-primary-background);
- color: var(--color-component-primary-text);
- }
-
- .button {
- border-radius: var(--radius-full);
- padding: var(--spacing-md);
- }
-
- .button_primary-destructive {
- background-color: var(--color-component-warning-background);
- color: var(--color-component-warning-text);
- }
- .button_primary-destructive:hover {
- box-shadow: 0px 0px 1px 2px var(--warning-300),
- 0px 0px 1px 2px var(--warning-300) inset;
- }
-
- .button_primary {
- background-color: var(--color-component-primary-background);
- color: var(--color-component-primary-text);
- }
- .button_primary:hover {
- box-shadow: 0px 0px 1px 2px var(--primary-300),
- 0px 0px 1px 2px var(--primary-300) inset;
- }
-
-
- .button_secondary-destructive {
- background-color: var(--warning-100);
- color: var(--warning-900);
- }
- .button_secondary-destructive:hover {
- box-shadow: 0px 0px 1px 2px var(--warning-300),
- 0px 0px 1px 2px var(--warning-300) inset;
- }
-
- .button_secondary {
- background-color: var(--color-component-neutral-background);
- color: var(--color-component-neutral-text);
- }
- .button_secondary:hover {
- box-shadow: 0px 0px 1px 2px var(--neutral-100),
- 0px 0px 1px 2px var(--neutral-100) inset;
- }
-
- .sidebar {
- > .button {
- background-color: var(--accent-300);
- color: var(--accent-900);
- border-radius: var(--radius-sm);
- }
- }
-
- .range {
- border-radius: var(--space-md);
- }
-
- .range__step_filled {
- background-color: var(--primary-700);
- }
-
- .range__step_unfilled {
- background-color: var(--neutral-100);
- }
-
- .range__step_unavailable {
- background-color: var(--neutral-900);
- }
-
- .range__step_hover {
- background-color: var(--secondary-700);
- }
-}
diff --git a/visions/ui/static/glimmer-style-neon.css b/visions/ui/static/glimmer-style-neon.css
deleted file mode 100644
index 8d4393f3..00000000
--- a/visions/ui/static/glimmer-style-neon.css
+++ /dev/null
@@ -1,226 +0,0 @@
-[data-theme="neon"] {
- --neutral-100: hsl(225, 48%, 90%);
- --neutral-200: hsl(225, 48%, 85%);
- --neutral-300: hsl(225, 48%, 80%);
- --neutral-400: hsl(225, 48%, 70%);
- --neutral-500: hsl(225, 48%, 60%);
- --neutral-600: hsl(225, 48%, 40%);
- --neutral-700: hsl(225, 48%, 30%);
- --neutral-800: hsl(225, 48%, 20%);
- --neutral-900: hsl(225, 48%, 10%);
- --primary-100: hsl(260, 100%, 95%);
- --primary-300: hsl(260, 100%, 80%);
- --primary-500: hsl(260, 100%, 60%);
- --primary-700: hsl(260, 100%, 40%);
- --primary-900: hsl(260, 100%, 20%);
- --secondary-100: hsl(182, 100%, 90%);
- --secondary-300: hsl(182, 100%, 70%);
- --secondary-500: hsl(182, 100%, 40%);
- --secondary-700: hsl(182, 100%, 20%);
- --secondary-900: hsl(182, 100%, 10%);
- --accent-100: hsl(20, 99%, 90%);
- --accent-300: hsl(20, 99%, 75%);
- --accent-500: hsl(20, 99%, 60%);
- --accent-700: hsl(20, 99%, 40%);
- --accent-900: hsl(20, 99%, 20%);
- --warning-100: hsl(0, 100%, 95%);
- --warning-300: hsl(0, 100%, 80%);
- --warning-500: hsl(0, 100%, 60%);
- --warning-700: hsl(0, 100%, 40%);
- --warning-900: hsl(0, 100%, 20%);
-
- --typography-family-default: Helvetica;
- --typography-weight-base: 500;
- --typography-size-sm: 14px;
- --typography-size-base: 16px;
- --typography-size-lg: 24p;
-
- --color-component-primary-background: var(--primary-500);
- --color-component-primary-text: var(--primary-100);
- --color-container-primary-background: var(--primary-100);
- --color-container-primary-text: var(--primary-900);
-
- --color-component-secondary-background: var(--secondary-700);
- --color-component-secondary-text: var(--secondary-100);
- --color-container-secondary-background: var(--secondary-100);
- --color-container-secondary-text: var(--secondary-900);
-
- --color-component-neutral-background: var(--neutral-700);
- --color-component-neutral-text: var(--neutral-200);
- --color-container-neutral-background: var(--neutral-200);
- --color-container-neutral-text: var(--neutral-900);
-
- --color-component-accent-background: var(--accent-700);
- --color-component-accent-text: var(--accent-100);
- --color-container-accent-background: var(--accent-100);
- --color-container-accent-text: var(--accent-900);
-
- --color-component-warning-background: var(--warning-700);
- --color-component-warning-text: var(--warning-100);
- --color-container-warning-background: var(--warning-100);
- --color-container-warning-text: var(--warning-900);
-
- --color-surface-background: var(--neutral-900);
- --color-surface-text: var(--neutral-100);
-
- --color-surface-raised1-background: var(--neutral-800);
- --color-surface-raised1-text: var(--neutral-100);
- --color-surface-raised2-background: var(--neutral-700);
- --color-surface-raised2-text: var(--neutral-100);
- --color-surface-raised3-background: var(--neutral-600);
- --color-surface-raised3-text: var(--neutral-100);
- --color-surface-raised4-background: var(--neutral-500);
- --color-surface-raised4-text: var(--neutral-900);
- --color-surface-raised5-background: var(--neutral-400);
- --color-surface-raised5-text: var(--neutral-900);
-
- --font-family: "Fira Sans", Helvetica, sans-serif;
- --typography-body: 16px var(--font-family);
- --typography-bold: 600 16px var(--font-family);
- --typography-heading: 24px var(--font-family);
-
- --border-default: 2px solid var(--neutral-600);
- --border-transparent: 2px solid transparent;
- --border-active: 2px solid var(--primary-500);
- --border-hover: 2px solid var(--accent-300);
-
- .panel {
- position: relative;
- border: 0px;
- border-radius: 0px;
- padding-left: var(--spacing-md);
- padding-right: var(--spacing-md);
- padding-bottom: var(--spacing-md);
- margin: var(--spacing-md);
- background-color: rgba(0, 0, 0, 0);
- }
-
- .panel__inner::before {
- content: "";
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100%;
- height: 100%;
- clip-path: polygon(
- 0 4px,
- 4px 0,
-
- 70% 0,
- calc(70% + 8px) 8px,
- calc(100% - 4px) 8px,
- 100% 12px,
-
- 100% calc(100% - 8px),
- calc(100% - 8px) 100%,
-
- 8px 100%,
- 2px calc(100% - 6px),
- 2px 75%,
- 0 calc(75% - 2px)
- );
- background-color: var(--secondary-500);
- transition: background-color 300ms ease-in-out;
- }
- .panel__inner:hover::before {
- background-color: var(--accent-300);
- }
- .panel__inner::after {
- content: "";
- position: absolute;
- left: 0%;
- top: 0%;
- width: 100%;
- height: 100%;
- background: var(--color-surface-raised1-background);
- box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
- clip-path: polygon(
- 2px 6px,
- 8px 0px,
- 30px 0px,
- 36px 6px,
-
- calc(70% + 6px) 6px,
- calc(70% + 10px) 10px,
- calc(100% - 6px) 10px,
- calc(100% - 2px) 14px,
-
- calc(100% - 2px) calc(100% - 6px),
- calc(100% - 6px) calc(100% - 2px),
-
- 10px calc(100% - 2px),
- 4px calc(100% - 8px),
- 4px calc(75% + 2px),
- 2px 75%
- );
- }
-
- .panel__content {
- position: relative;
- z-index: 1;
- }
-
- .list__item {
- border-radius: var(--radius-sm);
- }
-
- .tabs_horizontal {
- background-color: var(--color-surface-raised1-background);
- gap: var(--space-sm);
- }
-
- .tabs__item {
- background-color: var(--color-component-secondary-background);
- color: var(--color-component-secondary-text);
- }
-
- .tabs__item_selected {
- background-color: var(--color-component-primary-background);
- color: var(--color-component-primary-text);
- }
-
- .button_primary-destructive {
- background-color: var(--color-component-warning-background);
- color: var(--color-component-warning-text);
- }
- .button_primary {
- background-color: var(--color-component-primary-background);
- color: var(--color-component-primary-text);
- }
-
- .button_secondary-destructive {
- background-color: var(--warning-900);
- color: var(--warning-100);
- }
-
- .button_secondary {
- background-color: var(--color-component-secondary-background);
- color: var(--color-component-secondary-text);
- }
-
- .sidebar {
- > .button {
- background-color: var(--accent-700);
- color: var(--accent-100);
- border-radius: var(--radius-sm);
- }
- }
-
- .range__step_filled {
- background-color: var(--primary-500);
- }
-
- .range__step_unfilled {
- background-color: var(--neutral-100);
- }
-
- .range__step_unavailable {
- background-color: var(--neutral-900);
- }
-
- .range__step_hover {
- background-color: var(--accent-300);
- }
-}
-
-
diff --git a/visions/ui/static/style-default.css b/visions/ui/static/style-default.css
index 29cfb72b..14ded60a 100644
--- a/visions/ui/static/style-default.css
+++ b/visions/ui/static/style-default.css
@@ -1,3 +1,4 @@
+
.game-information {
.panel {
padding: var(--spacing-lg);