mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
3281 lines
54 KiB
SCSS
3281 lines
54 KiB
SCSS
@use "sass:color";
|
|
|
|
@use "../vars/vars";
|
|
@use "../vars/vars-night";
|
|
|
|
.page__ {
|
|
&header {
|
|
padding: 0 15px 1px;
|
|
box-shadow: 0 1px 4px vars.$rgb-shadow-grey--dark;
|
|
color: #fff;
|
|
background-color: rgb(0 107 196);
|
|
min-height: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&title {
|
|
margin-right: 10px;
|
|
display: inline;
|
|
|
|
&::after {
|
|
color: #e0e0e0;
|
|
content: ".";
|
|
}
|
|
|
|
&--home {
|
|
span {
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&subtitle {
|
|
display: inline;
|
|
font-style: italic;
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
&btn-toggle-nav {
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
width: 6em;
|
|
flex-shrink: 0;
|
|
height: 32px;
|
|
line-height: 1;
|
|
margin-right: 2px;
|
|
|
|
@media screen and (width > #{vars.$width-screen-sm}) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&nav {
|
|
position: relative;
|
|
min-height: 33px;
|
|
flex-shrink: 0;
|
|
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
&nav-inner {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
flex-direction: column;
|
|
width: calc(100% - 6em);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&nav-date {
|
|
margin-left: -16px;
|
|
width: 27px;
|
|
color: vars.$rgb-font--muted;
|
|
}
|
|
|
|
&wrp-download {
|
|
@include vars.mix-shadow-1;
|
|
|
|
position: fixed;
|
|
z-index: vars.$z-temp-effect;
|
|
top: 5px;
|
|
min-height: 40px;
|
|
min-width: 100px;
|
|
max-width: 850px;
|
|
display: flex;
|
|
width: 90vw;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
padding: 5px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
}
|
|
|
|
&wrp-download-bar {
|
|
border: 1px solid vars.$rgb-active-blue--dark;
|
|
height: 34px;
|
|
border-radius: 4px;
|
|
|
|
&--error {
|
|
border-color: vars.$rgb-active-red--dark;
|
|
}
|
|
}
|
|
|
|
&disp-download-progress-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: vars.$rgb-active-blue;
|
|
|
|
&--error {
|
|
background: vars.$rgb-active-red;
|
|
}
|
|
}
|
|
|
|
&disp-download-progress-text {
|
|
position: absolute;
|
|
inset: 0 calc(50% - 30px) 0 calc(50% - 30px);
|
|
width: 90px;
|
|
text-shadow:
|
|
1px 1px 0 #fff,
|
|
-1px -1px 0 #fff,
|
|
1px -1px 0 #fff,
|
|
-1px 1px 0 #fff,
|
|
3px 3px 5px #000;
|
|
}
|
|
}
|
|
|
|
.active > .nav__link > .page__ {
|
|
&nav-date {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .page__ {
|
|
&wrp-download {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
&disp-download-progress-text {
|
|
color: vars.$rgb-off-black;
|
|
}
|
|
}
|
|
|
|
#navigation .page__nav-hidden-mobile {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
display: none;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#legal-notice {
|
|
@include vars.mix-shadow-1;
|
|
|
|
position: fixed;
|
|
z-index: 10000;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 10em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
font-weight: bold;
|
|
padding: 3rem;
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.viewport-wrapper {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
overflow: auto;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
bottom: auto;
|
|
height: initial;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
.view-col-group--cancer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.view-col-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-height: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
|
|
&--cancer {
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
// min-height: calc(100vh - #{$sz-y-header});
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
flex-direction: column;
|
|
max-height: none;
|
|
height: initial;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* side menu */
|
|
.sidemenu {
|
|
@include vars.mix-shadow-1;
|
|
|
|
background: #fff;
|
|
border: 1px solid vars.$rgb-border-grey;
|
|
|
|
position: fixed;
|
|
z-index: vars.$z-side-menu;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -260px;
|
|
width: 250px;
|
|
transition: left vars.$time-3-frames;
|
|
cursor: default;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 4px 7px;
|
|
overflow-y: auto;
|
|
|
|
> * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__toggle {
|
|
@include vars.mix-shadow-1;
|
|
|
|
background: #d3d3d3;
|
|
|
|
position: absolute;
|
|
z-index: vars.$z-side-menu;
|
|
top: 46px;
|
|
left: -7px;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
transition: left vars.$time-3-frames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
padding: 3px 4px;
|
|
}
|
|
|
|
&__hotzone {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
&__burger {
|
|
background: #fff;
|
|
|
|
height: 3px;
|
|
box-shadow: inset 0 0 1px 0 #888;
|
|
}
|
|
|
|
&__toggle:hover .sidemenu {
|
|
left: 0;
|
|
transition: left vars.$time-3-frames;
|
|
|
|
&--offset {
|
|
left: -12px;
|
|
}
|
|
}
|
|
|
|
&__row__divider {
|
|
background: vars.$rgb-border-grey--trans;
|
|
|
|
&--heavy {
|
|
background: #aaa;
|
|
}
|
|
}
|
|
|
|
&__row__label {
|
|
min-width: 46px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__row__label--cb-label {
|
|
font-weight: initial;
|
|
display: flex;
|
|
margin-bottom: 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"].sidemenu__row__label__cb {
|
|
margin-right: 3px;
|
|
margin-left: 7px;
|
|
}
|
|
|
|
.ve-night-mode .sidemenu {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
/* *** */
|
|
|
|
/* omnisearch */
|
|
.omni__ {
|
|
&wrp-output {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&output {
|
|
@include vars.mix-shadow-1;
|
|
|
|
position: absolute;
|
|
z-index: vars.$z-omnisearch;
|
|
padding: 0.2em 0.7em;
|
|
border-radius: 0.2em;
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
|
background: #fff;
|
|
|
|
&--scrolled {
|
|
position: fixed;
|
|
top: 42px;
|
|
right: 10px;
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-xxs}) {
|
|
max-width: 300px;
|
|
min-width: 270px;
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-xs}) {
|
|
max-width: 460px;
|
|
min-width: 430px;
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-sm}) {
|
|
max-width: 740px;
|
|
min-width: 500px;
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
top: 40px;
|
|
}
|
|
}
|
|
|
|
&wrp-input {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
margin-top: 2px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
position: relative;
|
|
|
|
&--scrolled {
|
|
position: fixed;
|
|
z-index: vars.$z-omnisearch;
|
|
top: 5px;
|
|
right: 10px;
|
|
width: 85px;
|
|
padding: 2px 0;
|
|
border-left: 40px solid transparent;
|
|
|
|
.omni__input {
|
|
min-width: initial;
|
|
border-top-left-radius: 4px;
|
|
border-top-color: vars.$rgb-border-grey;
|
|
}
|
|
|
|
.omni__submit {
|
|
border-top-right-radius: 4px;
|
|
border-top-color: vars.$rgb-border-grey;
|
|
}
|
|
|
|
input {
|
|
padding: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
&:focus,
|
|
&:focus-within,
|
|
&:active,
|
|
&:hover {
|
|
width: 250px;
|
|
border-left: 0;
|
|
|
|
input {
|
|
padding: 6px 12px;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&input {
|
|
height: 32px;
|
|
min-width: 100px;
|
|
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
border-top-left-radius: 0;
|
|
border-top-color: transparent;
|
|
}
|
|
}
|
|
|
|
&btn-clear {
|
|
top: 9px;
|
|
right: 37px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&submit {
|
|
height: 32px;
|
|
padding: 3px 7px;
|
|
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
border-top-right-radius: 0;
|
|
border-top-color: transparent;
|
|
}
|
|
}
|
|
|
|
&wrp-paginate {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
user-select: none;
|
|
padding: 2px;
|
|
font-size: 1.1em;
|
|
min-width: 20px;
|
|
}
|
|
}
|
|
|
|
&paginate-ctrl {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: vars.$rgb-active-blue;
|
|
}
|
|
}
|
|
|
|
&paginate-left {
|
|
margin-right: auto;
|
|
}
|
|
|
|
&paginate-count {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&paginate-right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
&disp-srd {
|
|
font-size: 8.5px;
|
|
align-self: start;
|
|
top: 2px;
|
|
margin-right: 1px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&disp-source-marker {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&wrp-page {
|
|
margin-left: 4px;
|
|
font-family: Convergence, Arial, sans-serif;
|
|
font-weight: 100;
|
|
font-size: 94%;
|
|
}
|
|
|
|
// region Clear button
|
|
&input {
|
|
&:placeholder-shown + .omni__btn-clear {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&wrp-input--scrolled {
|
|
.omni__input:not(:focus, :focus-within, &:active, :hover) + .omni__btn-clear {
|
|
display: none;
|
|
}
|
|
}
|
|
// endregion
|
|
}
|
|
|
|
/* *** */
|
|
|
|
.btn-name-pronounce,
|
|
.btn-stats-name {
|
|
vertical-align: top;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
.name-pronounce-icon {
|
|
line-height: 16px;
|
|
}
|
|
|
|
.name-pronounce {
|
|
display: none;
|
|
}
|
|
|
|
.hwin__top-border-icon {
|
|
top: 0;
|
|
margin-left: auto;
|
|
padding: 2px;
|
|
color: vars.$rgb-bg--alt;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
width: 18px;
|
|
text-align: center;
|
|
|
|
&--text {
|
|
line-height: 11px;
|
|
font-weight: bolder;
|
|
font-family: monospace;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:visited {
|
|
color: color.adjust(vars.$rgb-bg--alt, $lightness: - vars.$pct-darken-hover);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
#tabs-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
}
|
|
|
|
/* roller */
|
|
.rollbox-min {
|
|
@include vars.mix-shadow-1;
|
|
|
|
position: fixed;
|
|
z-index: vars.$z-rollerbox-hidden;
|
|
right: 7px;
|
|
bottom: 0;
|
|
color: rgb(255 255 255 / 70%);
|
|
width: 24px;
|
|
// TODO(iOS)
|
|
// Support iOS Webclip corner
|
|
// See: https://github.com/5etools-mirror-1/5etools-mirror-1.github.io/issues/122
|
|
height: calc(24px + calc(env(safe-area-inset-bottom, 0) / 2));
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border: 0;
|
|
|
|
.glyphicon {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 6px;
|
|
}
|
|
}
|
|
|
|
.rollbox {
|
|
@include vars.mix-shadow-1;
|
|
|
|
position: fixed;
|
|
width: 260px;
|
|
height: 335px;
|
|
z-index: vars.$z-rollerbox-active;
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
|
right: 1em;
|
|
bottom: 0;
|
|
flex-direction: column;
|
|
|
|
.ipt-roll {
|
|
flex-shrink: 0;
|
|
overflow-x: auto;
|
|
height: 30px;
|
|
width: 100%;
|
|
}
|
|
|
|
.out-roll {
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.head-roll {
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
box-shadow: 0 0 3px rgb(0 0 0 / 25%);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.head-roll .hdr-roll {
|
|
line-height: 24px;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.out-roll .out-roll-wrp .out-roll-item:first-child {
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.out-roll .out-roll-wrp .out-roll-item:last-child {
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.out-roll .out-roll-item {
|
|
position: relative;
|
|
margin: 1px 3px;
|
|
padding: 1px 3px;
|
|
width: calc(100% - 6px);
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.out-roll .out-roll-item--message {
|
|
display: block;
|
|
}
|
|
|
|
.out-roll-item-button-wrp {
|
|
display: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.out-roll-item:hover .out-roll-item-button-wrp {
|
|
display: flex;
|
|
right: 3px;
|
|
}
|
|
|
|
.btn-copy-roll {
|
|
padding: 0 2px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.out-roll .out-roll-item .roll-label {
|
|
font-style: italic;
|
|
}
|
|
|
|
.out-roll .out-roll-item .roll {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.out-roll .out-roll-item .roll-min {
|
|
color: vars.$rgb-roll-min;
|
|
}
|
|
|
|
.out-roll .out-roll-item .roll-max {
|
|
color: vars.$rgb-roll-max;
|
|
}
|
|
|
|
.out-roll .out-roll-id {
|
|
width: 100%;
|
|
font-size: 70%;
|
|
padding: 1px 3px;
|
|
}
|
|
}
|
|
|
|
// TODO refactor rollbox CSS to here
|
|
.rll__ {
|
|
&prompt-header {
|
|
font-size: 32px;
|
|
}
|
|
|
|
&dropped {
|
|
text-decoration: #f00 line-through;
|
|
}
|
|
|
|
&list {
|
|
margin-bottom: 0;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
&exploded {
|
|
color: #6f99b8;
|
|
}
|
|
|
|
&success {
|
|
text-decoration: vars.$rgb-roll-max--muted underline;
|
|
}
|
|
|
|
&min--muted {
|
|
color: vars.$rgb-roll-min--muted;
|
|
}
|
|
|
|
&max--muted {
|
|
color: vars.$rgb-roll-max--muted;
|
|
}
|
|
|
|
&exploded {
|
|
color: #6f99b8;
|
|
}
|
|
|
|
&min--muted {
|
|
color: vars.$rgb-roll-min--muted;
|
|
}
|
|
|
|
&max--muted {
|
|
color: vars.$rgb-roll-max--muted;
|
|
}
|
|
}
|
|
|
|
// FIXME this fixes the missing scrollbar on Firefox, but breaks auto-scrolling when rolling
|
|
// @-moz-document url-prefix() {
|
|
// .out-roll .out-roll-wrp {
|
|
// max-height: 100%;
|
|
// }
|
|
// }
|
|
|
|
/* *** */
|
|
|
|
/* stats tabs */
|
|
.wrp-stat-tab {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
/* *** */
|
|
|
|
.view-col {
|
|
position: relative;
|
|
margin: 7px 7px 12px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100% - 19px);
|
|
|
|
&--wrp-book-contents {
|
|
height: initial;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
#listcontainer.view-col {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
#contentwrapper.view-col {
|
|
overflow-x: hidden;
|
|
margin-bottom: 5px;
|
|
|
|
> *:not(.wrp-stats-table) {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.wrp-stats-table {
|
|
overflow: hidden auto;
|
|
border-top: 1px solid vars.$rgb-border-yellow--statblock;
|
|
border-bottom: 1px solid vars.$rgb-border-yellow--statblock;
|
|
transform: translateZ(0);
|
|
flex-shrink: 1;
|
|
|
|
&--book {
|
|
border-top-color: #c0c0c0;
|
|
border-bottom-color: #c0c0c0;
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
overflow-y: initial;
|
|
}
|
|
}
|
|
|
|
.filtertools,
|
|
#filtertools {
|
|
font-size: 0.8em;
|
|
|
|
select {
|
|
margin: 1px;
|
|
}
|
|
|
|
small:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#pointbuy input {
|
|
margin: 2px;
|
|
text-align: right;
|
|
width: 3em;
|
|
|
|
&[type="number"] {
|
|
appearance: textfield;
|
|
}
|
|
|
|
&[type="checkbox"] {
|
|
width: initial;
|
|
margin: initial;
|
|
}
|
|
}
|
|
|
|
.list,
|
|
.list-display-only {
|
|
transform: translateZ(0);
|
|
position: relative;
|
|
padding-left: 0;
|
|
height: 100%;
|
|
overflow: hidden auto;
|
|
clear: both;
|
|
font-size: 0.8em;
|
|
|
|
&--stats {
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
overflow-y: scroll;
|
|
margin-right: -9px;
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
max-height: 40vh;
|
|
}
|
|
|
|
&.rules {
|
|
overflow-y: auto !important;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.lst--border {
|
|
border-bottom: 1px solid vars.$rgb-border-grey--list-row;
|
|
}
|
|
|
|
.list-multi-selected {
|
|
@include vars.mix-row-glow-active;
|
|
}
|
|
|
|
.list-multi-selected .lst--border {
|
|
border-color: #6fa4d0;
|
|
}
|
|
|
|
.list-multi-selected.lst__row--sublist {
|
|
@include vars.mix-row-glow-active--alt;
|
|
|
|
.lst--border {
|
|
border-color: vars.$rgb-border-grey;
|
|
}
|
|
}
|
|
|
|
.row--blocklisted {
|
|
display: none !important;
|
|
}
|
|
|
|
.manbrew {
|
|
&__source {
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__search {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
&__filtertools {
|
|
button {
|
|
border-top: 0;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.wrp-cb-all {
|
|
border-bottom: 1px solid vars.$rgb-border-grey;
|
|
border-right: 1px solid vars.$rgb-border-grey;
|
|
line-height: 14px;
|
|
border-bottom-right-radius: 3px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&__wrp_btn_del_selected {
|
|
text-align: right;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
&__current_brew {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
&__row {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
&__col--tall {
|
|
line-height: 30px;
|
|
}
|
|
|
|
&__list {
|
|
position: absolute;
|
|
inset: 0;
|
|
height: initial;
|
|
overflow-y: initial;
|
|
width: 100%;
|
|
}
|
|
|
|
&-row__ {
|
|
&icn-btn {
|
|
top: 2px;
|
|
|
|
&--text {
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .manbrew {
|
|
&__filtertools {
|
|
.wrp-cb-all {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rnd-name {
|
|
position: relative;
|
|
font-size: 1.8em;
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
font-weight: 500;
|
|
padding-left: 0.2em !important;
|
|
|
|
div.name-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
.stats {
|
|
font-family: Convergence, Arial, sans-serif;
|
|
width: 100%;
|
|
font-size: 12.6px;
|
|
table-layout: fixed;
|
|
overflow-wrap: break-word;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 1px 0.3em;
|
|
}
|
|
|
|
.stats-name {
|
|
font-size: unset;
|
|
line-height: unset;
|
|
color: vars.$rgb-name-red;
|
|
}
|
|
|
|
/* sub-tables */
|
|
|
|
.stats table {
|
|
margin-bottom: 5px;
|
|
// Avoid outer `white-space: pre` inflating cells
|
|
white-space: initial;
|
|
}
|
|
|
|
.stats table.statsDataInset {
|
|
margin: 10px;
|
|
width: calc(100% - 20px);
|
|
border: 1px solid rgb(0 0 0 / 40%);
|
|
box-shadow: 0 0 4px 0 rgb(152 141 124);
|
|
}
|
|
|
|
.stats table caption {
|
|
margin-left: 5px;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
th.border {
|
|
height: 4px;
|
|
}
|
|
|
|
.wrp-stats-table th.border {
|
|
height: 3px;
|
|
}
|
|
|
|
th.border-thin {
|
|
height: 1px;
|
|
}
|
|
|
|
td.divider div {
|
|
background: vars.$rgb-name-red;
|
|
height: 2px;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.stats span.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stats span.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
tr.text > td {
|
|
padding-bottom: 0.7em;
|
|
}
|
|
|
|
tr.text.compact > td {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
tr.text.compact > td p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mon__ {
|
|
&btn-reset-cr,
|
|
&btn-scale-cr {
|
|
padding: 0 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
&cr_slider_wrp {
|
|
position: absolute;
|
|
top: 23px;
|
|
left: 0;
|
|
background: #fff;
|
|
border: 1px solid vars.$rgb-border-grey;
|
|
width: calc(100% - 30px);
|
|
margin: 0 10px;
|
|
padding: 5px 7px 0;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 3px 0 #000;
|
|
|
|
&--compact {
|
|
top: 41px;
|
|
}
|
|
}
|
|
|
|
§-header-inner {
|
|
display: block;
|
|
margin-top: -0.3rem;
|
|
margin-bottom: -0.3rem;
|
|
font-weight: 100;
|
|
color: vars.$rgb-name-red;
|
|
font-size: 18px;
|
|
line-height: 23px;
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
§-row-inner {
|
|
padding-top: 0.5rem !important; // FIXME temporary important; refactor .stats
|
|
|
|
> *:last-of-type {
|
|
margin-bottom: 0.5rem !important; // FIXME temporary important; refactor .stats
|
|
}
|
|
}
|
|
|
|
&stat-header-underline {
|
|
border-bottom: 1px solid vars.$rgb-name-red;
|
|
vertical-align: bottom !important;
|
|
padding-left: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .mon__ {
|
|
&cr_slider_wrp {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
}
|
|
|
|
// FIXME temporary element selectors
|
|
#crcalc {
|
|
input[type="number"],
|
|
input[type="checkbox"],
|
|
.inputwrap {
|
|
text-align: right;
|
|
width: 6em;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
|
|
input#hd {
|
|
float: none;
|
|
width: 4em;
|
|
}
|
|
|
|
span#hdval {
|
|
width: 2.1em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
input[type="number"]#hd::-webkit-inner-spin-button,
|
|
input[type="number"]#hd::-webkit-outer-spin-button {
|
|
margin: 0;
|
|
}
|
|
|
|
.explanation {
|
|
font-weight: normal;
|
|
width: 26em;
|
|
}
|
|
|
|
input#hd:focus {
|
|
border: 1px solid initial;
|
|
}
|
|
}
|
|
|
|
#msbcr {
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#msbcr th {
|
|
text-align: center;
|
|
padding: 0 0.5em;
|
|
cursor: initial !important;
|
|
}
|
|
|
|
#msbcr tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#croutput {
|
|
padding: 0.2em 0.7em;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
#instructions p {
|
|
font-size: small;
|
|
}
|
|
|
|
#expectedcr {
|
|
text-align: center;
|
|
}
|
|
|
|
img.token {
|
|
position: absolute;
|
|
z-index: vars.$z-token-image;
|
|
top: 0;
|
|
right: 0.5rem;
|
|
float: right;
|
|
width: auto;
|
|
max-width: 11rem;
|
|
height: auto;
|
|
transition:
|
|
opacity vars.$time-2-frames,
|
|
max-width vars.$time-2-frames,
|
|
right vars.$time-2-frames;
|
|
}
|
|
|
|
img.token:hover {
|
|
max-width: 100%;
|
|
right: 0;
|
|
opacity: 1 !important;
|
|
transition:
|
|
opacity vars.$time-2-frames,
|
|
max-width vars.$time-2-frames,
|
|
right vars.$time-2-frames;
|
|
}
|
|
|
|
.classes .stats {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.stats p.subtrait {
|
|
padding: 0 1em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
// region Initiative tracker
|
|
.init__ {
|
|
&wrp_conds {
|
|
display: flex;
|
|
}
|
|
|
|
&cond {
|
|
width: 7px;
|
|
margin-right: 3px;
|
|
display: grid;
|
|
grid-gap: 3px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 5px 0 #808080;
|
|
}
|
|
}
|
|
|
|
&cond_bar {
|
|
width: 7px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
// region Player initiative tracker
|
|
.initp__ {
|
|
&content {
|
|
overflow: hidden auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&wrp_active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&meta {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
&header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 3px;
|
|
font-variant: small-caps;
|
|
border-bottom: 1px solid vars.$rgb-border-grey;
|
|
}
|
|
|
|
&h_name--compact {
|
|
text-align: center;
|
|
}
|
|
|
|
&r_name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&h_hp--compact {
|
|
text-align: center;
|
|
}
|
|
|
|
&h_stat,
|
|
&r_stat {
|
|
width: 40px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
&r_hp_pill {
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
&h_score,
|
|
&r_score {
|
|
flex: none;
|
|
width: 80px;
|
|
text-align: center;
|
|
|
|
&--compact {
|
|
width: 40px;
|
|
}
|
|
}
|
|
|
|
&r_score {
|
|
line-height: 24px;
|
|
}
|
|
|
|
&r {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 2px 3px;
|
|
border-bottom: 1px solid vars.$rgb-border-grey--trans;
|
|
|
|
&:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&r:hover {
|
|
background: #00000010;
|
|
}
|
|
|
|
&r--active {
|
|
background: #cfe5ff78;
|
|
}
|
|
|
|
&r--active:hover {
|
|
background: #bfd5ef78;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .initp__ {
|
|
&header {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
&r {
|
|
border-color: vars-night.$rgb-border-grey--trans-night;
|
|
|
|
&:hover {
|
|
background: #ffffff18;
|
|
}
|
|
|
|
&--active:hover {
|
|
background: #93bae838;
|
|
}
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
/**** Search and filter bar ****/
|
|
.lst__ {
|
|
&form-top {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
|
|
> * {
|
|
min-width: 0;
|
|
}
|
|
|
|
> button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
> *:first-child {
|
|
border-bottom-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
> *:last-child {
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
> *:not(:first-child, :last-child) {
|
|
border-radius: 0;
|
|
border-right: 0;
|
|
}
|
|
}
|
|
|
|
&search {
|
|
padding-left: 23px;
|
|
}
|
|
|
|
&list {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&row {
|
|
&:hover {
|
|
background: vars.$rgb-bg--alt;
|
|
}
|
|
|
|
&--blocklisted {
|
|
display: none !important;
|
|
}
|
|
|
|
&-inner {
|
|
line-height: 14px;
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding: 0 2px 1px;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&wrp-preview {
|
|
font-size: 12.6px;
|
|
background: vars.$rgb-bg;
|
|
}
|
|
|
|
&wrp-preview-inner {
|
|
border-bottom: 1px solid vars.$rgb-border-grey--list-row;
|
|
}
|
|
|
|
&vr-preview {
|
|
top: 7px;
|
|
left: 8px;
|
|
height: calc(100% - 14px);
|
|
}
|
|
|
|
&btn-toggle-expand {
|
|
margin-bottom: -1px;
|
|
line-height: 15px;
|
|
|
|
&:hover {
|
|
background: #00000020;
|
|
}
|
|
}
|
|
|
|
&btn-collapse-all-previews {
|
|
font-size: 11.2px;
|
|
}
|
|
}
|
|
|
|
*:first-child > input.lst__search--no-border-h {
|
|
border-top-left-radius: 4px;
|
|
}
|
|
|
|
.stats-sub-header {
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stats-list-sub-header {
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.list-entry-none {
|
|
font-style: italic;
|
|
}
|
|
|
|
.filter-sublist-item-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.filter-sublist-item-text {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
input[type="checkbox"].filter-checkbox {
|
|
margin-left: auto;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
input[type="checkbox"].readonly {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lst__wrp-cells {
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding: 0 2px 1px;
|
|
text-decoration: none;
|
|
|
|
&.bk__contents_header_link {
|
|
padding: 0;
|
|
}
|
|
|
|
&.bk__contents_show_all {
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.lst__row--focusable:focus {
|
|
@include vars.mix-row-glow-active;
|
|
}
|
|
|
|
.sublist {
|
|
display: none;
|
|
position: relative;
|
|
padding: 0 0 2px;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
height: 130px;
|
|
|
|
.list {
|
|
margin-bottom: 3px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
&--visible {
|
|
display: flex;
|
|
}
|
|
|
|
&--resizable {
|
|
margin-bottom: 3px;
|
|
min-height: 75px;
|
|
max-height: 80%;
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
max-height: 40vh;
|
|
height: initial;
|
|
}
|
|
}
|
|
|
|
&__ {
|
|
&wrp-cols {
|
|
display: flex;
|
|
|
|
> *:last-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
&ele-resize {
|
|
background-color: #aaa4;
|
|
border: 1px solid vars.$rgb-border-grey--trans-muted;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
cursor: ns-resize;
|
|
user-select: none;
|
|
line-height: 1px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// region Table View
|
|
.tview__ {
|
|
&row {
|
|
> td {
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
/* Adventures */
|
|
|
|
/* ENTRY RENDERING CSS */
|
|
// TODO refactor everything
|
|
|
|
// Book mode adjustments
|
|
.stats--book-large {
|
|
--sz-font-h0: 2.5em;
|
|
--sz-font-h1: 1.9em;
|
|
--sz-font-h2: 1.6em;
|
|
|
|
// FIXME this doesn't affect e.g. lists
|
|
// Also, affects e.g. nested tables (bad!)
|
|
--h-mb-p: 15px;
|
|
--h-mb-p-inline: var(--h-mb-p);
|
|
--h-mb-quote-line: 10px;
|
|
--h-mb-li: 5px;
|
|
--w-text-indent-inline-p: 0;
|
|
|
|
border-radius: 0;
|
|
line-height: 1.7;
|
|
font-size: 1em;
|
|
|
|
.rd__spc-inline-post {
|
|
width: 100%;
|
|
height: var(--h-mb-p);
|
|
|
|
&:last-child {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.rd__list-hang-notitle {
|
|
> .rd__li {
|
|
> .rd__p-list-item {
|
|
text-indent: -1.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rd__p-cont-indent {
|
|
text-indent: 0;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
/* Book/Adventure Pages */
|
|
.book-view {
|
|
&.view-col {
|
|
flex: 5;
|
|
}
|
|
}
|
|
|
|
.linked-titles {
|
|
@extend %linked-titles-base;
|
|
|
|
.rd__h .entry-title-inner {
|
|
@extend %linked-titles-base-inner;
|
|
}
|
|
}
|
|
|
|
.bk-contents__sub_spacer--1 {
|
|
color: #808080;
|
|
display: inline-block;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.book-contents .contents {
|
|
height: initial;
|
|
position: sticky;
|
|
top: 0;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-hg}) {
|
|
#listcontainer.book-contents {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: calc((100vw - 1170px) / 2);
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.book-contents .contents {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.initial-message {
|
|
color: vars.$rgb-name-red;
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
line-height: 2.3em;
|
|
|
|
&--large {
|
|
font-size: 4vmin;
|
|
color: initial;
|
|
}
|
|
}
|
|
|
|
.book-view .initial-message {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.stats .initial-message,
|
|
.bkmv .initial-message {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.f-all-wrapper {
|
|
position: fixed;
|
|
z-index: vars.$z-book-find;
|
|
right: calc((50vw - (1170px / 2)) + 1.5em);
|
|
bottom: 10px;
|
|
left: calc(((100vw - (1170px * (4 / 6))) / 2) + 1.5em);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-lg}) {
|
|
.f-all-wrapper {
|
|
right: calc((50vw - (970px / 2)) + 1.5em);
|
|
left: calc(((100vw - (970px * (4 / 6))) / 2) + 1.5em);
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
.f-all-wrapper {
|
|
right: calc(((100vw - 750px) / 2) + 1.5em);
|
|
left: calc(((100vw - 750px) / 2) + 1.5em);
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
.f-all-wrapper {
|
|
right: calc(((100vw - 750px) / 2) + 1.5em);
|
|
left: calc(((100vw - 750px) / 2) + 1.5em);
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= #{vars.$width-screen-xs}) {
|
|
.f-all-wrapper {
|
|
right: calc(3.5em);
|
|
left: calc(3.5em);
|
|
}
|
|
}
|
|
|
|
.f-all-wrapper > input {
|
|
width: 100%;
|
|
}
|
|
|
|
.f-all-out {
|
|
@include vars.mix-shadow-1;
|
|
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
width: 100%;
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
|
padding: 0.2em 0.7em;
|
|
border-radius: 0.2em;
|
|
display: none;
|
|
}
|
|
|
|
.f-result {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.f-result > span {
|
|
display: inline-block;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: vars.$rgb-bg-highlight;
|
|
}
|
|
|
|
/* *** */
|
|
|
|
/* Day Mode */
|
|
header p.lead {
|
|
color: #d3d3d3;
|
|
}
|
|
|
|
.stats {
|
|
background: vars.$rgb-bg-orange;
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-hg}) {
|
|
#listcontainer.book-contents {
|
|
@include vars.mix-shadow-1;
|
|
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.shadow-big {
|
|
@include vars.mix-shadow-1;
|
|
}
|
|
|
|
.ve-night-mode .night__ {
|
|
&shadow-big {
|
|
@include vars.mix-shadow-1;
|
|
}
|
|
}
|
|
|
|
.stats--book {
|
|
@include vars.mix-shadow-1;
|
|
|
|
font-family: Roboto, Helvetica, sans-serif;
|
|
background: #fff;
|
|
|
|
::selection {
|
|
background: #242527;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
.bkmv {
|
|
position: fixed;
|
|
z-index: vars.$z-bookmode;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #fff;
|
|
|
|
&__ {
|
|
&spacer-name {
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
background: #c0c0c0;
|
|
font-size: 12px;
|
|
break-before: auto;
|
|
break-after: auto;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
&wrp {
|
|
column-count: 6;
|
|
column-gap: 7px;
|
|
break-inside: avoid-column;
|
|
|
|
@media screen and (width <= 2160px) {
|
|
column-count: 5;
|
|
}
|
|
|
|
@media screen and (width <= 1800px) {
|
|
column-count: 4;
|
|
}
|
|
|
|
@media screen and (width <= 1440px) {
|
|
column-count: 3;
|
|
}
|
|
|
|
@media screen and (width <= 1080px) {
|
|
column-count: 2;
|
|
}
|
|
|
|
@media screen and (width <= 720px) {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
&wrp-item {
|
|
margin: 0;
|
|
width: 100%;
|
|
display: inline-block;
|
|
border-radius: 0.2em;
|
|
border: vars.$rgb-border-grey 1px solid;
|
|
}
|
|
|
|
&no-breaks {
|
|
break-before: auto;
|
|
break-after: auto;
|
|
break-inside: avoid;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .bkmv {
|
|
&__ {
|
|
&wrp-item {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stripe-odd:nth-child(odd),
|
|
.stripe-even:nth-child(even),
|
|
.stripe-odd-table > tbody > tr:nth-child(odd),
|
|
.stripe-even-table > tbody > tr:nth-child(even) {
|
|
background: #c0c0c080; // pre-blend (50% opacity): e0 e0 e0
|
|
}
|
|
|
|
.stats .stripe-odd-table > tbody > tr:nth-child(odd),
|
|
.stats .stripe-even-table > tbody > tr:nth-child(even) {
|
|
background: #cbbfaa80; // pre-blend (50% opacity): e4 d8 c3
|
|
}
|
|
|
|
.hwin .hoverborder,
|
|
th.border {
|
|
background: vars.$rgb-border-yellow--statblock;
|
|
}
|
|
|
|
.hwin .hoverborder.hoverborder-book,
|
|
.stats--book th.border {
|
|
background: #c0c0c0;
|
|
}
|
|
|
|
.bklist__ {
|
|
$offset-vr: 6px;
|
|
|
|
&wrp-rows-inner {
|
|
margin-left: $offset-vr;
|
|
}
|
|
|
|
&row-chapter {
|
|
margin-left: vars.$spacer * 3;
|
|
}
|
|
|
|
&row-section {
|
|
margin-left: vars.$spacer * 6;
|
|
}
|
|
|
|
&vr-contents {
|
|
left: $offset-vr;
|
|
border-color: vars.$rgb-border-grey--list-row;
|
|
}
|
|
}
|
|
|
|
.bk__ {
|
|
&stats--narrow {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&contents-header {
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
margin-top: -1px;
|
|
padding: 1px 0 1px 5px;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid vars.$rgb-border-grey;
|
|
border-top: 1px solid vars.$rgb-border-grey;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&nav-head-foot-item {
|
|
min-width: 75px;
|
|
}
|
|
|
|
&to-top {
|
|
display: none;
|
|
|
|
&--scrolled {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
z-index: vars.$z-omnisearch - 1;
|
|
top: 42px;
|
|
right: 10px;
|
|
padding: 2px 0;
|
|
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&overlay-loading {
|
|
position: absolute;
|
|
inset: 4px 0;
|
|
background: #fff;
|
|
border-bottom: 4px solid #c0c0c0;
|
|
}
|
|
|
|
&wrp-btns-open-find {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 7px;
|
|
}
|
|
|
|
&head-chapter--active,
|
|
&head-section--active {
|
|
background: vars.$rgb-bg--alt;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .bk__ {
|
|
&contents-header {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
&overlay-loading {
|
|
background: vars-night.$rgb-bg--night;
|
|
border-bottom-color: vars-night.$rgb-border-grey--statblock-night;
|
|
}
|
|
}
|
|
|
|
.bks__ {
|
|
&wrp-bookshelf {
|
|
align-items: stretch;
|
|
}
|
|
|
|
&wrp-bookshelf-item,
|
|
&wrp-bookshelf-item:hover {
|
|
@include vars.mix-shadow-1;
|
|
|
|
border: 2px solid vars.$rgb-border-grey;
|
|
color: vars.$rgb-off-black;
|
|
text-decoration-color: vars.$rgb-off-black;
|
|
}
|
|
|
|
&wrp-bookshelf-item--blocklisted {
|
|
display: none !important;
|
|
}
|
|
|
|
&bookshelf-item-name {
|
|
min-height: 40px;
|
|
max-width: 220px;
|
|
font-weight: bold;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&bookshelf-image {
|
|
width: 300px;
|
|
height: 300px;
|
|
object-fit: none;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .bks__ {
|
|
&wrp-bookshelf-item,
|
|
&wrp-bookshelf-item:hover {
|
|
background: vars-night.$rgb-bg--night;
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
color: vars-night.$rgb-font--night;
|
|
text-decoration-color: vars-night.$rgb-font--night;
|
|
}
|
|
}
|
|
|
|
.f-all-out {
|
|
background: #fff;
|
|
}
|
|
|
|
.life__output {
|
|
background: #d3d3d3;
|
|
}
|
|
|
|
.f-all-out > p:nth-child(odd) {
|
|
background: #f4f4f4;
|
|
}
|
|
|
|
#msbcr tr:nth-child(even) {
|
|
background: #d3d3d3;
|
|
}
|
|
|
|
#croutput {
|
|
background: #d3d3d3;
|
|
}
|
|
|
|
.hwin .hoverborder .window-title {
|
|
color: vars.$rgb-name-red;
|
|
}
|
|
|
|
.rollbox {
|
|
background: #fff;
|
|
}
|
|
|
|
.rollbox .ipt-roll {
|
|
background: #fff;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.rollbox-min,
|
|
.rollbox .head-roll {
|
|
background: #d3d3d3;
|
|
}
|
|
|
|
.rollbox-min:hover,
|
|
.rollbox .head-roll:hover {
|
|
background: #e3e3e3;
|
|
}
|
|
|
|
.rollbox .out-roll .out-roll-item {
|
|
background: #b0b0b035;
|
|
}
|
|
|
|
.rollbox .out-roll .out-roll-item .out-roll-item-code {
|
|
font-family: "Courier New", monospace;
|
|
background: #fff;
|
|
border-radius: 3px;
|
|
padding: 0 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.life__output-wrp-border {
|
|
border: 1px solid rgb(0 0 0 / 15%);
|
|
}
|
|
|
|
.toast {
|
|
@include vars.mix-shadow-1;
|
|
|
|
z-index: vars.$z-temp-effect;
|
|
right: 0;
|
|
bottom: 200px;
|
|
left: 0;
|
|
padding: 5px 15px;
|
|
min-height: 40px;
|
|
max-width: 850px;
|
|
display: flex;
|
|
width: 90vw;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
transition: bottom vars.$time-5-frames;
|
|
|
|
&--animate {
|
|
bottom: 0;
|
|
margin-bottom: (vars.$spacer * 0.5);
|
|
transition: bottom vars.$time-5-frames;
|
|
}
|
|
|
|
&--deleted {
|
|
z-index: vars.$z-temp-effect - 1;
|
|
}
|
|
|
|
&__container {
|
|
position: fixed;
|
|
z-index: vars.$z-temp-effect;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: 200px;
|
|
}
|
|
|
|
&__wrp-control {
|
|
margin: -5px -15px -5px 0;
|
|
flex: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
}
|
|
|
|
&__btn-close {
|
|
margin: 0;
|
|
height: 100%;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-top: 0;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
border-left: 1px solid #80808040;
|
|
background: transparent;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: #80808020;
|
|
}
|
|
}
|
|
|
|
&--type-info {
|
|
color: vars.$rgb-alert-text-info;
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
}
|
|
|
|
&--type-danger {
|
|
color: vars.$rgb-alert-text-danger;
|
|
background-color: #f2dede;
|
|
border-color: #ebccd1;
|
|
}
|
|
|
|
&--type-warning {
|
|
color: vars.$rgb-alert-text-warning;
|
|
background-color: #fcf8e3;
|
|
border-color: #faebcc;
|
|
}
|
|
|
|
&--type-success {
|
|
color: vars.$rgb-alert-text-success;
|
|
background-color: #dff0d8;
|
|
border-color: #d6e9c6;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode .toast {
|
|
&--type-info {
|
|
color: #fff;
|
|
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
|
|
border-color: vars-night.$rgb-alert-info-border-blue--night;
|
|
}
|
|
|
|
&--type-danger {
|
|
color: #fff;
|
|
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
|
|
border-color: vars-night.$rgb-alert-danger-border-red--night;
|
|
}
|
|
|
|
&--type-warning {
|
|
color: #fff;
|
|
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
|
|
border-color: vars-night.$rgb-alert-warning-border-orange--night;
|
|
}
|
|
|
|
&--type-success {
|
|
color: #fff;
|
|
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
|
|
border-color: vars-night.$rgb-alert-success-border-green--night;
|
|
}
|
|
}
|
|
|
|
// region Cards
|
|
.cards {
|
|
&__ {
|
|
&btn-choose-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
}
|
|
|
|
&disp-btn-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-repeat: no-repeat;
|
|
background-size: 24px 24px;
|
|
filter: invert(1);
|
|
}
|
|
|
|
&disp-typeahead-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-repeat: no-repeat;
|
|
background-size: 24px 24px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&-cfg__ {
|
|
&ipt-color {
|
|
width: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-night-mode {
|
|
.cards__ {
|
|
&disp-btn-icon {
|
|
filter: initial;
|
|
}
|
|
|
|
&disp-typeahead-img {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
// region Recipes
|
|
.recipes {
|
|
&__ {
|
|
&wrp-fluff {
|
|
.rd__wrp-image {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.rd__image {
|
|
max-height: 50vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
.form-control--error,
|
|
.form-control--error[readonly],
|
|
.form-control--error[disabled] {
|
|
background-color: #ff000018 !important;
|
|
border: 1px solid #843534 !important;
|
|
}
|
|
|
|
.form-control--error:focus,
|
|
.form-control--error[readonly]:focus,
|
|
.form-control--error[disabled]:focus {
|
|
border-color: #843534 !important;
|
|
box-shadow:
|
|
inset 0 1px 1px rgb(0 0 0 / 7.5%),
|
|
0 0 8px #ce8483 !important;
|
|
}
|
|
|
|
.form-control--warning,
|
|
.form-control--warning[readonly],
|
|
.form-control--warning[disabled] {
|
|
background-color: #ffaa0018;
|
|
border: 1px solid #846334;
|
|
}
|
|
|
|
.form-control--warning:focus,
|
|
.form-control--warning[readonly]:focus,
|
|
.form-control--warning[disabled]:focus {
|
|
border-color: #846334;
|
|
box-shadow:
|
|
inset 0 1px 1px rgb(0 0 0 / 7.5%),
|
|
0 0 8px #ceaa83;
|
|
}
|
|
|
|
/* Day Mode End */
|
|
|
|
/* Night Mode */
|
|
.ve-night-mode {
|
|
body {
|
|
color: vars-night.$rgb-font--night;
|
|
background: vars-night.$rgb-bg--night
|
|
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGBAMAAACDAP+3AAAAGFBMVEUfHx8eHh4dHR0bGxshISEiIiIlJSUjIyM9IpsJAAAFjUlEQVR4AT3UuZLcOBaF4QuI2XJxboIhF/eQFe1WovoBAAqccpkaZpc5+4yrXa8/RGpx/lrIXPjFCYjTp9z8REqF4VYNWB3Av3zQJ6b6xBwlKB/9kRkCjXVwGH3ziK5UcjFHVkmgY6osiBsGDFfseqq2ZbTz7E00qBDpzOxnD7ToABeros1vM6MX0rBQaG1ith1A/HJkvkHxsPGJ82dP8vVCyWmbyPTaAfGzg40bgIdrv2f3pBVPycUcufx+BSUUWDuCZi6zBqdM50ElKYPODqtLDjc31rBb9CZ59lbN/JScuMxHLUBcGiy6QRH9zpwgZGhRj8qSydPVgNNVgbWqYX3HbM9K2rqTnKVmsmwKWzc1ffEd20+Zq3Ji65kl6TSjALNvzmJt4Pi2f1etytGJmy5erLAgbNY4bjykC3YCLIS3nSZMKgwRsBarWgjdeVzIEDzpTkoOUArTF4WFXYHwxY585sT0nmTYMxmXfs8fzwswfnam8TMU49bvqSRnyRPnqlno4tVQQiH2A9Za8tNTfXQ0lxbSxUaZna0uLlj9Q0XzD96CpsOZUftolINKBWJpAOoAJC0T6QqZnOtfvcfJFcDrD4Cuy5Hng316XrqzJ204HynyHwWed6i+XGF40Uw2T7Lc71HyssngEOrgONfBY7wvW0UZdVAma5xmSNjRp3xkvKJkW6aSg7PK4K0+mbKqYB0WYBgWwxCXiS74zBCVlEFpYQDEwjcA1qccb5yO6ZL8ozt/h3wHSCdWzLuqxU2ZZ9ev9MvRMbMvV9BQgN0qrFjlkzPQanI9nuaGCokVK2LV1Y2egyY1aFQGxjM9I7RBBAgyGEJtpKHP0lUySSeWCpyKHMT2pmM/vyP55u2Rw5lcSeabAfgiG5TPDX3uP3QvcoSipJXQByUCjS4C8VXqxEEZOJxzmJoyogFNJBRsCJs2XmoWWrWFqTsnbwtSn43gNFTTob9/SEpaPJNhUBKDGoZGCMINxvBv8vuKbb//lg/sK0wfPgBica/QsSk5F3KK4Ui6Yw+uv4+DWEOFbhdPOnbY5PLFpzrZMhakeqomY0Vz0TO+elQGTWdCk1IYFAOaoZg0IJQhT+YreXF+yia+O1cgtGufjXxQw28f85RPXfd15zv13ABoD15kB7FKJ/7pbHKP6+9TgNgkVj68NeV8Tp24f7OOndCgJzR3RNJBPNFReCmstMVqvjjzBoeK4GOFoBN32CPxu+4TwwBDa4DJTe/OU9c9ku7EGyfOVxh+fw9g/AATxPqKTEXJKEdCIBkB4iBUlO6MjUrWi6M5Kz31YAqFsYaCeB0KJC5d1+foo3LQWSfRaDrwdAQrMEC27yDZXJf7TlOJ2Bczr1di3OWvZB6XrvvqPuWJPDk9dAHgm7LvuZJTEdKqO3J3XgostArEnvkqgUznx3PX7cSzz1FXZyvakTA4XVVMbCPFPK1cFj66S0WoqQI1XG2uoU7CMPquO2VaUDJFQMdVgXKD2bpz6ufzzxXbxszHQ9fGO/F7A998yBQG6cShE+P+Pk7t1FwfF1QHN1Eui1VapRxCdj8tCtI1bog1Fo011Sx9u3o6c9bufI6wAT26Av9xJ+WWpTKbbBPp3K/1LbC4Vuhv396RCbJw4untjxVPndj+dIB9dVD8z2dylZ+6vMeJwbYChHJkvHV2J3fdHsJPASeHhrXq6QheXu1nBhUr5u6ryT0I13BFKD01ViZ/n3oaziRG7c6Ayg7g1LPeztNdT36ueMqcN4XGv3finjfv+7I/kMJ4d046MUanOA1QtMH1kLlfFasm99NiutSw63yNDeH4zeL1Uu8XKHNfcThPSSNwchGMbgUETScwkCcK77pH2jsgrAssvVyB8FLJ7GrmwyD8eVqsHoY/FwIv9T7lPu9+Yf8/9+w4nS1ma78AAAAASUVORK5CYII=")
|
|
repeat scroll left top;
|
|
}
|
|
|
|
.bg-solid {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.page__ {
|
|
&header {
|
|
color: vars-night.$rgb-font--night;
|
|
background: vars.$rgb-off-black;
|
|
}
|
|
|
|
&title--home {
|
|
span {
|
|
color: #909090;
|
|
}
|
|
|
|
&::after {
|
|
color: #909090;
|
|
}
|
|
}
|
|
|
|
&title {
|
|
color: #d0d0d0;
|
|
}
|
|
}
|
|
|
|
.page__nav-inner > li.active > a,
|
|
.page__nav-inner > li.active > a:focus,
|
|
.page__nav-inner > li.active > a:hover {
|
|
background-color: vars.$rgb-off-black;
|
|
border-top: 0;
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.text-muted {
|
|
color: color.adjust(vars-night.$rgb-font--night, $lightness: - 15%) !important;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
pre {
|
|
color: vars-night.$rgb-font--night;
|
|
background: vars-night.$rgb-bg--night;
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
hr {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
#legal-notice {
|
|
background: vars-night.$rgb-bg--night;
|
|
color: #999;
|
|
}
|
|
|
|
a,
|
|
.roller {
|
|
color: vars-night.$rgb-link-blue--night;
|
|
}
|
|
|
|
.hwin__top-border-icon {
|
|
color: vars-night.$rgb-font--night;
|
|
|
|
&:hover {
|
|
color: color.adjust(vars-night.$rgb-font--night, $lightness: vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
.text-muted {
|
|
a,
|
|
.roller {
|
|
color: vars-night.$rgb-link-blue--muted-night;
|
|
}
|
|
}
|
|
|
|
.btn:hover {
|
|
box-shadow: 0 0 1px 1px #888;
|
|
}
|
|
|
|
.btn[disabled]:hover {
|
|
box-shadow: initial;
|
|
}
|
|
|
|
.btn-default,
|
|
.btn-default:hover,
|
|
.btn-default:focus,
|
|
.btn-default:active {
|
|
background-color: vars-night.$rgb-form-control-bg--night;
|
|
color: vars-night.$rgb-font--night;
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-primary:hover,
|
|
.btn-primary:focus,
|
|
.btn-primary:active {
|
|
background-color: vars-night.$rgb-btn-primary-blue--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
.btn-danger,
|
|
.btn-danger:hover,
|
|
.btn-danger:focus,
|
|
.btn-danger:active {
|
|
background-color: vars-night.$rgb-btn-danger-red--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
box-shadow: 0 0 1px 1px #d43f3a;
|
|
}
|
|
|
|
.btn-warning,
|
|
.btn-warning:hover,
|
|
.btn-warning:focus,
|
|
.btn-warning:active {
|
|
background-color: vars-night.$rgb-btn-warning-orange--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
.btn-info,
|
|
.btn-info:hover,
|
|
.btn-info:focus,
|
|
.btn-info:active {
|
|
background-color: vars-night.$rgb-btn-info-blue--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
.btn-success,
|
|
.btn-success:hover,
|
|
.btn-success:focus,
|
|
.btn-success:active {
|
|
background-color: vars-night.$rgb-btn-success-green--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
.btn-default.active {
|
|
background-color: #888;
|
|
box-shadow: inset 0 3px 7px #111e;
|
|
color: #222;
|
|
}
|
|
|
|
.btn-primary.active,
|
|
.btn-danger.active,
|
|
.btn-warning.active,
|
|
.btn-info.active,
|
|
.btn-success.active {
|
|
box-shadow: inset 0 3px 7px #111e;
|
|
}
|
|
|
|
.btn-nowrap {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
dialog.dialog-modal,
|
|
.ve-dropdown-menu {
|
|
background: vars-night.$rgb-bg--night;
|
|
color: vars-night.$rgb-font--night;
|
|
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
|
|
}
|
|
|
|
.ve-dropdown-menu > li {
|
|
> a,
|
|
> span {
|
|
color: vars-night.$rgb-font--night;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background-color: vars-night.$rgb-bg--alt-night;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.ctx-danger {
|
|
> a,
|
|
> span {
|
|
color: #fff;
|
|
background-color: vars-night.$rgb-btn-danger-bg-red--night;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: #fff;
|
|
background-color: vars.$rgb-btn-danger-border-red;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
> a,
|
|
> span {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
> a,
|
|
> span {
|
|
color: vars.$rgb-ctx-item-text-disabled;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: vars.$rgb-ctx-item-text-disabled;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-dropdown-menu .divider {
|
|
background-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
select,
|
|
input {
|
|
background-color: vars-night.$rgb-bg--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
|
|
select option {
|
|
color: vars-night.$rgb-font--night;
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.list .row {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
/* Bootstrap overrides */
|
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
|
background-color: #444;
|
|
}
|
|
|
|
.alert-info {
|
|
color: #fff;
|
|
background-color: color.adjust(vars-night.$rgb-alert-info-blue--night, $alpha: - 0.5);
|
|
border-color: vars-night.$rgb-alert-info-border-blue--night;
|
|
|
|
.alert-link {
|
|
color: vars-night.$rgb-alert-info-border-blue--night;
|
|
}
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #fff;
|
|
background-color: color.adjust(vars-night.$rgb-alert-danger-red--night, $alpha: - 0.5);
|
|
border-color: vars-night.$rgb-alert-danger-border-red--night;
|
|
|
|
.alert-link {
|
|
color: vars-night.$rgb-alert-danger-border-red--night;
|
|
}
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #fff;
|
|
background-color: color.adjust(vars-night.$rgb-alert-warning-orange--night, $alpha: - 0.5);
|
|
border-color: vars-night.$rgb-alert-warning-border-orange--night;
|
|
|
|
.alert-link {
|
|
color: vars-night.$rgb-alert-warning-border-orange--night;
|
|
}
|
|
}
|
|
|
|
.alert-success {
|
|
color: #fff;
|
|
background-color: color.adjust(vars-night.$rgb-alert-success-green--night, $alpha: - 0.5);
|
|
border-color: vars-night.$rgb-alert-success-border-green--night;
|
|
|
|
.alert-link {
|
|
color: vars-night.$rgb-alert-success-border-green--night;
|
|
}
|
|
}
|
|
|
|
.input-group-addon,
|
|
.form-control {
|
|
background: vars-night.$rgb-form-control-bg--night;
|
|
color: vars-night.$rgb-font--night;
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
|
|
.form-control[disabled] {
|
|
background: #0e0e0e88;
|
|
}
|
|
|
|
.form-control--error,
|
|
.form-control--error[readonly],
|
|
.form-control--error[disabled] {
|
|
background-color: #3e0000 !important;
|
|
border: 1px solid #843534 !important;
|
|
}
|
|
|
|
.form-control--error:focus,
|
|
.form-control--error[readonly]:focus,
|
|
.form-control--error[disabled]:focus {
|
|
border-color: #843534 !important;
|
|
box-shadow:
|
|
inset 0 1px 1px rgb(0 0 0 / 7.5%),
|
|
0 0 8px #ce8483 !important;
|
|
}
|
|
|
|
.form-control--warning,
|
|
.form-control--warning[readonly],
|
|
.form-control--warning[disabled] {
|
|
background-color: #483700;
|
|
border-color: #846334;
|
|
}
|
|
|
|
.form-control--warning:focus,
|
|
.form-control--warning[readonly]:focus,
|
|
.form-control--warning[disabled]:focus {
|
|
border-color: #846334;
|
|
box-shadow:
|
|
inset 0 1px 1px rgb(0 0 0 / 7.5%),
|
|
0 0 8px #ceaa83;
|
|
}
|
|
|
|
/* *** */
|
|
.omni__ {
|
|
&wrp-input {
|
|
&--scrolled {
|
|
.omni__input {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
background-color: vars-night.$rgb-bg--night;
|
|
color: transparent;
|
|
|
|
&:focus,
|
|
&:focus-within,
|
|
&:active,
|
|
&:hover {
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
}
|
|
|
|
.omni__submit {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
}
|
|
}
|
|
|
|
&input {
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: #66afe9;
|
|
}
|
|
}
|
|
|
|
&submit {
|
|
border-top-color: vars-night.$rgb-border-grey--night;
|
|
|
|
@media screen and (width > #{vars.$width-screen-md}) {
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
&.btn-default:active:focus,
|
|
&.btn-default:active:hover,
|
|
&.btn-default {
|
|
background-color: vars-night.$rgb-bg--night;
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pointbuy {
|
|
input {
|
|
&[type="number"] {
|
|
border: 1px solid vars-night.$rgb-border-grey--night;
|
|
outline-offset: 0;
|
|
outline: none;
|
|
}
|
|
|
|
&.form-control--error[type="number"] {
|
|
border: 1px solid #f00;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stats {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.lst__ {
|
|
&row {
|
|
background: vars-night.$rgb-bg--night;
|
|
|
|
&:hover {
|
|
background: vars.$rgb-off-black;
|
|
}
|
|
|
|
&-inner {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&wrp-preview {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
&wrp-preview-inner {
|
|
border-color: vars-night.$rgb-border-grey--list-row-night;
|
|
}
|
|
|
|
&btn-toggle-expand {
|
|
&:hover {
|
|
background: #ffffff30;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (width > #{vars.$width-screen-hg}) {
|
|
#listcontainer.book-contents {
|
|
background: vars-night.$rgb-bg--night;
|
|
border-right: 1px solid #404040;
|
|
}
|
|
}
|
|
|
|
.bk__ {
|
|
&head-chapter--active,
|
|
&head-section--active {
|
|
background: vars-night.$rgb-bg--alt-night;
|
|
}
|
|
}
|
|
|
|
.bklist__ {
|
|
&wrp-rows-inner {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
&vr-contents {
|
|
border-color: vars-night.$rgb-border-grey--list-row-night;
|
|
}
|
|
}
|
|
|
|
.hwin .hoverborder,
|
|
th.border,
|
|
.stats--book th.border {
|
|
background: vars-night.$rgb-border-grey--statblock-night;
|
|
}
|
|
|
|
.hwin__wrp-table {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.wrp-stats-table {
|
|
border-top: 1px solid vars-night.$rgb-border-grey--statblock-night;
|
|
border-bottom: 1px solid vars-night.$rgb-border-grey--statblock-night;
|
|
}
|
|
|
|
.stats--book ::selection {
|
|
color: #242527;
|
|
background: #fff;
|
|
}
|
|
|
|
tr.text td {
|
|
color: vars-night.$rgb-font--night !important;
|
|
}
|
|
|
|
tr.text td {
|
|
color: vars-night.$rgb-font--night !important;
|
|
}
|
|
|
|
.mon__ {
|
|
&btn-token-cycle {
|
|
color: #ddd;
|
|
background: rgb(255 255 255 / 15%);
|
|
|
|
&:hover {
|
|
color: vars-night.$rgb-font--night;
|
|
}
|
|
}
|
|
|
|
&token-footer {
|
|
color: #ddd;
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
}
|
|
|
|
.life__output {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.f-all-wrapper > input,
|
|
.f-all-out,
|
|
.omni__output {
|
|
background: #303030;
|
|
}
|
|
|
|
.f-all-out > p:nth-child(odd) {
|
|
background: #202020;
|
|
}
|
|
|
|
.omni__paginate-ctrl:hover {
|
|
color: #999;
|
|
}
|
|
|
|
#msbcr tr:nth-child(even) {
|
|
background: rgb(0 0 0 / 31%);
|
|
}
|
|
|
|
#croutput {
|
|
background: rgb(0 0 0 / 31%);
|
|
}
|
|
|
|
.stats-name {
|
|
color: vars-night.$rgb-name-red--night;
|
|
}
|
|
|
|
.stats .divider div {
|
|
background-color: vars-night.$rgb-name-red--night;
|
|
}
|
|
|
|
.stripe-odd-table > tbody > tr:nth-child(odd),
|
|
.stripe-even-table > tbody > tr:nth-child(even) {
|
|
background-color: vars-night.$rgb-stripe-grey--night;
|
|
}
|
|
|
|
.mon__stat-header-underline {
|
|
border-bottom-color: vars-night.$rgb-name-red--night;
|
|
}
|
|
|
|
.mon__sect-header-inner {
|
|
color: vars-night.$rgb-name-red--night;
|
|
}
|
|
|
|
.bkmv {
|
|
background: #272727;
|
|
}
|
|
|
|
.bkmv__spacer-name {
|
|
background-color: vars-night.$rgb-border-grey--statblock-night;
|
|
}
|
|
|
|
.lst--border {
|
|
border-color: vars-night.$rgb-border-grey--list-row-night;
|
|
}
|
|
|
|
.list-multi-selected .lst--border {
|
|
border-color: #416482;
|
|
}
|
|
|
|
.list-multi-selected.lst__row--sublist {
|
|
.lst--border {
|
|
border-color: vars-night.$rgb-border-grey--night;
|
|
}
|
|
}
|
|
|
|
tr.trait td {
|
|
color: vars-night.$rgb-font--night !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #475b6b;
|
|
}
|
|
|
|
/**** Search and filter bar ****/
|
|
.mon__cr_slider_wrp {
|
|
background: vars-night.$rgb-bg--night;
|
|
color: #bbb;
|
|
}
|
|
|
|
.rollbox {
|
|
background: #272727;
|
|
}
|
|
|
|
.rollbox .ipt-roll {
|
|
background: #272727;
|
|
}
|
|
|
|
.rollbox-min,
|
|
.rollbox .head-roll {
|
|
background: #101010;
|
|
}
|
|
|
|
.rollbox-min:hover,
|
|
.rollbox .head-roll:hover {
|
|
background: #161616;
|
|
}
|
|
|
|
.rollbox .out-roll .out-roll-item {
|
|
background: rgb(80 80 80 / 40%);
|
|
}
|
|
|
|
.rollbox .out-roll .out-roll-item .out-roll-item-code {
|
|
background: #555;
|
|
}
|
|
|
|
.life__output-wrp-border {
|
|
border: 1px solid rgb(255 255 255 / 15%);
|
|
}
|
|
|
|
.initial-message {
|
|
color: vars-night.$rgb-name-red--night;
|
|
}
|
|
|
|
.panel-content-textarea {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.content-tab-bar {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.highlight {
|
|
color: vars-night.$rgb-bg--night;
|
|
background-color: vars-night.$rgb-bg-highlight--night;
|
|
}
|
|
|
|
/* *** */
|
|
|
|
/* side menu */
|
|
.sidemenu__row__divider {
|
|
background: #9998;
|
|
}
|
|
|
|
.sidemenu {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
|
|
.sidemenu__toggle {
|
|
background: #444;
|
|
}
|
|
|
|
.sidemenu__burger {
|
|
background: vars-night.$rgb-bg--night;
|
|
}
|
|
/* *** */
|
|
|
|
/* player init tracker */
|
|
.initp__r--active {
|
|
background: #8dc1ff20;
|
|
}
|
|
/* *** */
|
|
}
|
|
|
|
.ve-night-mode--alt {
|
|
body {
|
|
background: #1c1c1c;
|
|
}
|
|
}
|
|
/* Night Mode End */
|
|
|
|
/* region Cancer */
|
|
.cancer__ {
|
|
&wrp-leaderboard {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
|
|
&-inner {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&disp-cancer {
|
|
width: 100%;
|
|
justify-content: center;
|
|
font-size: 9px;
|
|
padding: 2px 0;
|
|
opacity: 0.6;
|
|
display: none;
|
|
}
|
|
|
|
&wrp-sidebar-rhs {
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 160px;
|
|
right: calc((50vw - (1170px / 2)) - 300px);
|
|
width: 300px;
|
|
height: 100%;
|
|
|
|
> * {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&--single {
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
&--scrolling-page {
|
|
position: absolute;
|
|
top: 150px;
|
|
}
|
|
|
|
@media screen and (width <= 1800px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&sidebar-rhs-inner {
|
|
position: sticky;
|
|
|
|
&--top {
|
|
top: 10px;
|
|
}
|
|
|
|
&--bottom {
|
|
top: 620px;
|
|
}
|
|
}
|
|
|
|
&footer-pad {
|
|
height: 100px;
|
|
}
|
|
|
|
&wrp-mobile-1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.cancer__sidebar-rhs-inner--scrolling-page .cancer__sidebar-rhs-inner {
|
|
&--top {
|
|
top: 20px;
|
|
}
|
|
|
|
&--bottom {
|
|
top: 630px;
|
|
}
|
|
}
|
|
|
|
.ve-night-mode {
|
|
.cancer__ {
|
|
&wrp-leaderboard {
|
|
background: vars.$rgb-off-black;
|
|
}
|
|
}
|
|
}
|
|
/* endregion */
|
|
|
|
// "Update your Browser" overlay
|
|
.edge__ {
|
|
&body {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
&overlay {
|
|
background: #8b0000;
|
|
position: fixed;
|
|
z-index: 99999;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
color: #fff;
|
|
font-family: monospace;
|
|
}
|
|
|
|
&title {
|
|
font-size: 72px;
|
|
}
|
|
|
|
&btn-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&link {
|
|
color: #fff !important;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.TEST {
|
|
&_LEADER {
|
|
background: #f0f;
|
|
user-select: none;
|
|
color: #fff;
|
|
width: 728px;
|
|
height: 90px;
|
|
}
|
|
|
|
&_RHS_TOP {
|
|
background: #f0f;
|
|
user-select: none;
|
|
color: #fff;
|
|
width: 300px;
|
|
height: 600px;
|
|
}
|
|
|
|
&_RHS_BOTTOM {
|
|
background: #0f0;
|
|
user-select: none;
|
|
color: #fff;
|
|
width: 300px;
|
|
height: 250px;
|
|
}
|
|
}
|
|
/* Cancer end */
|
|
|
|
/****************************************
|
|
* Print styles
|
|
***************************************/
|
|
|
|
@include vars.mix-is-print {
|
|
@page {
|
|
margin: 10mm 15mm;
|
|
}
|
|
|
|
// region general
|
|
body {
|
|
color: #000 !important;
|
|
overflow: visible !important;
|
|
background: none !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
header,
|
|
nav {
|
|
display: none !important;
|
|
}
|
|
|
|
strong,
|
|
.bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: none !important; // Remove auto-expanded link URLs
|
|
}
|
|
|
|
.help,
|
|
.help--hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.btn-reroll,
|
|
.rollbox-min,
|
|
.rollbox,
|
|
.spacer-name {
|
|
display: none !important;
|
|
}
|
|
|
|
a,
|
|
.roller {
|
|
color: #000 !important;
|
|
}
|
|
// endregion
|
|
|
|
// region stats
|
|
.stats .stats-source,
|
|
.stats-source-abbreviation,
|
|
.stats th {
|
|
color: #000 !important;
|
|
}
|
|
|
|
th.border,
|
|
.wrp-stats-table th.border {
|
|
background: #000 !important;
|
|
height: 1px !important;
|
|
}
|
|
|
|
td.divider div {
|
|
height: 1px !important;
|
|
background: #000 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.stats td,
|
|
.stats th {
|
|
padding: 1px 2px !important;
|
|
}
|
|
|
|
.stats--book-large {
|
|
.rd__b--3,
|
|
table,
|
|
p {
|
|
margin: 0 0 3px !important;
|
|
}
|
|
}
|
|
|
|
.stats--book {
|
|
box-shadow: none !important;
|
|
}
|
|
// endregion
|
|
|
|
// region list pages
|
|
#listcontainer,
|
|
#stat-tabs,
|
|
#float-token,
|
|
.btn-name-pronounce,
|
|
.btn-stats-name {
|
|
display: none !important;
|
|
}
|
|
|
|
.wrp-stats-table {
|
|
border-top: 0 !important;
|
|
border-bottom: 0 !important;
|
|
}
|
|
// endregion
|
|
|
|
// region classes.html
|
|
#sticky-nav {
|
|
display: none !important;
|
|
}
|
|
|
|
#classtable table tr:nth-child(odd) td {
|
|
background: #d3d3d3 !important;
|
|
}
|
|
// endregion
|
|
|
|
// region bestiary.html
|
|
.mon__name--token .stats-source {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.mon__stat-header-underline {
|
|
border-bottom: 1px solid #000 !important;
|
|
color: #000 !important;
|
|
}
|
|
// endregion
|
|
|
|
// region render
|
|
.rd__b-inset {
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
border-color: #000 !important;
|
|
}
|
|
|
|
.rd__b-special,
|
|
.rd__li {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
// endregion
|
|
|
|
.bkmv-active > *:not(.bkmv) {
|
|
display: none !important;
|
|
}
|
|
|
|
.bkmv-active .bkmv {
|
|
position: relative;
|
|
top: unset;
|
|
right: unset;
|
|
bottom: unset;
|
|
left: unset;
|
|
width: calc(100vw - 20px);
|
|
|
|
&__ {
|
|
&no-breaks {
|
|
break-before: unset !important;
|
|
break-after: unset !important;
|
|
break-inside: unset !important;
|
|
}
|
|
|
|
&wrp--columns-1 {
|
|
column-count: 1;
|
|
}
|
|
|
|
&wrp--columns-2 {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
th.border {
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.stats--bkmv {
|
|
break-before: auto !important;
|
|
break-after: auto !important;
|
|
break-inside: avoid !important;
|
|
|
|
tr {
|
|
break-inside: auto !important;
|
|
}
|
|
}
|
|
|
|
.toast {
|
|
display: none !important;
|
|
}
|
|
|
|
.cancer__anchor {
|
|
display: none !important;
|
|
}
|
|
}
|