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

Fix marge on sheet + fix nav on 20Q + clean imgs

Browse Source
This commit is contained in:
Mandar
2021-01-05 01:28:46 +01:00
parent 4977b029ec
commit 51585973b0
18 changed files with 89 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
system/assets/imgs/bg-20nav.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
system/assets/imgs/bg-alt.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
system/assets/imgs/bg-alt2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

0
system/assets/imgs/bgL5R.webp → system/assets/imgs/bg-l5r.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

BIN
system/assets/imgs/bg-scroll.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

0
system/assets/imgs/background.webp → system/assets/imgs/bg-table.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 155 KiB

BIN
system/assets/imgs/bg20Q.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

BIN
system/assets/imgs/bgAlt.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

0
system/assets/imgs/brushL5r.webp → system/assets/imgs/brush.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 MiB

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
system/assets/imgs/chat-texture.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 22 KiB

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

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

@@ -25,10 +25,12 @@ $l5r5e-label-light: rgba(90, 110, 90, 0.25);
$l5r5e-red: rgb(150, 60, 65); $l5r5e-red: rgb(150, 60, 65);
// color white 0.5 // color white 0.5
$l5r5e-white: rgba(255, 255, 255, 0.5); $l5r5e-white: rgba(255, 255, 255, 0.5);
// color white 0.5 // color white 0.2
$l5r5e-white-light: rgba(255, 255, 255, 0.25); $l5r5e-white-light: rgba(255, 255, 255, 0.25);
// color black 0.5 // color black 0.5
$l5r5e-black: rgba(0, 0, 0, 0.5); $l5r5e-black: rgba(0, 0, 0, 0.5);
// color black 0.25
$l5r5e-black-light: rgba(0, 0, 0, 0.25);
// color border sidebar // color border sidebar
$l5r5e-border-sidebar: rgb(195, 165, 130); $l5r5e-border-sidebar: rgb(195, 165, 130);

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

