Use the updated CSS bundle. Upgrade to glimmer-yew 0.1.2 for modal styling.
This commit is contained in:
4
Cargo.lock
generated
4
Cargo.lock
generated
@@ -1690,7 +1690,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "glimmer-yew"
|
||||
version = "0.1.1"
|
||||
version = "0.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "eea52b8fb347d8b551804998074078cb6c6fd2d5a8cd4a25a8daa95df97e7032"
|
||||
dependencies = [
|
||||
"derive_builder",
|
||||
"gloo-console 0.4.0",
|
||||
|
||||
@@ -6,8 +6,8 @@ edition = "2024"
|
||||
|
||||
[dependencies]
|
||||
async-std = { workspace = true }
|
||||
# glimmer-yew = { workspace = true }
|
||||
glimmer-yew = { path = "../../../../glimmer/modal/yew" }
|
||||
glimmer-yew = { workspace = true }
|
||||
# glimmer-yew = { path = "../../../../glimmer/modal/yew" }
|
||||
glimmer-yew-deprecated = { path = "../../glimmer/yew" }
|
||||
gloo-console = { workspace = true }
|
||||
gloo-net = { workspace = true }
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Visions Client Demo</title>
|
||||
<link data-trunk href="static/glimmer-style-base.css" rel="css" type="text/css"></link>
|
||||
<link data-trunk href="static/glimmer-style-default.css" rel="css" type="text/css"></link>
|
||||
<link data-trunk href="static/glimmer-style-neon.css" rel="css" type="text/css"></link>
|
||||
<link data-trunk href="static/glimmer-style-bundle-0.1.2.css" rel="css" type="text/css"></link>
|
||||
<link data-trunk href="static/style-default.css" rel="css" type="text/css"></link>
|
||||
</head>
|
||||
<body data-theme="neon"></body>
|
||||
|
||||
@@ -60,7 +60,7 @@ pub fn GameListComponent(
|
||||
.collect::<Html>();
|
||||
|
||||
html! {
|
||||
<div>
|
||||
<div class="games-list">
|
||||
{games}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
730
visions/ui/static/glimmer-style-bundle-0.1.2.css
Normal file
730
visions/ui/static/glimmer-style-bundle-0.1.2.css
Normal file
@@ -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 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
.game-information {
|
||||
.panel {
|
||||
padding: var(--spacing-lg);
|
||||
|
||||
Reference in New Issue
Block a user