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

Update Style for sheet, item list and tab + update ui + add svg dice

Browse Source 
Update Style for sheet, item list and tab
Update ui
Add svg dice
This commit is contained in:
Mandar
2020-12-15 02:16:10 +01:00
parent a86a0f3ab6
commit 0b51804f21
83 changed files with 3752 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

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

@@ -1,8 +1,10 @@
/** Colors **/
// -- Global
$white: rgba(255, 255, 255, 0.65);
$black: rgba(0, 0, 0, 0.75);
$white: rgba(255, 255, 255, 1);
$white-light: rgba(255, 255, 255, 0.65);
$black: rgba(0, 0, 0, 1);
$black-light: 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);
@@ -23,14 +25,21 @@ $l5r5e-white: rgba(255, 255, 255, 0.5);
$l5r5e-white-light: rgba(255, 255, 255, 0.25);
// color black 0.5
$l5r5e-black: rgba(0, 0, 0, 0.5);
// color border sidebar
$l5r5e-border-sidebar: rgb(195, 165, 130);
// color list odd
$l5r5e-odd: rgba(186, 187, 177, 0.2);
// color list even
$l5r5e-even: rgba(186, 187, 177, 0.1);
// 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);
$l5r5e-linear-gradient-first: rgba(65, 20, 15, 0.75);
$l5r5e-linear-gradient-first-dark: rgba(35, 10, 5, 0.75);
$l5r5e-linear-gradient-second: rgba(10, 0, 20, 0.75);
$l5r5e-linear-gradient-second-dark: rgba(0, 0, 10, 0.75);
$l5r5e-linear-gradient-third: rgba(175, 145, 110, 1);
$l5r5e-linear-gradient-third-dark: rgba(150, 120, 90, 1);
// -- Rings
@@ -48,23 +57,23 @@ $l5r5e-void: rgb(75, 70, 65);
// -- Clans
// Crab
$l5r5e-dragon: rgb(130, 130, 140);
$l5r5e-crab: rgb(130, 130, 140);
// Crane
$l5r5e-dragon: rgb(120, 145, 145);
$l5r5e-crane: rgb(120, 145, 145);
// Dragon
$l5r5e-dragon: rgb(85, 130, 110);
// Lion
$l5r5e-dragon: rgb(160, 140, 80);
$l5r5e-lion: rgb(160, 140, 80);
// Mantis
$l5r5e-dragon: rgb(45, 85, 30);
$l5r5e-mantis: rgb(45, 85, 30);
// Phoenix
$l5r5e-dragon: rgb(145, 190, 175);
$l5r5e-phoenix: rgb(145, 190, 175);
// Scorpion
$l5r5e-dragon: rgb(155, 70, 60);
$l5r5e-scorpion: rgb(155, 70, 60);
// Unicorn
$l5r5e-dragon: rgb(120, 90, 135);
$l5r5e-unicorn: rgb(120, 90, 135);
// Spider
$l5r5e-dragon: rgb(0, 0, 0);
$l5r5e-spider: rgb(0, 0, 0);
.Crab {
}

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

@@ -15,7 +15,6 @@ body,
#sidebar .sidebar-tab #chat-controls div.roll-type-select i.fas {
cursor: url("../assets/cursors/normal.webp"), default !important;
}
a,
#hotbar .macro,
#playlists-popout .global-volume::-webkit-slider-thumb,
@@ -48,7 +47,6 @@ form .form-group .form-fields button,
form button {
cursor: url("../assets/cursors/pointer.webp"), pointer !important;
}
.draggable {
cursor: url("../assets/cursors/drag.webp"), move !important;
}

25
system/styles/scss/dices.scss
View File

