uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update sheet for 100% height and make editor functional

Browse Source
This commit is contained in:
Mandar
2020-12-12 20:43:46 +01:00
parent c9c1b4f206
commit eb76d38aa1
10 changed files with 170 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
system/styles/scss/global.scss
View File

@@ -12,6 +12,7 @@ body {
position: relative;
background: url("../assets/imgs/bgL5R.webp") no-repeat;
background-size: cover;
scrollbar-width: thin;
}
.window-resizable-handle {
z-index: 2;
@@ -50,6 +51,12 @@ li {
padding: 0;
}
// Fieldset
fieldset {
flex: 1;
display: flex;
}
// inputs
input[type="text"],
input[type="number"],
@@ -62,9 +69,24 @@ input[type="time"] {
color: $l5r5e-bold;
}
// Editors
.editor {
flex: 1;
}
// Elements Colors
.earth {color: $l5r5e-earth;}
.air {color: $l5r5e-air;}
.water {color: $l5r5e-water;}
.fire {color: $l5r5e-fire;}
.void {color: $l5r5e-void;}
.earth {
color: $l5r5e-earth;
}
.air {
color: $l5r5e-air;
}
.water {
color: $l5r5e-water;
}
.fire {
color: $l5r5e-fire;
}
.void {
color: $l5r5e-void;
}

92
system/styles/scss/nav.scss
View File

@@ -1,52 +1,60 @@
// -- Nav
nav {
&.sheet-tabs {
font-family: $font-tertiary;
border: 0 none;
margin-bottom: 0;
background: $l5r5e-white;
color: $l5r5e-black;
--notchSize: 0.5rem;
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100%) 100%,
var(--notchSize) 100%,
0% calc(100%)
);
font-family: $font-tertiary;
border: 0 none;
margin-bottom: 0;
background: $l5r5e-white;
color: $l5r5e-black;
--notchSize: 0.5rem;
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100%) 100%,
var(--notchSize) 100%,
0% calc(100%)
);
}
.item {
&:hover {
background-color: $l5r5e-label;
color: $white;
text-shadow: none;
}
&:hover {
background-color: $l5r5e-label;
color: $white;
text-shadow: none;
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% 100%,
0 100%,
0% 0%,
0% 100%
);
}
}
.item.active {
height: 2.5rem;
line-height: 2rem;
background-color: rgba(73, 12, 11, 0.85);
color: rgba(255, 255, 255, 1);
background-color: rgba(73, 12, 11, 0.85);
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% 100%,
0 100%,
0% 0%,
0% 100%
);
height: 2.5rem;
line-height: 2rem;
background-color: rgba(73, 12, 11, 0.85);
color: rgba(255, 255, 255, 1);
background-color: rgba(73, 12, 11, 0.85);
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% 100%,
0 100%,
0% 0%,
0% 100%
);
&:hover {
background-color: rgba(73, 12, 11, 0.85);
cursor: default;
}
&:hover {
background-color: rgba(73, 12, 11, 0.85);
cursor: default;
}
}
}

57
system/styles/scss/sheets.scss
View File

@@ -1,6 +1,14 @@
/** Sheets **/
&.sheet {
min-width: 600px;
form {
display: flex;
flex-wrap: wrap;
}
.sheet-header,
.sheet-body {
flex: 100%;
}
.sheet-header {
h1 {
flex: auto;
@@ -138,11 +146,20 @@
z-index: 2;
position: absolute;
bottom: -100%;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 0.25rem;
--notchSize: 0.5rem;
clip-path: polygon(0% 0, 0 0%, 100% 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
clip-path: polygon(
0% 0,
0 0%,
100% 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
}
&:hover {
p {
@@ -169,10 +186,14 @@
background: $l5r5e-white;
padding: 0.5rem;
flex-wrap: wrap;
&.tab[data-tab]{
&.active {display: flex;}
min-height: calc(100% - 2.25rem);
&.tab[data-tab] {
&.active {
display: flex;
}
}
.skills-wrapper, .feats-wrapper {
.skills-wrapper,
.feats-wrapper {
flex: 50%;
> li {
display: flex;
@@ -181,7 +202,16 @@
margin: 0 0 1rem;
border: 1px solid $l5r5e-title;
--notchSize: 0.75rem;
clip-path: polygon(0 var(--notchSize), var(--notchSize) 0, 100% 0, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), 100% 100%, 0 100%, 0 100%);
clip-path: polygon(
0 var(--notchSize),
var(--notchSize) 0,
100% 0,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
100% 100%,
0 100%,
0 100%
);
h4 {
flex: 100%;
margin: 0;
@@ -190,7 +220,16 @@
background: $l5r5e-title;
color: $l5r5e-label;
--notchSize: 0.5rem;
clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%));
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100%) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100%)
);
}
ul {
flex: 50%;
@@ -204,7 +243,9 @@
strong {
color: $l5r5e-black;
}
&[data-skill="melee"], &[data-skill="ranged"], &[data-skill="unarmed"] {
&[data-skill="melee"],
&[data-skill="ranged"],
&[data-skill="unarmed"] {
strong {
float: left;
line-height: 0.75rem;