Cameron/5etools-mirror-2.github.io
1
0
Fork 0
mirror of https://github.com/Kornstalx/5etools-mirror-2.github.io.git synced 2025-10-28 20:45:35 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

v1.202.0

Browse Source
This commit is contained in:
TheGiddyLimit
2024-03-24 23:47:02 +00:00
parent 84065a027d
commit 12f34a38f8
153 changed files with 90818 additions and 1900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
scss/bestiary.scss
View File

@@ -1,5 +1,111 @@
@use "includes/vars";
.mon__ {
&wrp-size-type-align--token,
&wrp-avoid-token {
max-width: calc(100% - 11rem);
}
&wrp-token {
display: block;
position: absolute;
z-index: vars.$z-token-image;
top: 0;
right: 0.5rem;
width: auto;
max-width: 11rem;
height: auto;
transition:
opacity vars.$time-2-frames,
max-width vars.$time-2-frames,
right vars.$time-2-frames;
&: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;
.mon__btn-token-cycle {
opacity: 1;
transition: opacity vars.$time-2-frames;
}
.mon__wrp-token-footer {
opacity: 1;
transition: opacity vars.$time-2-frames;
}
}
}
&token {
width: 100%;
height: 100%;
}
&btn-token-cycle {
position: absolute;
top: 50%;
bottom: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: vars.$rgb-shadow-grey--dark;
cursor: pointer;
color: #fff;
border: 1px solid vars.$rgb-border-grey--trans;
opacity: 0;
transition: opacity vars.$time-2-frames;
&--left {
left: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid vars.$rgb-border-grey--trans-muted;
}
&--right {
right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 1px solid vars.$rgb-border-grey--trans-muted;
}
&:hover {
color: #ddd;
}
}
&wrp-token-footer {
display: flex;
position: absolute;
height: 22px;
right: 5px;
bottom: 0;
left: 5px;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity vars.$time-2-frames;
}
&token-footer {
background: vars.$rgb-shadow-grey--dark;
color: #fff;
font-family: "Times New Roman", serif;
font-variant: small-caps;
font-size: 16px;
border-radius: 5px;
padding: 1px 5px;
border: 1px solid vars.$rgb-border-grey--trans;
}
}
// region Token
img.token {
font-size: 1.6em;

7647
scss/bootstrap.scss vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
scss/classes.scss
View File

@@ -600,7 +600,7 @@
&wrp {
align-items: baseline;
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
flex-direction: column !important;
}
}

2
scss/converter.scss
View File

@@ -49,7 +49,7 @@
}
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.view-col-wrapper {
height: 40vh;
}

2
scss/dmscreen.scss
View File