@@ -1,5 +1,12 @@
//SCSS
// dices.scss
// -- Dices.scss
.dice-roll {
.dice-formula,
.dice-total {
background: rgba(255, 255, 255, 0.1);
border: rgba(255, 255, 255, 0.75);
}
}
// Dice in chat
.chat-dice > img {
@@ -26,6 +33,7 @@
font-size: 40px;
position: relative;
top: 8px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
&-element {
flex-wrap: wrap;
@@ -79,10 +87,17 @@
// Approach choice
.ring-selection {
filter: contrast(10%);
&.ring-selected {
filter: drop-shadow(1px 1px 0 #151515);
i {
text-shadow: 0px 2px 2px $red;
}
strong {
color: $red;
text-decoration: underline;
}
input {
border: 2px solid $red !important;
}
}
}

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

@@ -24,9 +24,16 @@
src: url("../fonts/ManoNegra.ttf") format("truetype");
}
// Font ArchitectsDaughter
@font-face {
font-family: "ArchitectsDaughter";
src: url("../fonts/ArchitectsDaughter.ttf") format("truetype");
}
$font-primary: "PatrickHand", sans-serif;
$font-secondary: "BrushtipTexe", sans-serif;
$font-tertiary: "ManoNegra", sans-serif;
$font-tertiary: "BrushtipTexe", sans-serif;
$font-quaternary: "ArchitectsDaughter", sans-serif;
$font-dice: "LogotypeL5r", sans-serif;
body {
@@ -41,10 +48,20 @@ h4 {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.25rem;
}
p {
font-family: $font-quaternary;
}
i.strife,
i.success,
i.explosive,

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

@@ -3,6 +3,9 @@
body {
background: url("../assets/imgs/background.webp") no-repeat center;
background-size: cover;
> * {
scrollbar-width: thin;
}
}
/* Windows */
@@ -16,7 +19,7 @@ body {
}
.window-resizable-handle {
z-index: 2;
background: $black;
background: $black-light;
}
}
@@ -43,6 +46,13 @@ input[type="time"]:focus {
box-shadow: 0 0 10px $red;
}
button:hover {
box-shadow: 0 0 10px $red;
}
button:focus {
box-shadow: 0 0 10px $red;
}
/* lists */
ul,
li {
@@ -50,11 +60,39 @@ li {
margin: 0;
padding: 0;
}
.item-list {
> li {
padding: 0.25rem;
border: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 0 none;
&:nth-child(odd) {
background: $l5r5e-odd;
}
&:nth-child(even) {
background: $l5r5e-even;
}
&:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
}
}
// Fieldset
fieldset {
flex: 1;
display: flex;
margin: 0 0.25rem;
padding: 0.25rem 0.5rem;
border: 1px solid $l5r5e-title;
&:last-child {
margin: 0 0 0 0.5rem;
}
legend {
color: $l5r5e-label;
}
.editor {
height: calc(100% - 1.5rem);
}
}
// inputs
@@ -63,15 +101,20 @@ input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"] {
text-align: center;
padding: 0.25rem;
background: $l5r5e-white;
border: 1px solid $l5r5e-title;
padding: 0.25rem;
color: $l5r5e-bold;
&[disabled] {
background: $l5r5e-white-light;
}
}
// Editors
.editor {
flex: 1;
height: 100%;
}
// Elements Colors
@@ -90,3 +133,25 @@ input[type="time"] {
.void {
color: $l5r5e-void;
}
table {
text-align: center;
background: transparent;
border: 1px solid $l5r5e-title;
thead {
background: $l5r5e-title;
color: $l5r5e-label;
text-shadow: none;
border-bottom: $l5r5e-title;
}
tbody {
}
tr {
&:nth-child(odd) {
background: $l5r5e-odd;
}
&:nth-child(even) {
background: $l5r5e-even;
}
}
}

62
system/styles/scss/items.scss
View File

@@ -1,9 +1,55 @@
//SCSS
// l5re5.scss
.testing {
width: percentage(1/7);
.item-list {
flex: 100%;
.item {
.item-header {
display: flex;
.item-img {
flex: 0 0 32px;
padding-right: 0.25rem;
img {
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
.item-name {
flex: 1 1 auto;
}
.item-edit,
.item-delete,
.feat-edit,
.feat-delete {
flex: 0 0 1rem;
padding: 0 0.25rem;
}
.icon-stat-container {
padding: 0 0.25rem;
}
}
.item-description {
flex: unset;
display: block;
height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
transition: height 0.25s ease-in;
}
&:hover {
.item-description {
height: 5rem;
overflow-y: auto;
scrollbar-width: thin;
}
}
p {
font-size: 0.85rem;
margin: 0;
padding: 0 0.5rem;
max-width: 100%;
&:first-child {
padding-top: 0.5rem;
}
&:last-child {
padding-bottom: 0.5rem;
}
}
}
}
// test
.testing {
width: percentage(2/7);
}

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

@@ -21,7 +21,7 @@ nav {
.item {
&:hover {
background-color: $l5r5e-label;
color: $white;
color: $white-light;
text-shadow: none;
clip-path: polygon(
0% var(--notchSize),

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

@@ -3,7 +3,7 @@
.rings {
display: flex;
flex-wrap: wrap;
color: $white;
color: $white-light;
// All
#earth,
#air,
@@ -38,7 +38,7 @@
top: 0;
left: 0;
border: 2px solid $l5r5e-title;
color: $white;
color: $white-light;
&:hover {
border: 2px solid $red;
text-shadow: 0 0 6px $red;

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

@@ -5,19 +5,28 @@
display: flex;
flex-wrap: wrap;
}
.sheet-header,
.sheet-body {
flex: 100%;
flex: 0 0 100%;
align-items: flex-start;
height: calc(100% - 26.75rem);
}
.sheet-header {
flex: 0 0 100%;
align-items: flex-start;
height: 26.75rem;
input {
font-size: 1rem;
}
h1 {
flex: auto;
margin: 0 0.5rem 0.25rem;
input {
flex: 0 0 100%;
font-size: 3rem;
height: 4rem;
margin: 0.5rem 0 0;
width: 100%;
text-align: right;
color: $l5r5e-red;
background: transparent;
border: 0 none;
@@ -63,7 +72,7 @@
margin: 0;
text-align: right;
color: $l5r5e-black;
border-bottom: $white;
border-bottom: $white-light;
--notchSize: 0.5rem;
clip-path: polygon(
0% var(--notchSize),
@@ -115,10 +124,10 @@
.attributes-wrapper {
float: right;
width: calc(50% - 0.25rem);
padding: 0.5rem 0 0.5rem 1rem;
padding: 0.5rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex-direction: row;
background: $l5r5e-title;
--notchSize: 0.5rem;
clip-path: polygon(
@@ -131,12 +140,56 @@
var(--notchSize) 100%,
0% calc(100%)
);
label {
display: flex;
color: $l5r5e-label;
text-transform: uppercase;
font-size: 0.75rem;
line-height: 2rem;
margin: 0 0.5rem;
strong {
flex: 1 0 calc(100% - 3rem);
}
input {
flex: 0 0 2rem;
&[disabled] {
flex: 0 0 2rem;
background: transparent;
}
}
}
.endurance-content,
.composure-content,
.void-content {
.composure-content {
flex: 1;
label {
float: left;
width: 50%;
&:nth-child(2) {
display: flex;
flex-direction: column;
flex-wrap: wrap;
input {
flex: 1rem;
margin: 0 0 0.25rem;
}
}
}
}
.focus-content,
.vigilante-content {
flex: 0 0 50%;
label {
flex: 1;
input {
flex: 1rem;
}
}
}
.void-content {
display: flex;
label {
flex: 1;
input {
flex: 1rem;
}
}
}
li {
@@ -145,7 +198,6 @@
display: none;
z-index: 2;
position: absolute;
bottom: -100%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 0.25rem;
@@ -169,8 +221,7 @@
}
}
.identity-wrapper label,
.social-content label,
.attributes-wrapper label {
.social-content label {
display: flex;
color: $l5r5e-label;
text-transform: uppercase;
@@ -192,82 +243,71 @@
display: flex;
}
}
.skills-wrapper,
.feats-wrapper {
flex: 50%;
> li {
display: flex;
flex-wrap: wrap;
font-size: 0.75rem;
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%
);
h4 {
flex: 100%;
margin: 0;
padding: 0.5rem 0.5rem 0;
text-align: center;
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%)
);
.stance-content {
label {
display: block;
width: 100%;
line-height: 1.5rem;
padding: 0.25rem;
color: $white;
&.earth {
background: $l5r5e-earth;
}
ul {
flex: 50%;
padding: 0.25rem 0.5rem 0.25rem 0;
li {
text-align: left;
line-height: 1.5rem;
margin: 0.25rem 0;
&.skill {
text-align: right;
strong {
color: $l5r5e-black;
}
&[data-skill="melee"],
&[data-skill="ranged"],
&[data-skill="unarmed"] {
strong {
float: left;
line-height: 0.75rem;
width: calc(100% - 1.75rem);
}
}
}
}
&.skill-category-ring-actions {
padding: 0.25rem 0 0.25rem 0.5rem;
border-left: 1px solid $l5r5e-title;
}
&.air {
background: $l5r5e-air;
}
&.water {
background: $l5r5e-water;
}
&.fire {
background: $l5r5e-fire;
}
&.void {
background: $l5r5e-void;
}
input {
width: 1.5rem;
height: 1.5rem;
text-align: center;
float: right;
position: relative;
top: 0.3rem;
right: 0.25rem;
}
&:last-child {
margin: 0;
}
.quick-rules {
display: none;
height: 0;
margin: 0;
padding: 0.25rem;
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.75);
overflow: hidden;
border: 1px solid $l5r5e-title;
transition: height 0.25s ease-in;
}
&:hover {
.quick-rules {
display: block;
height: 6rem;
overflow-y: auto;
scrollbar-width: thin;
}
}
}
}
.xp {
flex: 0 0 5rem;
}
table {
thead {
th {
&:first-child {
flex: 0 0 70%;
}
}
}
tbody {
th {
flex: 0 0 70%;
}
}
}
}

89
system/styles/scss/skills.scss
View File

@@ -1,9 +1,82 @@
//SCSS
// l5re5.scss
.testing {
width: percentage(1/7);
/** Sheets **/
&.sheet {
article {
.skills-wrapper,
.feats-wrapper {
flex: 50%;
> li {
display: flex;
flex-wrap: wrap;
font-size: 0.85rem;
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%
);
h4 {
flex: 100%;
margin: 0;
padding: 0.5rem 0.5rem 0;
text-align: center;
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%)
);
}
ul {
flex: 50%;
padding: 0.25rem 0.5rem 0.25rem 0;
li {
text-align: left;
line-height: 2rem;
margin: 0.25rem 0;
&.skill {
text-align: right;
span {
color: $l5r5e-black;
}
&[data-skill="melee"],
&[data-skill="ranged"],
&[data-skill="unarmed"] {
span {
float: left;
line-height: 1rem;
width: calc(100% - 2rem);
}
}
}
}
&.skill-category-ring-actions {
padding: 0.25rem 0 0.25rem 0.5rem;
border-left: 1px solid $l5r5e-title;
}
}
input {
width: 1.75rem;
height: 1.75rem;
text-align: center;
}
&:last-child {
margin: 0;
}
}
}
}
}
// test
.testing {
width: percentage(2/7);
}

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

@@ -9,7 +9,7 @@ button {
padding: 0.5rem 0.25rem 0.5rem 0.5rem;
background-position: top;
background-size: 100%;
background: url(../assets/ui/bgSidebar.webp) no-repeat;
background: url("../assets/ui/bgSidebar.webp") no-repeat;
border: 1px solid rgb(195, 165, 130);
border-radius: 0;
overflow: initial;
@@ -33,24 +33,120 @@ button {
margin: 0 0 0.25rem;
border-bottom: 1px solid rgba(195, 165, 130, 0.5);
box-shadow: none;
> .item {
line-height: 1.6rem;
display: flex;
i {
flex: 1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
border-radius: 100%;
margin: 0;
flex: 0 0 1.6rem;
height: 1.6rem;
&.fa-comments {
background-image: url("../assets/ui/sidebar/chat.svg");
&:before {
content: "";
}
}
&.fa-fist-raised {
background-image: url("../assets/ui/sidebar/combat-tracker.svg");
background-size: 85%;
&:before {
content: "";
}
}
&.fa-map {
background-image: url("../assets/ui/sidebar/scenes.svg");
background-size: 80%;
&:before {
content: "";
}
}
&.fa-users {
background-image: url("../assets/ui/sidebar/actors.svg");
background-size: 90%;
&:before {
content: "";
}
}
&.fa-suitcase {
background-image: url("../assets/ui/sidebar/object.svg");
&:before {
content: "";
}
}
&.fa-book-open {
background-image: url("../assets/ui/sidebar/journal.svg");
&:before {
content: "";
}
}
&.fa-th-list {
background-image: url("../assets/ui/sidebar/rolltable.svg");
background-size: 85%;
&:before {
content: "";
}
}
&.fa-music {
background-image: url("../assets/ui/sidebar/playlist.svg");
background-size: 80%;
&:before {
content: "";
}
}
&.fa-atlas {
background-image: url("../assets/ui/sidebar/compendium.svg");
&:before {
content: "";
}
}
&.fa-cogs {
background-image: url("../assets/ui/sidebar/settings.svg");
background-size: 85%;
&:before {
content: "";
}
}
}
> .item {
flex: 0 0 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
margin: 0.1rem;
border-radius: 100%;
background: $l5r5e-white;
&.active,
&:hover {
border: 1px solid $orange;
box-shadow: 0 0 6px $orange;
background: $white;
border: 1px solid $l5r5e-border-sidebar;
box-shadow: 0 0 10px $l5r5e-white;
}
}
.collapse {
position: relative;
flex: 0 0 1.5rem;
line-height: 1.5rem;
flex: 0 0 0.85rem;
line-height: 1.75rem;
color: rgb(195, 165, 130);
text-align: center;
i {
background-color: transparent;
}
}
}
&.collapsed {
#sidebar-tabs {
> .item {
&.active {
border: 1px solid $l5r5e-border-sidebar;
box-shadow: 0 0 10px $l5r5e-white;
border-radius: 100%;
}
}
.collapse {
flex: 0 0 1.5rem;
margin: 0.1rem;
}
}
}
.sidebar-tab {
@@ -61,9 +157,9 @@ button {
cursor: default;
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-green,
$l5r5e-linear-gradient-green-dark,
$l5r5e-linear-gradient-green
$l5r5e-linear-gradient-third,
$l5r5e-linear-gradient-third-dark,
$l5r5e-linear-gradient-third
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -71,15 +167,42 @@ button {
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-green-dark,
$l5r5e-linear-gradient-green,
$l5r5e-linear-gradient-green-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
}
#chat-log {
margin: 0 0 0.5rem;
.message.whisper,
.message.blind {
position: relative;
font-style: italic;
.message-header {
.message-metadata:before {
content: " (Private Roll) ";
position: absolute;
top: -0.5rem;
right: 0.25rem;
font-size: 0.5rem;
color: rgba(255, 255, 255, 0.5);
height: 0;
}
}
}
.message.blind {
.message-header {
.message-metadata:before {
content: " (Blind Roll) ";
}
}
}
}
.message-sender {
color: $l5r5e-red;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
}
}
@@ -89,6 +212,14 @@ button {
#action-bar {
flex: 0 0 100%;
.macro {
background-position: center;
background-size: 100%;
background: linear-gradient(
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp");
border-image-slice: 8 fill;
border-image-width: 0.25rem;
@@ -97,29 +228,38 @@ button {
.macro-key {
background: $l5r5e-black;
}
&.active {
background: linear-gradient(
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark
);
box-shadow: 1px 1px 10px $black inset;
border: 1px solid rgba(195, 165, 130, 0.5);
}
}
#macro-list {
background: $black;
background: transparent;
margin: 0;
padding: 0.05rem;
border-radius: 0;
background-position: center;
background-size: 100%;
background: url(../assets/ui/bgSidebar.webp) no-repeat;
background-origin: padding-box;
border: 0 none;
box-shadow: 0.25rem 0.25rem 0.5rem $black;
box-shadow: 0.25rem 0.25rem 0.5rem $black-light;
}
}
.bar-controls {
background-position: center;
background-size: 100%;
background: url(../assets/ui/bgSidebar.webp) no-repeat;
background: linear-gradient(
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
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;
box-shadow: 0 0 0.25rem $black-light;
border-radius: 0;
margin: 0 0.5rem;
a.page-control,
@@ -135,7 +275,11 @@ button {
border-radius: 0;
background-position: center;
background-size: 100%;
background: url(../assets/ui/bgSidebar.webp) no-repeat;
background: linear-gradient(
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border: 1px solid rgb(195, 165, 130);
background-origin: padding-box;
@@ -146,7 +290,7 @@ button {
padding: 0;
left: 1.15rem;
bottom: 0.65rem;
box-shadow: inset 0 0 0.5rem $black;
box-shadow: inset 0 0 0.5rem $black-light;
&:before {
z-index: -1;
position: absolute;
@@ -179,9 +323,9 @@ button {
cursor: default;
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -189,24 +333,24 @@ button {
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
#scene-list {
.scene.nav-item.active {
background: linear-gradient(
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
@@ -215,9 +359,9 @@ button {
cursor: default;
color: #fff;
background: linear-gradient(
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -226,9 +370,9 @@ button {
box-shadow: 0 0 20px red;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
@@ -243,9 +387,9 @@ button {
.scene-control:hover,
.control-tool:hover {
background: linear-gradient(
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -254,18 +398,19 @@ button {
box-shadow: 0 0 10px $red;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-red-dark,
$l5r5e-linear-gradient-red,
$l5r5e-linear-gradient-red-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
.scene-control,
.control-tool {
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -273,44 +418,35 @@ button {
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
}
// Chat-form
#chat-form textarea,
.chat-message,
#chat-controls .roll-type-select,
.sidebar-tab .directory-header .header-search input {
background: transparent url("../assets/ui/chat-texture.webp") no-repeat;
}
.sidebar-tab .directory-header .header-search input {
color: $white;
}
// Chat-Message
.chat-message {
background-image: url("../assets/ui/chat-texture.webp");
.message-header {
line-height: 2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 0.25rem;
border-radius: 0;
}
}
/* #region Chat log */
/* differentiate public roll from private or blind.
Private uses class whisper, blind uses class blind AND whisper, Self Roll
uses class whisper (identical to Private Roll for CSS) */
#chat-log .message.whisper {
font-style: italic;
}
#chat-log .message.whisper .message-header .message-metadata::before {
color: rgba(88, 88, 88, 0.25);
content: " (Private Roll) ";
float: left;
}
#chat-log .message.blind .message-header .message-metadata::before {
color: rgba(88, 88, 88, 0.25);
content: " (Blind Roll) " !important;
float: left;
}
// Playlist
#playlists {
.playlist {
@@ -329,9 +465,9 @@ button {
cursor: default;
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue
$l5r5e-linear-gradient-third,
$l5r5e-linear-gradient-third-dark,
$l5r5e-linear-gradient-third
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
@@ -339,9 +475,9 @@ button {
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-blue-dark,
$l5r5e-linear-gradient-blue,
$l5r5e-linear-gradient-blue-dark
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}