mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
v1.198.1
This commit is contained in:
TheGiddyLimit
121
scss/bestiary.scss
Normal file
121
scss/bestiary.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
@import "includes/vars";
|
||||
|
||||
// region Token
|
||||
img.token {
|
||||
font-size: 1.6em;
|
||||
right: 0.4em;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Custom statblock styling
|
||||
#pagecontent .rnd-name .source {
|
||||
position: relative;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
#pagecontent {
|
||||
background-size: 100% auto;
|
||||
background: url("../img/bestiary/stat-block-top-texture.webp") no-repeat, repeat top center, $rgb-bg-orange;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
#pagecontent {
|
||||
background: $rgb-bg--night !important;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Proficiency dice rollers
|
||||
[data-proficiency-dice-mode="dice"] {
|
||||
.rd__dc--rollable {
|
||||
color: $rgb-link-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rd__dc--rollable-text,
|
||||
.rd__roller--roll-prof-bonus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rd__dc--rollable-dice,
|
||||
.rd__roller--roll-prof-dice {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
[data-proficiency-dice-mode="bonus"] {
|
||||
.rd__dc--rollable-text,
|
||||
.rd__roller--roll-prof-bonus {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.rd__dc--rollable-dice,
|
||||
.rd__roller--roll-prof-dice {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode [data-proficiency-dice-mode="dice"] .rd__dc--rollable {
|
||||
color: $rgb-link-blue--night;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Encounter builder
|
||||
.best__ {
|
||||
&ecgen-active {
|
||||
.lst__row--bestiary-sublist {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lst__row--bestiary-sublist:hover {
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.best-ecgen {
|
||||
&__ {
|
||||
&visible,
|
||||
&visible--flex,
|
||||
&visible--flex-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&btn-list {
|
||||
padding: 0 2px;
|
||||
line-height: 12px;
|
||||
font-size: 9px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.best__ecgen-active {
|
||||
.best-ecgen {
|
||||
&__visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__visible--flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__visible--flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 26.66666666%;
|
||||
}
|
||||
|
||||
&__name--sub {
|
||||
width: 29.16666667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
4
scss/changelog.scss
Normal file
4
scss/changelog.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.night-mode #pagecontent {
|
||||
background: #222;
|
||||
border-top: 1px solid #555555a0;
|
||||
}
|
||||
961
scss/classes.scss
Normal file
961
scss/classes.scss
Normal file
@@ -0,0 +1,961 @@
|
||||
@import "includes/vars";
|
||||
|
||||
// region class
|
||||
.cls__ {
|
||||
&list {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
&squash_header {
|
||||
overflow: hidden;
|
||||
max-height: 32px;
|
||||
display: block;
|
||||
width: min-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&btn-toggle-sidebar {
|
||||
cursor: pointer;
|
||||
font-size: initial;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
|
||||
// region buttons
|
||||
&btn-cf {
|
||||
&--active {
|
||||
color: white;
|
||||
background: $rgb-name-red;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-name-red, $pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&btn-sc {
|
||||
&--reprinted {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
&--active-fresh {
|
||||
color: white;
|
||||
background: $rgb-subclass;
|
||||
border-color: darken($rgb-subclass, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-reprinted {
|
||||
color: white;
|
||||
background: $rgb-subclass--stale;
|
||||
border-color: darken($rgb-subclass--stale, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--stale, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-spicy {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua;
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-stale {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--stale;
|
||||
border-color: darken($rgb-subclass-ua--stale, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--stale, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-brew {
|
||||
color: white;
|
||||
background: $rgb-class-brew;
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-brew, $pct-darken-active);
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-rebrewed {
|
||||
color: white;
|
||||
background: $rgb-class-variant-brew;
|
||||
border-color: darken($rgb-class-variant-brew, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-variant-brew, $pct-darken-active);
|
||||
border-color: darken($rgb-class-variant-brew, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
// See: `_getColorStyleClasses`
|
||||
&feature-variant-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant;
|
||||
border-bottom-color: $rgb-class-variant;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-ua-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-brew-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--stale;
|
||||
border-bottom-color: $rgb-subclass--stale;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
border-bottom-color: $rgb-subclass-ua--stale;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass;
|
||||
border-bottom-color: $rgb-subclass;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua;
|
||||
border-bottom-color: $rgb-subclass-ua;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew;
|
||||
border-bottom-color: $rgb-class-brew;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant;
|
||||
border-bottom-color: $rgb-class-variant;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-ua {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-brew {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew;
|
||||
border-bottom-color: $rgb-class-brew;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
|
||||
.night-mode .cls__ {
|
||||
&btn-toggle-sidebar {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
// region buttons
|
||||
&btn-cf {
|
||||
&--active {
|
||||
color: $rgb-off-black;
|
||||
background: $rgb-name-red--night;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: $rgb-off-black;
|
||||
background: darken($rgb-name-red--night, $pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&btn-sc {
|
||||
&--reprinted {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
&--active-fresh {
|
||||
color: white;
|
||||
background: $rgb-subclass--night;
|
||||
border-color: darken($rgb-subclass--night, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--night, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--night, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-reprinted {
|
||||
color: white;
|
||||
background: $rgb-subclass--night-stale;
|
||||
border-color: darken($rgb-subclass--night-stale, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--night-stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--night-stale, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-spicy {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--night;
|
||||
border-color: darken($rgb-subclass-ua--night, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--night, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--night, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-stale {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--night-stale;
|
||||
border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--night-stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-brew {
|
||||
color: white;
|
||||
background: $rgb-class-brew--night;
|
||||
border-color: darken($rgb-class-brew--night, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-brew--night, $pct-darken-active);
|
||||
border-color: darken($rgb-class-brew--night, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-rebrewed {
|
||||
color: white;
|
||||
background: $rgb-class-variant-brew--night;
|
||||
border-color: darken($rgb-class-variant-brew--night, $pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-variant-brew--night, $pct-darken-active);
|
||||
border-color: darken($rgb-class-variant-brew--night, $pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
&feature-variant-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant--night;
|
||||
border-bottom-color: $rgb-class-variant--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-ua-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-brew-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--night-stale;
|
||||
border-bottom-color: $rgb-subclass--night-stale;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--night-stale;
|
||||
border-bottom-color: $rgb-subclass-ua--night-stale;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew-subclass-reprint {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--night;
|
||||
border-bottom-color: $rgb-subclass--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--night;
|
||||
border-bottom-color: $rgb-subclass-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew-subclass {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew--night;
|
||||
border-bottom-color: $rgb-class-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant--night;
|
||||
border-bottom-color: $rgb-class-variant--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-ua {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-variant-brew {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-ua {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
&feature-brew {
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew--night;
|
||||
border-bottom-color: $rgb-class-brew--night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region class table
|
||||
@import "includes/classes-table";
|
||||
|
||||
.night-mode {
|
||||
.cls-tbl {
|
||||
background: $rgb-bg--night;
|
||||
|
||||
> tbody > tr > th {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&disp-name {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
|
||||
&col-group::after {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&stripe-odd:nth-child(odd) {
|
||||
background: $rgb-stripe-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region sidebar
|
||||
.cls-side__ {
|
||||
&name {
|
||||
font-size: 1.8em;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&btn-toggle {
|
||||
cursor: pointer;
|
||||
font-size: initial;
|
||||
font-weight: initial;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
|
||||
§ion {
|
||||
font-size: 0.8em;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
§ion-head {
|
||||
font-family: serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5em;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.cls-side__ {
|
||||
&btn-toggle {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region subclass tabs
|
||||
.cls-tabs__ {
|
||||
&wrp {
|
||||
align-items: baseline;
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
&sc-not-shown {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&sel-preset {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region main text
|
||||
.cls-main__ {
|
||||
&msg-no-content {
|
||||
height: 40px;
|
||||
color: $rgb-name-red;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
line-height: 2.3em;
|
||||
text-align: center;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
&linked-titles {
|
||||
@extend %linked-titles-base;
|
||||
|
||||
> td > * > .rd__h .entry-title-inner {
|
||||
@extend %linked-titles-base-inner;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .cls-main__ {
|
||||
&msg-no-content {
|
||||
color: $rgb-name-red--night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region comparison view
|
||||
.cls-comp__wrp-features {
|
||||
width: 400px;
|
||||
max-width: calc(100vw - #{2 * $spacer});
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region class book view
|
||||
.cls-bkmv__ {
|
||||
&wrp-tabs {
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-tab {
|
||||
font-size: 0.8em;
|
||||
margin-top: 2px;
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
&wrp-level {
|
||||
z-index: 1;
|
||||
left: -1px;
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
|
||||
&disp-level {
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
// region TODO are these used?
|
||||
&btn-tab.active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&btn-tab.active {
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
}
|
||||
|
||||
&btn-tab.active.spicy-sauce {
|
||||
background: $rgb-subclass-ua;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&btn-tab.active.spicy-sauce {
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border);
|
||||
}
|
||||
|
||||
&btn-tab.active.refreshing-brew {
|
||||
background: $rgb-class-brew;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&btn-tab.active.refreshing-brew {
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border);
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
|
||||
.night-mode .cls-bkmv__ {
|
||||
&wrp-tabs {
|
||||
background-color: #222;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&btn-tab {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&wrp-level {
|
||||
background: $rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region outline
|
||||
.cls-nav {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 15px;
|
||||
overflow-y: hidden;
|
||||
margin-top: 15px;
|
||||
max-height: calc(100vh - 30px);
|
||||
padding-right: 9px;
|
||||
padding-left: 9px;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
overflow-y: scroll;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&head {
|
||||
color: #00000020;
|
||||
|
||||
&--active,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&disp-toggle {
|
||||
&::after {
|
||||
content: " [+]";
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
&--active::after {
|
||||
content: "[\2012]";
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&head-inner {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&hr {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&item {
|
||||
@include overflow-dots();
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-height: 20px;
|
||||
color: $rgb-name-red;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
&--feature-variant-subclass {
|
||||
color: $rgb-class-variant;
|
||||
}
|
||||
|
||||
&--feature-variant-ua-subclass {
|
||||
color: $rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-variant-brew-subclass {
|
||||
color: $rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-subclass-reprint {
|
||||
color: $rgb-subclass--stale;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-subclass {
|
||||
color: $rgb-subclass;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass {
|
||||
color: $rgb-subclass-ua;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass {
|
||||
color: $rgb-class-brew;
|
||||
}
|
||||
|
||||
&--feature-variant {
|
||||
color: $rgb-class-variant;
|
||||
}
|
||||
|
||||
&--feature-variant-ua {
|
||||
color: $rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-variant-brew {
|
||||
color: $rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-ua {
|
||||
color: $rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-brew {
|
||||
color: $rgb-class-brew;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// Section name
|
||||
&--depth-0 {
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
&--depth-2 {
|
||||
padding-left: 10px;
|
||||
|
||||
&::before {
|
||||
content: "\2022 ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .cls-nav__ {
|
||||
&head {
|
||||
color: #bbbbbb40;
|
||||
|
||||
&--active,
|
||||
&:hover {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&item {
|
||||
color: $rgb-name-red--night;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-off-black;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
&--feature-variant-subclass {
|
||||
color: $rgb-class-variant--night;
|
||||
}
|
||||
|
||||
&--feature-variant-ua-subclass {
|
||||
color: $rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-variant-brew-subclass {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-subclass-reprint {
|
||||
color: $rgb-subclass--night-stale;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--night-stale;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-subclass {
|
||||
color: $rgb-subclass--night;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass {
|
||||
color: $rgb-subclass-ua--night;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass {
|
||||
color: $rgb-class-brew--night;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-variant {
|
||||
color: $rgb-class-variant--night;
|
||||
}
|
||||
|
||||
&--feature-variant-ua {
|
||||
color: $rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-variant-brew {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-ua {
|
||||
color: $rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-brew {
|
||||
color: $rgb-class-brew--night;
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
52
scss/converter.scss
Normal file
52
scss/converter.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.inputArea,
|
||||
.outputArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-inline {
|
||||
display: inline-block;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
#lastWarnings {
|
||||
color: #df00ff;
|
||||
}
|
||||
|
||||
#lastError {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#lastWarnings,
|
||||
#lastError {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
padding: 9px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
background-color: whitesmoke;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.night-mode #lastError {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.conv__head {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.conv__out_control__wrp {
|
||||
padding: 0 3rem 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.view-col-wrapper {
|
||||
height: 40vh;
|
||||
}
|
||||
}
|
||||
60
scss/crcalculator.scss
Normal file
60
scss/crcalculator.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
.crc__reset {
|
||||
min-width: 10rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.crc__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.crc__row label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.crc__row input[type=checkbox] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.crc__hdr_mon_features {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crc__mon_feature {
|
||||
width: 100%;
|
||||
font-weight: initial;
|
||||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.crc__mon_feature_wrp_cb {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.crc__mon_feature input[type=number] {
|
||||
width: 3em;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.crc__mon_feature input[type=checkbox] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.crc__mon_feature:nth-child(even) {
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.night-mode .crc__mon_feature:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.31);
|
||||
}
|
||||
378
scss/decks.scss
Normal file
378
scss/decks.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
@import "includes/vars";
|
||||
|
||||
:root {
|
||||
--rgb-card-glint--edge: #d5592e;
|
||||
}
|
||||
|
||||
:root.night-mode {
|
||||
--rgb-card-glint--edge: #ffd21f;
|
||||
}
|
||||
|
||||
// region Roller
|
||||
.rollbox-min {
|
||||
right: unset;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.rollbox {
|
||||
right: unset;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
#listcontainer {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
// endregion
|
||||
|
||||
.decks {
|
||||
&__ {
|
||||
&h-cards {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&wrp-btn-show-card {
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity $time-3-frames;
|
||||
}
|
||||
|
||||
&wrp-card-face {
|
||||
&:hover {
|
||||
.decks__wrp-btn-show-card {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
transition: opacity $time-3-frames;
|
||||
}
|
||||
}
|
||||
|
||||
.rd__image {
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
&--drawn {
|
||||
.rd__image {
|
||||
filter: grayscale(100%) brightness(25%);
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
.rd__wrp-image {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-card-rows {
|
||||
display: flex;
|
||||
|
||||
.rd__image-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--list {
|
||||
flex-direction: column;
|
||||
|
||||
.decks__wrp-row {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.decks__wrp-card-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--grid {
|
||||
flex-wrap: wrap;
|
||||
padding-top: $spacer;
|
||||
|
||||
.decks__wrp-row {
|
||||
width: 33%;
|
||||
padding-bottom: $spacer;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.decks__wrp-card-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-draw__ {
|
||||
$time-intro: 500ms;
|
||||
$time-flip: 750ms;
|
||||
$time-sway: 7s;
|
||||
|
||||
@keyframes anim-sway {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateX(1rem) translateY(1rem);
|
||||
}
|
||||
|
||||
37.5% {
|
||||
transform: translateX(1.15rem) translateY(0.5rem);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(1rem) translateY(0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(0) translateY(1rem);
|
||||
}
|
||||
|
||||
87.5% {
|
||||
transform: translateX(-0.15rem) translateY(0.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&stg {
|
||||
position: fixed;
|
||||
z-index: $z-hwin;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
&--visible {
|
||||
box-shadow: inset 0 0 100vh 100vh #0008;
|
||||
transition: box-shadow $time-intro;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-sparkle-sway {
|
||||
animation-name: anim-sway;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
&img-sparkle {
|
||||
@keyframes anim-sparkle-twinkle {
|
||||
0% {
|
||||
filter: initial;
|
||||
}
|
||||
|
||||
25% {
|
||||
filter: blur(1px) brightness(90%) contrast(150%) drop-shadow(0 0 17px #f6f6f6) hue-rotate(5deg) opacity(75%) saturate(80%);
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px white) hue-rotate(-5deg) opacity(75%) saturate(110%);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-sparkle-warp {
|
||||
0% {
|
||||
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotateX(20deg) rotateY(0) rotateZ(90deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateX(0) rotateY(20deg) rotateZ(180deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotateX(10deg) rotateY(0) rotateZ(270deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(0) rotateY(0) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 67%;
|
||||
max-height: 67%;
|
||||
top: -25%;
|
||||
left: -25%;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
animation-name: anim-sparkle-twinkle, anim-sparkle-warp;
|
||||
animation-timing-function: linear, linear;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
transition: opacity calc($time-intro / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-card {
|
||||
@keyframes anim-card-pop-in {
|
||||
0% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
65% {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
padding: $spacer;
|
||||
background: $rgb-name-red;
|
||||
border-radius: $spacer;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red, 0.7);
|
||||
|
||||
scale: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
animation-name: anim-card-pop-in;
|
||||
animation-duration: calc($time-intro * 0.67);
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&img-card {
|
||||
z-index: 0;
|
||||
max-height: 50vh;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
&img-card-back {
|
||||
z-index: -1;
|
||||
|
||||
width: calc(100% - #{2 * $spacer});
|
||||
height: calc(100% - #{2 * $spacer});
|
||||
|
||||
transform: rotateY(180deg);
|
||||
|
||||
transition: z-index $time-flip;
|
||||
}
|
||||
|
||||
&wrp-card-sway {
|
||||
animation-name: anim-sway;
|
||||
animation-duration: $time-sway;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
&wrp-card-flip {
|
||||
transition: transform $time-flip;
|
||||
|
||||
&--flipped {
|
||||
transform: rotateY(180deg);
|
||||
|
||||
transition: transform $time-flip;
|
||||
|
||||
.decks-draw__img-card-back {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&disp-glint {
|
||||
z-index: 2;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
border-radius: $spacer;
|
||||
}
|
||||
|
||||
&wrp-rhs {
|
||||
@keyframes anim-rhs-pop-in {
|
||||
0% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
width: min(30vw, 360px);
|
||||
margin-left: 50px;
|
||||
scale: 0;
|
||||
|
||||
&--visible {
|
||||
animation-name: anim-rhs-pop-in;
|
||||
animation-duration: calc($time-intro * 0.8);
|
||||
animation-timing-function: ease-in-out;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-top: 3px solid $rgb-name-red;
|
||||
border-bottom: 3px solid $rgb-name-red;
|
||||
background-color: #e5c4ba;
|
||||
font-size: 1em;
|
||||
padding-top: 35px;
|
||||
padding-bottom: 40px;
|
||||
box-shadow: 0 0 20px 1px #0008;
|
||||
|
||||
.rd__h {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .decks {
|
||||
&__ {
|
||||
&wrp-card-rows {
|
||||
&--list {
|
||||
.decks__wrp-row {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-draw__ {
|
||||
&wrp-card {
|
||||
background-color: $rgb-name-red--night;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red--night, 0.7);
|
||||
color: rgba(255, 255, 255, 0.53);
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-color: $rgb-name-red--night;
|
||||
background-color: #574930;
|
||||
box-shadow: 0 0 10px 0 black;
|
||||
}
|
||||
}
|
||||
}
|
||||
685
scss/dmscreen.scss
Normal file
685
scss/dmscreen.scss
Normal file
@@ -0,0 +1,685 @@
|
||||
@import "includes/vars";
|
||||
|
||||
$rgb-bg-panel-control: #80808080;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
.dms__ {
|
||||
&tab_hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dm__panel-bg {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.dm-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-gap: 7px;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-rows: 1fr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dm-screen-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dm-screen-panel {
|
||||
position: relative;
|
||||
background-color: #f0f0f0;
|
||||
|
||||
&.faux-hover {
|
||||
background: #e0e0e0;
|
||||
|
||||
.panel-content-wrapper-inner::after {
|
||||
background: #e0e0e080;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dm-screen-panel.faux-hover .panel-content-wrapper-inner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.panel-control-bar {
|
||||
position: absolute;
|
||||
z-index: 56;
|
||||
right: 11px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding-left: 3px;
|
||||
opacity: 0.2;
|
||||
transition: opacity 0.1s;
|
||||
background: $rgb-bg-panel-control;
|
||||
}
|
||||
|
||||
.dm-screen-panel[empty="true"] .panel-control-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-control-bar.move-expand-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-control-bar:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.panel-control-title {
|
||||
opacity: 0.05;
|
||||
right: initial;
|
||||
left: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding: 0 4px;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
color: white;
|
||||
user-select: none;
|
||||
background: #808080a0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-control-title--bumped {
|
||||
top: 20px;
|
||||
border-top-right-radius: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.panel-control-addtab {
|
||||
right: initial;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.panel-control-icon:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.panel-control-icon {
|
||||
top: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.panel-add {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 5rem;
|
||||
color: $rgb-border-grey;
|
||||
}
|
||||
|
||||
.btn-panel-add {
|
||||
padding: 3px 3px 5px 6px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
|
||||
&:hover,
|
||||
&.faux-hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.board-content-hovering .btn-panel-add {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.board-content-hovering .panel-control-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.panel-content-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: -9px;
|
||||
box-sizing: content-box;
|
||||
box-shadow: inset 0 0 10px 0 #909090b0;
|
||||
}
|
||||
|
||||
.panel-content-wrapper.panel-content-wrapper-tabs {
|
||||
height: calc(100% - 20px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pnl-content-tab-bar-hidden .panel-content-wrapper.panel-content-wrapper-tabs {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidemenu__history-item .panel-content-wrapper.panel-content-wrapper-tabs {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pnl-content-tab-bar-hidden .content-tab-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.content-tab-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.content-tab-bar {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
.content-tab-bar-inner {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-tab {
|
||||
margin: 0;
|
||||
padding: 1px 3px;
|
||||
font-size: 12px;
|
||||
border-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.content-tab-title {
|
||||
max-width: 80px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-tab-remove {
|
||||
top: 2px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.panel-mode-move {
|
||||
.panel-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content-hovering > * {
|
||||
box-shadow: 0 0 12px 0 #000000a0;
|
||||
}
|
||||
|
||||
.panel-content-wrapper > * {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner {
|
||||
background: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
td div.border {
|
||||
background-color: $rgb-name-red;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.panel-content-wrapper-inner::-webkit-scrollbar-track {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-control-move {
|
||||
display: none;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
.panel-control-bg {
|
||||
z-index: 54;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.panel-control-move-top {
|
||||
top: 0;
|
||||
right: 40px;
|
||||
left: 40px;
|
||||
cursor: ns-resize;
|
||||
height: 15px;
|
||||
border-top: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.panel-control-move-right {
|
||||
top: 40px;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
cursor: ew-resize;
|
||||
width: 15px;
|
||||
border-right: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.panel-control-move-bottom {
|
||||
right: 40px;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
cursor: ns-resize;
|
||||
height: 15px;
|
||||
border-bottom: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.panel-control-move-left {
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
cursor: ew-resize;
|
||||
width: 15px;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.panel-control-move-middle {
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: move;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.panel-control-move-btn-done {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-control-move-icn-done {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.panel-control-move--bg {
|
||||
background: $rgb-border-grey--trans;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.panel-control-move--bg {
|
||||
background: #777a;
|
||||
border-color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-addmenu-bar {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.panel-addmenu-tab-head {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 4px 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&[active="true"] {
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-addmenu-view {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.underline-tabs {
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.panel-tab-list-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner > table.stats {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner .rnd-name {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner td div.border {
|
||||
height: 2px;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
border-right: 5px transparent;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.panel-zoom-reset {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.panel-zoom-reset .glyphicon {
|
||||
top: 2px;
|
||||
color: $rgb-border-grey;
|
||||
}
|
||||
|
||||
/* cleaner, but Webkit-only */
|
||||
/*input[type=range].panel-zoom-slider {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
-webkit-appearance: slider-vertical;
|
||||
height: 80px;
|
||||
}*/
|
||||
|
||||
input[type=range].panel-zoom-slider {
|
||||
position: absolute;
|
||||
top: 59px;
|
||||
left: -25px;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $rgb-bg;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel-content-textarea {
|
||||
height: calc(100% - 3px);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.rollbox.rollbox-panel {
|
||||
position: relative;
|
||||
z-index: initial;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
right: initial;
|
||||
}
|
||||
|
||||
.rollbox.rollbox-panel .head-roll {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rollbox.rollbox-panel .ipt-roll {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text-insert {
|
||||
margin: -1px 1px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.panel-content-wrapper .stats--book-hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.underline-tabs .ui-modal__row:first-of-type {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sidemenu__toggle {
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
body.is-fullscreen .sidemenu__toggle {
|
||||
top: 12px;
|
||||
left: -31px;
|
||||
}
|
||||
|
||||
body.is-fullscreen .sidemenu__hotzone {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.sidemenu__history {
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.sidemenu__history-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
margin-bottom: -19px;
|
||||
transform: scale(0.667);
|
||||
width: 150%;
|
||||
transform-origin: top left;
|
||||
box-shadow: 0 0 5px 0 #000000a0;
|
||||
}
|
||||
|
||||
.sidemenu__history-item .panel-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidemenu__history-item-cover {
|
||||
position: absolute;
|
||||
z-index: 57;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel-history-control-remove-wrapper {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: opacity 0.1s;
|
||||
border-bottom-left-radius: 5px;
|
||||
background: $rgb-bg-panel-control;
|
||||
}
|
||||
|
||||
.sidemenu__history-item-cover:hover .panel-history-control-remove-wrapper {
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.panel-history-control-remove {
|
||||
top: 0;
|
||||
right: 1px;
|
||||
left: 2px;
|
||||
margin-right: 2px;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.panel-history-control-middle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
z-index: 58;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: move;
|
||||
border-radius: 50%;
|
||||
transition: opacity 0.1s;
|
||||
background: $rgb-border-grey--trans;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.sidemenu__history-item-cover:hover .panel-history-control-middle {
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.dm-screen-locked .panel-control-bar,
|
||||
.dm-screen-locked .content-tab-remove,
|
||||
.dm-screen-locked .panel-history-control-remove-wrapper,
|
||||
.dm-screen-locked .panel-history-control-middle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.btn-panel-add {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.underline-tabs {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.panel-history-control-middle {
|
||||
background: #777a;
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.dm-screen-panel {
|
||||
background-color: #303030;
|
||||
|
||||
&.faux-hover {
|
||||
background: #404040;
|
||||
|
||||
.panel-content-wrapper-inner::after {
|
||||
background: #40404080;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-control-icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.panel-add {
|
||||
color: $rgb-border-grey;
|
||||
}
|
||||
|
||||
.btn-panel-add {
|
||||
&:hover,
|
||||
&.faux-hover {
|
||||
background: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
|
||||
.panel-addmenu-tab-head[active="true"] {
|
||||
background-color: $rgb-btn-default-active--night !important;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner td div.border {
|
||||
background-color: $rgb-name-red--night;
|
||||
}
|
||||
|
||||
.dm__panel-bg {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@import "includes/dmscreen-book-viewer";
|
||||
@import "includes/dmscreen-calender";
|
||||
@import "includes/dmscreen-coin-converter";
|
||||
@import "includes/dmscreen-counter";
|
||||
@import "includes/dmscreen-initiative-tracker";
|
||||
@import "includes/dmscreen-initiative-tracker-player";
|
||||
@import "includes/dmscreen-map-viewer";
|
||||
@import "includes/dmscreen-panels-empty";
|
||||
@import "includes/dmscreen-unit-converter";
|
||||
2
scss/encounterbuilder-bundle.scss
Normal file
2
scss/encounterbuilder-bundle.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "includes/encounterbuilder";
|
||||
@import "includes/encounterbuilder-night";
|
||||
366
scss/includes/bootstrap-custom.scss
vendored
Normal file
366
scss/includes/bootstrap-custom.scss
vendored
Normal file
@@ -0,0 +1,366 @@
|
||||
@import "vars";
|
||||
|
||||
:root {
|
||||
--safe-area-inset-top: 0;
|
||||
--safe-area-inset-right: 0;
|
||||
--safe-area-inset-bottom: 0;
|
||||
--safe-area-inset-left: 0;
|
||||
}
|
||||
|
||||
// region Fix Glyphicon alignments
|
||||
.glyphicon-send {
|
||||
top: 2px;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.glyphicon--top-2p {
|
||||
top: 2px;
|
||||
}
|
||||
// endregion
|
||||
|
||||
.roller {
|
||||
color: $rgb-link-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-muted a {
|
||||
color: $rgb-link-blue--muted;
|
||||
}
|
||||
|
||||
.font-ui {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
// Help styling which should only be displayed on screens wide enough to use hover windows
|
||||
.help--hover {
|
||||
// This should approx. match the hover cutoff defined in renderer (768px).
|
||||
// Approximate, since jQuery calculates window width differently, offset likely varies with e.g. scrollbar width.
|
||||
@media (max-width: 780px) {
|
||||
cursor: default !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Base elements */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
||||
// :^)
|
||||
// TODO(iOS) deploy sensibly if this "concept" works
|
||||
padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
|
||||
|
||||
&.is-fullscreen .page__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-fullscreen .page__nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix inputs on Firefox
|
||||
input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 20px 15px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
pre,
|
||||
textarea {
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
hr {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* *** */
|
||||
|
||||
/* custom scrollbars */
|
||||
// Firefox only--use thinner scrollbars where possible (Chrome uses `-webkit` custom styling instead)
|
||||
@-moz-document url-prefix() {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbcbcb;
|
||||
}
|
||||
|
||||
// thicker scrollbar for the body only
|
||||
body {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: $w-scroll-body;
|
||||
}
|
||||
|
||||
/* *** */
|
||||
|
||||
/* Bootstrap overrides */
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-xs {
|
||||
height: $h-ipt-xs;
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.form-control--minimal {
|
||||
border-radius: 0;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.ve-flex-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
> input[type=checkbox],
|
||||
> input[type=radio] {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xxs {
|
||||
padding: 0 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-primary--half {
|
||||
background: repeating-linear-gradient(135deg, $rgb-btn-primary-blue, $rgb-btn-primary-blue 16px, $rgb-btn-primary-blue--desaturated 16px, $rgb-btn-primary-blue--desaturated 32px);
|
||||
}
|
||||
|
||||
.dropdown-menu--side {
|
||||
top: -10px;
|
||||
left: 100%;
|
||||
max-height: calc(100vh - 130px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav > li {
|
||||
> a {
|
||||
padding: 5px 14px 6px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.page__nav-inner > li.active > a,
|
||||
.page__nav-inner > li.active > a:focus,
|
||||
.page__nav-inner > li.active > a:hover {
|
||||
background-color: #006bc4;
|
||||
border-top: 0;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
.nav > li > a:focus,
|
||||
.nav > li > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav .open > a,
|
||||
.nav .open > a:focus,
|
||||
.nav .open > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a.dropdown-ext-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a.dropdown-ext-link:hover {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Allow spans instead of links in dropdown menus. Styling borrowed from original */
|
||||
.dropdown-menu > li > span {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: $font-line-height;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: #262626;
|
||||
text-decoration: none;
|
||||
background-color: $rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu > .disabled > span {
|
||||
pointer-events: none;
|
||||
color: $rgb-ctx-item-text-disabled;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $rgb-ctx-item-text-disabled;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu > .ctx-danger > span {
|
||||
background: $rgb-btn-danger-bg-red;
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: $rgb-btn-danger-border-red;
|
||||
}
|
||||
}
|
||||
/* *** */
|
||||
|
||||
.dropdown-ext-link > .glyphicon {
|
||||
top: 3px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-ext-link:hover > .glyphicon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.caret--right {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
// region Override defaults to better implement filter UI
|
||||
.input-group {
|
||||
> input.form-control,
|
||||
> label,
|
||||
> button,
|
||||
> a.btn {
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
}
|
||||
}
|
||||
|
||||
// The first horizontal row in multiple vertically-stacked input-group rows
|
||||
&--top {
|
||||
input.form-control,
|
||||
label,
|
||||
button,
|
||||
a.btn {
|
||||
&:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--middle {
|
||||
input.form-control,
|
||||
label,
|
||||
button,
|
||||
a.btn {
|
||||
border-top: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
input.form-control,
|
||||
label,
|
||||
button,
|
||||
a.btn {
|
||||
border-top: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .input-group {
|
||||
> input.form-control,
|
||||
> label,
|
||||
> button,
|
||||
> a.btn {
|
||||
&:last-child {
|
||||
border-right-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
73
scss/includes/classes-table.scss
Normal file
73
scss/includes/classes-table.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
@import "vars";
|
||||
|
||||
.cls-tbl {
|
||||
font-size: 0.8em;
|
||||
background: $rgb-bg-orange;
|
||||
|
||||
> tbody > tr > th {
|
||||
color: $rgb-off-black;
|
||||
padding: 1px 0.3em;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&disp-name {
|
||||
font-size: 1.8em;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
padding-left: 0.2em;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
|
||||
&col-group {
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 96%;
|
||||
border-bottom: 1px solid $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&col-level {
|
||||
text-align: center;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
&col-prof-bonus {
|
||||
text-align: center;
|
||||
width: 1.5em;
|
||||
padding: 1px 0.5em;
|
||||
}
|
||||
|
||||
&col-generic-center {
|
||||
text-align: center;
|
||||
min-width: 1em;
|
||||
max-width: 5em;
|
||||
}
|
||||
|
||||
&stripe-odd:nth-child(odd) {
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
&cell-spell-progression--spell-points-enabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&cell-spell-points {
|
||||
display: none !important;
|
||||
|
||||
&--spell-points-enabled {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
scss/includes/dmscreen-book-viewer.scss
Normal file
29
scss/includes/dmscreen-book-viewer.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-book__ {
|
||||
&wrp-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&wrp-controls {
|
||||
padding: 2px 2px 1px 21px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&controls-title {
|
||||
height: 20px;
|
||||
padding: 0 3px;
|
||||
width: 50%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-book__ {
|
||||
&wrp-controls {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
283
scss/includes/dmscreen-calender.scss
Normal file
283
scss/includes/dmscreen-calender.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-time__ {
|
||||
&btn-time {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&btn-time--top {
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&btn-time--bottom {
|
||||
border-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&sep-time {
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
&ipt-time {
|
||||
width: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&bar-clock {
|
||||
height: calc(100% - 8px);
|
||||
margin: 4px 8px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-day {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&wrp-weather {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
&btn-weather {
|
||||
width: 34px;
|
||||
padding: 0;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&btn-random-weather {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&ipt-weather {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&btn-date-adjust {
|
||||
width: 27px;
|
||||
padding: 1px 3px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&disp-calendar-day {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
min-height: 21px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&disp-calendar-day--active {
|
||||
background: $rgb-stripe-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
border-radius: 3px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&disp-day-entry--event {
|
||||
top: 1px;
|
||||
color: #61adef;
|
||||
}
|
||||
|
||||
&disp-day-entry--encounter {
|
||||
top: 10px;
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
&disp-clock-entry {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
top: -4px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&disp-clock-entry--event {
|
||||
color: #61adef;
|
||||
}
|
||||
|
||||
&disp-clock-entry--encounter {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
&disp-clock-entry--used-encounter {
|
||||
color: #8a8a8a; /* Desaturated green */
|
||||
}
|
||||
|
||||
&wrp-clock-events {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
&day-entry-header {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&day-entry-wrapper {
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
&spc-column-delete {
|
||||
width: calc(24px + 0.5rem);
|
||||
}
|
||||
|
||||
&row-delete:only-child .btn-danger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&spc-button {
|
||||
display: none;
|
||||
width: 24px;
|
||||
height: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&row-delete:only-child .dm-time__spc-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&wrp-event-entries {
|
||||
box-shadow: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 3px;
|
||||
margin-top: 3px;
|
||||
margin-left: 6px;
|
||||
width: calc(100% - 6px);
|
||||
}
|
||||
|
||||
&bar-entry {
|
||||
margin: 0 4px;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
&wind-speed {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&ipt-color-moon {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
&spc-drag-header {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&disp-day-moon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
&cvs-moon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&clock-moon-phase {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&calendar-moon-phase {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-bottom: 1px;
|
||||
line-height: 8px;
|
||||
}
|
||||
|
||||
&calendar-moon-phase .glyphicon {
|
||||
top: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
&calendar-moon-phase:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&calendar-ipt-date {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&calendar-ipt-date--slashed-right {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&calendar-ipt-date--slashed-left {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&calendar-date-sep {
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&ipt-event-time {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-time__ {
|
||||
&bar-clock {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-calendar-day {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry--event,
|
||||
&disp-clock-entry--event {
|
||||
color: #7398b7;
|
||||
}
|
||||
|
||||
&disp-day-entry--encounter,
|
||||
&disp-clock-entry--encounter {
|
||||
color: #64cc64;
|
||||
}
|
||||
|
||||
&disp-clock-entry--used-encounter {
|
||||
color: #989898; /* Desaturated night green */
|
||||
}
|
||||
|
||||
&wrp-event-entries {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&bar-entry {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&cvs-moon {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&calendar-ipt-date {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
80
scss/includes/dmscreen-coin-converter.scss
Normal file
80
scss/includes/dmscreen-coin-converter.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-money {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 22px;
|
||||
|
||||
&__ {
|
||||
&rows {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&ctrl {
|
||||
margin-top: 6px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&ctrl__lhs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
&ctrl__lhs > * {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&ctrl__lhs > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&ctrl__rhs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
&ctrl__rhs > * {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&ctrl__rhs > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&out,
|
||||
&out[disabled] {
|
||||
text-align: right;
|
||||
background: #0000;
|
||||
}
|
||||
|
||||
&row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&row > * {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&row > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-money {
|
||||
&__ {
|
||||
&ctrl {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
scss/includes/dmscreen-counter.scss
Normal file
32
scss/includes/dmscreen-counter.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-cnt__ {
|
||||
&ipt {
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&ipt--cur {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&ipt--max {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&slash {
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
width: 4px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-cnt__ {
|
||||
&ipt {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
5
scss/includes/dmscreen-initiative-tracker-player.scss
Normal file
5
scss/includes/dmscreen-initiative-tracker-player.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
textarea.dm-init-pl__textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
232
scss/includes/dmscreen-initiative-tracker.scss
Normal file
232
scss/includes/dmscreen-initiative-tracker.scss
Normal file
@@ -0,0 +1,232 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-init {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dm-init__wrp-header-outer {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dm-init__wrp-header {
|
||||
flex: none;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-variant: small-caps;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.dm-init__header {
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dm-init__header--input {
|
||||
width: 40px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.dm-init__header--input-wide {
|
||||
width: 80px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.dm-init__spc-header-buttons {
|
||||
width: 52px;
|
||||
|
||||
&--single {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.dm-init__wrp-entries {
|
||||
overflow-y: scroll;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.dm-init__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.dm-init__row-lhs,
|
||||
.dm-init__row-rhs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dm-init__row-lhs {
|
||||
width: 100%;
|
||||
min-width: 115px;
|
||||
}
|
||||
|
||||
.dm-init__row-mid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dm-init__row-btn {
|
||||
line-height: 26px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.dm-init__row-btn-flag,
|
||||
.dm-init__btn_eye {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.dm-init__number {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.dm-init__wrp-creature {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin: 0 3px 0 0;
|
||||
padding-left: 5px;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.dm-init__btn-creature {
|
||||
padding: 1px 2px;
|
||||
line-height: 12px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.dm-init__wrp-creature-link {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dm-init__row-input {
|
||||
height: auto;
|
||||
margin-right: 3px;
|
||||
padding: 5px 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dm-init__ipt-name {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.dm-init__ipt--rhs {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.dm-init__wrp-stat-cb {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.dm-init__row-rhs input[type=number]::-webkit-inner-spin-button,
|
||||
.dm-init__row-rhs input[type=number]::-webkit-outer-spin-button {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active input,
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-creature,
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
background: #cfe5ff78;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.dm-init__wrp-controls {
|
||||
flex: none;
|
||||
height: 29px;
|
||||
padding: 3px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dm-init__rounds {
|
||||
width: 35px;
|
||||
height: $h-ipt-xs;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dm-init__hp {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-init__sep-fields-slash {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(50% - 6px);
|
||||
width: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dm-init__stat_head {
|
||||
margin-right: 3px;
|
||||
padding: 5px 0;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dm-init__stat_ipt {
|
||||
width: 40px;
|
||||
margin-right: 3px;
|
||||
padding: 5px 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dm-init-cond__ {
|
||||
&wrp-btns {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
&btn-cond {
|
||||
min-width: 85px;
|
||||
color: white !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.dm-init__wrp-header {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-controls {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-creature {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active input,
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-creature,
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
background: #8dc1ff20;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
48
scss/includes/dmscreen-map-viewer.scss
Normal file
48
scss/includes/dmscreen-map-viewer.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-map__ {
|
||||
&picker-wrp-img {
|
||||
display: inline-block;
|
||||
width: 320px;
|
||||
height: 340px;
|
||||
line-height: 320px;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
border: 2px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
&picker-img {
|
||||
width: auto;
|
||||
height: 320px;
|
||||
vertical-align: middle;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&picker-disp-name {
|
||||
top: calc(100% - 20px);
|
||||
right: 14px;
|
||||
bottom: 0;
|
||||
left: 14px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-map__ {
|
||||
&picker-wrp-img {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&picker-disp-name {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
14
scss/includes/dmscreen-panels-empty.scss
Normal file
14
scss/includes/dmscreen-panels-empty.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-blank__ {
|
||||
&panel {
|
||||
background: $rgb-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-blank__ {
|
||||
&panel {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
33
scss/includes/dmscreen-unit-converter.scss
Normal file
33
scss/includes/dmscreen-unit-converter.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import "vars";
|
||||
|
||||
.dm-unitconv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__ {
|
||||
&wrp-ipt {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&wrp-ipt-inner {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&btn-switch {
|
||||
margin: 0 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&ipt {
|
||||
resize: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&ipt.ipt-invalid:focus {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(231, 99, 99, 0.6);
|
||||
border-color: #e92b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
scss/includes/encounterbuilder-night.scss
Normal file
7
scss/includes/encounterbuilder-night.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .best-ecgen__ {
|
||||
&wrp {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
27
scss/includes/encounterbuilder.scss
Normal file
27
scss/includes/encounterbuilder.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
@import "vars";
|
||||
|
||||
.ecgen {
|
||||
&__ {
|
||||
&wrp_add_players_btn_wrp {
|
||||
width: calc(140px + 0.5rem);
|
||||
}
|
||||
|
||||
&btn-random-adjust {
|
||||
min-width: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
&-player__ {
|
||||
&wrp-row {
|
||||
&:only-child {
|
||||
.ecgen-player__btn-inline {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&btn-inline {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
scss/includes/expose-vars.scss
Normal file
20
scss/includes/expose-vars.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
@import "vars";
|
||||
|
||||
// region Expose variables for homebrew
|
||||
:root {
|
||||
--rgb-font: #{$rgb-font};
|
||||
--rgb-font--muted: #{$rgb-font--muted};
|
||||
--rgb-name: #{$rgb-name-red};
|
||||
--rgb-bg: #{$rgb-bg};
|
||||
--rgb-bg--alt: #{$rgb-bg--alt};
|
||||
--rgb-border--statblock: #{$rgb-border-yellow--statblock};
|
||||
}
|
||||
|
||||
:root.night-mode {
|
||||
--rgb-font: #{$rgb-font--night};
|
||||
--rgb-name: #{$rgb-name-red--night};
|
||||
--rgb-bg: #{$rgb-bg--night};
|
||||
--rgb-bg--alt: #{$rgb-bg--alt-night};
|
||||
--rgb-border--statblock: #{$rgb-border-grey--statblock-night};
|
||||
}
|
||||
// endregion
|
||||
155
scss/includes/filter-night.scss
Normal file
155
scss/includes/filter-night.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .fltr {
|
||||
$flt-ignore: $rgb-bg--night;
|
||||
$flt-ignore--hover: #323232;
|
||||
|
||||
&__ {
|
||||
&btn_nest {
|
||||
background: $flt-ignore;
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&--include {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&--include-all {
|
||||
background: $rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude-all {
|
||||
background: $rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--both {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider {
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px $rgb-off-black;
|
||||
background: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider--sub {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&pill {
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&[state=ignore] {
|
||||
background: $flt-ignore;
|
||||
|
||||
&:hover {
|
||||
background: $flt-ignore--hover;
|
||||
}
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
border-color: darken($rgb-active-red, $pct-darken-border);
|
||||
}
|
||||
|
||||
&--muted {
|
||||
color: darken($rgb-font--muted, 7%);
|
||||
|
||||
&[state=yes],
|
||||
&[state=no] {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&mini-view {
|
||||
background: #343434;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: linear-gradient(to top, $rgb-border-grey--night, #343434 1px);
|
||||
}
|
||||
|
||||
&h-btn-logic--blue {
|
||||
color: $rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-logic--red {
|
||||
color: $rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-red--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search__ {
|
||||
&wrp-row {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-values {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-src__ {
|
||||
&wrp-slider {
|
||||
background: #333a;
|
||||
}
|
||||
}
|
||||
|
||||
&-cls__ {
|
||||
&tgl {
|
||||
@include cb-custom--night();
|
||||
}
|
||||
}
|
||||
}
|
||||
537
scss/includes/filter.scss
Normal file
537
scss/includes/filter.scss
Normal file
@@ -0,0 +1,537 @@
|
||||
@import "vars";
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
.dropdown-menu-filter {
|
||||
max-height: 525px;
|
||||
}
|
||||
}
|
||||
|
||||
$flt-ignore: #f0f0f0;
|
||||
$flt-ignore--hover: #e6e6e6;
|
||||
|
||||
.fltr {
|
||||
$sz-font-pill: 10.5px;
|
||||
|
||||
&__ {
|
||||
$w-margin-pill: 2px;
|
||||
|
||||
&btn-close {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&minimal-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&no-items {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&h {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
align-items: center;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
flex-direction: column;
|
||||
|
||||
&--multi {
|
||||
flex-direction: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&h-text {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&h-wrp-btns-outer {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: initial !important;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
margin: ($spacer * 0.25) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&h-wrp-state-btns-outer {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-mobile-settings {
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
&h-btn-logic {
|
||||
min-width: 46px;
|
||||
font-weight: bold;
|
||||
|
||||
&.btn-xxs {
|
||||
min-width: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-logic--blue {
|
||||
color: $rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-blue--dark;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-logic--red {
|
||||
color: $rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-red--dark;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn--all,
|
||||
&h-btn--all:focus,
|
||||
&h-btn--all:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-active-blue;
|
||||
}
|
||||
|
||||
&h-btn--clear,
|
||||
&h-btn--clear:focus,
|
||||
&h-btn--clear:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-inactive-grey;
|
||||
}
|
||||
|
||||
&h-btn--none,
|
||||
&h-btn--none:focus,
|
||||
&h-btn--none:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-active-red;
|
||||
}
|
||||
|
||||
&summary_item {
|
||||
cursor: help;
|
||||
margin: 0 3px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
&summary_nest {
|
||||
display: flex;
|
||||
padding: 2px 0;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&summary_item {
|
||||
&--include {
|
||||
color: $rgb-active-blue;
|
||||
text-shadow: 0 0 1px $rgb-active-blue;
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
color: $rgb-active-red;
|
||||
text-shadow: 0 0 1px $rgb-active-red;
|
||||
}
|
||||
}
|
||||
|
||||
&summary_item_spacer {
|
||||
margin: 0 3px;
|
||||
padding-left: 1px;
|
||||
cursor: default;
|
||||
background: $rgb-border-grey--trans;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
&btn_nest {
|
||||
margin: $w-margin-pill;
|
||||
padding: 2px 6px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: $sz-font-pill;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: $flt-ignore;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background-color: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&--include {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: white;
|
||||
padding: 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--include-all {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: white;
|
||||
padding: 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude-all {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--both {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&container-pills {
|
||||
margin-right: -$w-margin-pill;
|
||||
margin-left: -$w-margin-pill;
|
||||
}
|
||||
|
||||
&dropdown-divider {
|
||||
border-bottom: $rgb-border-grey 1px dotted;
|
||||
width: 100%;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px $rgb-border-grey--muted;
|
||||
height: 7px;
|
||||
flex-shrink: 0;
|
||||
border: 0;
|
||||
background: $rgb-border-grey;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
&--indented {
|
||||
opacity: 0.4;
|
||||
width: calc(100% - 80px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider--sub {
|
||||
border-style: dashed;
|
||||
width: calc(100% - #{$spacer * 2});
|
||||
border-color: $rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&pill {
|
||||
margin: 2px;
|
||||
padding: 2px 6px;
|
||||
background: $flt-ignore;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: $sz-font-pill;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
border-color: darken($rgb-active-red, $pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--ability-bonus {
|
||||
min-width: 26px;
|
||||
border-right-width: 0;
|
||||
margin: 0;
|
||||
flex: 1; // This is more aesthetic, but worse UX. Consider removing?
|
||||
|
||||
&:last-of-type {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&--muted {
|
||||
background-color: darken($flt-ignore, 7%);
|
||||
color: lighten($rgb-font--muted, 7%);
|
||||
|
||||
&[state=yes],
|
||||
&[state=no] {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-pills,
|
||||
&wrp-pills--sub {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
&wrp-pills {
|
||||
display: block;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-pills--flex,
|
||||
&wrp-pills--sub {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&wrp-subs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&mini-view {
|
||||
border-left: $rgb-border-grey 1px solid;
|
||||
border-right: $rgb-border-grey 1px solid;
|
||||
background: linear-gradient(to top, $rgb-border-grey, $rgb-bg--alt 1px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--no-sort-buttons {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
background: $rgb-bg--alt;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
min-height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&mini-pill {
|
||||
margin: 1px 2px;
|
||||
padding: 1px 2px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9.4px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: red line-through;
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--default-sel[state=yes] {
|
||||
background: #48637a;
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
background: $rgb-name-red;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--default-desel[state=no] {
|
||||
background: #7a564f;
|
||||
}
|
||||
}
|
||||
|
||||
&h-summary {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&h-summary-filtering {
|
||||
color: $rgb-off-black;
|
||||
text-shadow: 0 0 1px $rgb-off-black;
|
||||
}
|
||||
|
||||
&h-btn-toggle-display {
|
||||
min-width: 43px;
|
||||
}
|
||||
|
||||
&slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&range-inline-label {
|
||||
margin-left: 15px;
|
||||
flex-shrink: 0;
|
||||
min-width: 75px;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&group-comb-toggle {
|
||||
font-style: italic;
|
||||
cursor: pointer;
|
||||
letter-spacing: -1px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&label-ability-score {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
&hidden--inactive {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&hidden--search {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-search__ {
|
||||
&wrp-search {
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
.fltr-search__wrp-values {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-row {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-values {
|
||||
max-height: 200px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&disp-name {
|
||||
font-size: $sz-font-pill;
|
||||
}
|
||||
|
||||
&btn-activate {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
|
||||
&--yes {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
border: 1px solid lighten($rgb-active-blue, $pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--no {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
border: 1px solid lighten($rgb-active-red, $pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-src__ {
|
||||
&spc-pill {
|
||||
color: $rgb-font--muted;
|
||||
}
|
||||
|
||||
&wrp-slider {
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-cls__ {
|
||||
&tgl {
|
||||
@include cb-custom();
|
||||
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&__pill {
|
||||
&[state=yes] > .fltr-src__spc-pill {
|
||||
color: #fff9;
|
||||
}
|
||||
|
||||
&[state=no] > .fltr-src__spc-pill {
|
||||
color: #fffa;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
scss/includes/hover-night.scss
Normal file
5
scss/includes/hover-night.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .hwin {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
205
scss/includes/hover.scss
Normal file
205
scss/includes/hover.scss
Normal file
@@ -0,0 +1,205 @@
|
||||
@import "vars";
|
||||
|
||||
@keyframes kf-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hwin {
|
||||
position: fixed;
|
||||
width: 600px;
|
||||
max-width: 92vw;
|
||||
min-width: 150px;
|
||||
z-index: $z-hwin;
|
||||
box-shadow: 0 0 12px 0 black;
|
||||
animation-name: kf-fade-in;
|
||||
animation-duration: 150ms;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $rgb-bg--alt;
|
||||
|
||||
&--minified {
|
||||
.hoverborder {
|
||||
&__resize-n,
|
||||
&__resize-ne,
|
||||
&__resize-e,
|
||||
&__resize-se,
|
||||
&__resize-s,
|
||||
&__resize-sw,
|
||||
&__resize-w,
|
||||
&__resize-nw {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--popout {
|
||||
box-shadow: initial;
|
||||
width: 100%;
|
||||
animation-duration: initial;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #a0a0a0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&__wrp-table {
|
||||
max-height: 92vh;
|
||||
min-height: 20px;
|
||||
overflow-y: auto;
|
||||
background: $rgb-bg--alt;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.rnd-name {
|
||||
font-size: 22.4px;
|
||||
}
|
||||
|
||||
td div.border {
|
||||
height: 2px;
|
||||
background-color: $rgb-name-red;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
border-right: 5px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverborder {
|
||||
position: relative;
|
||||
min-height: 3px;
|
||||
max-height: 16px;
|
||||
text-align: right;
|
||||
|
||||
&--btm {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
&--top {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hwin__top-border-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-perm=true] .hwin__top-border-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
max-width: calc(100% - 45px);
|
||||
text-align: left;
|
||||
margin-left: 4px;
|
||||
padding: 1px 0;
|
||||
font-size: 12px;
|
||||
display: none;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&[data-perm=true] .window-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__resize-n {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 4px;
|
||||
left: 4px;
|
||||
height: 4px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
&__resize-ne {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
&__resize-e {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: -4px;
|
||||
bottom: 4px;
|
||||
width: 4px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&__resize-se {
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
&__resize-s {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 4px;
|
||||
left: 4px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
&__resize-sw {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: -6px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
&__resize-w {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
left: -4px;
|
||||
width: 4px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&__resize-nw {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverborder[data-display-title=true] ~ .hwin__wrp-table,
|
||||
.hoverborder[data-display-title=true] ~ .hoverborder {
|
||||
display: none;
|
||||
}
|
||||
47
scss/includes/list.scss
Normal file
47
scss/includes/list.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import "vars";
|
||||
|
||||
.lst__ {
|
||||
&wrp-search-glass {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 2px;
|
||||
left: 6px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&wrp-search-visible {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 6px;
|
||||
bottom: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&caret {
|
||||
&--active {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-top: 4px dashed;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
&--reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.lst__ {
|
||||
&search {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
&search--no-border-h {
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
8
scss/includes/lootgen-night.scss
Normal file
8
scss/includes/lootgen-night.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .lootg__ {
|
||||
&wrp-output {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
9
scss/includes/lootgen.scss
Normal file
9
scss/includes/lootgen.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "vars";
|
||||
|
||||
.lootg__ {
|
||||
&wrp-output {
|
||||
border-radius: 5px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
}
|
||||
179
scss/includes/nav.scss
Normal file
179
scss/includes/nav.scss
Normal file
@@ -0,0 +1,179 @@
|
||||
@import "vars";
|
||||
|
||||
// region Old
|
||||
.nav {
|
||||
.dropdown-menu--top {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-sm) {
|
||||
.nav > li > a {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.night-mode .nav > li > a {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.nav > li:not(.active) > a {
|
||||
color: $rgb-font--night;
|
||||
background-color: $rgb-bg--night;
|
||||
border: 1px solid $rgb-border-grey--trans-night;
|
||||
border-top: 0;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav > li.active > a {
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav li.open > a,
|
||||
.nav li.open > a:focus,
|
||||
.nav li.open > a:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
border-left: 1px solid $rgb-link-blue;
|
||||
border-right: 1px solid $rgb-link-blue;
|
||||
border-color: $rgb-link-blue;
|
||||
}
|
||||
|
||||
.nav li.active.open > a,
|
||||
.nav li.active.open > a:focus,
|
||||
.nav li.active.open > a:hover {
|
||||
background-color: $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-lg) {
|
||||
.nav .caret--right {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu--side {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region New
|
||||
.nav2 {
|
||||
&-list__ {
|
||||
&label {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
&disp-source {
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
border-left: 1px solid;
|
||||
position: relative;
|
||||
border-right: 1px solid;
|
||||
top: 2px;
|
||||
margin-right: 7px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-accord__ {
|
||||
&head {
|
||||
padding: 3px 7px 3px 20px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&body {
|
||||
padding: 3px 0 3px 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&lnk-item {
|
||||
padding: 3px 20px;
|
||||
color: $rgb-off-black;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .nav2 {
|
||||
&-accord__ {
|
||||
&head {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&lnk-item {
|
||||
color: $rgb-font--night;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
84
scss/includes/render-night.scss
Normal file
84
scss/includes/render-night.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .rd {
|
||||
&__ {
|
||||
&h--0,
|
||||
&h--1,
|
||||
&h--2 {
|
||||
color: $rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--1 {
|
||||
border-bottom-color: $rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--4 {
|
||||
color: $rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&h--3 {
|
||||
color: $rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&-image-title-inner {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&b-inset {
|
||||
background-color: #323431;
|
||||
|
||||
&--readaloud {
|
||||
background-color: #28303a;
|
||||
}
|
||||
}
|
||||
|
||||
&b-data {
|
||||
border-color: $rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
&b-flow {
|
||||
background-color: #38352f;
|
||||
}
|
||||
|
||||
&comic {
|
||||
color: #95aaea;
|
||||
}
|
||||
|
||||
&stats-name-page {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
|
||||
&highlight {
|
||||
background-color: $rgb-bg-highlight--night;
|
||||
color: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-item__ {
|
||||
&type-rarity-attunement {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-spell__ {
|
||||
&level-school-ritual {
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-ability-icon {
|
||||
&__ {
|
||||
&fill-primary {
|
||||
fill: $rgb-font--night;
|
||||
}
|
||||
|
||||
&fill-bg {
|
||||
fill: $rgb-bg--night;
|
||||
}
|
||||
|
||||
&stroke-bg {
|
||||
stroke: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
685
scss/includes/render.scss
Normal file
685
scss/includes/render.scss
Normal file
@@ -0,0 +1,685 @@
|
||||
/*
|
||||
Renderer
|
||||
*/
|
||||
|
||||
@import "vars";
|
||||
|
||||
$rgb-inset-border: #656565;
|
||||
|
||||
:root {
|
||||
--sz-font-h0: 1.8em;
|
||||
--sz-font-h1: 1.5em;
|
||||
--sz-font-h2: 1.35em;
|
||||
|
||||
--h-mb-p: 5px;
|
||||
--h-mb-p-inline: 0;
|
||||
--h-mb-quote-line: 5px;
|
||||
--h-mb-quote-line-last: 5px;
|
||||
--h-mb-li: 3px;
|
||||
--w-text-indent-inline-p: 0.7em;
|
||||
--w-pl-list: 24px;
|
||||
--w-pl-list-no-bullets: 10px;
|
||||
}
|
||||
|
||||
@mixin rd__h--large() {
|
||||
color: $rgb-name-red;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes rd__spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rd {
|
||||
&__ {
|
||||
&b {
|
||||
p {
|
||||
margin-bottom: var(--h-mb-p);
|
||||
}
|
||||
}
|
||||
|
||||
&b--0,
|
||||
&b--1,
|
||||
&b--2,
|
||||
&b--3,
|
||||
&b--4 {
|
||||
margin-bottom: var(--h-mb-p);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&hr {
|
||||
border-color: #aaa6;
|
||||
margin: 17px 0 5px;
|
||||
|
||||
&--section {
|
||||
margin: 30px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&list {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--h-mb-p);
|
||||
padding-left: var(--w-pl-list);
|
||||
|
||||
> .rd__list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> .rd__list-name {
|
||||
margin-left: calc(-1 * var(--w-pl-list));
|
||||
}
|
||||
}
|
||||
|
||||
&list-name {
|
||||
margin: 0 0 var(--h-mb-li);
|
||||
font-weight: bold;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&li {
|
||||
margin-bottom: var(--h-mb-p);
|
||||
}
|
||||
|
||||
&compact-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
&title-link {
|
||||
opacity: 0.3;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
&--inset {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-image {
|
||||
margin: 5px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&image {
|
||||
// N.b. this width/height should be reflected in the renderer image styling
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
&wrp-map {
|
||||
max-width: 33%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&wrp-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&wrp-gallery-image {
|
||||
padding: 0 10px 10px;
|
||||
max-width: 33%;
|
||||
}
|
||||
|
||||
&gallery-name {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
"e {
|
||||
&-line {
|
||||
margin-bottom: var(--h-mb-quote-line);
|
||||
|
||||
&--last {
|
||||
margin-bottom: var(--h-mb-quote-line-last);
|
||||
}
|
||||
}
|
||||
|
||||
&-by {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&p-list-item {
|
||||
// This prevents e.g. "italic" on the list item name from affecting the list item"s text.
|
||||
font-style: initial;
|
||||
}
|
||||
|
||||
&p-cont-indent {
|
||||
display: block;
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
&tab-indent {
|
||||
width: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&image-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&image-title-inner {
|
||||
display: inline-block;
|
||||
text-decoration: underline;
|
||||
margin: 2px 0; // Align with map viewer buttons, which are padded + bordered on all sides
|
||||
}
|
||||
|
||||
&image-btn-viewer {
|
||||
// Style the button text to match normal image title labels
|
||||
font-style: initial;
|
||||
white-space: normal;
|
||||
font-size: inherit;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
&image-credit {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// Thicker scrollbars for viewer
|
||||
&scroller-viewer {
|
||||
scrollbar-width: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&prerequisite {
|
||||
font-style: italic;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&li-spell {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&list-hang-notitle {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> .rd__li {
|
||||
margin-bottom: var(--h-mb-li);
|
||||
text-indent: -1.1em;
|
||||
margin-left: 1.1em;
|
||||
|
||||
a,
|
||||
span {
|
||||
text-indent: initial;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 0 0 var(--h-mb-li);
|
||||
}
|
||||
|
||||
// fixme?
|
||||
> ul {
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&list-hang {
|
||||
list-style: none;
|
||||
|
||||
> .rd__list-name {
|
||||
margin-left: calc(-1 * var(--w-pl-list));
|
||||
}
|
||||
|
||||
// Firefox workaround; list bullets are pseudo-elements "::marker"
|
||||
> li > *:not(::marker) {
|
||||
text-indent: -1.1em;
|
||||
margin-left: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&list-decimal {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
&list-lower-roman {
|
||||
list-style: lower-roman;
|
||||
}
|
||||
|
||||
&list-upper-roman {
|
||||
list-style: upper-roman;
|
||||
}
|
||||
|
||||
&list-no-bullets {
|
||||
list-style: none;
|
||||
padding: 0 0 0 var(--w-pl-list-no-bullets);
|
||||
|
||||
> .rd__list-name {
|
||||
margin-left: calc(-1 * var(--w-pl-list-no-bullets));
|
||||
}
|
||||
}
|
||||
|
||||
&list-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
"e {
|
||||
&-pull {
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
// section headers
|
||||
&h {
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// statsBlockSectionHead
|
||||
&h--0 {
|
||||
@include rd__h--large();
|
||||
|
||||
font-size: var(--sz-font-h0);
|
||||
}
|
||||
|
||||
// underline headers
|
||||
// statsBlockHead
|
||||
&h--1 {
|
||||
@include rd__h--large();
|
||||
|
||||
font-size: var(--sz-font-h1);
|
||||
border-bottom: 1px solid $rgb-name-red;
|
||||
margin: 0 0 0.2em;
|
||||
}
|
||||
|
||||
// basic headers
|
||||
// statsBlockSubHead
|
||||
&h--2 {
|
||||
@include rd__h--large();
|
||||
|
||||
font-size: var(--sz-font-h2);
|
||||
}
|
||||
|
||||
// inset headers
|
||||
// statsBlockInset and statsBlockInsetReadaloud
|
||||
&h--2-inset {
|
||||
font-variant: small-caps;
|
||||
font-weight: bolder;
|
||||
font-size: 1.1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-no-name {
|
||||
justify-content: flex-end;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&h--2-flow-block {
|
||||
display: block;
|
||||
font-variant: small-caps;
|
||||
font-weight: bolder;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&h--2-inset > h4,
|
||||
&h--2-flow-block > h4 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: $font-line-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// inline headers
|
||||
// statsInlineHead
|
||||
&h--3 {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// sub-inline headers (only seen in monster variant)
|
||||
// statsInlineHeadSubVariant
|
||||
&h--4 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&h-toggle {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
opacity: 0.3;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&ele-toggled-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&b--3 > p,
|
||||
&b--4 > p {
|
||||
text-indent: var(--w-text-indent-inline-p);
|
||||
margin-bottom: var(--h-mb-p-inline);
|
||||
|
||||
&:first-of-type {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&b-inset > p {
|
||||
text-indent: var(--w-text-indent-inline-p);
|
||||
margin-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&b-inset {
|
||||
margin: 7px 15px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
border: 1px solid $rgb-inset-border;
|
||||
border-top: 2px solid $rgb-inset-border;
|
||||
border-bottom: 2px solid $rgb-inset-border;
|
||||
background-color: #e9ecda;
|
||||
|
||||
> *:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--readaloud {
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
border: 1px solid $rgb-inset-border;
|
||||
border-left: 2px solid $rgb-inset-border;
|
||||
border-right: 2px solid $rgb-inset-border;
|
||||
background-color: #eef0f3;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&b-data {
|
||||
border: 3px solid $rgb-border-yellow--statblock;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
margin: 5px;
|
||||
width: calc(100% - 12px);
|
||||
table-layout: fixed;
|
||||
|
||||
&--inset {
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
border: 1px solid $rgb-inset-border;
|
||||
background-color: rgba(156, 150, 120, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&li > .rd__b-data {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&data-embed {
|
||||
&-header {
|
||||
cursor: pointer;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 100, 100, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
font-family: Arial, sans-serif;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-loadbrew--ready {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&loadbrew-icon {
|
||||
text-indent: 0;
|
||||
margin-left: 2px;
|
||||
transition-property: transform;
|
||||
transition-duration: 1s;
|
||||
|
||||
&--active {
|
||||
animation-name: rd__spin;
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
&table {
|
||||
width: 100%;
|
||||
margin-bottom: var(--h-mb-p);
|
||||
|
||||
> caption {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&comic {
|
||||
font-family: "Blambot Casual", sans-serif;
|
||||
color: #1942be;
|
||||
|
||||
&--h1 {
|
||||
font-size: 140%;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
&--h2 {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
&--h3 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
&--h4 {
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
&--note {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&-img-speaker {
|
||||
margin-top: -5px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
&--left {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
float: right;
|
||||
margin-right: -20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&img {
|
||||
&-small {
|
||||
max-width: 25vw;
|
||||
max-height: 25vh;
|
||||
}
|
||||
}
|
||||
|
||||
&s-v-flow {
|
||||
height: 15px;
|
||||
width: 0;
|
||||
border-left: 1px solid $rgb-inset-border;
|
||||
border-right: 1px solid $rgb-inset-border;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&b-flow {
|
||||
margin: 0 15px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
border: 1px solid $rgb-inset-border;
|
||||
border-top: 2px solid $rgb-inset-border;
|
||||
border-bottom: 2px solid $rgb-inset-border;
|
||||
background-color: #ece4da;
|
||||
|
||||
> *:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&stats-name-page {
|
||||
font-family: "Convergence", Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
color: $rgb-off-black;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
&stats-name-brew-link {
|
||||
font-size: 13px;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
&pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
&highlight {
|
||||
background-color: $rgb-bg-highlight;
|
||||
}
|
||||
|
||||
&color {
|
||||
a {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item__ {
|
||||
&type-rarity-attunement {
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&-spell__ {
|
||||
&level-school-ritual {
|
||||
font-style: italic;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&-ability-icon {
|
||||
max-width: 100px;
|
||||
|
||||
&__ {
|
||||
&fill-primary {
|
||||
fill: $rgb-off-black;
|
||||
}
|
||||
|
||||
&fill-bg {
|
||||
fill: $rgb-bg;
|
||||
}
|
||||
|
||||
&stroke-bg {
|
||||
stroke: $rgb-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Entries embedded in tables
|
||||
td > .rd__b:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ****************************************************************************************************************** */
|
||||
/* Entity-specific styling */
|
||||
/* ****************************************************************************************************************** */
|
||||
|
||||
// region Recipes
|
||||
.rd-recipes {
|
||||
&__ {
|
||||
&wrp-recipe {
|
||||
.rd__b--3 > p,
|
||||
.rd__b--4 > p {
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-instructions {
|
||||
.rd__h--3 {
|
||||
font-style: initial;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.rd__b--3 > p,
|
||||
.rd__b--4 > p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rd__b--3 > p:nth-of-type(2),
|
||||
.rd__b--4 > p:nth-of-type(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-ingredients {
|
||||
.rd__h--2 {
|
||||
font-size: 1em;
|
||||
font-family: Roboto, Helvetica, sans-serif;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rd__b p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
25
scss/includes/source-night.scss
Normal file
25
scss/includes/source-night.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .source {
|
||||
$rgb-source-PHB: $rgb-subclass--night;
|
||||
$rgb-source-SADS: #4f63f5;
|
||||
$rgb-source-PSA: #eec276;
|
||||
|
||||
&PHB {
|
||||
color: $rgb-source-PHB !important;
|
||||
border-color: $rgb-source-PHB !important;
|
||||
text-decoration-color: $rgb-source-PHB !important;
|
||||
}
|
||||
|
||||
&SADS {
|
||||
color: $rgb-source-SADS !important;
|
||||
border-color: $rgb-source-SADS !important;
|
||||
text-decoration-color: $rgb-source-SADS !important;
|
||||
}
|
||||
|
||||
&PSA {
|
||||
color: $rgb-source-PSA !important;
|
||||
border-color: $rgb-source-PSA !important;
|
||||
text-decoration-color: $rgb-source-PSA !important;
|
||||
}
|
||||
}
|
||||
651
scss/includes/source.scss
Normal file
651
scss/includes/source.scss
Normal file
@@ -0,0 +1,651 @@
|
||||
@import "vars";
|
||||
|
||||
.source {
|
||||
$rgb-source-category-site: #e50711;
|
||||
$rgb-source-category-extras: #9d4c4f;
|
||||
$rgb-source-category-prerelease: $rgb-subclass-ua;
|
||||
$rgb-source-category-prerelease--local: #54ce19;
|
||||
$rgb-source-category-homebrew: $rgb-class-brew;
|
||||
$rgb-source-category-homebrew--local: #4b40ed;
|
||||
|
||||
$rgb-source-PHB: #4a6898;
|
||||
$rgb-source-DMG: purple;
|
||||
$rgb-source-MM: green;
|
||||
$rgb-source-SCAG: #76af76;
|
||||
$rgb-source-VGM: grey;
|
||||
$rgb-source-OGA: #933d0f;
|
||||
$rgb-source-XGE: #ba7c00;
|
||||
$rgb-source-XMtS: #830051;
|
||||
$rgb-source-HotDQ: #ad8eba;
|
||||
$rgb-source-RoT: #ff2900;
|
||||
$rgb-source-CoS: purple;
|
||||
$rgb-source-OotA: grey;
|
||||
$rgb-source-SKT: darkcyan;
|
||||
$rgb-source-PotA: #57b6c6;
|
||||
$rgb-source-LMoP: #8da851;
|
||||
$rgb-source-TftYP: #c94029;
|
||||
$rgb-source-ToA: #666f30;
|
||||
$rgb-source-MTF: #1f6e7b;
|
||||
$rgb-source-WDH: #d4af37;
|
||||
$rgb-source-GGR: #bfa76c;
|
||||
$rgb-source-WDMM: #a2201f;
|
||||
$rgb-source-LLK: #6e7a71;
|
||||
$rgb-source-AZfyT: #4667a7;
|
||||
$rgb-source-GoS: #3d695a;
|
||||
$rgb-source-AI: #5baf04;
|
||||
$rgb-source-ESK: #6b909a;
|
||||
$rgb-source-BGDIA: #752418;
|
||||
$rgb-source-ERLW: #983426;
|
||||
$rgb-source-RMR: #5c7c27;
|
||||
$rgb-source-MFF: #92817f;
|
||||
$rgb-source-LR: #78613c;
|
||||
$rgb-source-IMR: #a19364;
|
||||
$rgb-source-SADS: #333bab;
|
||||
$rgb-source-EGW: #855a6e;
|
||||
$rgb-source-MOT: #556b2e;
|
||||
$rgb-source-IDRotF: #8fb8c0;
|
||||
$rgb-source-TCE: #a24d08;
|
||||
$rgb-source-AL: $rgb-source-category-site;
|
||||
$rgb-source-HF: #ac9544;
|
||||
$rgb-source-CM: #e6585e;
|
||||
$rgb-source-VRGR: #bd000f;
|
||||
$rgb-source-RtG: #8a536a;
|
||||
$rgb-source-AitFR: #6e5ab9;
|
||||
$rgb-source-WBtW: #7151b6;
|
||||
$rgb-source-DoD: #fe4935;
|
||||
$rgb-source-MaBJoV: #7a2854;
|
||||
$rgb-source-FTD: #b82a15;
|
||||
$rgb-source-NRH: #bd335b;
|
||||
$rgb-source-SCC: #be9c56;
|
||||
$rgb-source-MPMM: #5c758d;
|
||||
$rgb-source-CRCotN: #ac4a70;
|
||||
$rgb-source-JttRC: #cf48e2;
|
||||
$rgb-source-SAiS: #056b97;
|
||||
$rgb-source-DoSI: #478bb8;
|
||||
$rgb-source-DSotDQ: #851e20;
|
||||
$rgb-source-PSA: #d76404;
|
||||
$rgb-source-PSD: #5db7da;
|
||||
$rgb-source-PSI: #5d4696;
|
||||
$rgb-source-PSK: #a27135;
|
||||
$rgb-source-PSX: #bb2722;
|
||||
$rgb-source-PSZ: #6f8a2d;
|
||||
$rgb-source-KftGV: #876e38;
|
||||
$rgb-source-HAT: #a24545;
|
||||
$rgb-source-BGG: #469cb7;
|
||||
$rgb-source-TDCSR: #642e4b;
|
||||
$rgb-source-PaBTSO: #b2b34e;
|
||||
$rgb-source-PAitM: #a23087;
|
||||
$rgb-source-CoA: #a13a0f;
|
||||
$rgb-source-HFFotM: #7b702c;
|
||||
$rgb-source-BMT: #694165;
|
||||
$rgb-source-GHLoE: #c07e4e;
|
||||
$rgb-source-DoDk: #825494;
|
||||
|
||||
// region Categories
|
||||
|
||||
&-category- {
|
||||
&site {
|
||||
color: $rgb-source-category-site !important;
|
||||
border-color: $rgb-source-category-site !important;
|
||||
text-decoration-color: $rgb-source-category-site !important;
|
||||
}
|
||||
|
||||
&extras {
|
||||
color: $rgb-source-category-extras !important;
|
||||
border-color: $rgb-source-category-extras !important;
|
||||
text-decoration-color: $rgb-source-category-extras !important;
|
||||
}
|
||||
|
||||
&homebrew {
|
||||
color: $rgb-source-category-homebrew !important;
|
||||
border-color: $rgb-source-category-homebrew !important;
|
||||
text-decoration-color: $rgb-source-category-homebrew !important;
|
||||
|
||||
&--local {
|
||||
color: $rgb-source-category-homebrew--local !important;
|
||||
border-color: $rgb-source-category-homebrew--local !important;
|
||||
text-decoration-color: $rgb-source-category-homebrew--local !important;
|
||||
}
|
||||
}
|
||||
|
||||
&spicy {
|
||||
color: $rgb-source-category-prerelease !important;
|
||||
border-color: $rgb-source-category-prerelease !important;
|
||||
text-decoration-color: $rgb-source-category-prerelease !important;
|
||||
|
||||
&--local {
|
||||
color: $rgb-source-category-prerelease--local !important;
|
||||
border-color: $rgb-source-category-prerelease--local !important;
|
||||
text-decoration-color: $rgb-source-category-prerelease--local !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// endregion
|
||||
|
||||
// region Specific sources
|
||||
|
||||
&PHB {
|
||||
color: $rgb-source-PHB !important;
|
||||
border-color: $rgb-source-PHB !important;
|
||||
text-decoration-color: $rgb-source-PHB !important;
|
||||
}
|
||||
|
||||
&DMG {
|
||||
color: $rgb-source-DMG !important;
|
||||
border-color: $rgb-source-DMG !important;
|
||||
text-decoration-color: $rgb-source-DMG !important;
|
||||
}
|
||||
|
||||
&MM {
|
||||
color: $rgb-source-MM !important;
|
||||
border-color: $rgb-source-MM !important;
|
||||
text-decoration-color: $rgb-source-MM !important;
|
||||
}
|
||||
|
||||
&SCAG {
|
||||
color: $rgb-source-SCAG !important;
|
||||
border-color: $rgb-source-SCAG !important;
|
||||
text-decoration-color: $rgb-source-SCAG !important;
|
||||
}
|
||||
|
||||
&VGM {
|
||||
color: $rgb-source-VGM !important;
|
||||
border-color: $rgb-source-VGM !important;
|
||||
text-decoration-color: $rgb-source-VGM !important;
|
||||
}
|
||||
|
||||
&OGA {
|
||||
color: $rgb-source-OGA !important;
|
||||
border-color: $rgb-source-OGA !important;
|
||||
text-decoration-color: $rgb-source-OGA !important;
|
||||
}
|
||||
|
||||
&XGE,
|
||||
&TTP { // Tortles are counted as an XGE race for AL
|
||||
color: $rgb-source-XGE !important;
|
||||
border-color: $rgb-source-XGE !important;
|
||||
text-decoration-color: $rgb-source-XGE !important;
|
||||
}
|
||||
|
||||
&XMtS {
|
||||
color: $rgb-source-XMtS !important;
|
||||
border-color: $rgb-source-XMtS !important;
|
||||
text-decoration-color: $rgb-source-XMtS !important;
|
||||
}
|
||||
|
||||
&HotDQ {
|
||||
color: $rgb-source-HotDQ !important;
|
||||
border-color: $rgb-source-HotDQ !important;
|
||||
text-decoration-color: $rgb-source-HotDQ !important;
|
||||
}
|
||||
|
||||
&RoT {
|
||||
color: $rgb-source-RoT !important;
|
||||
border-color: $rgb-source-RoT !important;
|
||||
text-decoration-color: $rgb-source-RoT !important;
|
||||
}
|
||||
|
||||
&CoS {
|
||||
color: $rgb-source-CoS !important;
|
||||
border-color: $rgb-source-CoS !important;
|
||||
text-decoration-color: $rgb-source-CoS !important;
|
||||
}
|
||||
|
||||
&OotA {
|
||||
color: $rgb-source-OotA !important;
|
||||
border-color: $rgb-source-OotA !important;
|
||||
text-decoration-color: $rgb-source-OotA !important;
|
||||
}
|
||||
|
||||
&SKT {
|
||||
color: $rgb-source-SKT !important;
|
||||
border-color: $rgb-source-SKT !important;
|
||||
text-decoration-color: $rgb-source-SKT !important;
|
||||
}
|
||||
|
||||
&PotA,
|
||||
&EEPC {
|
||||
color: $rgb-source-PotA !important;
|
||||
border-color: $rgb-source-PotA !important;
|
||||
text-decoration-color: $rgb-source-PotA !important;
|
||||
}
|
||||
|
||||
&LMoP {
|
||||
color: $rgb-source-LMoP !important;
|
||||
border-color: $rgb-source-LMoP !important;
|
||||
text-decoration-color: $rgb-source-LMoP !important;
|
||||
}
|
||||
|
||||
&TftYP {
|
||||
color: $rgb-source-TftYP !important;
|
||||
border-color: $rgb-source-TftYP !important;
|
||||
text-decoration-color: $rgb-source-TftYP !important;
|
||||
}
|
||||
|
||||
&ToA {
|
||||
color: $rgb-source-ToA !important;
|
||||
border-color: $rgb-source-ToA !important;
|
||||
text-decoration-color: $rgb-source-ToA !important;
|
||||
}
|
||||
|
||||
&MTF {
|
||||
color: $rgb-source-MTF !important;
|
||||
border-color: $rgb-source-MTF !important;
|
||||
text-decoration-color: $rgb-source-MTF !important;
|
||||
}
|
||||
|
||||
&WDH {
|
||||
color: $rgb-source-WDH !important;
|
||||
border-color: $rgb-source-WDH !important;
|
||||
text-decoration-color: $rgb-source-WDH !important;
|
||||
}
|
||||
|
||||
&GGR,
|
||||
&KKW {
|
||||
color: $rgb-source-GGR !important;
|
||||
border-color: $rgb-source-GGR !important;
|
||||
text-decoration-color: $rgb-source-GGR !important;
|
||||
}
|
||||
|
||||
&WDMM {
|
||||
color: $rgb-source-WDMM !important;
|
||||
border-color: $rgb-source-WDMM !important;
|
||||
text-decoration-color: $rgb-source-WDMM !important;
|
||||
}
|
||||
|
||||
&LLK {
|
||||
color: $rgb-source-LLK !important;
|
||||
border-color: $rgb-source-LLK !important;
|
||||
text-decoration-color: $rgb-source-LLK !important;
|
||||
}
|
||||
|
||||
&AZfyT {
|
||||
color: $rgb-source-AZfyT !important;
|
||||
border-color: $rgb-source-AZfyT !important;
|
||||
text-decoration-color: $rgb-source-AZfyT !important;
|
||||
}
|
||||
|
||||
&GoS {
|
||||
color: $rgb-source-GoS !important;
|
||||
border-color: $rgb-source-GoS !important;
|
||||
text-decoration-color: $rgb-source-GoS !important;
|
||||
}
|
||||
|
||||
&AI,
|
||||
&OoW {
|
||||
color: $rgb-source-AI !important;
|
||||
border-color: $rgb-source-AI !important;
|
||||
text-decoration-color: $rgb-source-AI !important;
|
||||
}
|
||||
|
||||
// These are all from the same family
|
||||
&ESK,
|
||||
&DIP,
|
||||
&DC,
|
||||
&SDW,
|
||||
&SLW {
|
||||
color: $rgb-source-ESK !important;
|
||||
border-color: $rgb-source-ESK !important;
|
||||
text-decoration-color: $rgb-source-ESK !important;
|
||||
}
|
||||
|
||||
&BGDIA {
|
||||
color: $rgb-source-BGDIA !important;
|
||||
border-color: $rgb-source-BGDIA !important;
|
||||
text-decoration-color: $rgb-source-BGDIA !important;
|
||||
}
|
||||
|
||||
&ERLW,
|
||||
&EFR {
|
||||
color: $rgb-source-ERLW !important;
|
||||
border-color: $rgb-source-ERLW !important;
|
||||
text-decoration-color: $rgb-source-ERLW !important;
|
||||
}
|
||||
|
||||
&RMR,
|
||||
&RMBRE {
|
||||
color: $rgb-source-RMR !important;
|
||||
border-color: $rgb-source-RMR !important;
|
||||
text-decoration-color: $rgb-source-RMR !important;
|
||||
}
|
||||
|
||||
&MFF {
|
||||
color: $rgb-source-MFF !important;
|
||||
border-color: $rgb-source-MFF !important;
|
||||
text-decoration-color: $rgb-source-MFF !important;
|
||||
}
|
||||
|
||||
&LR {
|
||||
color: $rgb-source-LR !important;
|
||||
border-color: $rgb-source-LR !important;
|
||||
text-decoration-color: $rgb-source-LR !important;
|
||||
}
|
||||
|
||||
&IMR {
|
||||
color: $rgb-source-IMR !important;
|
||||
border-color: $rgb-source-IMR !important;
|
||||
text-decoration-color: $rgb-source-IMR !important;
|
||||
}
|
||||
|
||||
&SADS {
|
||||
color: $rgb-source-SADS !important;
|
||||
border-color: $rgb-source-SADS !important;
|
||||
text-decoration-color: $rgb-source-SADS !important;
|
||||
}
|
||||
|
||||
&EGW,
|
||||
&FS,
|
||||
&DD,
|
||||
&US,
|
||||
&ToR {
|
||||
color: $rgb-source-EGW !important;
|
||||
border-color: $rgb-source-EGW !important;
|
||||
text-decoration-color: $rgb-source-EGW !important;
|
||||
}
|
||||
|
||||
&MOT {
|
||||
color: $rgb-source-MOT !important;
|
||||
border-color: $rgb-source-MOT !important;
|
||||
text-decoration-color: $rgb-source-MOT !important;
|
||||
}
|
||||
|
||||
&IDRotF {
|
||||
color: $rgb-source-IDRotF !important;
|
||||
border-color: $rgb-source-IDRotF !important;
|
||||
text-decoration-color: $rgb-source-IDRotF !important;
|
||||
}
|
||||
|
||||
&TCE {
|
||||
color: $rgb-source-TCE !important;
|
||||
border-color: $rgb-source-TCE !important;
|
||||
text-decoration-color: $rgb-source-TCE !important;
|
||||
}
|
||||
|
||||
&AL {
|
||||
color: $rgb-source-AL !important;
|
||||
border-color: $rgb-source-AL !important;
|
||||
text-decoration-color: $rgb-source-AL !important;
|
||||
}
|
||||
|
||||
&HF {
|
||||
color: $rgb-source-HF !important;
|
||||
border-color: $rgb-source-HF !important;
|
||||
text-decoration-color: $rgb-source-HF !important;
|
||||
}
|
||||
|
||||
&CM {
|
||||
color: $rgb-source-CM !important;
|
||||
border-color: $rgb-source-CM !important;
|
||||
text-decoration-color: $rgb-source-CM !important;
|
||||
}
|
||||
|
||||
&VRGR,
|
||||
&HoL {
|
||||
color: $rgb-source-VRGR !important;
|
||||
border-color: $rgb-source-VRGR !important;
|
||||
text-decoration-color: $rgb-source-VRGR !important;
|
||||
}
|
||||
|
||||
&RtG {
|
||||
color: $rgb-source-RtG !important;
|
||||
border-color: $rgb-source-RtG !important;
|
||||
text-decoration-color: $rgb-source-RtG !important;
|
||||
}
|
||||
|
||||
&AitFR {
|
||||
color: $rgb-source-AitFR !important;
|
||||
border-color: $rgb-source-AitFR !important;
|
||||
text-decoration-color: $rgb-source-AitFR !important;
|
||||
|
||||
&-ISF,
|
||||
&-THP,
|
||||
&-AVT,
|
||||
&-DN,
|
||||
&-FCD {
|
||||
color: $rgb-source-AitFR !important;
|
||||
border-color: $rgb-source-AitFR !important;
|
||||
text-decoration-color: $rgb-source-AitFR !important;
|
||||
}
|
||||
}
|
||||
|
||||
&WBtW {
|
||||
color: $rgb-source-WBtW !important;
|
||||
border-color: $rgb-source-WBtW !important;
|
||||
text-decoration-color: $rgb-source-WBtW !important;
|
||||
}
|
||||
|
||||
&DoD {
|
||||
color: $rgb-source-DoD !important;
|
||||
border-color: $rgb-source-DoD !important;
|
||||
text-decoration-color: $rgb-source-DoD !important;
|
||||
}
|
||||
|
||||
&MaBJoV {
|
||||
color: $rgb-source-MaBJoV !important;
|
||||
border-color: $rgb-source-MaBJoV !important;
|
||||
text-decoration-color: $rgb-source-MaBJoV !important;
|
||||
}
|
||||
|
||||
&FTD {
|
||||
color: $rgb-source-FTD !important;
|
||||
border-color: $rgb-source-FTD !important;
|
||||
text-decoration-color: $rgb-source-FTD !important;
|
||||
}
|
||||
|
||||
&NRH {
|
||||
color: $rgb-source-NRH !important;
|
||||
border-color: $rgb-source-NRH !important;
|
||||
text-decoration-color: $rgb-source-NRH !important;
|
||||
|
||||
&-TCMC,
|
||||
&-AVitW,
|
||||
&-ASS,
|
||||
&-CoI,
|
||||
&-TLT,
|
||||
&-AWoL,
|
||||
&-AT {
|
||||
color: $rgb-source-NRH !important;
|
||||
border-color: $rgb-source-NRH !important;
|
||||
text-decoration-color: $rgb-source-NRH !important;
|
||||
}
|
||||
}
|
||||
|
||||
&SCC {
|
||||
color: $rgb-source-SCC !important;
|
||||
border-color: $rgb-source-SCC !important;
|
||||
text-decoration-color: $rgb-source-SCC !important;
|
||||
|
||||
&-CK,
|
||||
&-HfMT,
|
||||
&-TMM,
|
||||
&-ARiR {
|
||||
color: $rgb-source-SCC !important;
|
||||
border-color: $rgb-source-SCC !important;
|
||||
text-decoration-color: $rgb-source-SCC !important;
|
||||
}
|
||||
}
|
||||
|
||||
&MPMM {
|
||||
color: $rgb-source-MPMM !important;
|
||||
border-color: $rgb-source-MPMM !important;
|
||||
text-decoration-color: $rgb-source-MPMM !important;
|
||||
}
|
||||
|
||||
&CRCotN {
|
||||
color: $rgb-source-CRCotN !important;
|
||||
border-color: $rgb-source-CRCotN !important;
|
||||
text-decoration-color: $rgb-source-CRCotN !important;
|
||||
}
|
||||
|
||||
&JttRC {
|
||||
color: $rgb-source-JttRC !important;
|
||||
border-color: $rgb-source-JttRC !important;
|
||||
text-decoration-color: $rgb-source-JttRC !important;
|
||||
}
|
||||
|
||||
&SjA,
|
||||
&SAiS,
|
||||
&AAG,
|
||||
&BAM,
|
||||
&LoX {
|
||||
color: $rgb-source-SAiS !important;
|
||||
border-color: $rgb-source-SAiS !important;
|
||||
text-decoration-color: $rgb-source-SAiS !important;
|
||||
}
|
||||
|
||||
&DoSI {
|
||||
color: $rgb-source-DoSI !important;
|
||||
border-color: $rgb-source-DoSI !important;
|
||||
text-decoration-color: $rgb-source-DoSI !important;
|
||||
}
|
||||
|
||||
&DSotDQ {
|
||||
color: $rgb-source-DSotDQ !important;
|
||||
border-color: $rgb-source-DSotDQ !important;
|
||||
text-decoration-color: $rgb-source-DSotDQ !important;
|
||||
}
|
||||
|
||||
&PSA {
|
||||
color: $rgb-source-PSA !important;
|
||||
border-color: $rgb-source-PSA !important;
|
||||
text-decoration-color: $rgb-source-PSA !important;
|
||||
}
|
||||
|
||||
&PSD {
|
||||
color: $rgb-source-PSD !important;
|
||||
border-color: $rgb-source-PSD !important;
|
||||
text-decoration-color: $rgb-source-PSD !important;
|
||||
}
|
||||
|
||||
&PSI {
|
||||
color: $rgb-source-PSI !important;
|
||||
border-color: $rgb-source-PSI !important;
|
||||
text-decoration-color: $rgb-source-PSI !important;
|
||||
}
|
||||
|
||||
&PSK {
|
||||
color: $rgb-source-PSK !important;
|
||||
border-color: $rgb-source-PSK !important;
|
||||
text-decoration-color: $rgb-source-PSK !important;
|
||||
}
|
||||
|
||||
&PSX {
|
||||
color: $rgb-source-PSX !important;
|
||||
border-color: $rgb-source-PSX !important;
|
||||
text-decoration-color: $rgb-source-PSX !important;
|
||||
}
|
||||
|
||||
&PSZ {
|
||||
color: $rgb-source-PSZ !important;
|
||||
border-color: $rgb-source-PSZ !important;
|
||||
text-decoration-color: $rgb-source-PSZ !important;
|
||||
}
|
||||
|
||||
&KftGV {
|
||||
color: $rgb-source-KftGV !important;
|
||||
border-color: $rgb-source-KftGV !important;
|
||||
text-decoration-color: $rgb-source-KftGV !important;
|
||||
}
|
||||
|
||||
&HAT-TG,
|
||||
&HAT-LMI {
|
||||
color: $rgb-source-HAT !important;
|
||||
border-color: $rgb-source-HAT !important;
|
||||
text-decoration-color: $rgb-source-HAT !important;
|
||||
}
|
||||
|
||||
&BGG {
|
||||
color: $rgb-source-BGG !important;
|
||||
border-color: $rgb-source-BGG !important;
|
||||
text-decoration-color: $rgb-source-BGG !important;
|
||||
}
|
||||
|
||||
&TDCSR {
|
||||
color: $rgb-source-TDCSR !important;
|
||||
border-color: $rgb-source-TDCSR !important;
|
||||
text-decoration-color: $rgb-source-TDCSR !important;
|
||||
}
|
||||
|
||||
&PaBTSO {
|
||||
color: $rgb-source-PaBTSO !important;
|
||||
border-color: $rgb-source-PaBTSO !important;
|
||||
text-decoration-color: $rgb-source-PaBTSO !important;
|
||||
}
|
||||
|
||||
&PAitM,
|
||||
&SatO,
|
||||
&ToFW,
|
||||
&MPP {
|
||||
color: $rgb-source-PAitM !important;
|
||||
border-color: $rgb-source-PAitM !important;
|
||||
text-decoration-color: $rgb-source-PAitM !important;
|
||||
}
|
||||
|
||||
&CoA {
|
||||
color: $rgb-source-CoA !important;
|
||||
border-color: $rgb-source-CoA !important;
|
||||
text-decoration-color: $rgb-source-CoA !important;
|
||||
}
|
||||
|
||||
&HFFotM {
|
||||
color: $rgb-source-HFFotM !important;
|
||||
border-color: $rgb-source-HFFotM !important;
|
||||
text-decoration-color: $rgb-source-HFFotM !important;
|
||||
}
|
||||
|
||||
&BMT {
|
||||
color: $rgb-source-BMT !important;
|
||||
border-color: $rgb-source-BMT !important;
|
||||
text-decoration-color: $rgb-source-BMT !important;
|
||||
}
|
||||
|
||||
&GHLoE {
|
||||
color: $rgb-source-GHLoE !important;
|
||||
border-color: $rgb-source-GHLoE !important;
|
||||
text-decoration-color: $rgb-source-GHLoE !important;
|
||||
}
|
||||
|
||||
&DoDk {
|
||||
color: $rgb-source-DoDk !important;
|
||||
border-color: $rgb-source-DoDk !important;
|
||||
text-decoration-color: $rgb-source-DoDk !important;
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
|
||||
.sp__ {
|
||||
&school- {
|
||||
&A {
|
||||
color: #00b921;
|
||||
}
|
||||
|
||||
&V {
|
||||
color: #bb0100;
|
||||
}
|
||||
|
||||
&E {
|
||||
color: #b30083;
|
||||
}
|
||||
|
||||
&I {
|
||||
color: #006dbd;
|
||||
}
|
||||
|
||||
&D {
|
||||
color: #00adb3;
|
||||
}
|
||||
|
||||
&N {
|
||||
color: #6c00cc;
|
||||
}
|
||||
|
||||
&T {
|
||||
color: #ccbe00;
|
||||
}
|
||||
|
||||
&C {
|
||||
color: #bd0044;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
scss/includes/statgen-night.scss
Normal file
37
scss/includes/statgen-night.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode .statgen .statgen {
|
||||
&-shared__ {
|
||||
&ipt {
|
||||
&[readonly] {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-rolled__ {
|
||||
&wrp-results {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&-pb__ {
|
||||
&ipt-budget {
|
||||
&--error {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-asi__ {
|
||||
&row {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&cell {
|
||||
&--top {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
104
scss/includes/statgen.scss
Normal file
104
scss/includes/statgen.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
@import "vars";
|
||||
|
||||
.statgen .statgen { // (Class namespace to enable selectors in FVTT)
|
||||
&-shared__ {
|
||||
&btn-reset {
|
||||
right: -3px;
|
||||
width: $h-ipt-xs;
|
||||
height: $h-ipt-xs;
|
||||
}
|
||||
|
||||
&ipt {
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
|
||||
&[readonly] {
|
||||
background-color: $rgb-border-grey--muted;
|
||||
}
|
||||
|
||||
&--sel {
|
||||
width: 64px;
|
||||
text-align-last: center;
|
||||
}
|
||||
}
|
||||
|
||||
&btn-toggle-tashas-rules {
|
||||
line-height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.glyphicon {
|
||||
left: -0.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-rolled__ {
|
||||
&wrp-results {
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&disp-result {
|
||||
min-width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-pb__ {
|
||||
&ipt-budget {
|
||||
width: 70px;
|
||||
|
||||
&--error {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&header {
|
||||
height: $h-ipt-xs;
|
||||
|
||||
&--group {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&--choose-from {
|
||||
min-width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&cell {
|
||||
height: 24px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
&col-cost {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
&col-cost-delete {
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
&row-cost {
|
||||
min-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&-asi__ {
|
||||
&row {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&cell {
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
&disp-plus {
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
&cell-feat {
|
||||
width: 40px;
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
3555
scss/includes/style.scss
Normal file
3555
scss/includes/style.scss
Normal file
File diff suppressed because it is too large
Load Diff
316
scss/includes/ui-night.scss
Normal file
316
scss/includes/ui-night.scss
Normal file
@@ -0,0 +1,316 @@
|
||||
/*
|
||||
Shared UI components
|
||||
*/
|
||||
|
||||
@import "vars";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.night-mode .ui__ {
|
||||
&ipt-color {
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region List */
|
||||
.night-mode .ui-list__ {
|
||||
&wrp-preview {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
|
||||
&btn-inline {
|
||||
color: $rgb-font--night;
|
||||
|
||||
&:hover {
|
||||
color: lighten($rgb-font--night, 10%);
|
||||
background: #ffffff30;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Source overlay */
|
||||
.night-mode .ui-source__ {
|
||||
÷r {
|
||||
background: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Modals */
|
||||
.night-mode .ui-modal__ {
|
||||
&header {
|
||||
&--border {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&footer {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&overlay-blind {
|
||||
background-color: $rgb-bg--night;
|
||||
}
|
||||
|
||||
&inner {
|
||||
background: $rgb-bg--night;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.56);
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
|
||||
&--mode-fullscreen {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&row--cb:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Search */
|
||||
.night-mode .ui-search__ {
|
||||
&row {
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&ipt-search-sub-wrp {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Tabs */
|
||||
.night-mode .ui-tab__ {
|
||||
&btn-tab-head {
|
||||
&--active,
|
||||
&--active:focus,
|
||||
&--active:hover,
|
||||
&--active:active, {
|
||||
background-color: $rgb-btn-default-active--night;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-body {
|
||||
&--background {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-bottom-color: darken($rgb-border-grey--trans-night, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-heads--border {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .ui-tab-side__ {
|
||||
&wrp-tab {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Proficiency */
|
||||
.night-mode .ui-prof__ {
|
||||
&btn-cycle {
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include shadow-active--night();
|
||||
}
|
||||
|
||||
&[data-state="0"] {
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
|
||||
&[data-state="1"] {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
}
|
||||
|
||||
&[data-state="2"] {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
|
||||
&::before {
|
||||
color: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-state="3"] {
|
||||
background: repeating-linear-gradient(135deg, $rgb-bg--night, $rgb-bg--night 10px, $rgb-border-grey--night 10px, $rgb-border-grey--night 20px);
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Direction picker */
|
||||
.night-mode .ui-dir__ {
|
||||
&face {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&arm {
|
||||
background: $rgb-font--night;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Hover tips */
|
||||
.night-mode .ui-tip__ {
|
||||
&child {
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Context menu */
|
||||
.night-mode .ui-ctx {
|
||||
&__wrp {
|
||||
background: $rgb-bg--night;
|
||||
border: 1px solid $rgb-border-grey--trans-night;
|
||||
border-top-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
background: $rgb-bg--night;
|
||||
color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Picker */
|
||||
.night-mode .ui-pick {
|
||||
&__ {
|
||||
&disp-text {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region "Copied" tooltip */
|
||||
.night-mode .clp__ {
|
||||
&disp-copied {
|
||||
background: radial-gradient(ellipse at center, $rgb-bg--night 0%, $rgb-bg--night 35%, transparent 75%, transparent 100%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Decorated inputs */
|
||||
.night-mode .ui-ideco__ {
|
||||
&btn-ticker {
|
||||
background: $rgb-border-grey--night;
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-border-grey--night, $pct-darken-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
background: darken($rgb-border-grey--night, $pct-darken-active);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Select2 */
|
||||
.night-mode .ui-sel2__ {
|
||||
&ipt-search {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&wrp-options {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-option {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
}
|
||||
|
||||
&:focus.active,
|
||||
&:hover.active {
|
||||
background: lighten($rgb-bg--alt-night, $pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Range Slider */
|
||||
.night-mode .ui-slidr {
|
||||
&__ {
|
||||
&thumb {
|
||||
background: $rgb-border-grey--trans;
|
||||
border-color: $rgb-font--night;
|
||||
|
||||
&--hover,
|
||||
&:hover {
|
||||
background: lighten($rgb-border-grey--trans, 10%);
|
||||
border-color: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&track-outer {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&track-inner {
|
||||
background: $rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&disp-value {
|
||||
&--visible {
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&pip {
|
||||
background: $rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
964
scss/includes/ui.scss
Normal file
964
scss/includes/ui.scss
Normal file
@@ -0,0 +1,964 @@
|
||||
/*
|
||||
Shared UI components
|
||||
*/
|
||||
|
||||
@import "vars";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.ui__ {
|
||||
&btn-xxl-square {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
&ipt-color {
|
||||
width: $w-ipt-number-2-digit;
|
||||
padding: 0;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region List */
|
||||
.ui-list__ {
|
||||
// TODO refactor all "list" class to use this:
|
||||
// - add "relative" class to each as required
|
||||
// - add "overflow-x-hidden" and "overflow-y-auto" classes
|
||||
// - convert from ul to div
|
||||
&wrp {
|
||||
transform: translateZ(0);
|
||||
font-size: 11.2px;
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
background: $rgb-bg-orange;
|
||||
font-size: 90%;
|
||||
border-top-left-radius: 5px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&btn-inline {
|
||||
cursor: pointer;
|
||||
color: $rgb-font--muted;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-shadow-grey, 20%);
|
||||
color: darken($rgb-font--muted, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Source overlay */
|
||||
.ui-source__ {
|
||||
&row {
|
||||
margin-left: calc(-96px - 0.5rem);
|
||||
}
|
||||
|
||||
&name {
|
||||
min-width: 96px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
÷r {
|
||||
height: 1px;
|
||||
width: 30px;
|
||||
background: $rgb-border-grey;
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Modals */
|
||||
.ui-modal__ {
|
||||
&body-active {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
&row {
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: initial;
|
||||
min-height: 30px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&--cb {
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
&--sel {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&header {
|
||||
&--border {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&--fullscreen {
|
||||
@include shadow-2();
|
||||
}
|
||||
}
|
||||
|
||||
&footer {
|
||||
border-top: 1px solid $rgb-border-grey--trans;
|
||||
|
||||
&--fullscreen {
|
||||
@include shadow-2();
|
||||
}
|
||||
}
|
||||
|
||||
&overlay {
|
||||
position: fixed;
|
||||
z-index: $z-modal-wrapper;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $rgb-modal-overlay-grey;
|
||||
}
|
||||
|
||||
&overlay-blind {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&inner {
|
||||
position: relative;
|
||||
z-index: $z-modal-inner;
|
||||
top: initial;
|
||||
left: initial;
|
||||
margin: 60px auto;
|
||||
padding: 5px 10px;
|
||||
height: 400px;
|
||||
float: none;
|
||||
min-width: 600px;
|
||||
max-height: 400px;
|
||||
min-height: 400px;
|
||||
font-size: 14px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
max-width: 970px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 1170px;
|
||||
}
|
||||
|
||||
&--no-min-height {
|
||||
min-height: 0;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
&--no-min-height {
|
||||
min-width: 0;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
&--uncap-height {
|
||||
max-height: calc(100% - 120px);
|
||||
height: initial;
|
||||
}
|
||||
|
||||
&--uncap-width {
|
||||
max-width: calc(100% - 180px);
|
||||
width: initial;
|
||||
}
|
||||
|
||||
&--max-width-640p {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
&--mode-fullscreen {
|
||||
max-height: 0;
|
||||
height: 100vh;
|
||||
flex-shrink: 0;
|
||||
min-height: 100vh;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&scroller {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Search */
|
||||
.ui-search__ {
|
||||
&wrp-output {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&wrp-controls {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
z-index: $z-search;
|
||||
|
||||
&--in-tabs {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-results {
|
||||
position: relative;
|
||||
padding: 3px;
|
||||
transform: translateZ(0);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
font-size: 11.2px;
|
||||
}
|
||||
|
||||
&row {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 1px 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include row-glow-active();
|
||||
}
|
||||
}
|
||||
|
||||
&sel-category {
|
||||
border-radius: 0;
|
||||
max-width: 180px;
|
||||
flex-shrink: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&ipt-search {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&ipt-search-sub-ipt[type=radio] {
|
||||
display: inline-block;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
|
||||
&ipt-search-sub-ipt-custom {
|
||||
max-width: 30px;
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
margin-right: -1px;
|
||||
border-right-color: #e0e0e0;
|
||||
border-left-color: #e0e0e0;
|
||||
padding-left: 0;
|
||||
|
||||
/* TODO switch this field to a validated text-type input, instead of a number */
|
||||
&[type=number]::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
&ipt-search-sub-wrp {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
height: 34px;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&ipt-search-sub-lbl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&message {
|
||||
font-size: 1.4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Tabs */
|
||||
.ui-tab__ {
|
||||
&btn-tab-head {
|
||||
display: inline-block;
|
||||
padding: 2px 4px 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-bottom: 0;
|
||||
|
||||
&.active {
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&--border {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&--background {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-top: 0;
|
||||
border-bottom-color: $rgb-border-grey--trans-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-heads--border {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tab-side__ {
|
||||
$w-tab: 120px;
|
||||
$w-tab-mobile-ish: 33px;
|
||||
|
||||
&disp-active-tab-name {
|
||||
margin-left: $w-tab + 6px;
|
||||
font-size: 28px;
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
margin-left: $w-tab-mobile-ish + 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&btn-tab {
|
||||
width: $w-tab;
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
width: 33px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&icon-tab {
|
||||
min-width: 15px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
&wrp-tab {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-bottom: 0;
|
||||
|
||||
&--single {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Proficiency */
|
||||
.ui-prof__ {
|
||||
&btn-cycle {
|
||||
@include cb-custom();
|
||||
|
||||
&[data-state="0"] {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&[data-state="1"] {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
}
|
||||
|
||||
&[data-state="2"] {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
display: flex;
|
||||
line-height: 14px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
|
||||
&::before {
|
||||
content: "\f005"; /* star */
|
||||
}
|
||||
}
|
||||
|
||||
&[data-state="3"] {
|
||||
background: repeating-linear-gradient(135deg, white, white 10px, $rgb-cb-grey 10px, $rgb-cb-grey 20px);
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Direction picker */
|
||||
.ui-dir__ {
|
||||
&face {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 46px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
user-select: none;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&arm {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: #333;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 46px;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: top;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Icon picker */
|
||||
.ui-icn__ {
|
||||
&wrp-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Drag to re-order */
|
||||
.ui-drag__ {
|
||||
&wrp-drag-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&wrp-drag-dummy--highlight {
|
||||
background: #cfe5ff78;
|
||||
}
|
||||
|
||||
&wrp-drag-dummy--lowlight {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&patch {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 5px 3px;
|
||||
width: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&dummy-patch {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&patch-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&patch-col > div {
|
||||
line-height: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Hover tips */
|
||||
.ui-tip__ {
|
||||
&parent {
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&child {
|
||||
@include shadow-1();
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
top: calc(100% + 5px);
|
||||
padding: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity $time-5-frames ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&parent:hover .ui-tip__child {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Context menu */
|
||||
.ui-ctx {
|
||||
&__wrp {
|
||||
@include shadow-1--dark();
|
||||
|
||||
z-index: $z-context-menu;
|
||||
font-size: 14px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-top-color: $rgb-border-grey;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: $rgb-border-grey;
|
||||
}
|
||||
|
||||
&__row {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
cursor: default;
|
||||
background: $rgb-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Picker */
|
||||
.ui-pick {
|
||||
&__ {
|
||||
&btn-add {
|
||||
font-weight: bold;
|
||||
padding: 1px 2px;
|
||||
// Even line heights look good on Chrome; precisely 8px looks good on Firefox.
|
||||
line-height: 8px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
|
||||
&--sub {
|
||||
line-height: 11px;
|
||||
height: 14px;
|
||||
font-size: 16px;
|
||||
border-radius: 0;
|
||||
padding: 0 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&btn-remove {
|
||||
width: 10px;
|
||||
line-height: 20px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
cursor: pointer;
|
||||
font-style: initial;
|
||||
|
||||
&--sub {
|
||||
height: 18px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&pill {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&disp-text {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Fontawesome Icons */
|
||||
.fa {
|
||||
&--btn-sm {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&--btn-xs {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
|
||||
&::before {
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Specific adjustments for certain icons */
|
||||
&.fa-dice {
|
||||
left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region "Copied" tooltip */
|
||||
.clp__ {
|
||||
&wrp-temp {
|
||||
position: fixed;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&disp-copied {
|
||||
position: fixed;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
z-index: $z-temp-effect;
|
||||
background: radial-gradient(ellipse at center, $rgb-bg 0%, $rgb-bg 35%, transparent 75%, transparent 100%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Decorated inputs */
|
||||
.ui-ideco__ {
|
||||
&ipt {
|
||||
&--left {
|
||||
padding-left: 22px !important;
|
||||
}
|
||||
|
||||
&--right {
|
||||
padding-right: 22px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.5;
|
||||
justify-content: center;
|
||||
|
||||
> .glyphicon {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--left {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&btn-ticker {
|
||||
transition: opacity $time-2-frames;
|
||||
opacity: 0;
|
||||
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 10px;
|
||||
border-radius: 0;
|
||||
|
||||
background: #0003;
|
||||
color: $rgb-off-black;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #0005;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
background: #0007;
|
||||
color: $rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&ipt:hover + .ui-ideco__wrp .ui-ideco__btn-ticker,
|
||||
&wrp:hover .ui-ideco__btn-ticker {
|
||||
transition: opacity $time-2-frames;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Select2 */
|
||||
.ui-sel2__ {
|
||||
&ipt-search {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&ipt-display {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&wrp {
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
> .ui-sel2__ipt-search {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .ui-sel2__ipt-display {
|
||||
text-align: right;
|
||||
color: $rgb-font--muted;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .ui-sel2__wrp-options {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-options {
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-top: 0;
|
||||
max-height: 200px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&disp-option {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
|
||||
&:focus.active,
|
||||
&:hover.active {
|
||||
background: darken($rgb-bg--alt, $pct-darken-active);
|
||||
}
|
||||
}
|
||||
|
||||
&disp-arrow {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Range Slider */
|
||||
.ui-slidr {
|
||||
&__ {
|
||||
$sz-top-row-pad: 6px;
|
||||
|
||||
&wrp {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&wrp-top {
|
||||
// (Nothing yet)
|
||||
}
|
||||
|
||||
&thumb {
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
top: -5px;
|
||||
background: $rgb-bg--alt;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 2px;
|
||||
|
||||
&--hover,
|
||||
&:hover {
|
||||
background: darken($rgb-bg--alt, 10%);
|
||||
border-color: darken($rgb-border-grey, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-track {
|
||||
padding-top: $sz-top-row-pad;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
&track-outer {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&track-inner {
|
||||
background: $rgb-border-grey--muted;
|
||||
}
|
||||
|
||||
&disp-value {
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
|
||||
&--visible {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: $rgb-bg;
|
||||
}
|
||||
|
||||
&--left {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-bottom {
|
||||
height: 3em; // Padded so our `absolute` elements have space
|
||||
}
|
||||
|
||||
&wrp-pips {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
&pip {
|
||||
width: 1px;
|
||||
height: 4px;
|
||||
background: $rgb-border-grey;
|
||||
|
||||
&--major {
|
||||
height: 6px;
|
||||
background: darken($rgb-border-grey, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&pip-label {
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
35
scss/includes/util-5etools-night.scss
Normal file
35
scss/includes/util-5etools-night.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
@import "vars";
|
||||
|
||||
.night-mode {
|
||||
.stripe- {
|
||||
&even {
|
||||
&:nth-child(even) {
|
||||
background: $rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&odd {
|
||||
&:nth-child(odd) {
|
||||
background: $rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&child- {
|
||||
&even-first {
|
||||
&:nth-child(even) > :first-child {
|
||||
background: $rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.veapp {
|
||||
&__ {
|
||||
&ele-hoverable {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
70
scss/includes/util-5etools.scss
Normal file
70
scss/includes/util-5etools.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
@import "vars";
|
||||
|
||||
.clickable {
|
||||
&--link {
|
||||
color: $rgb-link-blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
.plain {
|
||||
font-weight: initial !important;
|
||||
font-style: initial !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity $time-3-frames linear;
|
||||
}
|
||||
|
||||
.float-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.stripe- {
|
||||
&even {
|
||||
&:nth-child(even) {
|
||||
background: $rgb-stripe-grey;
|
||||
}
|
||||
|
||||
&--faint:nth-child(even) {
|
||||
background: $rgb-stripe-grey--faint;
|
||||
}
|
||||
}
|
||||
|
||||
&odd {
|
||||
&:nth-child(odd) {
|
||||
background: $rgb-stripe-grey;
|
||||
}
|
||||
|
||||
&--faint:nth-child(odd) {
|
||||
background: $rgb-stripe-grey--faint;
|
||||
}
|
||||
}
|
||||
|
||||
&child- {
|
||||
&even-first {
|
||||
&:nth-child(even) > :first-child {
|
||||
background: $rgb-stripe-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.veapp {
|
||||
&__ {
|
||||
&ele-hoverable {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last-mr-0:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
// redefine this here to ensure it overrides all the important display types above
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
604
scss/includes/util-column.scss
Normal file
604
scss/includes/util-column.scss
Normal file
@@ -0,0 +1,604 @@
|
||||
%col-base {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@extend %col-base;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
@extend %col-base;
|
||||
width: 91.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-11-9 {
|
||||
@extend %col-base;
|
||||
width: 99.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-11-8 {
|
||||
@extend %col-base;
|
||||
width: 98.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-11-7 {
|
||||
@extend %col-base;
|
||||
width: 97.5% !important;
|
||||
}
|
||||
|
||||
.col-11-6 {
|
||||
@extend %col-base;
|
||||
width: 96.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-11-5 {
|
||||
@extend %col-base;
|
||||
width: 95.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-11-4 {
|
||||
@extend %col-base;
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.col-11-3 {
|
||||
@extend %col-base;
|
||||
width: 94.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-11-2 {
|
||||
@extend %col-base;
|
||||
width: 93.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-11-1 {
|
||||
@extend %col-base;
|
||||
width: 92.5% !important;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
@extend %col-base;
|
||||
width: 83.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-10-9 {
|
||||
@extend %col-base;
|
||||
width: 90.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-10-8 {
|
||||
@extend %col-base;
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.col-10-7 {
|
||||
@extend %col-base;
|
||||
width: 89.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-10-6 {
|
||||
@extend %col-base;
|
||||
width: 88.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-10-5 {
|
||||
@extend %col-base;
|
||||
width: 87.5% !important;
|
||||
}
|
||||
|
||||
.col-10-4 {
|
||||
@extend %col-base;
|
||||
width: 86.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-10-3 {
|
||||
@extend %col-base;
|
||||
width: 85.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-10-2 {
|
||||
@extend %col-base;
|
||||
width: 85% !important;
|
||||
}
|
||||
|
||||
.col-10-1 {
|
||||
@extend %col-base;
|
||||
width: 84.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
@extend %col-base;
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.col-9-9 {
|
||||
@extend %col-base;
|
||||
width: 82.5% !important;
|
||||
}
|
||||
|
||||
.col-9-8 {
|
||||
@extend %col-base;
|
||||
width: 81.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-9-7 {
|
||||
@extend %col-base;
|
||||
width: 80.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-9-6 {
|
||||
@extend %col-base;
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.col-9-5 {
|
||||
@extend %col-base;
|
||||
width: 79.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-9-4 {
|
||||
@extend %col-base;
|
||||
width: 78.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-9-3 {
|
||||
@extend %col-base;
|
||||
width: 77.5% !important;
|
||||
}
|
||||
|
||||
.col-9-2 {
|
||||
@extend %col-base;
|
||||
width: 76.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-9-1 {
|
||||
@extend %col-base;
|
||||
width: 75.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
@extend %col-base;
|
||||
width: 66.666666666666667% !important;
|
||||
}
|
||||
|
||||
.col-8-9 {
|
||||
@extend %col-base;
|
||||
width: 74.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-8-8 {
|
||||
@extend %col-base;
|
||||
width: 73.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-8-7 {
|
||||
@extend %col-base;
|
||||
width: 72.5% !important;
|
||||
}
|
||||
|
||||
.col-8-6 {
|
||||
@extend %col-base;
|
||||
width: 71.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-8-5 {
|
||||
@extend %col-base;
|
||||
width: 70.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-8-4 {
|
||||
@extend %col-base;
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
.col-8-3 {
|
||||
@extend %col-base;
|
||||
width: 69.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-8-2 {
|
||||
@extend %col-base;
|
||||
width: 68.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-8-1 {
|
||||
@extend %col-base;
|
||||
width: 67.5% !important;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
@extend %col-base;
|
||||
width: 58.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-7-9 {
|
||||
@extend %col-base;
|
||||
width: 65.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-7-8 {
|
||||
@extend %col-base;
|
||||
width: 65% !important;
|
||||
}
|
||||
|
||||
.col-7-7 {
|
||||
@extend %col-base;
|
||||
width: 64.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-7-6 {
|
||||
@extend %col-base;
|
||||
width: 63.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-7-5 {
|
||||
@extend %col-base;
|
||||
width: 62.5% !important;
|
||||
}
|
||||
|
||||
.col-7-4 {
|
||||
@extend %col-base;
|
||||
width: 61.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-7-3 {
|
||||
@extend %col-base;
|
||||
width: 60.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-7-2 {
|
||||
@extend %col-base;
|
||||
width: 60% !important;
|
||||
}
|
||||
|
||||
.col-7-1 {
|
||||
@extend %col-base;
|
||||
width: 59.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
@extend %col-base;
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.col-6-9 {
|
||||
@extend %col-base;
|
||||
width: 57.5% !important;
|
||||
}
|
||||
|
||||
.col-6-8 {
|
||||
@extend %col-base;
|
||||
width: 56.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-6-7 {
|
||||
@extend %col-base;
|
||||
width: 55.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-6-6 {
|
||||
@extend %col-base;
|
||||
width: 55% !important;
|
||||
}
|
||||
|
||||
.col-6-5 {
|
||||
@extend %col-base;
|
||||
width: 54.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-6-4 {
|
||||
@extend %col-base;
|
||||
width: 53.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-6-3 {
|
||||
@extend %col-base;
|
||||
width: 52.5% !important;
|
||||
}
|
||||
|
||||
.col-6-2 {
|
||||
@extend %col-base;
|
||||
width: 51.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-6-1 {
|
||||
@extend %col-base;
|
||||
width: 50.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
@extend %col-base;
|
||||
width: 41.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-5-9 {
|
||||
@extend %col-base;
|
||||
width: 49.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-5-8 {
|
||||
@extend %col-base;
|
||||
width: 48.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-5-7 {
|
||||
@extend %col-base;
|
||||
width: 47.5% !important;
|
||||
}
|
||||
|
||||
.col-5-6 {
|
||||
@extend %col-base;
|
||||
width: 46.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-5-5 {
|
||||
@extend %col-base;
|
||||
width: 45.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-5-4 {
|
||||
@extend %col-base;
|
||||
width: 45% !important;
|
||||
}
|
||||
|
||||
.col-5-3 {
|
||||
@extend %col-base;
|
||||
width: 44.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-5-2 {
|
||||
@extend %col-base;
|
||||
width: 43.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-5-1 {
|
||||
@extend %col-base;
|
||||
width: 42.5% !important;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
@extend %col-base;
|
||||
width: 33.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-4-9 {
|
||||
@extend %col-base;
|
||||
width: 40.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-4-8 {
|
||||
@extend %col-base;
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
.col-4-7 {
|
||||
@extend %col-base;
|
||||
width: 39.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-4-6 {
|
||||
@extend %col-base;
|
||||
width: 38.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-4-5 {
|
||||
@extend %col-base;
|
||||
width: 37.5% !important;
|
||||
}
|
||||
|
||||
.col-4-4 {
|
||||
@extend %col-base;
|
||||
width: 36.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-4-3 {
|
||||
@extend %col-base;
|
||||
width: 35.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-4-2 {
|
||||
@extend %col-base;
|
||||
width: 35% !important;
|
||||
}
|
||||
|
||||
.col-4-1 {
|
||||
@extend %col-base;
|
||||
width: 34.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
@extend %col-base;
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.col-3-9 {
|
||||
@extend %col-base;
|
||||
width: 32.5% !important;
|
||||
}
|
||||
|
||||
.col-3-8 {
|
||||
@extend %col-base;
|
||||
width: 31.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-3-7 {
|
||||
@extend %col-base;
|
||||
width: 30.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-3-6 {
|
||||
@extend %col-base;
|
||||
width: 30% !important;
|
||||
}
|
||||
|
||||
.col-3-5 {
|
||||
@extend %col-base;
|
||||
width: 29.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-3-4 {
|
||||
@extend %col-base;
|
||||
width: 28.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-3-3 {
|
||||
@extend %col-base;
|
||||
width: 27.5% !important;
|
||||
}
|
||||
|
||||
.col-3-2 {
|
||||
@extend %col-base;
|
||||
width: 26.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-3-1 {
|
||||
@extend %col-base;
|
||||
width: 25.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
@extend %col-base;
|
||||
width: 16.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-2-9 {
|
||||
@extend %col-base;
|
||||
width: 24.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-2-8 {
|
||||
@extend %col-base;
|
||||
width: 23.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-2-7 {
|
||||
@extend %col-base;
|
||||
width: 22.5% !important;
|
||||
}
|
||||
|
||||
.col-2-6 {
|
||||
@extend %col-base;
|
||||
width: 21.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-2-5 {
|
||||
@extend %col-base;
|
||||
width: 20.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-2-4 {
|
||||
@extend %col-base;
|
||||
width: 20% !important;
|
||||
}
|
||||
|
||||
.col-2-3 {
|
||||
@extend %col-base;
|
||||
width: 19.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-2-2 {
|
||||
@extend %col-base;
|
||||
width: 18.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-2-1 {
|
||||
@extend %col-base;
|
||||
width: 17.5% !important;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
@extend %col-base;
|
||||
width: 8.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-1-9 {
|
||||
@extend %col-base;
|
||||
width: 15.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-1-8 {
|
||||
@extend %col-base;
|
||||
width: 15% !important;
|
||||
}
|
||||
|
||||
.col-1-7 {
|
||||
@extend %col-base;
|
||||
width: 14.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-1-6 {
|
||||
@extend %col-base;
|
||||
width: 13.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-1-5 {
|
||||
@extend %col-base;
|
||||
width: 12.5% !important;
|
||||
}
|
||||
|
||||
.col-1-4 {
|
||||
@extend %col-base;
|
||||
width: 11.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-1-3 {
|
||||
@extend %col-base;
|
||||
width: 10.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-1-2 {
|
||||
@extend %col-base;
|
||||
width: 10% !important;
|
||||
}
|
||||
|
||||
.col-1-1 {
|
||||
@extend %col-base;
|
||||
width: 9.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-0-9 {
|
||||
@extend %col-base;
|
||||
width: 7.5% !important;
|
||||
}
|
||||
|
||||
.col-0-8 {
|
||||
@extend %col-base;
|
||||
width: 6.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-0-7 {
|
||||
@extend %col-base;
|
||||
width: 5.83333333333333% !important;
|
||||
}
|
||||
|
||||
.col-0-6 {
|
||||
@extend %col-base;
|
||||
width: 5% !important;
|
||||
}
|
||||
|
||||
.col-0-5 {
|
||||
@extend %col-base;
|
||||
width: 4.16666666666667% !important;
|
||||
}
|
||||
|
||||
.col-0-4 {
|
||||
@extend %col-base;
|
||||
width: 3.33333333333333% !important;
|
||||
}
|
||||
|
||||
.col-0-3 {
|
||||
@extend %col-base;
|
||||
width: 2.5% !important;
|
||||
}
|
||||
|
||||
.col-0-2 {
|
||||
@extend %col-base;
|
||||
width: 1.66666666666667% !important;
|
||||
}
|
||||
|
||||
.col-0-1 {
|
||||
@extend %col-base;
|
||||
width: 0.83333333333333% !important;
|
||||
}
|
||||
509
scss/includes/util-mobile.scss
Normal file
509
scss/includes/util-mobile.scss
Normal file
@@ -0,0 +1,509 @@
|
||||
@import "vars";
|
||||
|
||||
// If it's anything less than full desktop size, enable these styles
|
||||
.mobile-ish__ {
|
||||
@media only screen and (min-width: $width-screen-lg--min) {
|
||||
&visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
&hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&ve-flex-col {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
&ve-flex-ai-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
&w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&mr-0 {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile__ {
|
||||
@media only screen and (min-width: $width-screen-sm--min) {
|
||||
&visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
&hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
&text-clip-ellipsis {
|
||||
white-space: nowrap !important;
|
||||
text-overflow: ellipsis !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
&ve-flex-col {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
&ve-flex-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
&ve-flex-col-reverse {
|
||||
display: flex !important;
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
|
||||
&ve-flex-ai-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
&w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&max-w-100 {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&h-initial {
|
||||
height: initial !important;
|
||||
}
|
||||
|
||||
// region util-spacing port
|
||||
&m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
&m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&m-1 {
|
||||
margin: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&m-2 {
|
||||
margin: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&m-3 {
|
||||
margin: $spacer !important;
|
||||
}
|
||||
|
||||
&m-4 {
|
||||
margin: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&m-5 {
|
||||
margin: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
&mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
&mt-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mt-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mt-3 {
|
||||
margin-top: $spacer !important;
|
||||
}
|
||||
|
||||
&mt-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mt-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mr-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
&mr-0 {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&mr-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mr-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mr-3 {
|
||||
margin-right: $spacer !important;
|
||||
}
|
||||
|
||||
&mr-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mr-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
&mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&mb-1 {
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mb-3 {
|
||||
margin-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
&mb-4 {
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mb-5 {
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
&ml-0 {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&ml-1 {
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&ml-2 {
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&ml-3 {
|
||||
margin-left: $spacer !important;
|
||||
}
|
||||
|
||||
&ml-4 {
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&ml-5 {
|
||||
margin-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
&my-0 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&my-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&my-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
&my-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&my-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
&mx-0 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&mx-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mx-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mx-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
}
|
||||
|
||||
&mx-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mx-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&p-1 {
|
||||
padding: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&p-2 {
|
||||
padding: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&p-3 {
|
||||
padding: $spacer !important;
|
||||
}
|
||||
|
||||
&p-4 {
|
||||
padding: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&p-5 {
|
||||
padding: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&p-1p {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
&pt-0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
&pt-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pt-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pt-3 {
|
||||
padding-top: $spacer !important;
|
||||
}
|
||||
|
||||
&pt-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pt-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pt-1p {
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
|
||||
&pr-0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
&pr-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pr-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pr-3 {
|
||||
padding-right: $spacer !important;
|
||||
}
|
||||
|
||||
&pr-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pr-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pr-1p {
|
||||
padding-right: 1px !important;
|
||||
}
|
||||
|
||||
&pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&pb-1 {
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pb-2 {
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pb-3 {
|
||||
padding-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
&pb-4 {
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pb-5 {
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pb-1p {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
&pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&pl-1 {
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pl-2 {
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pl-3 {
|
||||
padding-left: $spacer !important;
|
||||
}
|
||||
|
||||
&pl-4 {
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pl-5 {
|
||||
padding-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pl-1p {
|
||||
padding-left: 1px !important;
|
||||
}
|
||||
|
||||
&py-0 {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&py-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&py-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&py-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
&py-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&py-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&px-0 {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&px-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&px-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&px-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-left: $spacer !important;
|
||||
}
|
||||
|
||||
&px-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&px-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
&py-1p {
|
||||
padding-top: 1px !important;
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
}
|
||||
7
scss/includes/util-popwindow.scss
Normal file
7
scss/includes/util-popwindow.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.ve-popwindow {
|
||||
.ve-popwindow__ {
|
||||
&hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
scss/includes/util-print.scss
Normal file
26
scss/includes/util-print.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import "vars";
|
||||
|
||||
@include is-print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.print__ {
|
||||
&ve-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&h-initial {
|
||||
height: initial !important;
|
||||
}
|
||||
|
||||
&overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
&my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
807
scss/includes/util-spacing.scss
Normal file
807
scss/includes/util-spacing.scss
Normal file
@@ -0,0 +1,807 @@
|
||||
@import "vars";
|
||||
|
||||
.b-0 {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.b-1 {
|
||||
border-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.b-2 {
|
||||
border-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.b-3 {
|
||||
border-width: $spacer !important;
|
||||
}
|
||||
|
||||
.b-4 {
|
||||
border-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.b-5 {
|
||||
border-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.b-1p {
|
||||
border: 1px solid $rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.bt-0 {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
|
||||
.bt-1 {
|
||||
border-top-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bt-2 {
|
||||
border-top-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bt-3 {
|
||||
border-top-width: $spacer !important;
|
||||
}
|
||||
|
||||
.bt-4 {
|
||||
border-top-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bt-5 {
|
||||
border-top-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bt-1p {
|
||||
border-top: 1px solid $rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.br-0 {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.br-1 {
|
||||
border-right-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.br-2 {
|
||||
border-right-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.br-3 {
|
||||
border-right-width: $spacer !important;
|
||||
}
|
||||
|
||||
.br-4 {
|
||||
border-right-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.br-5 {
|
||||
border-right-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.br-1p {
|
||||
border-right: 1px solid $rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.bb-0 {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
.bb-1 {
|
||||
border-bottom-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bb-2 {
|
||||
border-bottom-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bb-3 {
|
||||
border-bottom-width: $spacer !important;
|
||||
}
|
||||
|
||||
.bb-4 {
|
||||
border-bottom-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bb-5 {
|
||||
border-bottom-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bb-1p {
|
||||
border-bottom: 1px solid $rgb-border-grey !important;
|
||||
|
||||
&-trans {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bl-0 {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.bl-1 {
|
||||
border-left-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bl-2 {
|
||||
border-left-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bl-3 {
|
||||
border-left-width: $spacer !important;
|
||||
}
|
||||
|
||||
.bl-4 {
|
||||
border-left-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bl-5 {
|
||||
border-left-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bl-1p {
|
||||
border-left: 1px solid $rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.by-0 {
|
||||
border-top-width: 0 !important;
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
.by-1 {
|
||||
border-top-width: ($spacer * 0.25) !important;
|
||||
border-bottom-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.by-2 {
|
||||
border-top-width: ($spacer * 0.5) !important;
|
||||
border-bottom-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.by-3 {
|
||||
border-top-width: $spacer !important;
|
||||
border-bottom-width: $spacer !important;
|
||||
}
|
||||
|
||||
.by-4 {
|
||||
border-top-width: ($spacer * 1.5) !important;
|
||||
border-bottom-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.by-5 {
|
||||
border-top-width: ($spacer * 3) !important;
|
||||
border-bottom-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bx-0 {
|
||||
border-right-width: 0 !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.bx-1 {
|
||||
border-right-width: ($spacer * 0.25) !important;
|
||||
border-left-width: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bx-2 {
|
||||
border-right-width: ($spacer * 0.5) !important;
|
||||
border-left-width: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bx-3 {
|
||||
border-right-width: $spacer !important;
|
||||
border-left-width: $spacer !important;
|
||||
}
|
||||
|
||||
.bx-4 {
|
||||
border-right-width: ($spacer * 1.5) !important;
|
||||
border-left-width: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bx-5 {
|
||||
border-right-width: ($spacer * 3) !important;
|
||||
border-left-width: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.btl-0 {
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.btl-5p {
|
||||
border-top-left-radius: 5px !important;
|
||||
}
|
||||
|
||||
.btr-0 {
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.btr-5p {
|
||||
border-top-right-radius: 5px !important;
|
||||
}
|
||||
|
||||
.bbr-0 {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.bbr-5p {
|
||||
border-bottom-right-radius: 5px !important;
|
||||
}
|
||||
|
||||
.bbl-0 {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.bbl-5p {
|
||||
border-bottom-left-radius: 5px !important;
|
||||
}
|
||||
|
||||
.hr-0 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-3 {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vr-0 {
|
||||
@include vr();
|
||||
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.vr-1 {
|
||||
@include vr();
|
||||
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.vr-2 {
|
||||
@include vr();
|
||||
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.vr-3 {
|
||||
@include vr();
|
||||
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
}
|
||||
|
||||
.vr-4 {
|
||||
@include vr();
|
||||
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.vr-5 {
|
||||
@include vr();
|
||||
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.m-3 {
|
||||
margin: $spacer !important;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.my-0 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mx-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.my-1p {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.mx-2p {
|
||||
margin-right: 2px !important;
|
||||
margin-left: 2px !important;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mt-n1 {
|
||||
margin-top: (-$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mt-n2 {
|
||||
margin-top: (-$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: $spacer !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mt-1p {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.mr-0 {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mr-n1 {
|
||||
margin-right: (-$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mr-n2 {
|
||||
margin-right: (-$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
margin-right: $spacer !important;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mr-3p {
|
||||
margin-right: 3px !important;
|
||||
}
|
||||
|
||||
.mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mb-n1 {
|
||||
margin-bottom: (-$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mb-n2 {
|
||||
margin-bottom: (-$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.ml-0 {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.ml-n1 {
|
||||
margin-left: (-$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.ml-n2 {
|
||||
margin-left: (-$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: $spacer !important;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.ml-5 {
|
||||
margin-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: $spacer !important;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.p-1p {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-left: $spacer !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.px-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.py-1p {
|
||||
padding-top: 1px !important;
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.py-2p {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.px-1p {
|
||||
padding-right: 1px !important;
|
||||
padding-left: 1px !important;
|
||||
}
|
||||
|
||||
.px-2p {
|
||||
padding-right: 2px !important;
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: $spacer !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pt-1p {
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pr-3 {
|
||||
padding-right: $spacer !important;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pr-1p {
|
||||
padding-right: 1px !important;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: $spacer !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pb-1p {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: $spacer !important;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: ($spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pl-1p {
|
||||
padding-left: 1px !important;
|
||||
}
|
||||
|
||||
.z-index-1 {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.top-n1p {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0 !important;
|
||||
}
|
||||
852
scss/includes/util.scss
Normal file
852
scss/includes/util.scss
Normal file
@@ -0,0 +1,852 @@
|
||||
@import "vars";
|
||||
|
||||
// region Fix Chrome
|
||||
input[type="checkbox"]:checked {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Font
|
||||
.code {
|
||||
font-family: monospace !important;
|
||||
}
|
||||
|
||||
.dnd-font {
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Font size
|
||||
.ve-small {
|
||||
font-size: 85% !important;
|
||||
}
|
||||
|
||||
.font-size-24p {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Font style
|
||||
.ve-muted {
|
||||
color: $rgb-font--muted !important;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.ve-bolder {
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
i > i {
|
||||
font-style: initial;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.help {
|
||||
cursor: help !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: dotted !important;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: dotted !important;
|
||||
}
|
||||
|
||||
&-subtle {
|
||||
cursor: help !important;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Font misc
|
||||
.no-wrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-clip-ellipsis {
|
||||
white-space: nowrap !important;
|
||||
text-overflow: ellipsis !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.whitespace-normal {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.word-break-all {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.small-caps {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.no-breaks {
|
||||
break-before: auto;
|
||||
break-after: auto;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.ve-text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Transforms
|
||||
.trans-x-flip {
|
||||
transform: scaleX(-1) !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Cursor
|
||||
.clickable {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.not-clickable {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.copyable {
|
||||
cursor: copy !important;
|
||||
}
|
||||
|
||||
.ve-draggable {
|
||||
cursor: grab;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Events
|
||||
.no-events {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.events-initial {
|
||||
pointer-events: initial !important;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.user-select-text {
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
user-select: all !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Scrolling
|
||||
.smooth-scroll {
|
||||
transform: translateZ(0) !important;
|
||||
}
|
||||
|
||||
.scrollbar-stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
@include overflow-dots();
|
||||
}
|
||||
|
||||
.overflow-overlay {
|
||||
overflow: auto;
|
||||
overflow: overlay;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Resizing
|
||||
.resize-vertical {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Width
|
||||
|
||||
.w-10 {
|
||||
width: 10% !important;
|
||||
}
|
||||
|
||||
.w-15 {
|
||||
width: 15% !important;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 20% !important;
|
||||
}
|
||||
|
||||
.w-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 30% !important;
|
||||
}
|
||||
|
||||
.w-33 {
|
||||
width: 33.3333333% !important;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
.w-50 {
|
||||
width: 50% !important;
|
||||
|
||||
&--mr-2 {
|
||||
width: calc(50% - #{$spacer * 0.5}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.w-60 {
|
||||
width: 60% !important;
|
||||
}
|
||||
|
||||
.w-66 {
|
||||
width: 66.6666666% !important;
|
||||
}
|
||||
|
||||
.w-70 {
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.w-80 {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.w-90 {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.w-100w {
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
.w-initial {
|
||||
width: initial !important;
|
||||
}
|
||||
|
||||
.w-20p {
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.w-24p {
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
.w-30p {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.w-40p {
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
.w-48p {
|
||||
width: 48px !important;
|
||||
}
|
||||
|
||||
.w-50p {
|
||||
width: 50px !important;
|
||||
}
|
||||
|
||||
.w-70p {
|
||||
width: 70px !important;
|
||||
}
|
||||
|
||||
.w-80p {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.w-90p {
|
||||
width: 90px !important;
|
||||
}
|
||||
|
||||
.w-100p {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.w-140p {
|
||||
width: 140px !important;
|
||||
}
|
||||
|
||||
.w-200p {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.w-640p {
|
||||
width: 640px !important;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.min-w-80 {
|
||||
min-width: 80% !important;
|
||||
}
|
||||
|
||||
.min-w-100 {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
.min-w-20p {
|
||||
min-width: 20px !important;
|
||||
}
|
||||
|
||||
.min-w-100p {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.min-w-200p {
|
||||
min-width: 200px !important;
|
||||
}
|
||||
|
||||
.max-w-25 {
|
||||
max-width: 25% !important;
|
||||
}
|
||||
|
||||
.max-w-33 {
|
||||
max-width: 33.3333333% !important;
|
||||
}
|
||||
|
||||
.max-w-80 {
|
||||
max-width: 80% !important;
|
||||
}
|
||||
|
||||
.max-w-100 {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.max-w-80p {
|
||||
max-width: 80px !important;
|
||||
}
|
||||
|
||||
.max-w-100p {
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
||||
.max-w-200p {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
|
||||
.max-w-300p {
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
.max-w-640p {
|
||||
max-width: 640px !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Height
|
||||
.h-initial {
|
||||
height: initial !important;
|
||||
}
|
||||
|
||||
.h-50 {
|
||||
height: 50% !important;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.h-100h {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.h-20p {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.h-21p {
|
||||
height: 21px !important;
|
||||
}
|
||||
|
||||
.h-25p {
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.h-27p {
|
||||
height: 27px !important;
|
||||
}
|
||||
|
||||
.h-30p {
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.h-100p {
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.h-120p {
|
||||
height: 120px !important;
|
||||
}
|
||||
|
||||
.h-ipt-xs {
|
||||
height: $h-ipt-xs;
|
||||
}
|
||||
|
||||
// Often useful as a hack to force flexbox to behave
|
||||
.min-h-0 {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.min-h-100 {
|
||||
min-height: 100% !important;
|
||||
}
|
||||
|
||||
.min-h-24p {
|
||||
min-height: 24px !important;
|
||||
}
|
||||
|
||||
.min-h-100p {
|
||||
min-height: 100px !important;
|
||||
}
|
||||
|
||||
.max-h-40 {
|
||||
max-height: 40% !important;
|
||||
}
|
||||
|
||||
.max-h-unset {
|
||||
max-height: unset !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Position
|
||||
.relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Display
|
||||
.ve-grid {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ve-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.ve-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.ve-inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.ve-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.ve-flex-col {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.ve-flex-v-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.ve-inline-flex-v-center {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.ve-flex-v-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ve-flex-v-baseline {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.ve-flex-v-end {
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.ve-flex-v-stretch {
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.ve-flex-h-center {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ve-flex-h-right {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.ve-flex-vh-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ve-flex-vh-center-around {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.ve-flex-inline-col {
|
||||
display: inline-flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.ve-flex-inline-v-center {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ve-self-flex-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
.ve-self-flex-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.ve-self-flex-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
|
||||
.ve-self-flex-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
|
||||
.ve-flex-fill {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.ve-grow {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.no-shrink {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.no-grow {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
|
||||
.ve-flex-1 {
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.ve-flex-2 {
|
||||
flex: 2 !important;
|
||||
}
|
||||
|
||||
.ve-flex-3 {
|
||||
flex: 3 !important;
|
||||
}
|
||||
|
||||
.ve-flex-4 {
|
||||
flex: 4 !important;
|
||||
}
|
||||
|
||||
.ve-flex-5 {
|
||||
flex: 5 !important;
|
||||
}
|
||||
|
||||
.ve-flex-6 {
|
||||
flex: 6 !important;
|
||||
}
|
||||
|
||||
.ve-flex-7 {
|
||||
flex: 7 !important;
|
||||
}
|
||||
|
||||
.ve-shrink-10 {
|
||||
flex-shrink: 10 !important;
|
||||
}
|
||||
|
||||
.ve-flex-wrap {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.split {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.split-v-center {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.inline-split-v-center {
|
||||
display: inline-flex !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.split-v-end {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.split-child {
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.split-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.split-column--inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Columns
|
||||
.columns-2 {
|
||||
column-count: 2;
|
||||
break-inside: avoid-column;
|
||||
column-gap: 1.75rem;
|
||||
|
||||
> * {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
column-count: 3;
|
||||
break-inside: avoid-column;
|
||||
column-gap: 1.75rem;
|
||||
|
||||
> * {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-4 {
|
||||
column-count: 4;
|
||||
break-inside: avoid-column;
|
||||
column-gap: 1.75rem;
|
||||
|
||||
> * {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-5 {
|
||||
column-count: 5;
|
||||
break-inside: avoid-column;
|
||||
column-gap: 1.75rem;
|
||||
|
||||
> * {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
column-count: 6;
|
||||
break-inside: avoid-column;
|
||||
column-gap: 1.75rem;
|
||||
|
||||
> * {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Tables
|
||||
.table-layout-fixed {
|
||||
table-layout: fixed !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region HRs/borders
|
||||
.hr--dotted {
|
||||
border-style: dashed;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.hr--heavy {
|
||||
border-bottom-width: 2px;
|
||||
border-top-width: 3px;
|
||||
border-style: outset;
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
border-style: dotted !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region Opacity
|
||||
.opacity-50 {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
// endregion
|
||||
|
||||
// redefine this here to ensure it overrides all the important display types above
|
||||
// (the namespaced Foundry alias)
|
||||
.ve-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
372
scss/includes/vars.scss
Normal file
372
scss/includes/vars.scss
Normal file
@@ -0,0 +1,372 @@
|
||||
@font-face {
|
||||
font-family: "Convergence";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Convergence-Regular"), url("../fonts/Convergence-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Roboto"), url("../fonts/Roboto-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Glyphicons Halflings";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("glyphicons-halflings-regular"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Blambot Casual";
|
||||
src: local("Blambot-Casual"), url("../fonts/Blambot-Casual-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@keyframes kf-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$pct-darken-active: 10%;
|
||||
$pct-darken-border: 15%;
|
||||
$pct-darken-border--active: 20%;
|
||||
$pct-darken-hover: 5%;
|
||||
|
||||
$sz-y-header: 73px;
|
||||
|
||||
$spacer: 1rem;
|
||||
|
||||
$rgb-off-black: #333;
|
||||
|
||||
$rgb-active-blue--light: #7398b7;
|
||||
$rgb-active-blue: #337ab7;
|
||||
$rgb-active-blue--dark: #2a6496;
|
||||
$rgb-active-red--light: #8a4b4b;
|
||||
$rgb-active-red: #8a1a1b;
|
||||
$rgb-active-red--dark: #711617;
|
||||
$rgb-inactive-grey: #c3c3c3;
|
||||
|
||||
$rgb-name-red: #822000;
|
||||
$rgb-name-red--night: #d29a38;
|
||||
$rgb-name-alt--night: #c2c2c2;
|
||||
$rgb-bg-orange: #fdf1dc;
|
||||
$rgb-bg-highlight: yellow;
|
||||
$rgb-border-yellow--statblock: #e69a28;
|
||||
|
||||
$rgb-link-blue: $rgb-active-blue;
|
||||
$rgb-link-blue--muted: #7096b7;
|
||||
$rgb-link-blue--night: #7db6e8;
|
||||
$rgb-link-blue--muted-night: #6e8eab;
|
||||
|
||||
$rgb-border-grey: #ccc;
|
||||
$rgb-border-grey--trans: #cccccca0;
|
||||
$rgb-border-grey--trans-muted: #ccc6;
|
||||
$rgb-border-grey--muted: #eee;
|
||||
$rgb-border-grey--list-row: #ddd;
|
||||
$rgb-border-grey--night: #555;
|
||||
$rgb-border-grey--trans-night: #555555a0;
|
||||
$rgb-border-grey--list-row-night: #444;
|
||||
$rgb-border-grey--statblock-night: #565656;
|
||||
|
||||
$rgb-modal-overlay-grey: #45454588;
|
||||
$rgb-shadow-grey: rgba(0, 0, 0, 0.175);
|
||||
$rgb-shadow-grey--dark: rgba(0, 0, 0, 0.475);
|
||||
|
||||
$rgb-stripe-grey: #88888818;
|
||||
$rgb-stripe-grey--faint: #bbbbbb18;
|
||||
$rgb-stripe-grey--night: #aaa4;
|
||||
|
||||
$rgb-cb-grey: #666;
|
||||
|
||||
$rgb-bg: white;
|
||||
$rgb-bg--alt: whitesmoke;
|
||||
$rgb-bg-homebrew: rgba(255, 0, 0, 0.1);
|
||||
|
||||
$rgb-bg--night: #222;
|
||||
$rgb-bg--alt-night: #383838;
|
||||
$rgb-bg-homebrew--night: rgba(255, 0, 0, 0.15);
|
||||
|
||||
$rgb-bg-highlight--night: #cc0;
|
||||
$rgb-font: #333;
|
||||
$rgb-font--muted: #777;
|
||||
$rgb-font--night: #bbb;
|
||||
|
||||
$rgb-form-control-bg--night: #222;
|
||||
|
||||
$rgb-ctx-item-text-disabled: #777;
|
||||
|
||||
$rgb-alert-text-success: #3c763d;
|
||||
$rgb-alert-text-info: #31708f;
|
||||
$rgb-alert-text-warning: #8a6d3b;
|
||||
$rgb-alert-text-danger: #a94442;
|
||||
|
||||
$rgb-btn-default-active--night: #ffffff40;
|
||||
|
||||
$rgb-btn-danger-bg-red: #d9534f;
|
||||
$rgb-btn-danger-bg-red--night: #7e3a38;
|
||||
|
||||
$rgb-btn-danger-border-red: #ac2925;
|
||||
|
||||
$rgb-btn-primary-blue: $rgb-active-blue;
|
||||
$rgb-btn-primary-blue--desaturated: #b8b8b8;
|
||||
|
||||
$rgb-class-variant: #8f903c;
|
||||
$rgb-class-ua: #827e00;
|
||||
$rgb-subclass: #337ab7;
|
||||
$rgb-subclass--stale: #7699b7;
|
||||
$rgb-subclass-ua: #1d965d;
|
||||
$rgb-subclass-ua--stale: #5f967c;
|
||||
$rgb-class-brew: #8c3b96;
|
||||
$rgb-class-variant-brew: #ba75a1;
|
||||
|
||||
$rgb-class-variant--night: #e6ab94;
|
||||
$rgb-class-ua--night: #a2ce42;
|
||||
$rgb-subclass--night: $rgb-subclass;
|
||||
$rgb-subclass--night-stale: $rgb-subclass--stale;
|
||||
$rgb-subclass-ua--night: #179e50;
|
||||
$rgb-subclass-ua--night-stale: #509e8a;
|
||||
$rgb-class-brew--night: #aa40b4;
|
||||
$rgb-class-variant-brew--night: #da9db5;
|
||||
|
||||
$rgb-roll-min: #ff3100;
|
||||
$rgb-roll-max: #00b400;
|
||||
$rgb-roll-min--muted: desaturate($rgb-roll-min, 35%);
|
||||
$rgb-roll-max--muted: desaturate($rgb-roll-max, 35%);
|
||||
|
||||
// Colors blended using https://www.w3schools.com/colors/colors_mixer.asp
|
||||
$rgb-btn-primary-blue--night: #2a4e6c; // #337ab7 blended with #222
|
||||
$rgb-btn-danger-red--night: #7e3a38; // #d9534f blended with #222
|
||||
$rgb-btn-warning-orange--night: #896838; // #f0ad4e blended with #222
|
||||
$rgb-btn-info-blue--night: #2a697c; // #31b0d5 blended with #222
|
||||
$rgb-btn-success-green--night: #427442; // #5cb85c blended with #222
|
||||
|
||||
$rgb-alert-info-blue--night: #375a7f;
|
||||
$rgb-alert-danger-red--night: #8d1d1a;
|
||||
$rgb-alert-warning-orange--night: #cd8514;
|
||||
$rgb-alert-success-green--night: #009e56;
|
||||
|
||||
$rgb-alert-info-border-blue--night: lighten($rgb-alert-info-blue--night, $pct-darken-border);
|
||||
$rgb-alert-danger-border-red--night: lighten($rgb-alert-danger-red--night, $pct-darken-border);
|
||||
$rgb-alert-warning-border-orange--night: lighten($rgb-alert-warning-orange--night, $pct-darken-border);
|
||||
$rgb-alert-success-border-green--night: lighten($rgb-alert-success-green--night, $pct-darken-border);
|
||||
|
||||
/* Z-Indices */
|
||||
$z-token-image: 10;
|
||||
|
||||
$z-side-menu: 60;
|
||||
|
||||
$z-omnisearch: 100;
|
||||
$z-book-find: 100;
|
||||
$z-bookmode: 100;
|
||||
$z-rollerbox-hidden: 100;
|
||||
$z-rollerbox-active: 110;
|
||||
|
||||
// Z-indices 200-300 reserved for hover windows
|
||||
$z-hwin: 200;
|
||||
|
||||
$z-search: 900;
|
||||
|
||||
$z-modal-wrapper: 1000;
|
||||
$z-modal-inner: 1001;
|
||||
$z-modal-legal: 1000;
|
||||
|
||||
$z-context-menu: 1100;
|
||||
|
||||
$z-temp-effect: 2000;
|
||||
|
||||
/* *** */
|
||||
|
||||
/* region Timing */
|
||||
$time-1-frame: 17ms;
|
||||
$time-2-frames: 34ms;
|
||||
$time-3-frames: 51ms;
|
||||
$time-4-frames: 67ms;
|
||||
$time-5-frames: 84ms;
|
||||
/* endregion */
|
||||
|
||||
// region Widths
|
||||
$w-ipt-number-1-digit: 24px;
|
||||
$w-ipt-number-1-5-digit: 30px;
|
||||
$w-ipt-number-2-digit: 40px;
|
||||
$w-ipt-number-3-digit: 60px;
|
||||
$w-ipt-number-4-digit: 80px;
|
||||
|
||||
$w-scroll-body: 15px;
|
||||
// endregion
|
||||
|
||||
// region Heights
|
||||
$h-ipt-xs: 22px;
|
||||
// endregion
|
||||
|
||||
// region Fonts
|
||||
$font-line-height: 1.42857143;
|
||||
// endregion
|
||||
|
||||
@mixin shadow-1 () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin shadow-1--dark () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
|
||||
}
|
||||
|
||||
@mixin shadow-2 () {
|
||||
box-shadow: 0 3px 6px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin shadow-active {
|
||||
box-shadow: 0 0 2px 0 #000b;
|
||||
}
|
||||
|
||||
@mixin shadow-active--night {
|
||||
box-shadow: 0 0 3px 0 #fffb;
|
||||
}
|
||||
|
||||
@mixin row-glow-active {
|
||||
box-shadow: inset 0 0 0 5000px rgba(0, 107, 196, 0.3);
|
||||
}
|
||||
|
||||
@mixin row-glow-active--alt {
|
||||
box-shadow: inset 0 0 0 5000px rgba(148, 148, 148, 0.2);
|
||||
}
|
||||
|
||||
@mixin overflow-dots {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin vr {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
@mixin is-print {
|
||||
@media print {
|
||||
@content;
|
||||
}
|
||||
|
||||
@at-root html.is-faux-print #{&} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/* *** */
|
||||
|
||||
@mixin font-regular {
|
||||
font-family: Arial, sans-serif;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
$width-screen-xs: 480px;
|
||||
$width-screen-sm: 768px;
|
||||
$width-screen-md: 991px;
|
||||
$width-screen-lg: 1200px;
|
||||
|
||||
$width-screen-xs--min: 481px;
|
||||
$width-screen-sm--min: 769px;
|
||||
$width-screen-md--min: 992px;
|
||||
$width-screen-lg--min: 1201px;
|
||||
|
||||
// region linked titles
|
||||
%linked-titles-base {
|
||||
.rd__h--0 .entry-title-inner:hover::before {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.rd__h--1 .entry-title-inner:hover::before {
|
||||
font-size: 55%;
|
||||
}
|
||||
|
||||
.rd__h--2 .entry-title-inner:hover::before {
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
%linked-titles-base-inner {
|
||||
cursor: copy;
|
||||
|
||||
&:hover::before {
|
||||
content: " 🔗";
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 20px;
|
||||
margin-right: -30px;
|
||||
font-size: 85%;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region filters
|
||||
$fltr-stripe: 11px;
|
||||
$fltr-2stripe: 22px;
|
||||
// endregion
|
||||
|
||||
// region Shared UI
|
||||
@mixin cb-custom {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
@include shadow-active();
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
|
||||
&.disabled {
|
||||
background-color: lighten($rgb-cb-grey, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cb-custom--night {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include shadow-active--night();
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
|
||||
&.disabled {
|
||||
background-color: lighten($rgb-border-grey--night, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
228
scss/index.scss
Normal file
228
scss/index.scss
Normal file
@@ -0,0 +1,228 @@
|
||||
table.home-table {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
table.home-table td {
|
||||
vertical-align: top;
|
||||
padding: 0 5px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#don-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 7px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
#wrp-patreon {
|
||||
min-height: 51px;
|
||||
}
|
||||
|
||||
.home__btn-page {
|
||||
border-width: 2px;
|
||||
width: 134px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.home__btn-page {
|
||||
width: 113px;
|
||||
}
|
||||
}
|
||||
|
||||
.home__btn-page,
|
||||
.home__btn-page:hover,
|
||||
.home__btn-page:active,
|
||||
.home__btn-page:focus {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.night-mode .home__btn-page,
|
||||
.night-mode .home__btn-page:hover,
|
||||
.night-mode .home__btn-page:active,
|
||||
.night-mode .home__btn-page:focus {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.home__icn-page {
|
||||
font-size: 50px;
|
||||
height: 50px;
|
||||
width: 65px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home__lbl-page {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 17px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.home__h-player {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: dodgerblue;
|
||||
}
|
||||
|
||||
.home__h-rule {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #33a5a5;
|
||||
}
|
||||
|
||||
.home__h-dm {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: darkviolet;
|
||||
}
|
||||
|
||||
.home__btn-player,
|
||||
.home__btn-player:hover,
|
||||
.home__btn-player:active,
|
||||
.home__btn-player:focus,
|
||||
.night-mode .home__btn-player,
|
||||
.night-mode .home__btn-player:hover,
|
||||
.night-mode .home__btn-player:active,
|
||||
.night-mode .home__btn-player:focus {
|
||||
border-color: dodgerblue;
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.home__btn-rule,
|
||||
.home__btn-rule:hover,
|
||||
.home__btn-rule:active,
|
||||
.home__btn-rule:focus,
|
||||
.night-mode .home__btn-rule,
|
||||
.night-mode .home__btn-rule:hover,
|
||||
.night-mode .home__btn-rule:active,
|
||||
.night-mode .home__btn-rule:focus {
|
||||
border-color: #33a5a5;
|
||||
color: #33a5a5;
|
||||
}
|
||||
|
||||
.home__btn-dm,
|
||||
.home__btn-dm:hover,
|
||||
.home__btn-dm:active,
|
||||
.home__btn-dm:focus,
|
||||
.night-mode .home__btn-dm,
|
||||
.night-mode .home__btn-dm:hover,
|
||||
.night-mode .home__btn-dm:active,
|
||||
.night-mode .home__btn-dm:focus {
|
||||
border-color: darkviolet;
|
||||
color: darkviolet;
|
||||
}
|
||||
|
||||
.home__stripe {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.home__stripe-header {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.home__split {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.home__split-spaced {
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.home__split-spaced--gutter {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.home__wrp-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home__mobile-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home__narrow-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.home__split {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home__split > * {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.home__split-spaced {
|
||||
margin-right: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.home__split-spaced--no-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home__stripe-header {
|
||||
top: -40px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.home__mobile-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.home__icn-page {
|
||||
font-size: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.home__btn-page {
|
||||
height: 114px;
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
.home__mobile-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 507px) {
|
||||
.home__narrow-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.home__narrow-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.home__split-spaced--no-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
[id="div-gpt-ad-5etools35927"]::after,
|
||||
[id="div-gpt-ad-5etools35930"]::after {
|
||||
content: "";
|
||||
margin: 20px auto 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
15
scss/inittrackerplayerview.scss
Normal file
15
scss/inittrackerplayerview.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
#initp__wrp_active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-fullscreen .initp__fullscreen-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
107
scss/items.scss
Normal file
107
scss/items.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
.list {
|
||||
height: initial;
|
||||
max-height: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.list.subitems {
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
span.side-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -22px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 0 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3.ele-mundane,
|
||||
h3.ele-magic {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.list {
|
||||
max-height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-height: 700px) {
|
||||
.list {
|
||||
max-height: 20em;
|
||||
}
|
||||
|
||||
.viewport-wrapper {
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.view-col-wrapper {
|
||||
flex-direction: column;
|
||||
max-height: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.list {
|
||||
max-height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
.itm__list-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.night-mode .itm__list-divider {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.itm__wrp-lists {
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
.itm__wrp-stats {
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.itm__wrp-list {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.itm__wrp-list--empty {
|
||||
height: initial;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.style-switch__wide .itm__wrp-list {
|
||||
min-width: calc(50% - 10px);
|
||||
max-width: calc(50% - 10px);
|
||||
}
|
||||
|
||||
.style-switch__wide .itm__wrp-list--mundane {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.style-switch__wide #listcontainer.itm__wrp-lists {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.style-switch__wide .itm__wrp-stats {
|
||||
width: 480px;
|
||||
flex: initial;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.style-switch__wide .side-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.style-switch__wide .itm__list-divider {
|
||||
display: block !important;
|
||||
}
|
||||
8
scss/langdemo.scss
Normal file
8
scss/langdemo.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.rlng__sel-sample {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.rlng__output {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
}
|
||||
8
scss/languages.scss
Normal file
8
scss/languages.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.languages__sample {
|
||||
font-size: 20px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.languages__sel-sample {
|
||||
max-width: 130px;
|
||||
}
|
||||
59
scss/lifegen.scss
Normal file
59
scss/lifegen.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid #333;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.night-mode h4 {
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-decoration: underline;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.life__output-wrp-border {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wrp-sect-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wrp-sect-head > button {
|
||||
margin: 6px 0 6px 6px;
|
||||
}
|
||||
|
||||
.life__output {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.btn-supp-fam {
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-supp-fam::before {
|
||||
content: "Roll Supplemental Tables Details";
|
||||
}
|
||||
|
||||
.note {
|
||||
display: inline-block;
|
||||
margin: 3px 10px;
|
||||
font-style: italic;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn-reroll::before {
|
||||
content: "Reroll";
|
||||
}
|
||||
|
||||
.life__output {
|
||||
margin: 1em 0;
|
||||
padding: 0.2em 0.7em;
|
||||
border-radius: 0.2em;
|
||||
display: none;
|
||||
}
|
||||
36
scss/list-page--grouped.scss
Normal file
36
scss/list-page--grouped.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
@import "includes/vars";
|
||||
|
||||
.lst__ {
|
||||
&item-group-header {
|
||||
font-size: 14px;
|
||||
background: $rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .lst__ {
|
||||
&item-group-header {
|
||||
background: $rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
|
||||
#listcontainer {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
#tablecontainer {
|
||||
flex: 7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#contentwrapper {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.rolltable {
|
||||
display: flex;
|
||||
}
|
||||
2
scss/lootgen-bundle.scss
Normal file
2
scss/lootgen-bundle.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "includes/lootgen";
|
||||
@import "includes/lootgen-night";
|
||||
24
scss/main.scss
Normal file
24
scss/main.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@import "includes/vars";
|
||||
@import "includes/expose-vars";
|
||||
@import "includes/bootstrap-custom";
|
||||
@import "includes/util-column";
|
||||
@import "includes/util-spacing";
|
||||
@import "includes/util";
|
||||
@import "includes/util-5etools";
|
||||
@import "includes/util-5etools-night";
|
||||
@import "includes/util-mobile";
|
||||
@import "includes/util-popwindow";
|
||||
@import "includes/render";
|
||||
@import "includes/render-night";
|
||||
@import "includes/hover";
|
||||
@import "includes/hover-night";
|
||||
@import "includes/source";
|
||||
@import "includes/source-night";
|
||||
@import "includes/list";
|
||||
@import "includes/nav";
|
||||
@import "includes/style";
|
||||
@import "includes/filter";
|
||||
@import "includes/filter-night";
|
||||
@import "includes/ui";
|
||||
@import "includes/ui-night";
|
||||
@import "includes/util-print";
|
||||
236
scss/makebrew.scss
Normal file
236
scss/makebrew.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
|
||||
/* GENERAL/PAGE STYLES */
|
||||
#content_input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#content_input::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#content_input_controls {
|
||||
padding: 3px 15px 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.night-mode #content_input_controls {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
#content_output {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#content_input input[type=number] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: initial;
|
||||
max-width: initial;
|
||||
margin-bottom: initial;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mkbru__wrp-tab-heads--border {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.night-mode .mkbru__wrp-tab-heads--border {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
/* Loading overlay */
|
||||
.initial-message {
|
||||
font-size: 5vmin;
|
||||
color: initial;
|
||||
}
|
||||
|
||||
/* Control bar */
|
||||
.mkbru__cnt-save {
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.mkbru__sidebar-entry {
|
||||
border-bottom: 1px solid #bbbbbb18;
|
||||
}
|
||||
|
||||
/* Output UI */
|
||||
.mkbru__wrp-output-tab-data {
|
||||
box-shadow: none;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.night-mode .mkbru__wrp-output-tab-data {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Maker UI */
|
||||
.mkbru__row {
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mkbru__wrp-row {
|
||||
margin-bottom: 0;
|
||||
max-width: initial;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
.mkbru__row-name {
|
||||
min-width: 120px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mkbru_mon__row-indent {
|
||||
width: 1px;
|
||||
align-self: stretch;
|
||||
flex-shrink: 0;
|
||||
background: #cccccc80;
|
||||
margin: 4px 0.5rem;
|
||||
}
|
||||
|
||||
.mkbru__row-name--marked {
|
||||
min-width: 114px;
|
||||
}
|
||||
|
||||
.mkbru__row-mark {
|
||||
width: 1px;
|
||||
background: #ccc;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.night-mode .mkbru__row-mark {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.mkbru__ipt-cb[type=checkbox] {
|
||||
margin-top: 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.mkbru__ipt-cb--small-offset {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mkbru__ipt-cb--plain[type=checkbox] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mkbru__sub-name--50 {
|
||||
min-width: calc(50% - 0.25rem);
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mkbru__sub-name--33 {
|
||||
min-width: calc(33.33333% - 0.25rem);
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mkbru__sub-name--25 {
|
||||
min-width: calc(25% - 0.25rem);
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mkbru__wrp-btn-xxs {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
/* Row (array) inputs */
|
||||
.mkbru__wrp-rows {
|
||||
border-bottom: 1px solid #cccccc80;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mkbru__wrp-rows--removable:only-child .mkbru__btn-rm-row,
|
||||
.mkbru__wrp-rows--removable:only-child .mkbru__btn-up-row,
|
||||
.mkbru__wrp-rows--removable:only-child .mkbru__btn-down-row,
|
||||
.mkbru__wrp-rows--removable:only-child .mkbru__btn-drag-row,
|
||||
/* CSS hacks to support nesting */
|
||||
.mkbru__wrp-rows--removable-nested-1:only-child .mkbru__btn-rm-row--nested-1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mkbru__wrp-rows--removable:first-child .mkbru__btn-up-row,
|
||||
.mkbru__wrp-rows--removable:last-child .mkbru__btn-down-row {
|
||||
display: none;
|
||||
}
|
||||
/* *** */
|
||||
|
||||
/* CREATURE STYLES */
|
||||
tr th.mon__name--token {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mkbru_mon__ac-split {
|
||||
max-width: calc(50% - 0.25rem);
|
||||
}
|
||||
|
||||
.mkbru_mon__btn-add-sense-language {
|
||||
min-width: 91px;
|
||||
}
|
||||
|
||||
.mkbru_mon__spell-wrp-edit {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.mkbru_mon__spell-divider {
|
||||
height: 1px;
|
||||
margin: 0 3rem;
|
||||
background: #cccccc60;
|
||||
}
|
||||
|
||||
.mkbru_mon__spell-header-wrp {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mkbru_mon__spell-header-ipt {
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
.mkbru_mon__spell-header-divider {
|
||||
width: 1px;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.night-mode .mkbru_mon__spell-header-divider {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.mkbru_mon__cb-environment[type=checkbox] {
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
|
||||
.mkbru_mon__skill-attrib-label {
|
||||
min-width: 40px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mkbru_mon__ipt-attack-dice {
|
||||
max-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
/* *** */
|
||||
11
scss/makecards.scss
Normal file
11
scss/makecards.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* region typeahead */
|
||||
ul.typeahead li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* endregion */
|
||||
83
scss/maps.scss
Normal file
83
scss/maps.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
@import "includes/vars";
|
||||
|
||||
.maps {
|
||||
.rd__wrp-map {
|
||||
max-width: initial;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&disp-message-initial {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
background: $rgb-bg;
|
||||
font-size: 1.12rem;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
width: 235px;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&btn-chapter-scroll {
|
||||
width: 20px;
|
||||
opacity: 0;
|
||||
margin: -2px 3px;
|
||||
}
|
||||
|
||||
&label-cb {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
|
||||
.maps-menu__btn-chapter-scroll {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gallery {
|
||||
&__wrp-chapter {
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .maps {
|
||||
&__ {
|
||||
&disp-message-initial {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
background: $rgb-bg--night;
|
||||
border-top-color: $rgb-border-grey--trans-night;
|
||||
|
||||
&__label-cb {
|
||||
border-bottom-color: $rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gallery {
|
||||
&__wrp-chapter {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
scss/objects.scss
Normal file
8
scss/objects.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.objs__name--token .stats-source {
|
||||
margin-right: 5em;
|
||||
}
|
||||
|
||||
img.token {
|
||||
font-size: 1.6em;
|
||||
right: 0.4em;
|
||||
}
|
||||
6
scss/optionalfeatures.scss
Normal file
6
scss/optionalfeatures.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
.opt-feature-type {
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
}
|
||||
11
scss/plutonium.scss
Normal file
11
scss/plutonium.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
.big-help-gif {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 98vh;
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 4px;
|
||||
}
|
||||
17
scss/recipes.scss
Normal file
17
scss/recipes.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@import "includes/vars";
|
||||
|
||||
.recipes {
|
||||
&__ {
|
||||
&tbl-recipes {
|
||||
border-left: 1px solid $rgb-border-grey--trans;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .recipes {
|
||||
&__ {
|
||||
&tbl-recipes {
|
||||
border-left: 1px solid $rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
scss/renderdemo.scss
Normal file
37
scss/renderdemo.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "includes/vars";
|
||||
|
||||
#jsoninput {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrp-output {
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 28px;
|
||||
height: calc(100% - 35px);
|
||||
}
|
||||
|
||||
#demoSelectRenderer {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
#wrp-jsoninput {
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
#wrp-output {
|
||||
display: block;
|
||||
height: unset;
|
||||
overflow: unset;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// region Hack to ensure the table appears on the first page
|
||||
#pagecontent {
|
||||
margin-top: -2px;
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
66
scss/search.scss
Normal file
66
scss/search.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
@import "includes/vars";
|
||||
|
||||
.pg-search__ {
|
||||
$sz-image: 48px;
|
||||
|
||||
&ipt {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&wrp-result {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 5px;
|
||||
min-height: calc(#{$spacer} + #{$sz-image} + 2px);
|
||||
}
|
||||
|
||||
&disp-token {
|
||||
width: $sz-image;
|
||||
height: $sz-image;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&disp-srd {
|
||||
font-size: 8.5px;
|
||||
vertical-align: super;
|
||||
top: 2px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
width: 500px;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-toggle-preview {
|
||||
&--expanded {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.pg-search__ {
|
||||
&wrp-result {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style-switch__wide {
|
||||
.pg-search__ {
|
||||
&wrp-preview {
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
scss/spells.scss
Normal file
8
scss/spells.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.concentration {
|
||||
padding-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.concentration--sublist {
|
||||
padding-left: 1px;
|
||||
}
|
||||
14
scss/statgen-bundle.scss
Normal file
14
scss/statgen-bundle.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@import "includes/statgen";
|
||||
@import "includes/statgen-night";
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container--main {
|
||||
min-width: 420px;
|
||||
}
|
||||
8
scss/vehicles.scss
Normal file
8
scss/vehicles.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.veh__name--token .stats-source {
|
||||
margin-right: 5em;
|
||||
}
|
||||
|
||||
img.token {
|
||||
font-size: 1.6em;
|
||||
right: 0.4em;
|
||||
}
|
||||
Reference in New Issue
Block a user