@@ -1,7 +1,7 @@
/** Global **/ /** Global **/
body { body {
background: url("../assets/imgs/background.webp") no-repeat center; background: url("../assets/imgs/bg-table.webp") no-repeat center;
background-size: cover; background-size: cover;
> * { > * {
scrollbar-width: thin; scrollbar-width: thin;
@@ -13,8 +13,9 @@ body {
.window-content { .window-content {
z-index: 1; z-index: 1;
position: relative; position: relative;
background: url("../assets/imgs/bgL5R.webp") no-repeat; background: rgb(255, 250, 230) url("../assets/imgs/bg-l5r.webp") no-repeat;
background-size: cover; background-size: cover;
overflow-y: scroll;
scrollbar-width: thin; scrollbar-width: thin;
} }
.window-resizable-handle { .window-resizable-handle {
@@ -23,7 +24,7 @@ body {
} }
&.twenty-questions-dialog { &.twenty-questions-dialog {
.window-content { .window-content {
background: url("../assets/imgs/bg20Q.webp") no-repeat; background: rgb(255, 250, 230) url("../assets/imgs/bg-scroll.webp") no-repeat;
background-size: cover; background-size: cover;
} }
} }

6
system/styles/scss/npc.scss
View File

@@ -20,6 +20,9 @@
min-height: 2rem; min-height: 2rem;
width: 100%; width: 100%;
} }
.header-fields {
padding: 0 0.25rem;
}
.identity-wrapper { .identity-wrapper {
flex: 1 1 100%; flex: 1 1 100%;
h1 { h1 {
@@ -90,6 +93,9 @@
} }
} }
} }
.sheet-body {
padding: 0.25rem;
}
.npc-skill { .npc-skill {
display: flex; display: flex;
width: 100%; width: 100%;

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

@@ -8,10 +8,10 @@
} }
&.actor { &.actor {
.sheet-header { .sheet-header {
height: 28rem; height: 27rem;
} }
.sheet-body { .sheet-body {
height: calc(100% - 28rem); height: calc(100% - 27rem);
} }
.techniques-wrapper { .techniques-wrapper {
fieldset { fieldset {
@@ -94,7 +94,7 @@
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
background: url("../assets/imgs/brushL5r.webp") no-repeat 0 0; background: url("../assets/imgs/brush.webp") no-repeat 0 0;
background-size: contain; background-size: contain;
height: 225px; height: 225px;
width: 100%; width: 100%;
@@ -128,12 +128,13 @@
flex: 0 0 100%; flex: 0 0 100%;
h2 { h2 {
font-family: $font-secondary; font-family: $font-secondary;
font-size: 1rem;
float: left; float: left;
width: 30%; width: 30%;
padding: 0 0.25rem; padding: 0.25rem 0.25rem 0;
margin: 1rem 20% 0 0; margin: 1rem 20% 0 0;
text-align: center; text-align: center;
color: $l5r5e-red; color: $l5r5e-black-light;
text-shadow: 0 0 1px $l5r5e-label-light; text-shadow: 0 0 1px $l5r5e-label-light;
border-bottom: 0 none; border-bottom: 0 none;
background: $l5r5e-title; background: $l5r5e-title;
@@ -274,7 +275,7 @@
color: $l5r5e-label; color: $l5r5e-label;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.75rem; font-size: 0.75rem;
height: 3rem; height: 2.5rem;
margin: 0.25rem 0; margin: 0.25rem 0;
flex-direction: row-reverse; flex-direction: row-reverse;
strong { strong {
@@ -283,10 +284,10 @@
input { input {
flex: 0 0 3rem; flex: 0 0 3rem;
margin: 0 0.25rem; margin: 0 0.25rem;
height: 2.5rem; height: 2rem;
&[disabled] { &[disabled] {
flex: 0 0 3rem; flex: 0 0 3rem;
background: transparent; background: $l5r5e-white-light;
} }
} }
} }
@@ -334,7 +335,7 @@
.composure-content { .composure-content {
input { input {
&[disabled] { &[disabled] {
flex: 0 0 4.75rem; flex: 0 0 5rem;
padding-right: 3rem; padding-right: 3rem;
} }
} }
@@ -355,7 +356,7 @@
position: absolute; position: absolute;
right: 2.9rem; right: 2.9rem;
font-size: 1rem; font-size: 1rem;
bottom: 0.8rem; bottom: 0.6rem;
color: $l5r5e-bold; color: $l5r5e-bold;
} }
} }
@@ -383,12 +384,14 @@
display: none; display: none;
z-index: 2; z-index: 2;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.5); background: $l5r5e-black;
color: #fff; color: $white;
height: auto; line-height: 1.5rem;
text-align: center;
width: 100%;
padding: 0.25rem; padding: 0.25rem;
bottom: -1rem; bottom: -2.25rem;
right: 0; right: -0.25rem;
--notchSize: 0.5rem; --notchSize: 0.5rem;
clip-path: polygon( clip-path: polygon(
0% 0, 0% 0,

50
system/styles/scss/twentyquestions.scss
View File

@@ -1,23 +1,15 @@
&.twenty-questions-dialog { &.twenty-questions-dialog {
.sheet-tabs { .sheet-tabs {
float: left; position: fixed;
flex-direction: column; flex-direction: column;
width: 9%; background: url("../assets/imgs/bg-20nav.webp") no-repeat;
height: 100%; background-size: cover;
margin: 7% 4.75%; width: 5%;
padding: 0; height: 52vw;
margin: 1%;
line-height: 5rem;
padding: 0.25rem;
border-bottom: 0 none; border-bottom: 0 none;
--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))
);
} }
h3 { h3 {
font-size: 1rem; font-size: 1rem;
@@ -25,15 +17,29 @@
} }
nav { nav {
.item { .item {
background-color: $l5r5e-white-light;
&.active, &.active,
&:hover { &:hover {
clip-path: none; background-color: rgba(73, 12, 11, 0.85);
--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))
);
}
&:hover {
background-color: $l5r5e-label;
} }
} }
} }
article { article {
float: left; padding: 2% 2% 0 18%;
width: 80%;
label { label {
&.full { &.full {
display: block; display: block;
@@ -50,7 +56,11 @@
width: 100%; width: 100%;
} }
table tr td { table tr td {
vertical-align: top; vertical-align: middle;
line-height: 2rem;
border: 1px solid $l5r5e-title;
font-size: 0.85rem;
padding: 0.25rem;
} }
.third { .third {
width: 230px; width: 230px;

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

@@ -280,7 +280,7 @@ button {
} }
.message-sender { .message-sender {
color: $l5r5e-red; color: $l5r5e-red;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25); text-shadow: 1px 1px 0px $l5r5e-black-light;
} }
.message { .message {
background-color: $l5r5e-chat-color-light; background-color: $l5r5e-chat-color-light;

53
system/templates/actors/twenty-questions-dialog.html
View File

@@ -4,17 +4,17 @@
{{/if}} {{/if}}
<div class="content"> <div class="content">
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="part0">?</a>
<a class="item" data-tab="part1">I</a>
<a class="item" data-tab="part2">II</a>
<a class="item" data-tab="part3">III</a>
<a class="item" data-tab="part4">IV</a>
<a class="item" data-tab="part5">V</a>
<a class="item" data-tab="part6">VI</a>
<a class="item" data-tab="part7">VII</a>
</nav>
<section class="sheet-body"> <section class="sheet-body">
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="part0">?</a>
<a class="item" data-tab="part1">I</a>
<a class="item" data-tab="part2">II</a>
<a class="item" data-tab="part3">III</a>
<a class="item" data-tab="part4">IV</a>
<a class="item" data-tab="part5">V</a>
<a class="item" data-tab="part6">VI</a>
<a class="item" data-tab="part7">VII</a>
</nav>
<article class="tab parts part0" data-group="primary" data-tab="part0"> <article class="tab parts part0" data-group="primary" data-tab="part0">
<h1>{{localize 'l5r5e.twenty_questions.title'}}</h1> <h1>{{localize 'l5r5e.twenty_questions.title'}}</h1>
{{localize 'l5r5e.twenty_questions.part0.intro'}} {{localize 'l5r5e.twenty_questions.part0.intro'}}
@@ -600,27 +600,26 @@
</tr> </tr>
<tr> <tr>
<td> <td>
{{#each summary.summary.rings}} <ul>
{{this}} {{#each summary.summary.rings}}
{{/each}} <li>{{this}}</li>
{{/each}}
</ul>
</td> </td>
<td> <td>
{{#each summary.summary.skills}} <ul>
{{this}} {{#each summary.summary.skills}}
{{/each}} <li>{{this}}</li>
{{/each}}
</ul>
</td> </td>
<td> <td>
{{localize 'l5r5e.twenty_questions.part1.status'}} <ul>
{{summary.summary.status}} <li>{{localize 'l5r5e.twenty_questions.part1.status'}} ({{summary.social.status}})</li>
<li>{{localize 'l5r5e.twenty_questions.part1.glory'}} ({{summary.social.glory}})</li>
{{localize 'l5r5e.twenty_questions.part1.glory'}} <li>{{localize 'l5r5e.twenty_questions.part2.honor'}} ({{summary.social.honor}})</li>
{{summary.summary.glory}} <li>{{localize 'l5r5e.twenty_questions.part1.money'}} ({{data.step2.wealth}})</li>
</ul>
{{localize 'l5r5e.twenty_questions.part2.honor'}}
{{summary.summary.honor}}
{{localize 'l5r5e.twenty_questions.part1.money'}}
{{data.step2.wealth}}
</td> </td>
</tr> </tr>
</table> </table>