Continue working on v2 of the PC sheet (w/ Material design now)
This commit is contained in:
Oliver-Akins
parent
6d2d02b077
commit
753d72b4e0
7 changed files with 249 additions and 23 deletions
6
styles/mixins/_material.scss
Normal file
6
styles/mixins/_material.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@mixin elevate($height) {
|
||||
background-color: var(--elevation-#{$height}dp);
|
||||
-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
|
@ -1,7 +1,28 @@
|
|||
$bg-base: #202b38;
|
||||
$t: transparent;
|
||||
|
||||
$background: #0a0a0a;
|
||||
$surface: #121212;
|
||||
$primary: $t;
|
||||
$secondary: $t;
|
||||
$on-background: $t;
|
||||
$on-surface: $t;
|
||||
$on-primary: $t;
|
||||
$on-secondary: $t;
|
||||
|
||||
.actor--pc {
|
||||
--sheet-bg: #{$bg-base};
|
||||
--nav-bg: var(--panel-bg);
|
||||
--panel-bg: rgba(255, 255, 255, 0.05);
|
||||
--sheet-bg: #{$background};
|
||||
--nav-bg: #{$surface};
|
||||
--panel-bg: #{$surface};
|
||||
|
||||
/* Elevation backgrounds to following Material design */
|
||||
--elevation-0dp: #{$surface};
|
||||
--elevation-1dp: color-mix(in lab, #{$surface}, white 5%);
|
||||
--elevation-2dp: color-mix(in lab, #{$surface}, white 7%);
|
||||
--elevation-3dp: color-mix(in lab, #{$surface}, white 8%);
|
||||
--elevation-4dp: color-mix(in lab, #{$surface}, white 9%);
|
||||
--elevation-6dp: color-mix(in lab, #{$surface}, white 11%);
|
||||
--elevation-8dp: color-mix(in lab, #{$surface}, white 12%);
|
||||
--elevation-12dp: color-mix(in lab, #{$surface}, white 14%);
|
||||
--elevation-16dp: color-mix(in lab, #{$surface}, white 15%);
|
||||
--elevation-24dp: color-mix(in lab, #{$surface}, white 16%);
|
||||
}
|
||||
|
|
|
|||
167
styles/sheets/actor/char-sheet/themes/material-design.scss
Normal file
167
styles/sheets/actor/char-sheet/themes/material-design.scss
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
:root {
|
||||
--md-source: #005500;
|
||||
/* primary */
|
||||
--md-ref-palette-primary0: #000000;
|
||||
--md-ref-palette-primary10: #002200;
|
||||
--md-ref-palette-primary20: #003a00;
|
||||
--md-ref-palette-primary25: #004600;
|
||||
--md-ref-palette-primary30: #005300;
|
||||
--md-ref-palette-primary35: #12600b;
|
||||
--md-ref-palette-primary40: #226d19;
|
||||
--md-ref-palette-primary50: #3d8730;
|
||||
--md-ref-palette-primary60: #56a248;
|
||||
--md-ref-palette-primary70: #70bd5f;
|
||||
--md-ref-palette-primary80: #8bd978;
|
||||
--md-ref-palette-primary90: #a6f691;
|
||||
--md-ref-palette-primary95: #caffb9;
|
||||
--md-ref-palette-primary98: #edffe1;
|
||||
--md-ref-palette-primary99: #f7ffee;
|
||||
--md-ref-palette-primary100: #ffffff;
|
||||
/* secondary */
|
||||
--md-ref-palette-secondary0: #000000;
|
||||
--md-ref-palette-secondary10: #380038;
|
||||
--md-ref-palette-secondary20: #5b005b;
|
||||
--md-ref-palette-secondary25: #6c056c;
|
||||
--md-ref-palette-secondary30: #7a1979;
|
||||
--md-ref-palette-secondary35: #892886;
|
||||
--md-ref-palette-secondary40: #973693;
|
||||
--md-ref-palette-secondary50: #b450ae;
|
||||
--md-ref-palette-secondary60: #d26ac9;
|
||||
--md-ref-palette-secondary70: #f084e6;
|
||||
--md-ref-palette-secondary80: #ffaaf3;
|
||||
--md-ref-palette-secondary90: #ffd7f5;
|
||||
--md-ref-palette-secondary95: #ffebf8;
|
||||
--md-ref-palette-secondary98: #fff7f9;
|
||||
--md-ref-palette-secondary99: #fffbff;
|
||||
--md-ref-palette-secondary100: #ffffff;
|
||||
/* tertiary */
|
||||
--md-ref-palette-tertiary0: #000000;
|
||||
--md-ref-palette-tertiary10: #002022;
|
||||
--md-ref-palette-tertiary20: #003739;
|
||||
--md-ref-palette-tertiary25: #104245;
|
||||
--md-ref-palette-tertiary30: #1e4d50;
|
||||
--md-ref-palette-tertiary35: #2b595c;
|
||||
--md-ref-palette-tertiary40: #386568;
|
||||
--md-ref-palette-tertiary50: #517f82;
|
||||
--md-ref-palette-tertiary60: #6b989c;
|
||||
--md-ref-palette-tertiary70: #85b3b6;
|
||||
--md-ref-palette-tertiary80: #a0cfd2;
|
||||
--md-ref-palette-tertiary90: #bcebee;
|
||||
--md-ref-palette-tertiary95: #caf9fd;
|
||||
--md-ref-palette-tertiary98: #e7feff;
|
||||
--md-ref-palette-tertiary99: #f3ffff;
|
||||
--md-ref-palette-tertiary100: #ffffff;
|
||||
/* neutral */
|
||||
--md-ref-palette-neutral0: #000000;
|
||||
--md-ref-palette-neutral10: #1a1c18;
|
||||
--md-ref-palette-neutral20: #2f312d;
|
||||
--md-ref-palette-neutral25: #3a3c38;
|
||||
--md-ref-palette-neutral30: #454743;
|
||||
--md-ref-palette-neutral35: #51534e;
|
||||
--md-ref-palette-neutral40: #5d5f5a;
|
||||
--md-ref-palette-neutral50: #767872;
|
||||
--md-ref-palette-neutral60: #90918c;
|
||||
--md-ref-palette-neutral70: #abaca6;
|
||||
--md-ref-palette-neutral80: #c6c7c1;
|
||||
--md-ref-palette-neutral90: #e2e3dc;
|
||||
--md-ref-palette-neutral95: #f1f1eb;
|
||||
--md-ref-palette-neutral98: #f9faf3;
|
||||
--md-ref-palette-neutral99: #fcfdf6;
|
||||
--md-ref-palette-neutral100: #ffffff;
|
||||
/* neutral-variant */
|
||||
--md-ref-palette-neutral-variant0: #000000;
|
||||
--md-ref-palette-neutral-variant10: #181d15;
|
||||
--md-ref-palette-neutral-variant20: #2c3229;
|
||||
--md-ref-palette-neutral-variant25: #373d34;
|
||||
--md-ref-palette-neutral-variant30: #43483f;
|
||||
--md-ref-palette-neutral-variant35: #4e544a;
|
||||
--md-ref-palette-neutral-variant40: #5a6056;
|
||||
--md-ref-palette-neutral-variant50: #73796e;
|
||||
--md-ref-palette-neutral-variant60: #8d9387;
|
||||
--md-ref-palette-neutral-variant70: #a7ada1;
|
||||
--md-ref-palette-neutral-variant80: #c3c8bc;
|
||||
--md-ref-palette-neutral-variant90: #dfe4d7;
|
||||
--md-ref-palette-neutral-variant95: #edf3e5;
|
||||
--md-ref-palette-neutral-variant98: #f6fbee;
|
||||
--md-ref-palette-neutral-variant99: #f9fef1;
|
||||
--md-ref-palette-neutral-variant100: #ffffff;
|
||||
/* error */
|
||||
--md-ref-palette-error0: #000000;
|
||||
--md-ref-palette-error10: #410002;
|
||||
--md-ref-palette-error20: #690005;
|
||||
--md-ref-palette-error25: #7e0007;
|
||||
--md-ref-palette-error30: #93000a;
|
||||
--md-ref-palette-error35: #a80710;
|
||||
--md-ref-palette-error40: #ba1a1a;
|
||||
--md-ref-palette-error50: #de3730;
|
||||
--md-ref-palette-error60: #ff5449;
|
||||
--md-ref-palette-error70: #ff897d;
|
||||
--md-ref-palette-error80: #ffb4ab;
|
||||
--md-ref-palette-error90: #ffdad6;
|
||||
--md-ref-palette-error95: #ffedea;
|
||||
--md-ref-palette-error98: #fff8f7;
|
||||
--md-ref-palette-error99: #fffbff;
|
||||
--md-ref-palette-error100: #ffffff;
|
||||
/* light */
|
||||
--md-sys-color-primary-light: #226d19;
|
||||
--md-sys-color-on-primary-light: #ffffff;
|
||||
--md-sys-color-primary-container-light: #a6f691;
|
||||
--md-sys-color-on-primary-container-light: #002200;
|
||||
--md-sys-color-secondary-light: #973693;
|
||||
--md-sys-color-on-secondary-light: #ffffff;
|
||||
--md-sys-color-secondary-container-light: #ffd7f5;
|
||||
--md-sys-color-on-secondary-container-light: #380038;
|
||||
--md-sys-color-tertiary-light: #386568;
|
||||
--md-sys-color-on-tertiary-light: #ffffff;
|
||||
--md-sys-color-tertiary-container-light: #bcebee;
|
||||
--md-sys-color-on-tertiary-container-light: #002022;
|
||||
--md-sys-color-error-light: #ba1a1a;
|
||||
--md-sys-color-error-container-light: #ffdad6;
|
||||
--md-sys-color-on-error-light: #ffffff;
|
||||
--md-sys-color-on-error-container-light: #410002;
|
||||
--md-sys-color-background-light: #fcfdf6;
|
||||
--md-sys-color-on-background-light: #1a1c18;
|
||||
--md-sys-color-surface-light: #fcfdf6;
|
||||
--md-sys-color-on-surface-light: #1a1c18;
|
||||
--md-sys-color-surface-variant-light: #dfe4d7;
|
||||
--md-sys-color-on-surface-variant-light: #43483f;
|
||||
--md-sys-color-outline-light: #73796e;
|
||||
--md-sys-color-inverse-on-surface-light: #f1f1eb;
|
||||
--md-sys-color-inverse-surface-light: #2f312d;
|
||||
--md-sys-color-inverse-primary-light: #8bd978;
|
||||
--md-sys-color-shadow-light: #000000;
|
||||
--md-sys-color-surface-tint-light: #226d19;
|
||||
--md-sys-color-outline-variant-light: #c3c8bc;
|
||||
--md-sys-color-scrim-light: #000000;
|
||||
/* dark */
|
||||
--md-sys-color-primary-dark: #8bd978;
|
||||
--md-sys-color-on-primary-dark: #003a00;
|
||||
--md-sys-color-primary-container-dark: #005300;
|
||||
--md-sys-color-on-primary-container-dark: #a6f691;
|
||||
--md-sys-color-secondary-dark: #ffaaf3;
|
||||
--md-sys-color-on-secondary-dark: #5b005b;
|
||||
--md-sys-color-secondary-container-dark: #7a1979;
|
||||
--md-sys-color-on-secondary-container-dark: #ffd7f5;
|
||||
--md-sys-color-tertiary-dark: #a0cfd2;
|
||||
--md-sys-color-on-tertiary-dark: #003739;
|
||||
--md-sys-color-tertiary-container-dark: #1e4d50;
|
||||
--md-sys-color-on-tertiary-container-dark: #bcebee;
|
||||
--md-sys-color-error-dark: #ffb4ab;
|
||||
--md-sys-color-error-container-dark: #93000a;
|
||||
--md-sys-color-on-error-dark: #690005;
|
||||
--md-sys-color-on-error-container-dark: #ffdad6;
|
||||
--md-sys-color-background-dark: #1a1c18;
|
||||
--md-sys-color-on-background-dark: #e2e3dc;
|
||||
--md-sys-color-surface-dark: #1a1c18;
|
||||
--md-sys-color-on-surface-dark: #e2e3dc;
|
||||
--md-sys-color-surface-variant-dark: #43483f;
|
||||
--md-sys-color-on-surface-variant-dark: #c3c8bc;
|
||||
--md-sys-color-outline-dark: #8d9387;
|
||||
--md-sys-color-inverse-on-surface-dark: #1a1c18;
|
||||
--md-sys-color-inverse-surface-dark: #e2e3dc;
|
||||
--md-sys-color-inverse-primary-dark: #226d19;
|
||||
--md-sys-color-shadow-dark: #000000;
|
||||
--md-sys-color-surface-tint-dark: #8bd978;
|
||||
--md-sys-color-outline-variant-dark: #43483f;
|
||||
--md-sys-color-scrim-dark: #000000;
|
||||
}
|
||||
|
|
@ -1,11 +1,26 @@
|
|||
@use "./themes/dark.scss";
|
||||
@use "../../../mixins/material" as material;
|
||||
|
||||
.dotdungeon .actor--pc {
|
||||
background: var(--sheet-bg);
|
||||
background-color: var(--sheet-bg);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr minmax(min-content, 50px);
|
||||
|
||||
color: white;
|
||||
|
||||
.panel-0dp { @include material.elevate(0); margin: 1rem; padding: 10px; }
|
||||
.panel-1dp { @include material.elevate(1); margin: 1rem; padding: 10px; }
|
||||
.panel-2dp { @include material.elevate(2); margin: 1rem; padding: 10px; }
|
||||
.panel-3dp { @include material.elevate(3); margin: 1rem; padding: 10px; }
|
||||
.panel-4dp { @include material.elevate(4); margin: 1rem; padding: 10px; }
|
||||
.panel-6dp { @include material.elevate(6); margin: 1rem; padding: 10px; }
|
||||
.panel-8dp { @include material.elevate(8); margin: 1rem; padding: 10px; }
|
||||
.panel-12dp { @include material.elevate(12); margin: 1rem; padding: 10px; }
|
||||
.panel-16dp { @include material.elevate(16); margin: 1rem; padding: 10px; }
|
||||
.panel-24dp { @include material.elevate(24); margin: 1rem; padding: 10px; }
|
||||
|
||||
nav {
|
||||
background: var(--panel-bg);
|
||||
background-color: var(--nav-bg);
|
||||
@include material.elevate(02)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@
|
|||
|
||||
@include bp-m {
|
||||
.dotdungeon {
|
||||
.actor--pc {
|
||||
.actor--pc-mvp {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(15, min-content);
|
||||
grid-template-areas:
|
||||
|
|
@ -311,7 +311,7 @@
|
|||
|
||||
@include bp-s {
|
||||
.dotdungeon {
|
||||
.actor--pc {
|
||||
.actor--pc-mvp {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(12, min-content);
|
||||
grid-template-areas:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue