From f56c665b0cc9c9e872dc749d31650fc3296f97de Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 20 Feb 2023 23:41:45 +0100 Subject: [PATCH] - continued complete redesign - restyled all elements are now except footer --- TODO.md | 9 +- package.json | 3 +- src/css/custom.scss | 250 ++++++++++++++++++++++++++++---------------- src/index.html | 28 ++--- src/js/sr2ini.js | 28 ++--- 5 files changed, 193 insertions(+), 125 deletions(-) diff --git a/TODO.md b/TODO.md index 91a09e5..dabf723 100644 --- a/TODO.md +++ b/TODO.md @@ -25,9 +25,9 @@ - d.h. die beiden linken und die beiden rechten Ecken einer Tablerow müssen jeweils die gleiche X-Position haben - x alles, was vom damage monitor über den unteren Tabellenrand rüberragt, wird abgeschnitten - musste den clip-path von tr und td auf none setzen +- x jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal. +- x wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem -- jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal. -- wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem - Output vom HTML Validator: - img elements müssen alt attributes haben - The form attribute must refer to a form element. (bei den Input Elementen im combatant-modal) -> muss nachsehen, was ich dann genau da eintragen muss @@ -57,11 +57,14 @@ - noun project: Icons by Febrian Hidayat from Noun Project - iconfinder: CC4.0 - icons8.com: +- deployment: dist/* soll direkt auf hermes hochgeladen werden + - warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? + - HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus + - bootstrap, jquery etc lokal vorhalten? - Im modal, wenn ich die wound penalties anzeige, die Fälle KO und Tod gesondert behandeln - im modal soll man die damage levels einstellen/verändern können - "clone this combatant" button: - Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind - Design cyberpunkig machen - docstrings -- color converter für CSS filter(): https://isotropic.co/tool/hex-color-to-css-filter/ \ No newline at end of file diff --git a/package.json b/package.json index b14f4e7..730a04f 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,13 @@ "parcel": "^2.8.3", "parcel-reporter-static-files-copy": "^1.5.0" }, - "publicUrl": "./", "dependencies": { }, "staticFiles": { "staticPath": "src/img" }, "scripts": { - "start": "npx parcel serve src/index.html --public-url ./ --dist-dir dist", + "start": "npx parcel serve src/index.html --public-url / --dist-dir dist", "prebuild": "rm -rf dist/", "build": "npx parcel build --public-url ./", "test": "echo \"Error: no test specified\" && exit 1" diff --git a/src/css/custom.scss b/src/css/custom.scss index 90fcdf3..b22cacb 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -9,15 +9,13 @@ $sr2-fg: deeppink; --aug-tr: 5px; --aug-r: 5px; --aug-br: 5px; + --aug-b: 5px; } @mixin border() { --aug-border-bg: cyan; // "sr2-border doesn't work" --aug-border-opacity: .5; - --aug-border-left: 2px; - --aug-border-right: 0px; - --aug-border-top: 2px; - --aug-border-bottom: 0px; + --aug-border-all: 2px; } @mixin inlay() { @@ -27,16 +25,20 @@ $sr2-fg: deeppink; @mixin button() { border: 0; - border-radius: none;; - background: radial-gradient(circle at center, gold, goldenrod); - box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod; + border-radius: 1px; + padding-right: 2px; + padding-left: 2px; + + border: 1px solid cyan; + background: transparent; + box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan; } html, body { margin: 0; height: 100%; -// overflow-x: hidden; + user-select: none; } body { @@ -49,20 +51,43 @@ body { } -header.navbar { - @include border; - --aug-br: 10px; - --aug-tl: 10px; - --aug-inlay-bg: rgba(0, 0, 0, .3); +:focus-visible { + outline: none; + border: 2px solid cyan !important; + box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important; } -span.navbar-brand { -// position: absolute; -// right: 110px; -// color: $sr2-fg; -// text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; +header.navbar { + margin-top: 4px; + padding-right: .6rem;; + @include border; + @include inlay; + --aug-br: 7px; + --aug-tr: 7px; + --aug-bl: 7px; + --aug-tl: 7px; + --aug-b: 7px; + --aug-l: 7px; + --aug-r: 7px; + --aug-inlay-bg: rgba(0, 0, 0, .75); + + span.navbar-brand { + color: cyan; + text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px; + } + + button { + @include button; + margin-right: 3px; + margin-left: 3px; + + > img { + filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%); + } + } } + div.container { position: relative; } @@ -74,6 +99,8 @@ div.container { @include aug; @include border; @include inlay; + --aug-border-right: 0px; + --aug-border-bottom: 0px; } .combatant-row { @@ -85,6 +112,12 @@ div.container { } .th-dice-and-rea { min-width: 3.75rem; + + > img { + filter: invert(72%) sepia(100%) saturate(778%) hue-rotate(119deg) brightness(102%) contrast(102%); + width: 16px; + height: 16px; + } } .th-actions { min-width: 6.5rem; @@ -95,6 +128,8 @@ div.container { @include aug; @include border; @include inlay; + --aug-border-right: 0px; + --aug-border-bottom: 0px; background: none !important; // text-shadow: 2px 2px 3px black; } @@ -130,47 +165,18 @@ div.container { > tbody > tr > td > button, > tbody > tr > td > div > button, { - padding: 0px; - padding-right: 2px; - padding-left: 2px; - @include button; + padding: 0px; + width: 24px; + height: 24px; img { - width: 20px; - height: 20px; -// filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%) drop-shadow(1 1 1px cyan) drop-shadow(2 2 2px darkcyan); - // animation: glitch 1s ease infinite; + position: relative; + bottom: 3px; + width: 16px; + height: 16px; + filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%); } - - /* @keyframes glitch { - // twitch - 0%, 33% { - transform: scale(.97, 1.01); - } - 18%, 60% { - transform: scaleX(.98), - } - 48%, 76% { - transform: scaleY(1.02); - } - 68%, 100% { - transform: scale(1, .96); - } - - // skew - 20%, 75% { - transform: skew(2deg); - } - 12%,80%{ - transform: skew(1.4deg); - } - } - - &:nth-of-type(2) img { - animation-direction: reverse; - } - */ } } @@ -229,25 +235,21 @@ div.container { right: 10px; @include aug; - + @include border; --aug-inlay-bg: rgba(0, 0, 0, .5); - - --aug-border-all: 2px; - --aug-border-bg: cyan; // "sr2-border doesn't work" --aug-border-opacity: .75; padding-top: 10px; padding-bottom: 10px; button { - font-size: smaller; width: 24px; height: 24px; border: none; margin: 0px 2px; - border-radius: none; + border-radius: 0; } .damage-stun { @@ -278,8 +280,6 @@ div.container { height: 28px; margin-top: 4px; @include button; -// background: radial-gradient(circle at center, gold, goldenrod); -// box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod; } td button img { @@ -287,35 +287,103 @@ div.container { top: -2px; } -} - -/* -.damage-monitor.d-none { - opacity: 0; - animation-name: dmg-mon; - animation-duration: 1s; - animation-direction: reverse; -} - -.damage-monitor:not(.d-none) { - opacity: 1; - animation-name: dmg-mon; - animation-duration: 1s; - animation-direction: normal; -} - -@keyframes dmg-mon { - from { - opacity: 0; +/* &.d-none { + transform: translateY(100%); } - 1% { - opacity: 0; + + &:not(.d-none) { + transform: translateY(0);; + transition: transform .4s; } - 100% { - opacity: 1; - } -} */ +} + + +.sr2-modal { + @include border; + @include aug; + color: cyan; + pointer-events: auto; + + .modal-header { + text-transform: uppercase; + border-bottom: none; + @include inlay; + @include border; + --aug-inlay-bottom: 0; + + button { + width: 30px; + } + } + + .modal-body { + @include inlay; + @include border; + --aug-inlay-y: 0; + } + + .modal-footer { + border-top: none; + @include inlay; + @include border; + --aug-inlay-top: 0; + + button { + width: 4rem; + } + } + + input { + @include button; + background-color: transparent; + color: deeppink; + user-select: text; + + &::selection { + color: black; + background-color: deeppink; + } + + &:focus { + background-color: transparent; + color: deeppink; + } + + &[type=number]::-webkit-inner-spin-button, + &[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + &[type=number] { + -moz-appearance: textfield; + appearance: textfield; + margin: 0; + } + + &:invalid { + border: 1px solid deeppink; + box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon; + } + + } + + button { + @include button; + color: deeppink; + } + + span.input-group-text { + color: deeppink; + background-color: transparent; + border: none; + } + +} + + + footer { z-index: -10 !important; @@ -329,10 +397,6 @@ footer { } } -input:invalid { - border: 2px solid red; -} - /* th span{ diff --git a/src/index.html b/src/index.html index 3db739f..fa302b4 100644 --- a/src/index.html +++ b/src/index.html @@ -27,7 +27,7 @@
-
+
SR2 Initiative Tracker