@@ -497,7 +497,7 @@ iframe {
border-radius: 0;
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.viewport-wrapper {
bottom: 0;
height: 100vh;

8
scss/includes/bootstrap-custom.scss vendored
View File

@@ -35,7 +35,7 @@
.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 (width <= 780px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
cursor: default !important;
text-decoration: none !important;
}
@@ -172,13 +172,13 @@ body::-webkit-scrollbar {
> a {
padding: 5px 14px 6px;
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
margin-top: 2px;
margin-bottom: 2px;
}
@@ -190,7 +190,7 @@ body::-webkit-scrollbar {
background-color: #006bc4;
border-top: 0;
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid #999;

2
scss/includes/filter-night.scss
View File

@@ -67,7 +67,7 @@
&dropdown-divider {
border-color: vars.$rgb-border-grey--night;
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
box-shadow: inset 0 0 2px 2px vars.$rgb-off-black;
background: vars.$rgb-border-grey--night;
}

12
scss/includes/filter.scss
View File

@@ -2,7 +2,7 @@
@use "vars";
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
.ve-dropdown-menu-filter {
max-height: 525px;
}
@@ -35,7 +35,7 @@ $flt-ignore--hover: #e6e6e6;
font-size: 15px;
align-items: center;
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
flex-direction: column;
&--multi {
@@ -45,13 +45,13 @@ $flt-ignore--hover: #e6e6e6;
}
&h-text {
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
align-self: flex-start;
}
}
&h-wrp-btns-outer {
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
width: 100%;
flex-direction: column;
align-items: initial !important;
@@ -64,7 +64,7 @@ $flt-ignore--hover: #e6e6e6;
}
&h-wrp-state-btns-outer {
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
flex-direction: column;
> * {
@@ -236,7 +236,7 @@ $flt-ignore--hover: #e6e6e6;
border-bottom: vars.$rgb-border-grey 1px dotted;
width: 100%;
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
box-shadow: inset 0 0 2px 2px vars.$rgb-border-grey--muted;
height: 7px;
flex-shrink: 0;

2
scss/includes/hover.scss
View File

@@ -48,7 +48,7 @@
max-height: initial;
}
@media (width <= 1023px) {
@media screen and (width <= #{vars.$width-screen-md}) {
max-width: 95vw;
}

4
scss/includes/nav.scss
View File

@@ -11,7 +11,7 @@
}
}
@media (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
.nav > li > a {
border: 1px solid vars.$rgb-border-grey;
}
@@ -58,7 +58,7 @@
}
}
@media (max-width: vars.$width-screen-lg) {
@media screen and (width <= #{vars.$width-screen-lg}) {
.nav .caret--right {
transform: none;
}

30
scss/includes/source-night.scss
View File

@@ -1,26 +1,28 @@
@use "vars";
@mixin mix-source-color ($rgb) {
color: $rgb !important;
border-color: $rgb !important;
text-decoration-color: $rgb !important;
}
.night-mode .source {
$rgb-source-PHB: vars.$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;
}
&__ {
&PHB {
@include mix-source-color($rgb-source-PHB);
}
&SADS {
color: $rgb-source-SADS !important;
border-color: $rgb-source-SADS !important;
text-decoration-color: $rgb-source-SADS !important;
}
&SADS {
@include mix-source-color($rgb-source-SADS);
}
&PSA {
color: $rgb-source-PSA !important;
border-color: $rgb-source-PSA !important;
text-decoration-color: $rgb-source-PSA !important;
&PSA {
@include mix-source-color($rgb-source-PSA);
}
}
}

542
scss/includes/source.scss
View File

@@ -87,6 +87,7 @@
$rgb-source-GHLoE: #c07e4e;
$rgb-source-DoDk: #825494;
$rgb-source-HWCS: #d0914b;
$rgb-source-ToB1-2023: #917792;
$rgb-source-TD: #bb9528;
// region Categories
@@ -120,353 +121,358 @@
// endregion
// region Specific sources
&__ {
&PHB {
@include mix-source-color($rgb-source-PHB);
}
&PHB {
@include mix-source-color($rgb-source-PHB);
}
&DMG {
@include mix-source-color($rgb-source-DMG);
}
&DMG {
@include mix-source-color($rgb-source-DMG);
}
&MM {
@include mix-source-color($rgb-source-MM);
}
&MM {
@include mix-source-color($rgb-source-MM);
}
&SCAG {
@include mix-source-color($rgb-source-SCAG);
}
&SCAG {
@include mix-source-color($rgb-source-SCAG);
}
&VGM {
@include mix-source-color($rgb-source-VGM);
}
&VGM {
@include mix-source-color($rgb-source-VGM);
}
&OGA {
@include mix-source-color($rgb-source-OGA);
}
&OGA {
@include mix-source-color($rgb-source-OGA);
}
&XGE,
// Tortles are counted as an XGE race for AL
&TTP {
@include mix-source-color($rgb-source-XGE);
}
&XGE,
// Tortles are counted as an XGE race for AL
&TTP {
@include mix-source-color($rgb-source-XGE);
}
&XMtS {
@include mix-source-color($rgb-source-XMtS);
}
&XMtS {
@include mix-source-color($rgb-source-XMtS);
}
&HotDQ {
@include mix-source-color($rgb-source-HotDQ);
}
&HotDQ {
@include mix-source-color($rgb-source-HotDQ);
}
&RoT {
@include mix-source-color($rgb-source-RoT);
}
&RoT {
@include mix-source-color($rgb-source-RoT);
}
&CoS {
@include mix-source-color($rgb-source-CoS);
}
&CoS {
@include mix-source-color($rgb-source-CoS);
}
&OotA {
@include mix-source-color($rgb-source-OotA);
}
&OotA {
@include mix-source-color($rgb-source-OotA);
}
&SKT {
@include mix-source-color($rgb-source-SKT);
}
&SKT {
@include mix-source-color($rgb-source-SKT);
}
&PotA,
&EEPC {
@include mix-source-color($rgb-source-PotA);
}
&PotA,
&EEPC {
@include mix-source-color($rgb-source-PotA);
}
&LMoP {
@include mix-source-color($rgb-source-LMoP);
}
&LMoP {
@include mix-source-color($rgb-source-LMoP);
}
&TftYP {
@include mix-source-color($rgb-source-TftYP);
}
&TftYP {
@include mix-source-color($rgb-source-TftYP);
}
&ToA {
@include mix-source-color($rgb-source-ToA);
}
&ToA {
@include mix-source-color($rgb-source-ToA);
}
&MTF {
@include mix-source-color($rgb-source-MTF);
}
&MTF {
@include mix-source-color($rgb-source-MTF);
}
&WDH {
@include mix-source-color($rgb-source-WDH);
}
&WDH {
@include mix-source-color($rgb-source-WDH);
}
&GGR,
&KKW {
@include mix-source-color($rgb-source-GGR);
}
&GGR,
&KKW {
@include mix-source-color($rgb-source-GGR);
}
&WDMM {
@include mix-source-color($rgb-source-WDMM);
}
&WDMM {
@include mix-source-color($rgb-source-WDMM);
}
&LLK {
@include mix-source-color($rgb-source-LLK);
}
&LLK {
@include mix-source-color($rgb-source-LLK);
}
&AZfyT {
@include mix-source-color($rgb-source-AZfyT);
}
&AZfyT {
@include mix-source-color($rgb-source-AZfyT);
}
&GoS {
@include mix-source-color($rgb-source-GoS);
}
&GoS {
@include mix-source-color($rgb-source-GoS);
}
&AI,
&OoW {
@include mix-source-color($rgb-source-AI);
}
&AI,
&OoW {
@include mix-source-color($rgb-source-AI);
}
// These are all from the same family
&ESK,
&DIP,
&DC,
&SDW,
&SLW {
@include mix-source-color($rgb-source-ESK);
}
// These are all from the same family
&ESK,
&DIP,
&DC,
&SDW,
&SLW {
@include mix-source-color($rgb-source-ESK);
}
&BGDIA {
@include mix-source-color($rgb-source-BGDIA);
}
&BGDIA {
@include mix-source-color($rgb-source-BGDIA);
}
&ERLW,
&EFR {
@include mix-source-color($rgb-source-ERLW);
}
&ERLW,
&EFR {
@include mix-source-color($rgb-source-ERLW);
}
&RMR,
&RMBRE {
@include mix-source-color($rgb-source-RMR);
}
&RMR,
&RMBRE {
@include mix-source-color($rgb-source-RMR);
}
&MFF {
@include mix-source-color($rgb-source-MFF);
}
&MFF {
@include mix-source-color($rgb-source-MFF);
}
&LR {
@include mix-source-color($rgb-source-LR);
}
&LR {
@include mix-source-color($rgb-source-LR);
}
&IMR {
@include mix-source-color($rgb-source-IMR);
}
&IMR {
@include mix-source-color($rgb-source-IMR);
}
&SADS {
@include mix-source-color($rgb-source-SADS);
}
&SADS {
@include mix-source-color($rgb-source-SADS);
}
&EGW,
&FS,
&DD,
&US,
&ToR {
@include mix-source-color($rgb-source-EGW);
}
&EGW,
&FS,
&DD,
&US,
&ToR {
@include mix-source-color($rgb-source-EGW);
}
&MOT {
@include mix-source-color($rgb-source-MOT);
}
&MOT {
@include mix-source-color($rgb-source-MOT);
}
&IDRotF {
@include mix-source-color($rgb-source-IDRotF);
}
&IDRotF {
@include mix-source-color($rgb-source-IDRotF);
}
&TCE {
@include mix-source-color($rgb-source-TCE);
}
&TCE {
@include mix-source-color($rgb-source-TCE);
}
&AL {
@include mix-source-color($rgb-source-AL);
}
&AL {
@include mix-source-color($rgb-source-AL);
}
&HF {
@include mix-source-color($rgb-source-HF);
}
&HF {
@include mix-source-color($rgb-source-HF);
}
&CM {
@include mix-source-color($rgb-source-CM);
}
&CM {
@include mix-source-color($rgb-source-CM);
}
&VRGR,
&HoL {
@include mix-source-color($rgb-source-VRGR);
}
&VRGR,
&HoL {
@include mix-source-color($rgb-source-VRGR);
}
&RtG {
@include mix-source-color($rgb-source-RtG);
}
&RtG {
@include mix-source-color($rgb-source-RtG);
}
&AitFR {
@include mix-source-color($rgb-source-AitFR);
&-ISF,
&-THP,
&-AVT,
&-DN,
&-FCD {
&AitFR {
@include mix-source-color($rgb-source-AitFR);
&-ISF,
&-THP,
&-AVT,
&-DN,
&-FCD {
@include mix-source-color($rgb-source-AitFR);
}
}
}
&WBtW {
@include mix-source-color($rgb-source-WBtW);
}
&WBtW {
@include mix-source-color($rgb-source-WBtW);
}
&DoD {
@include mix-source-color($rgb-source-DoD);
}
&DoD {
@include mix-source-color($rgb-source-DoD);
}
&MaBJoV {
@include mix-source-color($rgb-source-MaBJoV);
}
&MaBJoV {
@include mix-source-color($rgb-source-MaBJoV);
}
&FTD {
@include mix-source-color($rgb-source-FTD);
}
&FTD {
@include mix-source-color($rgb-source-FTD);
}
&NRH {
@include mix-source-color($rgb-source-NRH);
&-TCMC,
&-AVitW,
&-ASS,
&-CoI,
&-TLT,
&-AWoL,
&-AT {
&NRH {
@include mix-source-color($rgb-source-NRH);
&-TCMC,
&-AVitW,
&-ASS,
&-CoI,
&-TLT,
&-AWoL,
&-AT {
@include mix-source-color($rgb-source-NRH);
}
}
}
&SCC {
@include mix-source-color($rgb-source-SCC);
&-CK,
&-HfMT,
&-TMM,
&-ARiR {
&SCC {
@include mix-source-color($rgb-source-SCC);
&-CK,
&-HfMT,
&-TMM,
&-ARiR {
@include mix-source-color($rgb-source-SCC);
}
}
}
&MPMM {
@include mix-source-color($rgb-source-MPMM);
}
&MPMM {
@include mix-source-color($rgb-source-MPMM);
}
&CRCotN {
@include mix-source-color($rgb-source-CRCotN);
}
&CRCotN {
@include mix-source-color($rgb-source-CRCotN);
}
&JttRC {
@include mix-source-color($rgb-source-JttRC);
}
&JttRC {
@include mix-source-color($rgb-source-JttRC);
}
&SjA,
&SAiS,
&AAG,
&BAM,
&LoX {
@include mix-source-color($rgb-source-SAiS);
}
&SjA,
&SAiS,
&AAG,
&BAM,
&LoX {
@include mix-source-color($rgb-source-SAiS);
}
&DoSI {
@include mix-source-color($rgb-source-DoSI);
}
&DoSI {
@include mix-source-color($rgb-source-DoSI);
}
&DSotDQ {
@include mix-source-color($rgb-source-DSotDQ);
}
&DSotDQ {
@include mix-source-color($rgb-source-DSotDQ);
}
&PSA {
@include mix-source-color($rgb-source-PSA);
}
&PSA {
@include mix-source-color($rgb-source-PSA);
}
&PSD {
@include mix-source-color($rgb-source-PSD);
}
&PSD {
@include mix-source-color($rgb-source-PSD);
}
&PSI {
@include mix-source-color($rgb-source-PSI);
}
&PSI {
@include mix-source-color($rgb-source-PSI);
}
&PSK {
@include mix-source-color($rgb-source-PSK);
}
&PSK {
@include mix-source-color($rgb-source-PSK);
}
&PSX {
@include mix-source-color($rgb-source-PSX);
}
&PSX {
@include mix-source-color($rgb-source-PSX);
}
&PSZ {
@include mix-source-color($rgb-source-PSZ);
}
&PSZ {
@include mix-source-color($rgb-source-PSZ);
}
&KftGV {
@include mix-source-color($rgb-source-KftGV);
}
&KftGV {
@include mix-source-color($rgb-source-KftGV);
}
&HAT-TG,
&HAT-LMI {
@include mix-source-color($rgb-source-HAT);
}
&HAT-TG,
&HAT-LMI {
@include mix-source-color($rgb-source-HAT);
}
&BGG {
@include mix-source-color($rgb-source-BGG);
}
&BGG {
@include mix-source-color($rgb-source-BGG);
}
&TDCSR {
@include mix-source-color($rgb-source-TDCSR);
}
&TDCSR {
@include mix-source-color($rgb-source-TDCSR);
}
&PaBTSO {
@include mix-source-color($rgb-source-PaBTSO);
}
&PaBTSO {
@include mix-source-color($rgb-source-PaBTSO);
}
&PAitM,
&SatO,
&ToFW,
&MPP {
@include mix-source-color($rgb-source-PAitM);
}
&PAitM,
&SatO,
&ToFW,
&MPP {
@include mix-source-color($rgb-source-PAitM);
}
&CoA {
@include mix-source-color($rgb-source-CoA);
}
&CoA {
@include mix-source-color($rgb-source-CoA);
}
&HFFotM {
@include mix-source-color($rgb-source-HFFotM);
}
&HFFotM {
@include mix-source-color($rgb-source-HFFotM);
}
&BMT,
&DMTCRG {
@include mix-source-color($rgb-source-BMT);
}
&BMT,
&DMTCRG {
@include mix-source-color($rgb-source-BMT);
}
&GHLoE {
@include mix-source-color($rgb-source-GHLoE);
}
&GHLoE {
@include mix-source-color($rgb-source-GHLoE);
}
&DoDk {
@include mix-source-color($rgb-source-DoDk);
}
&DoDk {
@include mix-source-color($rgb-source-DoDk);
}
&HWCS,
&HWAitW {
@include mix-source-color($rgb-source-HWCS);
}
&HWCS,
&HWAitW {
@include mix-source-color($rgb-source-HWCS);
}
&TD {
@include mix-source-color($rgb-source-TD);
&ToB1-2023 {
@include mix-source-color($rgb-source-ToB1-2023);
}
&TD {
@include mix-source-color($rgb-source-TD);
}
}
// endregion
}

195
scss/includes/style.scss
View File

@@ -42,7 +42,7 @@
line-height: 1;
margin-right: 2px;
@media (min-width: vars.$width-screen-sm--min) {
@media screen and (width > #{vars.$width-screen-sm}) {
display: none;
}
}
@@ -52,14 +52,14 @@
min-height: 33px;
flex-shrink: 0;
@media (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
width: 100%;
display: flex;
}
}
&nav-inner {
@media (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
display: flex;
margin-top: 3px;
flex-direction: column;
@@ -148,7 +148,7 @@
}
#navigation .page__nav-hidden-mobile {
@media (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
display: none;
margin-left: 0;
}
@@ -181,7 +181,7 @@
height: 100vh;
width: 100vw;
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
bottom: auto;
height: initial;
min-height: 100vh;
@@ -203,12 +203,12 @@
min-height: 0;
&--cancer {
@media (min-width: vars.$width-screen-md--min) {
@media screen and (width > #{vars.$width-screen-md}) {
// min-height: calc(100vh - #{$sz-y-header});
}
}
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
flex-direction: column;
max-height: none;
height: initial;
@@ -340,28 +340,28 @@ input[type="checkbox"].sidemenu__row__label__cb {
right: 10px;
}
@media only screen and (width >= 320px) {
@media screen and (width > #{vars.$width-screen-xxs}) {
max-width: 300px;
min-width: 270px;
}
@media only screen and (min-width: vars.$width-screen-xs--min) {
@media screen and (width > #{vars.$width-screen-xs}) {
max-width: 460px;
min-width: 430px;
}
@media only screen and (min-width: vars.$width-screen-sm--min) {
@media screen and (width > #{vars.$width-screen-sm}) {
max-width: 740px;
min-width: 500px;
}
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
top: 40px;
}
}
&wrp-input {
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
margin-top: 2px;
margin-left: 0;
}
@@ -412,7 +412,7 @@ input[type="checkbox"].sidemenu__row__label__cb {
height: 32px;
min-width: 100px;
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-top-left-radius: 0;
border-top-color: transparent;
}
@@ -428,7 +428,7 @@ input[type="checkbox"].sidemenu__row__label__cb {
height: 32px;
padding: 3px 7px;
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-top-right-radius: 0;
border-top-color: transparent;
}
@@ -781,7 +781,7 @@ input[type="checkbox"].sidemenu__row__label__cb {
border-bottom-color: #c0c0c0;
}
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
overflow-y: initial;
}
}
@@ -825,13 +825,13 @@ input[type="checkbox"].sidemenu__row__label__cb {
font-size: 0.8em;
&--stats {
@media (min-width: vars.$width-screen-md--min) {
@media screen and (width > #{vars.$width-screen-md}) {
overflow-y: scroll;
margin-right: -9px;
}
}
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
max-height: 40vh;
}
@@ -1036,11 +1036,6 @@ tr.text.compact > td p:last-child {
margin-bottom: 0;
}
div#lootoutput {
height: 100%;
clear: both;
}
.mon__ {
&btn-reset-cr,
&btn-scale-cr {
@@ -1065,11 +1060,6 @@ div#lootoutput {
}
}
&wrp-size-type-align--token,
&wrp-avoid-token {
max-width: calc(100% - 11rem);
}
&sect-header-inner {
display: block;
margin-top: -0.3rem;
@@ -1095,105 +1085,6 @@ div#lootoutput {
vertical-align: bottom !important;
padding-left: 0.2rem;
}
&wrp-token {
display: block;
position: absolute;
z-index: vars.$z-token-image;
top: 0;
right: 0.5rem;
width: auto;
max-width: 11rem;
height: auto;
transition:
opacity vars.$time-2-frames,
max-width vars.$time-2-frames,
right vars.$time-2-frames;
&: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;
.mon__btn-token-cycle {
opacity: 1;
transition: opacity vars.$time-2-frames;
}
.mon__wrp-token-footer {
opacity: 1;
transition: opacity vars.$time-2-frames;
}
}
}
&token {
width: 100%;
height: 100%;
}
&btn-token-cycle {
position: absolute;
top: 50%;
bottom: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: vars.$rgb-shadow-grey--dark;
cursor: pointer;
color: #fff;
border: 1px solid vars.$rgb-border-grey--trans;
opacity: 0;
transition: opacity vars.$time-2-frames;
&--left {
left: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 0;
}
&--right {
right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 0;
}
&:hover {
color: #ddd;
}
}
&wrp-token-footer {
display: flex;
position: absolute;
height: 22px;
right: 5px;
bottom: 0;
left: 5px;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity vars.$time-2-frames;
}
&token-footer {
background: vars.$rgb-shadow-grey--dark;
color: #fff;
font-family: "Times New Roman", serif;
font-variant: small-caps;
font-size: 16px;
border-radius: 5px;
padding: 1px 5px;
border: 1px solid vars.$rgb-border-grey--trans;
}
}
.night-mode .mon__ {
@@ -1622,7 +1513,7 @@ input[type="checkbox"].readonly {
min-height: 75px;
max-height: 80%;
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
max-height: 40vh;
height: initial;
}
@@ -1667,24 +1558,6 @@ input[type="checkbox"].readonly {
/* ENTRY RENDERING CSS */
// TODO refactor everything
tr.trait,
tr.action,
tr.reaction,
tr.legendary,
tr.mythic,
tr.lairaction,
tr.regionaleffect {
.rd__b--3 {
margin-bottom: 1rem;
}
}
tr.lairaction,
tr.regionaleffect {
p {
margin-bottom: 5px;
}
}
// Book mode adjustments
.stats--book-large {
@@ -1755,7 +1628,7 @@ tr.regionaleffect {
max-height: 100vh;
}
@media only screen and (width >= 1600px) {
@media screen and (width > #{vars.$width-screen-hg}) {
#listcontainer.book-contents {
position: fixed;
top: 0;
@@ -1802,28 +1675,28 @@ tr.regionaleffect {
padding: 0 20px;
}
@media (max-width: vars.$width-screen-lg) {
@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 (max-width: vars.$width-screen-md) {
@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 only screen and (max-width: vars.$width-screen-sm) {
@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 only screen and (max-width: vars.$width-screen-xs) {
@media screen and (width <= #{vars.$width-screen-xs}) {
.f-all-wrapper {
right: calc(3.5em);
left: calc(3.5em);
@@ -1872,7 +1745,7 @@ header p.lead {
background: vars.$rgb-bg-orange;
}
@media only screen and (width >= 1600px) {
@media screen and (width > #{vars.$width-screen-hg}) {
#listcontainer.book-contents {
@include vars.mix-shadow-1;
@@ -1930,23 +1803,23 @@ header p.lead {
column-gap: 7px;
break-inside: avoid-column;
@media (width <= 2160px) {
@media screen and (width <= 2160px) {
column-count: 5;
}
@media (width <= 1800px) {
@media screen and (width <= 1800px) {
column-count: 4;
}
@media (width <= 1440px) {
@media screen and (width <= 1440px) {
column-count: 3;
}
@media (width <= 1080px) {
@media screen and (width <= 1080px) {
column-count: 2;
}
@media only screen and (width <= 720px) {
@media screen and (width <= 720px) {
column-count: 1;
}
}
@@ -2057,7 +1930,7 @@ th.border {
right: 10px;
padding: 2px 0;
@media (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
display: none;
}
}
@@ -2802,7 +2675,7 @@ th.border {
}
&input {
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-top-color: transparent;
}
@@ -2814,7 +2687,7 @@ th.border {
&submit {
border-top-color: vars.$rgb-border-grey--night;
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
border-top-color: transparent;
}
@@ -2873,7 +2746,7 @@ th.border {
}
}
@media only screen and (width >= 1600px) {
@media screen and (width > #{vars.$width-screen-hg}) {
#listcontainer.book-contents {
background: vars.$rgb-bg--night;
border-right: 1px solid #404040;
@@ -3194,7 +3067,7 @@ th.border {
top: 150px;
}
@media (width <= 1800px) {
@media screen and (width <= 1800px) {
display: none;
}
}

12
scss/includes/ui.scss
View File

@@ -172,19 +172,19 @@ Shared UI components
border-radius: 4px;
box-shadow: 0 6px 12px rgb(0 0 0 / 17.5%);
@media (width <= 767px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
min-width: 0;
}
@media (width >= 768px) {
@media screen and (width > #{vars.$width-screen-sm}) {
max-width: 750px;
}
@media (width >= 992px) {
@media screen and (width > #{vars.$width-screen-md}) {
max-width: 970px;
}
@media (width >= 1200px) {
@media screen and (width > #{vars.$width-screen-lg}) {
max-width: 1170px;
}
@@ -393,7 +393,7 @@ Shared UI components
margin-left: $w-tab + 6px;
font-size: 28px;
@media only screen and (max-width: vars.$width-screen-lg) {
@media screen and (width <= #{vars.$width-screen-lg}) {
margin-left: $w-tab-mobile-ish + 6px;
}
}
@@ -401,7 +401,7 @@ Shared UI components
&btn-tab {
width: $w-tab;
@media only screen and (max-width: vars.$width-screen-lg) {
@media screen and (width <= #{vars.$width-screen-lg}) {
width: 33px;
height: 30px;
}

54
scss/includes/util-mobile.scss
View File

@@ -1,49 +1,13 @@
@use "vars";
// If it's anything less than full desktop size, enable these styles
.mobile-ish__ {
@media only screen and (min-width: vars.$width-screen-lg--min) {
@mixin mix-mobile-styles ($width-screen) {
@media screen and (width > #{$width-screen}) {
&visible {
display: none !important;
}
}
@media only screen and (max-width: vars.$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: (vars.$spacer * 0.5) !important;
}
}
}
.mobile__ {
@media only screen and (min-width: vars.$width-screen-sm--min) {
&visible {
display: none !important;
}
}
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{$width-screen}) {
&hidden {
display: none !important;
}
@@ -507,3 +471,15 @@
// endregion
}
}
.mobile-lg__ {
@include mix-mobile-styles(vars.$width-screen-lg);
}
.mobile-md__ {
@include mix-mobile-styles(vars.$width-screen-md);
}
.mobile__ {
@include mix-mobile-styles(vars.$width-screen-sm);
}

18
scss/includes/util.scss
View File

@@ -736,7 +736,7 @@ i > i {
break-inside: avoid-column;
}
@media (width <= 768px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
column-count: 1;
}
}
@@ -750,11 +750,11 @@ i > i {
break-inside: avoid-column;
}
@media (width <= 768px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
column-count: 2;
}
@media (width <= 480px) {
@media screen and (width <= #{vars.$width-screen-xs}) {
column-count: 1;
}
}
@@ -768,11 +768,11 @@ i > i {
break-inside: avoid-column;
}
@media (width <= 768px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
column-count: 3;
}
@media (width <= 480px) {
@media screen and (width <= #{vars.$width-screen-xs}) {
column-count: 2;
}
}
@@ -786,11 +786,11 @@ i > i {
break-inside: avoid-column;
}
@media (width <= 768px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
column-count: 3;
}
@media (width <= 480px) {
@media screen and (width <= #{vars.$width-screen-xs}) {
column-count: 2;
}
}
@@ -804,11 +804,11 @@ i > i {
break-inside: avoid-column;
}
@media (width <= 768px) {
@media screen and (width <= #{vars.$width-screen-sm}) {
column-count: 3;
}
@media (width <= 480px) {
@media screen and (width <= #{vars.$width-screen-xs}) {
column-count: 2;
}
}

7
scss/includes/vars.scss
View File

@@ -286,15 +286,12 @@ $font-line-height: 1.4286;
font-weight: normal;
}
$width-screen-xxs: 320px;
$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;
$width-screen-hg: 1600px;
// region linked titles
%linked-titles-base {

8
scss/index.scss
View File

@@ -1,3 +1,5 @@
@use "includes/vars";
table.home-table {
padding: 0 10px 10px;
}
@@ -31,7 +33,7 @@ table.home-table td {
border-radius: 0;
}
@media only screen and (width <= 1200px) {
@media screen and (width <= #{vars.$width-screen-lg}) {
.home__btn-page {
width: 113px;
}
@@ -162,7 +164,7 @@ table.home-table td {
display: none;
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.home__split {
flex-direction: column;
}
@@ -205,7 +207,7 @@ table.home-table td {
}
}
@media (width <= 507px) {
@media screen and (width <= 507px) {
.home__narrow-visible {
display: block !important;
}

4
scss/inittrackerplayerview.scss
View File

@@ -1,3 +1,5 @@
@use "includes/vars";
#initp__wrp_active {
display: none;
}
@@ -6,7 +8,7 @@
display: none !important;
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.viewport-wrapper {
bottom: 0;
height: 100vh;

6
scss/items.scss
View File

@@ -1,3 +1,5 @@
@use "includes/vars";
.list--stats {
height: initial;
max-height: 100%;
@@ -23,13 +25,13 @@ h3.ele-magic {
margin: 0;
}
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.list--stats {
max-height: 20em;
}
}
@media (device-height <= 700px) {
@media screen and (device-height <= 700px) {
.list {
max-height: 20em;
}

2
scss/maps.scss
View File

@@ -20,7 +20,7 @@
border-top: 1px solid vars.$rgb-border-grey;
width: 235px;
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
max-height: 600px;
}

2
scss/renderdemo.scss
View File

@@ -15,7 +15,7 @@
width: 200px;
}
@media (max-width: vars.$width-screen-md) {
@media screen and (width <= #{vars.$width-screen-md}) {
#wrp-jsoninput {
height: 480px;
}

2
scss/search.scss
View File

@@ -37,7 +37,7 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@media only screen and (max-width: vars.$width-screen-sm) {
@media screen and (width <= #{vars.$width-screen-sm}) {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

4
scss/statgen-bundle.scss
View File

@@ -1,7 +1,9 @@
@use "includes/vars";
@import "includes/statgen";
@import "includes/statgen-night";
@media (width <= 991px) {
@media screen and (width <= #{vars.$width-screen-md}) {
.viewport-wrapper {
bottom: 0;
height: 100vh;