540 lines
11 KiB
SCSS
540 lines
11 KiB
SCSS
@use "sass:color";
|
|
|
|
@use "../vars/vars";
|
|
|
|
@media screen and (width <= #{vars.$width-screen-md}) {
|
|
.ve-dropdown-menu-filter {
|
|
max-height: 525px;
|
|
}
|
|
}
|
|
|
|
$flt-ignore: #f0f0f0;
|
|
$flt-ignore--hover: #e6e6e6;
|
|
|
|
.fltr {
|
|
$sz-font-pill: 10.5px;
|
|
|
|
&__ {
|
|
$w-margin-pill: 2px;
|
|
|
|
&btn-close {
|
|
min-width: 100px;
|
|
}
|
|
|
|
&minimal-hide {
|
|
display: none;
|
|
}
|
|
|
|
&no-items {
|
|
display: none !important;
|
|
}
|
|
|
|
&h {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 15px;
|
|
align-items: center;
|
|
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
flex-direction: column;
|
|
|
|
&--multi {
|
|
flex-direction: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
&h-text {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
&h-wrp-btns-outer {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: initial !important;
|
|
|
|
> * {
|
|
width: 100%;
|
|
margin: (vars.$spacer * 0.25) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&h-wrp-state-btns-outer {
|
|
@media screen and (width <= #{vars.$width-screen-sm}) {
|
|
flex-direction: column;
|
|
|
|
> * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&h-btn-mobile-settings {
|
|
min-width: 30px;
|
|
}
|
|
|
|
&h-btn-logic {
|
|
min-width: 46px;
|
|
font-weight: bold;
|
|
|
|
&.btn-xxs {
|
|
min-width: 34px;
|
|
}
|
|
}
|
|
|
|
&h-btn-logic--blue {
|
|
color: vars.$rgb-active-blue;
|
|
|
|
&:hover {
|
|
color: vars.$rgb-active-blue--dark;
|
|
}
|
|
}
|
|
|
|
&h-btn-logic--red {
|
|
color: vars.$rgb-active-red;
|
|
|
|
&:hover {
|
|
color: vars.$rgb-active-red--dark;
|
|
}
|
|
}
|
|
|
|
&h-btn--all,
|
|
&h-btn--all:focus,
|
|
&h-btn--all:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: vars.$rgb-active-blue;
|
|
}
|
|
|
|
&h-btn--clear,
|
|
&h-btn--clear:focus,
|
|
&h-btn--clear:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: vars.$rgb-inactive-grey;
|
|
}
|
|
|
|
&h-btn--none,
|
|
&h-btn--none:focus,
|
|
&h-btn--none:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: vars.$rgb-active-red;
|
|
}
|
|
|
|
&summary_item {
|
|
cursor: help;
|
|
margin: 0 3px;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
&summary_nest {
|
|
display: flex;
|
|
padding: 2px 0;
|
|
font-size: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
&summary_item {
|
|
&--include {
|
|
color: vars.$rgb-active-blue;
|
|
text-shadow: 0 0 1px vars.$rgb-active-blue;
|
|
}
|
|
|
|
&--exclude {
|
|
color: vars.$rgb-active-red;
|
|
text-shadow: 0 0 1px vars.$rgb-active-red;
|
|
}
|
|
}
|
|
|
|
&summary_item_spacer {
|
|
margin: 0 3px;
|
|
padding-left: 1px;
|
|
cursor: default;
|
|
background: vars.$rgb-border-grey--trans;
|
|
min-height: 12px;
|
|
}
|
|
|
|
&btn_nest {
|
|
margin: $w-margin-pill;
|
|
padding: 2px 6px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: $sz-font-pill;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: $flt-ignore;
|
|
border: 1px solid vars.$rgb-border-grey;
|
|
|
|
&:hover {
|
|
background-color: $flt-ignore--hover;
|
|
}
|
|
|
|
&--include {
|
|
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
|
|
|
&:hover {
|
|
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
|
}
|
|
|
|
span {
|
|
background: #fff;
|
|
padding: 1px 0;
|
|
}
|
|
}
|
|
|
|
&--include-all {
|
|
background: vars.$rgb-active-blue;
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
&--exclude {
|
|
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
|
|
|
&:hover {
|
|
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
|
}
|
|
|
|
span {
|
|
background: #fff;
|
|
padding: 1px 0;
|
|
}
|
|
}
|
|
|
|
&--exclude-all {
|
|
background: vars.$rgb-active-red;
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
&--both {
|
|
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
|
}
|
|
}
|
|
}
|
|
|
|
&container-pills {
|
|
margin-right: -$w-margin-pill;
|
|
margin-left: -$w-margin-pill;
|
|
}
|
|
|
|
&dropdown-divider {
|
|
border-bottom: vars.$rgb-border-grey 1px dotted;
|
|
width: 100%;
|
|
|
|
@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;
|
|
border: 0;
|
|
background: vars.$rgb-border-grey;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
&--indented {
|
|
opacity: 0.4;
|
|
width: calc(100% - 80px);
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
&dropdown-divider--sub {
|
|
border-style: dashed;
|
|
width: calc(100% - #{vars.$spacer * 2});
|
|
border-color: vars.$rgb-border-grey--trans;
|
|
}
|
|
|
|
&pill {
|
|
margin: 2px;
|
|
padding: 2px 6px;
|
|
background: $flt-ignore;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: $sz-font-pill;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border: 1px solid vars.$rgb-border-grey;
|
|
float: left;
|
|
|
|
&:hover {
|
|
background-color: $flt-ignore--hover;
|
|
}
|
|
|
|
&[state="yes"] {
|
|
background: vars.$rgb-active-blue;
|
|
color: #fff;
|
|
border-color: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-border);
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
&[state="no"] {
|
|
background: vars.$rgb-active-red;
|
|
color: #fff;
|
|
border-color: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-border);
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
&--ability-bonus {
|
|
min-width: 26px;
|
|
border-right-width: 0;
|
|
margin: 0;
|
|
flex: 1; // This is more aesthetic, but worse UX. Consider removing?
|
|
|
|
&:last-of-type {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
|
|
&--muted {
|
|
background-color: color.adjust($flt-ignore, $lightness: - 7%);
|
|
color: color.adjust(vars.$rgb-font--muted, $lightness: 7%);
|
|
|
|
&[state="yes"],
|
|
&[state="no"] {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
&wrp-pills,
|
|
&wrp-pills--sub {
|
|
flex-wrap: wrap;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
&wrp-pills {
|
|
display: block;
|
|
|
|
&::after {
|
|
content: "";
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&wrp-pills--flex,
|
|
&wrp-pills--sub {
|
|
display: flex;
|
|
}
|
|
|
|
&wrp-subs {
|
|
display: block;
|
|
}
|
|
|
|
&mini-view {
|
|
border-left: vars.$rgb-border-grey 1px solid;
|
|
border-right: vars.$rgb-border-grey 1px solid;
|
|
background: linear-gradient(to top, vars.$rgb-border-grey, vars.$rgb-bg--alt 1px);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-shrink: 0;
|
|
|
|
&--no-sort-buttons {
|
|
border-bottom: 1px solid vars.$rgb-border-grey;
|
|
background: vars.$rgb-bg--alt;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
min-height: 3px;
|
|
}
|
|
}
|
|
|
|
&mini-pill {
|
|
margin: 1px 2px;
|
|
padding: 1px 2px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: 9.4px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
display: none;
|
|
|
|
&:hover {
|
|
text-decoration: #f00 line-through;
|
|
}
|
|
|
|
&[state="yes"] {
|
|
background: vars.$rgb-active-blue;
|
|
color: #fff;
|
|
display: block;
|
|
}
|
|
|
|
&--default-sel[state="yes"] {
|
|
background: #48637a;
|
|
}
|
|
|
|
&[state="no"] {
|
|
background: vars.$rgb-name-red;
|
|
color: #fff;
|
|
display: block;
|
|
}
|
|
|
|
&--default-desel[state="no"] {
|
|
background: #7a564f;
|
|
}
|
|
}
|
|
|
|
&h-summary {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-sizing: border-box;
|
|
font-size: 11px;
|
|
line-height: 22px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
&h-summary-filtering {
|
|
color: vars.$rgb-off-black;
|
|
text-shadow: 0 0 1px vars.$rgb-off-black;
|
|
}
|
|
|
|
&h-btn-toggle-display {
|
|
min-width: 43px;
|
|
}
|
|
|
|
&slider {
|
|
width: 100%;
|
|
}
|
|
|
|
&range-inline-label {
|
|
margin-left: 15px;
|
|
flex-shrink: 0;
|
|
min-width: 75px;
|
|
text-align: right;
|
|
font-style: italic;
|
|
}
|
|
|
|
&group-comb-toggle {
|
|
font-style: italic;
|
|
cursor: pointer;
|
|
letter-spacing: -1px;
|
|
user-select: none;
|
|
}
|
|
|
|
&label-ability-score {
|
|
width: 80px;
|
|
}
|
|
|
|
&hidden--inactive {
|
|
display: none !important;
|
|
}
|
|
|
|
&hidden--search {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&-search__ {
|
|
&wrp-search {
|
|
&:focus,
|
|
&:focus-within,
|
|
&:focus-visible,
|
|
&:active {
|
|
.fltr-search__wrp-values {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&wrp-row {
|
|
&:focus,
|
|
&:hover {
|
|
background-color: vars.$rgb-bg--alt;
|
|
}
|
|
}
|
|
|
|
&wrp-values {
|
|
max-height: 200px;
|
|
background: vars.$rgb-bg;
|
|
border: 1px solid vars.$rgb-border-grey;
|
|
z-index: 1;
|
|
top: 22px;
|
|
right: 0;
|
|
left: 0;
|
|
display: none;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&disp-name {
|
|
font-size: $sz-font-pill;
|
|
}
|
|
|
|
&btn-activate {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 3px;
|
|
|
|
&--yes {
|
|
background: vars.$rgb-active-blue;
|
|
color: #fff;
|
|
border: 1px solid color.adjust(vars.$rgb-active-blue, $lightness: vars.$pct-darken-border);
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
|
|
&--no {
|
|
background: vars.$rgb-active-red;
|
|
color: #fff;
|
|
border: 1px solid color.adjust(vars.$rgb-active-red, $lightness: vars.$pct-darken-border);
|
|
|
|
&:hover {
|
|
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-src__ {
|
|
&spc-pill {
|
|
color: vars.$rgb-font--muted;
|
|
}
|
|
|
|
&wrp-slider {
|
|
background: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
&-cls__ {
|
|
&tgl {
|
|
@include vars.mix-cb-custom;
|
|
|
|
border-radius: 7px;
|
|
}
|
|
}
|
|
|
|
&__pill {
|
|
&[state="yes"] > .fltr-src__spc-pill {
|
|
color: #fff9;
|
|
}
|
|
|
|
&[state="no"] > .fltr-src__spc-pill {
|
|
color: #fffa;
|
|
}
|
|
}
|
|
}
|