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

Merge branch 'master' into Dev-Vlyan

Browse Source 
# Conflicts:
#	system/l5r-ui/ui/cursors/normal.webp
This commit is contained in:
Vlyan
2020-12-09 21:04:38 +01:00
parent 7d8479dd10 ac7d4c5b17
commit da96d2d414
65 changed files with 939 additions and 661 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

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

@@ -12,12 +12,30 @@
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;
body {
font: 16px $font-primary;
letter-spacing: 0.05rem;
}
h1,
h4 {
font-family: $font-secondary;
}
h1 {
font: 1.5rem "BrushtipTexe";
font-size: 2rem;
}
h4 {
font-size: 1.25rem;
}
i.strife,

26
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,12 @@ 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 +44,15 @@ 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;
}

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

@@ -1,9 +1,48 @@
//SCSS
// l5re5.scss
.testing {
width: percentage(1/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;
}
}
}
// test
.testing {
width: percentage(2/7);
}

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

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

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

@@ -3,32 +3,87 @@
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 +95,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 +105,60 @@
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;
}
}

173
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,163 @@
}
}
}
.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;
}
}