feat: started with bonus hp feature
This commit is contained in:
Itsigo
@@ -1,7 +1,5 @@
|
||||
@use "node_modules/@picocss/pico/scss/pico" with (
|
||||
$theme-color: "cyan",
|
||||
$modules: (
|
||||
"themes/default": false,
|
||||
@use "node_modules/@picocss/pico/scss/pico" with ($theme-color: "cyan",
|
||||
$modules: ("themes/default": false,
|
||||
|
||||
// Layout
|
||||
"layout/document": true,
|
||||
@@ -43,36 +41,34 @@
|
||||
|
||||
// Utilities
|
||||
"utilities/accessibility": true,
|
||||
"utilities/reduce-motion": true
|
||||
)
|
||||
);
|
||||
"utilities/reduce-motion": true));
|
||||
|
||||
@use "node_modules/@picocss/pico/scss/colors/index" as *;
|
||||
|
||||
@use "custom/styles";
|
||||
@use "custom/schemes";
|
||||
|
||||
:root{
|
||||
// // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
|
||||
// --font-size: 1.2rem;
|
||||
// --border-radius: 5px;
|
||||
// --focus-boxshadow: 0.2rem;
|
||||
:root {
|
||||
// // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
|
||||
// --font-size: 1.2rem;
|
||||
// --border-radius: 5px;
|
||||
// --focus-boxshadow: 0.2rem;
|
||||
|
||||
// --pico-primary: hsl(204, 85%, 36%);
|
||||
// --pico-primary: hsl(204, 85%, 36%);
|
||||
|
||||
// --focus: hsl(204, 85%, 50%);
|
||||
// --focus: hsl(204, 85%, 50%);
|
||||
|
||||
// --grey0: hsl(0, 0%, 0%);
|
||||
// --grey1: hsl(0, 0%, 10%);
|
||||
// --grey2: hsl(0, 0%, 20%);
|
||||
// --grey3: hsl(0, 0%, 30%);
|
||||
// --grey4: hsl(0, 0%, 40%);
|
||||
// --grey5: hsl(0, 0%, 50%);
|
||||
// --grey6: hsl(0, 0%, 60%);
|
||||
// --grey7: hsl(0, 0%, 70%);
|
||||
// --grey8: hsl(0, 0%, 80%);
|
||||
// --grey9: hsl(0, 0%, 90%);
|
||||
// --grey10: hsl(0, 0%, 100%);
|
||||
// --grey0: hsl(0, 0%, 0%);
|
||||
// --grey1: hsl(0, 0%, 10%);
|
||||
// --grey2: hsl(0, 0%, 20%);
|
||||
// --grey3: hsl(0, 0%, 30%);
|
||||
// --grey4: hsl(0, 0%, 40%);
|
||||
// --grey5: hsl(0, 0%, 50%);
|
||||
// --grey6: hsl(0, 0%, 60%);
|
||||
// --grey7: hsl(0, 0%, 70%);
|
||||
// --grey8: hsl(0, 0%, 80%);
|
||||
// --grey9: hsl(0, 0%, 90%);
|
||||
// --grey10: hsl(0, 0%, 100%);
|
||||
|
||||
// --color-ok: #{$green-500};
|
||||
// --color-warning: #{$pumpkin-300};
|
||||
@@ -109,11 +105,11 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
.text-center{
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right{
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -145,43 +141,43 @@ a {
|
||||
}
|
||||
|
||||
// progress
|
||||
progress{
|
||||
progress {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
// stat container
|
||||
.stat-container{
|
||||
.stat-container {
|
||||
display: flex;
|
||||
margin-bottom: var(--pico-spacing);
|
||||
|
||||
.start{
|
||||
.start {
|
||||
justify-content: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.middle{
|
||||
.middle {
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.end{
|
||||
.end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.lbl-offset{
|
||||
.lbl-offset {
|
||||
display: flex;
|
||||
margin-bottom: calc(var(--pico-spacing) * 0.4);
|
||||
|
||||
button{
|
||||
button {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.progress{
|
||||
.progress {
|
||||
border-radius: var(--pico-border-radius);
|
||||
color: var(--pico-contrast);
|
||||
height: 1.25rem;
|
||||
@@ -193,45 +189,63 @@ progress{
|
||||
margin-bottom: calc(var(--pico-spacing) * .5);
|
||||
|
||||
|
||||
.progress-label{
|
||||
.progress-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
div{
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
border-radius: var(--pico-border-radius);
|
||||
background: var(--pico-primary);
|
||||
position: relative;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
align-self: start;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
&.mana{
|
||||
&.mana {
|
||||
background-color: var(--color-mana);
|
||||
animation-name: manaAnimation;
|
||||
|
||||
@keyframes manaAnimation {
|
||||
0% {width: var(--mana-from-width);}
|
||||
100% {width: var(--mana-to-width);}
|
||||
0% {
|
||||
width: var(--mana-from-width);
|
||||
}
|
||||
|
||||
100% {
|
||||
width: var(--mana-to-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hp{
|
||||
|
||||
&.hp {
|
||||
background-color: var(--color-hp);
|
||||
animation-name: hpAnimation;
|
||||
|
||||
@keyframes hpAnimation {
|
||||
0% {width: var(--hp-from-width);}
|
||||
100% {width: var(--hp-to-width);}
|
||||
0% {
|
||||
width: var(--hp-from-width);
|
||||
}
|
||||
|
||||
100% {
|
||||
width: var(--hp-to-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bonushp {
|
||||
background-color: orange;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.error-helper{
|
||||
.error-helper {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
@@ -239,32 +253,36 @@ progress{
|
||||
// utility
|
||||
// margins
|
||||
|
||||
.mb-0{
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-1{
|
||||
.mb-1 {
|
||||
margin-bottom: calc(var(--pico-spacing) * .25);
|
||||
}
|
||||
|
||||
.mb-2{
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--pico-spacing) * .50);
|
||||
}
|
||||
|
||||
.mb-3{
|
||||
.mb-3 {
|
||||
margin-bottom: calc(var(--pico-spacing) * .75);
|
||||
}
|
||||
|
||||
.mb-4{
|
||||
.mb-4 {
|
||||
margin-bottom: var(--pico-spacing);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loginContainer {
|
||||
height: 100vh;
|
||||
max-width: 510px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
max-width: 510px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// form elements
|
||||
|
||||
Reference in New Issue
Block a user