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

Add Actor Sheet first design

Browse Source
This commit is contained in:
Mandar
2020-12-09 19:10:12 +01:00
parent 0331ba2854
commit d9a082ec66
67 changed files with 719 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
system/styles/scss/colors.scss
View File

@@ -1,34 +1,49 @@
/** Colors **/
// -- Global
$white: rgba(255, 255, 255, 0.75);
$white: rgba(255, 255, 255, 0.65);
$black: rgba(0, 0, 0, 0.75);
$dark-red: rgba(25, 0, 0, 0.75);
$red: rgba(255, 0, 0, 0.75);
$orange: rgba(255, 100, 0, 0.75);
$blue: rgba(0, 0, 255, 0.75);
$green: rgba(0, 255, 0, 0.75);
// color title
$l5r5e-title: rgb(186, 187, 177);
$l5r5e-title: rgba(186, 187, 177, 0.5);
// color bold
$l5r5e-bold: rgb(118, 79, 64);
// color label
$l5r5e-label: rgb(90, 110, 90);
// color red
$l5r5e-red: rgb(150, 60, 65);
// color white 0.5
$l5r5e-white: rgba(255, 255, 255, 0.5);
// color white 0.5
$l5r5e-white-light: rgba(255, 255, 255, 0.25);
// color black 0.5
$l5r5e-black: rgba(0, 0, 0, 0.5);
// gradient
$l5r5e-linear-gradient-red: rgba(65,20,15,1);
$l5r5e-linear-gradient-red-dark: rgba(35,10,5,1);
$l5r5e-linear-gradient-blue: rgba(40,80,100,1);
$l5r5e-linear-gradient-blue-dark: rgba(10,20,30,1);
$l5r5e-linear-gradient-green: rgba(40,100,50,1);
$l5r5e-linear-gradient-green-dark: rgba(10,60,15,1);
// -- Rings
// Earth
$l5r5e-earth: rgb(110, 141, 107);
$l5r5e-earth: rgb(105, 150, 120);
// Air
$l5r5e-air: rgb(142, 118, 140);
$l5r5e-air: rgb(145, 120, 150);
// Water
$l5r5e-water: rgb(110, 139, 145);
$l5r5e-water: rgb(95, 145, 155);
// Fire
$l5r5e-fire: rgb(146, 111, 71);
$l5r5e-fire: rgb(155, 115, 80);
// Void
$l5r5e-void: rgb(77, 72, 68);
$l5r5e-void: rgb(75, 70, 65);
// -- Clans

19
system/styles/scss/fonts.scss
View File

@@ -12,14 +12,27 @@
src: url("../fonts/BrushtipTexe.otf") format("opentype");
}
$font-primary: "Roboto", sans-serif;
// Font ArchitectsDaughter
@font-face {
font-family: "PatrickHand";
src: url('../fonts/PatrickHand.ttf') format("truetype");
}
$font-primary: "PatrickHand", sans-serif;
$font-secondary: "BrushtipTexe", sans-serif;
$font-dice: "LogotypeL5r", sans-serif;
h1 {
font: 1.5rem "BrushtipTexe";
body {
font: 16px $font-primary;
letter-spacing: 0.05rem;
}
h1, h4 {
font-family: $font-secondary;
}
h1 {font-size: 2rem;}
h4 {font-size: 1.25rem;}
i.strife,
i.success,
i.explosive,

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

@@ -3,9 +3,15 @@
/* Windows */
.window-app {
.window-content {
background: url("../assets/imgs/bgL5R.jpg") no-repeat;
z-index: 1;
position: relative;
background: url("../assets/imgs/bgL5R.webp") no-repeat;
background-size: cover;
}
.window-resizable-handle {
z-index: 2;
background: $black;
}
}
/* Focus, Active */
@@ -24,6 +30,7 @@ input[type="time"]:focus {
.tabs .item.active {
text-shadow: 0 0 10px $red;
}
#controls .scene-control.active, #controls .control-tool.active, #controls .scene-control:hover, #controls .control-tool:hover {box-shadow: 0 0 10px $red;}
/* lists */
ul,
@@ -32,3 +39,11 @@ li {
margin: 0;
padding: 0;
}
// inputs
input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"] {
background: $l5r5e-white;
border: 1px solid $l5r5e-title;
padding: 0.25rem;
color: $l5r5e-bold;
}

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

@@ -1,9 +1,30 @@
//SCSS
// l5re5.scss
.testing {
width: percentage(1/7);
}
// test
.testing {
width: percentage(2/7);
// -- Nav
nav {
.sheet-tabs {
background: $l5r5e-title;
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: rgba(0,0,0,0.75);
color: rgba(255,255,255,1);
text-shadow: black 1px 2px 0;
}
}
.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%);
&:hover {
background-color: rgba(73, 12, 11, 0.85);
cursor: default;
}
}
}

2
system/styles/scss/rings.scss
View File

@@ -61,7 +61,7 @@
strong {
position: absolute;
bottom: 0.75rem;
left: -1.5rem;
left: -1.75rem;
}
}
}

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

@@ -3,32 +3,69 @@
min-width: 600px;
.sheet-header {
h1 {
flex: 0 0 100%;
flex: auto;
margin: 0 0.5rem 0.25rem;
input {
height: 3rem;
line-height: 1.5rem;
margin: 0;
padding: 0 0 0.5rem;
flex: 0 0 100%;
height: 4rem;
margin: 0.5rem 0 0;
width: 100%;
border: 1px solid $l5r5e-white;
color: $l5r5e-red;
background: transparent;
border: 0 none;
border-radius: 0;
border-bottom: 1px dotted $l5r5e-black;
}
&:before {
content: "";
position: absolute;
background: url("../assets/imgs/brushL5r.webp") no-repeat 0 0;
background-size: contain;
height: 225px;
width: 100%;
z-index: -1;
left: -0.25rem;
}
}
img {
flex: 0 0 150px;
height: 150px;
margin-right: 0.25rem;
margin-right: 0;
object-fit: contain;
background: $l5r5e-white;
border: 1px solid $l5r5e-title;
--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% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
}
.header-fields {
display: flex;
flex-wrap: wrap;
h2 {
font-family: $font-secondary;
float: right;
width: 50%;
padding: 0 0.25rem;
margin: 0;
text-align: right;
color: $l5r5e-black;
border-bottom: $white;
--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%));
&:before {
content: "";
position: absolute;
height: 1px;
width: 100%;
}
}
}
.identity-wrapper {
display: flex;
flex-wrap: wrap;
flex: 0 0 calc(100% - 150px - 0.25rem);
.identity-content {
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
margin: 0.5rem;
li {
flex: 33%;
&:nth-child(1),
@@ -40,8 +77,8 @@
}
}
.rings {
flex: 0 0 calc(50% - 0.25rem);
display: flex;
float: left;
width: calc(50% - 0.25rem);
padding: 0.25rem;
}
.social-content {
@@ -50,9 +87,42 @@
padding: 0.25rem;
}
.attributes-wrapper {
flex: 0 0 calc(50% - 0.25rem);
float: right;
width: calc(50% - 0.25rem);
padding: 0.5rem 0 0.5rem 1rem;
display: flex;
padding: 0.25rem;
flex-wrap: wrap;
flex-direction: column;
background: $l5r5e-title;
--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%));
.endurance-content, .composure-content, .void-content {
label {float: left; width: 50%;}
}
li {
p {
display: none;
position: absolute;
}
&:hover {
p {display: block;}
}
}
}
.identity-wrapper label, .social-content label, .attributes-wrapper label {
display: flex;
color: $l5r5e-label;
text-transform: uppercase;
font-size: 0.75rem;
line-height: 2rem;
input {
flex: 1;
margin: 0 1rem 0 0.5rem;
}
}
}
article {
background: $l5r5e-white;
padding: 0.5rem;
}
}

145
system/styles/scss/ui.scss
View File

@@ -1,11 +1,19 @@
//SCSS
// sdebar
/* SCSS */
// sidebar
#sidebar {
background-position: top;
background-size: 100%;
background-repeat: no-repeat;
background: url("../assets/ui/bgSidebar.png") no-repeat;
top: 0;
height: 100%;
padding: 0.5rem;
#sidebar-tabs {
flex: 0 0 1rem;
box-sizing: border-box;
margin: 0 0 0.25rem;
border-bottom: 1px solid $l5r5e-white;
border-bottom: 1px solid rgba(255,255,255,0.25);
box-shadow: none;
> .item {
line-height: 27px;
@@ -19,4 +27,135 @@
}
}
}
.message-sender {
color: $l5r5e-red;
}
}
// hotbar
#hotbar {
margin: 0;
#action-bar {
flex: 0 0 100%;
.macro {
border-image: url("../assets/ui/macro-button.webp");
border-image-slice: 8 fill;
border-image-width: 0.25rem;
border-image-outset: 0;
border-radius: 0;
.macro-key{
background: transparent;
}
}
#macro-list {
background: $black;
margin: 0;
padding: 0.05rem;
border: none;
border-radius: 0;
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 15 repeat;
border-image-width: 0.5rem;
border-image-outset: 0px;
box-shadow: 0.25rem 0.25rem 0.5rem $black;
}
}
.bar-controls {
background: $black;
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 15 repeat;
border-image-width: 0.5rem;
border-image-outset: 0px;
box-shadow: 0 0 0.25rem $black;
border-radius: 0;
margin: 0 0.5rem;
a.page-control, span.page-number {
font-size: 1rem;
line-height: 0.95rem;
}
}
}
// players
#players {
background: $black;
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 15 repeat;
border-image-width: 0.5rem;
border-image-outset: 0px;
margin: 0;
padding: 0;
left: 1.15rem;
bottom: 0.65rem;
box-shadow: inset 0 0 0.5rem $black;
&:before {
z-index: -1;
position: absolute;
content: "";
background: transparent url("../assets/ui/players-border.webp") no-repeat 0 0;
background-size: 100%;
display: block;
top: -12px;
right: 10%;
left: 10%;
bottom: 0;
}
}
// logo
#logo {
height: 80px;
margin-left: 0.5rem;
opacity: 0.5;
&:hover {opacity: 0.75;}
}
// navigation
#navigation {
left: 120px;
#nav-toggle, #scene-list .scene.nav-item {
cursor: default;
color: $white;
background: linear-gradient($l5r5e-linear-gradient-blue, $l5r5e-linear-gradient-blue-dark, $l5r5e-linear-gradient-blue);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
}
#scene-list {
.scene.nav-item.active {
background: linear-gradient($l5r5e-linear-gradient-red, $l5r5e-linear-gradient-red-dark, $l5r5e-linear-gradient-red);
}
.scene.view, .scene.context {
cursor: default;
color: #FFF;
background: linear-gradient($l5r5e-linear-gradient-red, $l5r5e-linear-gradient-red-dark, $l5r5e-linear-gradient-red);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
box-shadow: 0 0 20px red;
}
}
}
// controls
#controls {
top: 100px;
.scene-control.active, .control-tool.active, .scene-control:hover, .control-tool:hover {
background: linear-gradient($l5r5e-linear-gradient-red, $l5r5e-linear-gradient-red-dark, $l5r5e-linear-gradient-red);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
box-shadow: 0 0 10px $red;
}
.scene-control, .control-tool {
background: linear-gradient($l5r5e-linear-gradient-blue, $l5r5e-linear-gradient-blue-dark, $l5r5e-linear-gradient-blue);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
}
}