|
|
| (200 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Cosmos skin | | /* All CSS here will be loaded for users of the Cosmos skin */ |
| | :root { |
| | --red: #55101e; |
| | --yel: #ebb531; |
| | --gre: #cccccc; |
| | --dkg: #363636; |
| | } |
|
| |
|
| /*:root {
| | h3 { |
| --tagify-dd-color-primary:rgb(53,149,246); | | border-bottom: 1px solid var(--red); |
| --tagify-dd-bg-color:white;
| | } |
| --tagify-dd-item-pad:.3em .5em; }
| |
|
| |
|
| .tagify { | | a.mw-selflink.selflink { |
| --tags-disabled-bg:#F1F1F1;
| | color: black !important; |
| --tags-border-color:#DDD;
| | } |
| --tags-hover-border-color:#CCC;
| |
| --tags-focus-border-color:#3595f6;
| |
| --tag-border-radius:3px;
| |
| --tag-bg:#E5E5E5;
| |
| --tag-hover:#D3E2E2;
| |
| --tag-text-color:black;
| |
| --tag-text-color--edit:black;
| |
| --tag-pad:0.3em 0.5em;
| |
| --tag-inset-shadow-size:1.1em; | |
| --tag-invalid-color:#D39494;
| |
| --tag-invalid-bg:rgba(211, 148, 148, 0.5);
| |
| --tag-remove-bg:rgba(211, 148, 148, 0.3);
| |
| --tag-remove-btn-color:black;
| |
| --tag-remove-btn-bg:none;
| |
| --tag-remove-btn-bg--hover:#c77777;
| |
| --input-color:inherit;
| |
| --tag--min-width:1ch;
| |
| --tag--max-width:auto;
| |
| --tag-hide-transition:0.3s;
| |
| --placeholder-color:rgba(0, 0, 0, 0.4);
| |
| --placeholder-color-focus:rgba(0, 0, 0, 0.25);
| |
| --loader-size:.8em;
| |
| --readonly-striped:1;
| |
| display: inline-flex;
| |
| align-items: flex-start;
| |
| flex-wrap: wrap;
| |
| border: 1px solid var(--tags-border-color);
| |
| padding: 0;
| |
| line-height: 0;
| |
| cursor: text;
| |
| outline: 0;
| |
| position: relative;
| |
| box-sizing: border-box;
| |
| transition: .1s; }
| |
|
| |
|
| @keyframes tags--bump {
| | .red-box { |
| 30% { | | display: grid inline; |
| transform: scale(1.2); } }
| | grid-template-columns: 16px 368px auto 16px; |
| | grid-template-rows: 64px auto 36px; |
| | } |
|
| |
|
| @keyframes rotateLoader {
| | .red-box h2 { |
| to { | | background-image: none; |
| transform: rotate(1turn); } }
| | padding: 0px; |
| | margin: 0px; |
| | } |
|
| |
|
| .tagify:hover:not(.tagify--focus):not(.tagify--invalid) { | | .red-box a { |
| --tags-border-color:var(--tags-hover-border-color); } | | color: var(--yel) !important; |
| | } |
|
| |
|
| .tagify[disabled] { | | .red-top-left { |
| background: var(--tags-disabled-bg); | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/8/89/Redbox-1a.webp"); |
| filter: saturate(0); | | background-repeat: no-repeat; |
| opacity: .5; | | grid-row-start: 1; |
| pointer-events: none; } | | grid-column-start: span 2; |
| | } |
|
| |
|
| .tagify[disabled].tagify--select, .tagify[readonly].tagify--select { | | .red-top-mid { |
| pointer-events: none; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/2/29/Redbox-1b.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 3; |
| | } |
|
| |
|
| .tagify[disabled]:not(.tagify--mix):not(.tagify--select), .tagify[readonly]:not(.tagify--mix):not(.tagify--select) { | | .red-top-right { |
| cursor: default; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/2/2a/Redbox-1c.webp"); |
| | background-repeat: no-repeat; |
| | grid-row-start: 1; |
| | grid-column-start: 4; |
| | } |
|
| |
|
| .tagify[disabled]:not(.tagify--mix):not(.tagify--select) > .tagify__input, .tagify[readonly]:not(.tagify--mix):not(.tagify--select) > .tagify__input { | | .red-mid-left { |
| visibility: hidden; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/8/8d/Redbox-2a.webp"); |
| width: 0; | | grid-row-start: 2; |
| margin: 5px 0; }
| | grid-column-start: 1; |
| | } |
|
| |
|
| .tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div, .tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div { | | .red-mid-mid { |
| padding: var(--tag-pad); } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/3/39/Redbox-2b.webp"); |
| | grid-row-start: 2; |
| | grid-column-start: 2; |
| | grid-column-end: 4; |
| | } |
|
| |
|
| .tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div::before, .tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div::before { | | .red-mid-right { |
| animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/e/ed/Redbox-2c.webp"); |
| | grid-row-start: 2; |
| | grid-column-start: 4; |
| | } |
|
| |
|
| @keyframes readonlyStyles {
| | .red-bot-left { |
| 0% { | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/f/fe/Redbox-3a.webp"); |
| background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
| | background-repeat: no-repeat; |
| box-shadow: none;
| | grid-row-start: 3; |
| filter: brightness(0.95); } }
| | grid-column-start: span 2; |
| | } |
|
| |
|
| .tagify[disabled] .tagify__tag__removeBtn, .tagify[readonly] .tagify__tag__removeBtn { | | .red-bot-mid { |
| display: none; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/b/b6/Redbox-3b.webp"); |
| | grid-row-start: 3; |
| | grid-column-start: 3; |
| | } |
|
| |
|
| .tagify--loading .tagify__input > br:last-child { | | .red-bot-right { |
| display: none; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/9/99/Redbox-3c.webp"); |
| | background-repeat: no-repeat; |
| | grid-row-start: 3; |
| | grid-column-start: 4; |
| | } |
|
| |
|
| .tagify--loading .tagify__input::before { | | .black-back { |
| content: none; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/d/d2/Theme-bg-dark.webp"); |
| | background-color: black; |
| | } |
|
| |
|
| .tagify--loading .tagify__input::after { | | .black-back a { |
| content: ""; | | color: var(--yel) !important; |
| vertical-align: middle;
| | } |
| opacity: 1;
| |
| width: .7em;
| |
| height: .7em;
| |
| width: var(--loader-size);
| |
| height: var(--loader-size);
| |
| min-width: 0;
| |
| border: 3px solid;
| |
| border-color: #eee #bbb #888 transparent;
| |
| border-radius: 50%;
| |
| animation: rotateLoader .4s infinite linear;
| |
| content: "" !important;
| |
| margin: -2px 0 -2px .5em; }
| |
|
| |
|
| .tagify--loading .tagify__input:empty::after { | | .return { |
| margin-left: 0; } | | color: black; |
| | background-color: var(--gre); |
| | margin: 10px 5px; |
| | padding: 7px 10px; |
| | border:2px solid var(--yel); |
| | border-radius: 5px; |
| | } |
| | |
| | .return a { |
| | color: blue !important; |
| | } |
|
| |
|
| .tagify + input, .tagify + textarea { | | code.plainlinks a { |
| position: absolute !important; | | color: blue !important; |
| left: -9999em !important;
| | } |
| transform: scale(0) !important; }
| |
|
| |
|
| .tagify__tag {
| | section#mw-content { |
| display: inline-flex; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/e/e4/Theme-bg-light.webp"); |
| align-items: center;
| | background-size: cover; |
| margin: 5px 0 5px 5px;
| | background-color: #cccccc; |
| position: relative; | | } |
| z-index: 1;
| |
| outline: 0;
| |
| line-height: normal; | |
| cursor: default;
| |
| transition: .13s ease-out; }
| |
|
| |
|
| .tagify__tag > div {
| | img { |
| vertical-align: top;
| |
| box-sizing: border-box;
| |
| max-width: 100%; | | max-width: 100%; |
| padding: var(--tag-pad); | | height: auto; |
| color: var(--tag-text-color);
| | margin: 0px; |
| line-height: inherit;
| | padding: 0px; |
| border-radius: var(--tag-border-radius);
| | } |
| white-space: nowrap;
| |
| transition: .13s ease-out; }
| |
| | |
| .tagify__tag > div > * {
| |
| white-space: pre-wrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| min-width: var(--tag--min-width);
| |
| max-width: var(--tag--max-width);
| |
| transition: .8s ease,.1s color; }
| |
| | |
| .tagify__tag > div > [contenteditable] {
| |
| outline: 0;
| |
| -webkit-user-select: text;
| |
| user-select: text;
| |
| cursor: text;
| |
| margin: -2px; | |
| padding: 2px; | |
| max-width: 350px; }
| |
| | |
| .tagify__tag > div::before {
| |
| content: "";
| |
| position: absolute;
| |
| border-radius: inherit;
| |
| inset: var(--tag-bg-inset, 0);
| |
| z-index: -1;
| |
| pointer-events: none;
| |
| transition: 120ms ease;
| |
| animation: tags--bump .3s ease-out 1;
| |
| box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset; }
| |
|
| |
|
| .tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before {
| | div.toc { |
| --tag-bg-inset:-2.5px; | | float: right; |
| --tag-bg:var(--tag-hover); } | | max-width: 33%; |
| | } |
|
| |
|
| .tagify__tag--loading {
| | h2 { |
| pointer-events: none; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/4/43/Theme-red-fade.webp"); |
| | | border: none !important; |
| .tagify__tag--loading .tagify__tag__removeBtn {
| | color: white !important; |
| display: none; }
| |
| | |
| .tagify__tag--loading::after {
| |
| --loader-size:.4em;
| |
| content: "";
| |
| vertical-align: middle;
| |
| opacity: 1;
| |
| width: .7em;
| |
| height: .7em;
| |
| width: var(--loader-size);
| |
| height: var(--loader-size);
| |
| min-width: 0;
| |
| border: 3px solid;
| |
| border-color: #eee #bbb #888 transparent;
| |
| border-radius: 50%;
| |
| animation: rotateLoader .4s infinite linear;
| |
| margin: 0 .5em 0 -.1em; }
| |
| | |
| .tagify__tag--flash div::before {
| |
| animation: none; }
| |
| | |
| .tagify__tag--hide {
| |
| width: 0 !important;
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| margin-left: 0;
| |
| margin-right: 0;
| |
| opacity: 0;
| |
| transform: scale(0);
| |
| transition: var(--tag-hide-transition);
| |
| pointer-events: none; }
| |
| | |
| .tagify__tag--hide > div > * {
| |
| white-space: nowrap; }
| |
| | |
| .tagify__tag.tagify--noAnim > div::before {
| |
| animation: none; }
| |
| | |
| .tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div > span {
| |
| opacity: .5; }
| |
| | |
| .tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before { | |
| --tag-bg:var(--tag-invalid-bg);
| |
| transition: .2s; }
| |
| | |
| .tagify__tag[readonly] .tagify__tag__removeBtn {
| |
| display: none; }
| |
| | |
| .tagify__tag[readonly] > div::before {
| |
| animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused; }
| |
| | |
| @keyframes readonlyStyles {
| |
| 0% {
| |
| background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
| |
| box-shadow: none;
| |
| filter: brightness(0.95); } }
| |
| | |
| .tagify__tag--editable > div {
| |
| color: var(--tag-text-color--edit); }
| |
| | |
| .tagify__tag--editable > div::before {
| |
| box-shadow: 0 0 0 2px var(--tag-hover) inset !important; }
| |
| | |
| .tagify__tag--editable > .tagify__tag__removeBtn {
| |
| pointer-events: none; }
| |
| | |
| .tagify__tag--editable > .tagify__tag__removeBtn::after {
| |
| opacity: 0;
| |
| transform: translateX(100%) translateX(5px); }
| |
| | |
| .tagify__tag--editable.tagify--invalid > div::before {
| |
| box-shadow: 0 0 0 2px var(--tag-invalid-color) inset !important; }
| |
| | |
| .tagify__tag__removeBtn {
| |
| order: 5;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-radius: 50px;
| |
| cursor: pointer;
| |
| font: 14px/1 Arial;
| |
| background: var(--tag-remove-btn-bg);
| |
| color: var(--tag-remove-btn-color);
| |
| width: 14px;
| |
| height: 14px;
| |
| margin-right: 4.6666666667px;
| |
| margin-left: auto;
| |
| overflow: hidden;
| |
| transition: .2s ease-out; }
| |
| | |
| .tagify__tag__removeBtn::after { | |
| content: "×";
| |
| transition: .3s,color 0s; }
| |
| | |
| .tagify__tag__removeBtn:hover {
| |
| color: #fff;
| |
| background: var(--tag-remove-btn-bg--hover); }
| |
| | |
| .tagify__tag__removeBtn:hover + div > span {
| |
| opacity: .5; } | |
| | |
| .tagify__tag__removeBtn:hover + div::before {
| |
| box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg, rgba(211, 148, 148, 0.3)) inset !important;
| |
| transition: box-shadow .2s; } | |
| | |
| .tagify:not(.tagify--mix) .tagify__input br {
| |
| display: none; }
| |
| | |
| .tagify:not(.tagify--mix) .tagify__input * {
| |
| display: inline;
| |
| white-space: nowrap; }
| |
| | |
| .tagify__input {
| |
| flex-grow: 1;
| |
| display: inline-block;
| |
| min-width: 110px;
| |
| margin: 5px;
| |
| padding: var(--tag-pad);
| |
| line-height: normal;
| |
| position: relative;
| |
| white-space: pre-wrap;
| |
| color: var(--input-color);
| |
| box-sizing: inherit; }
| |
| | |
| .tagify__input:empty::before {
| |
| position: static; }
| |
| | |
| .tagify__input:focus {
| |
| outline: 0; }
| |
| | |
| .tagify__input:focus::before {
| |
| transition: .2s ease-out;
| |
| opacity: 0;
| |
| transform: translatex(6px); }
| |
| | |
| @supports (-ms-ime-align: auto) {
| |
| .tagify__input:focus::before {
| |
| display: none; } }
| |
| | |
| .tagify__input:focus:empty::before {
| |
| transition: .2s ease-out;
| |
| opacity: 1;
| |
| transform: none;
| |
| color: rgba(0, 0, 0, 0.25);
| |
| color: var(--placeholder-color-focus); }
| |
| | |
| @-moz-document url-prefix() {
| |
| .tagify__input:focus:empty::after {
| |
| display: none; } }
| |
| | |
| .tagify__input::before {
| |
| content: attr(data-placeholder);
| |
| height: 1em;
| |
| line-height: 1em;
| |
| margin: auto 0;
| |
| z-index: 1;
| |
| color: var(--placeholder-color);
| |
| white-space: nowrap;
| |
| pointer-events: none;
| |
| opacity: 0;
| |
| position: absolute; }
| |
| | |
| .tagify__input::after {
| |
| content: attr(data-suggest);
| |
| display: inline-block;
| |
| vertical-align: middle;
| |
| position: absolute;
| |
| min-width: calc(100% - 1.5em);
| |
| text-overflow: ellipsis;
| |
| overflow: hidden;
| |
| white-space: pre;
| |
| color: var(--tag-text-color);
| |
| opacity: .3;
| |
| pointer-events: none;
| |
| max-width: 100px; }
| |
| | |
| .tagify__input .tagify__tag {
| |
| margin: 0 1px; }
| |
| | |
| .tagify--mix {
| |
| display: block; }
| |
| | |
| .tagify--mix .tagify__input {
| |
| padding: 5px; | | padding: 5px; |
| margin: 0;
| | } |
| width: 100%;
| |
| height: 100%;
| |
| line-height: 1.5;
| |
| display: block; }
| |
| | |
| .tagify--mix .tagify__input::before {
| |
| height: auto;
| |
| display: none;
| |
| line-height: inherit; }
| |
| | |
| .tagify--mix .tagify__input::after {
| |
| content: none; }
| |
| | |
| .tagify--select::after {
| |
| content: ">";
| |
| opacity: .5;
| |
| position: absolute;
| |
| top: 50%;
| |
| right: 0;
| |
| bottom: 0;
| |
| font: 16px monospace;
| |
| line-height: 8px;
| |
| height: 8px;
| |
| pointer-events: none;
| |
| transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
| |
| transition: .2s ease-in-out; }
| |
| | |
| .tagify--select[aria-expanded=true]::after {
| |
| transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2); }
| |
| | |
| .tagify--select .tagify__tag {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 1.8em;
| |
| bottom: 0; }
| |
| | |
| .tagify--select .tagify__tag div {
| |
| display: none; }
| |
| | |
| .tagify--select .tagify__input {
| |
| width: 100%; }
| |
| | |
| .tagify--empty .tagify__input::before {
| |
| transition: .2s ease-out;
| |
| opacity: 1;
| |
| transform: none;
| |
| display: inline-block;
| |
| width: auto; }
| |
| | |
| .tagify--mix .tagify--empty .tagify__input::before {
| |
| display: inline-block; }
| |
|
| |
|
| .tagify--focus {
| | h2#mw-toc-heading { |
| --tags-border-color:var(--tags-focus-border-color); | | background-image: none; |
| transition: 0s; } | | color: black !important; |
| | } |
|
| |
|
| .tagify--invalid {
| | h2 a { |
| --tags-border-color:#D39494; } | | color: var(--yel) !important; |
| | } |
|
| |
|
| .tagify__dropdown {
| | h3 { |
| position: absolute; | | margin: 0px; |
| z-index: 9999; | | padding: 0px; |
| transform: translateY(1px);
| | } |
| overflow: hidden; }
| |
|
| |
|
| .tagify__dropdown[placement=top] { | | table.skinned { |
| margin-top: 0; | | border-collapse: collapse; |
| transform: translateY(-100%); } | | border-bottom: solid 1px var(--yel); |
| | margin: 6px 0px ; |
| | } |
|
| |
|
| .tagify__dropdown[placement=top] .tagify__dropdown__wrapper { | | table.skinned tr:nth-child(even){ |
| border-top-width: 1.1px;
| | background-color: black; |
| border-bottom-width: 0; }
| |
| | |
| .tagify__dropdown[position=text] {
| |
| box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
| |
| font-size: .9em; }
| |
| | |
| .tagify__dropdown[position=text] .tagify__dropdown__wrapper {
| |
| border-width: 1px; }
| |
| | |
| .tagify__dropdown__wrapper {
| |
| max-height: 300px;
| |
| overflow: auto;
| |
| overflow-x: hidden;
| |
| background: var(--tagify-dd-bg-color);
| |
| border: 1px solid;
| |
| border-color: var(--tagify-dd-color-primary);
| |
| border-bottom-width: 1.5px;
| |
| border-top-width: 0;
| |
| box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
| |
| transition: 0.25s cubic-bezier(0, 1, 0.5, 1); }
| |
| | |
| .tagify__dropdown__header:empty {
| |
| display: none; }
| |
| | |
| .tagify__dropdown__footer {
| |
| display: inline-block;
| |
| margin-top: .5em;
| |
| padding: var(--tagify-dd-item-pad);
| |
| font-size: .7em;
| |
| font-style: italic;
| |
| opacity: .5; }
| |
| | |
| .tagify__dropdown__footer:empty {
| |
| display: none; }
| |
| | |
| .tagify__dropdown--initial .tagify__dropdown__wrapper {
| |
| max-height: 20px;
| |
| transform: translateY(-1em); }
| |
| | |
| .tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
| |
| transform: translateY(2em); }
| |
| | |
| .tagify__dropdown__item {
| |
| box-sizing: border-box;
| |
| padding: var(--tagify-dd-item-pad);
| |
| margin: 1px;
| |
| cursor: pointer;
| |
| border-radius: 2px;
| |
| position: relative;
| |
| outline: 0;
| |
| max-height: 60px;
| |
| max-width: 100%; }
| |
| | |
| .tagify__dropdown__item--active {
| |
| background: var(--tagify-dd-color-primary);
| |
| color: #fff; }
| |
| | |
| .tagify__dropdown__item:active {
| |
| filter: brightness(105%); }
| |
| | |
| .tagify__dropdown__item--hidden {
| |
| padding-top: 0;
| |
| padding-bottom: 0;
| |
| margin: 0 1px;
| |
| pointer-events: none;
| |
| overflow: hidden;
| |
| max-height: 0;
| |
| transition: var(--tagify-dd-item--hidden-duration, 0.3s) !important; }
| |
| | |
| .tagify__dropdown__item--hidden > * {
| |
| transform: translateY(-100%);
| |
| opacity: 0;
| |
| transition: inherit; }
| |
| | |
| .sr5.item {
| |
| min-height: 450px;
| |
| min-width: 650px; }
| |
| .sr5.item .wholesheet {
| |
| height: 100%;
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| overflow: hidden; }
| |
| .sr5.item .sheetbody {
| |
| overflow: hidden;
| |
| flex: 1; }
| |
| .sr5.item .item-header {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| align-items: stretch; }
| |
| .sr5.item .item-header .item-name {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| border: 0px;
| |
| flex: 1;
| |
| height: 60px;
| |
| font-size: var(--font-size-18); }
| |
| .sr5.item .item-header .item-name .display {
| |
| background: url("assets/item-banner.webp") repeat;
| |
| border: none;
| |
| font-family: 'klavika-medium';
| |
| height: 60px;
| |
| padding-bottom: 1em;
| |
| padding-left: 7px;
| |
| padding-top: 1em;
| |
| text-align: left; }
| |
| .sr5.item .item-header .source {
| |
| flex: 1;
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| position: relative;
| |
| height: 2em; }
| |
| .sr5.item .item-header .source .source-button {
| |
| color: #e6e6e6;
| |
| font-size: 16px;
| |
| height: 2em;
| |
| left: .5em;
| |
| padding: 2px;
| |
| position: absolute;
| |
| top: .2em;
| |
| width: 2em; }
| |
| .sr5.item .item-header .source .display {
| |
| height: auto;
| |
| border: none; }
| |
| .sr5.item .item-header .item-type {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| flex: 0;
| |
| padding: 0 0.5em;
| |
| color: white;
| |
| display: flex;
| |
| flex-flow: column;
| |
| align-content: center;
| |
| justify-content: center; }
| |
| .sr5.item .item-header .item-image {
| |
| max-width: 100px;
| |
| border-right: 1px solid #4d4d4d;
| |
| margin-bottom: 0;
| |
| padding-bottom: 0;
| |
| border: none; }
| |
| .sr5.item .item-header .item-info {
| |
| flex: 1; }
| |
| .sr5.item .item-header .item-info > :not(:last-child) {
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5.item .technology {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| min-width: 12em;
| |
| padding-top: 10px;
| |
| padding-left: 10px; }
| |
| .sr5.item .technology > * {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: space-between; }
| |
| .sr5.item .technology .unit {
| |
| font-size: 10px;
| |
| top: 5px;
| |
| left: 2px; }
| |
| .sr5.item .technology label {
| |
| color: #ebb531; }
| |
| .sr5.item .description {
| |
| padding: 2px;
| |
| padding-left: 10px;
| |
| height: 100%;
| |
| min-height: 16em;
| |
| overflow-y: auto; }
| |
| .sr5.item .item-form {
| |
| padding: 0 0.5em; }
| |
| .sr5.item .item-form .header {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| color: white;
| |
| color: white;
| |
| text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
| |
| font-size: 1.75em; }
| |
| .sr5.item .item-form .form-line {
| |
| display: flex;
| |
| flex-flow: row;
| |
| justify-content: space-between;
| |
| align-content: center;
| |
| padding: 0.1em 0.25em; }
| |
| .sr5.item .item-form .form-line > * {
| |
| flex: 1; }
| |
| .sr5.item .item-form .form-line .label {
| |
| color: #e6e6e6;
| |
| font-size: 1.15em;
| |
| font-family: "Signika", "Palatino Linotype", serif; }
| |
| .sr5.item .item-form .form-line .inputs {
| |
| display: flex;
| |
| flex-flow: row;
| |
| justify-content: flex-end;
| |
| align-items: center;
| |
| font-size: 0.75em; }
| |
| .sr5.item .item-form .form-line .inputs.between {
| |
| justify-content: space-between; }
| |
| .sr5.item .item-form .form-line .inputs.around {
| |
| justify-content: space-around; }
| |
| .sr5.item .item-form .form-line .inputs > * {
| |
| padding-left: 0.25em;
| |
| padding-right: 0.25em; }
| |
| .sr5.item .item-form .form-line select {
| |
| color: white;
| |
| background: rgba(0, 0, 0, 0.05);
| |
| border-radius: 0.3em;
| |
| border-color: #4d4d4d; }
| |
| .sr5.item .item-form .form-line select > option {
| |
| background-color: #4d4d4d; }
| |
| .sr5.item .item-form .form-line input {
| |
| color: white;
| |
| background: rgba(0, 0, 0, 0.05);
| |
| border-radius: 0.3em;
| |
| border-color: #4d4d4d; }
| |
| .sr5.item .item-form .form-line label {
| |
| color: #ebb531; }
| |
| | |
| .sr5.skill-edit-window {
| |
| min-height: 200px;
| |
| min-width: 200px;
| |
| display: inline-block; } | |
| .sr5.skill-edit-window .wholesheet {
| |
| height: auto;
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| overflow: hidden; }
| |
| | |
| .sr5.actor {
| |
| min-height: 690px;
| |
| min-width: 800px; }
| |
| .sr5.actor .wholesheet {
| |
| height: 100%;
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| overflow: hidden; }
| |
| .sr5.actor .name {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| background: url("assets/name-banner.webp") repeat;
| |
| font-size: 200%;
| |
| margin-bottom: 0;
| |
| padding-left: 5px; }
| |
| .sr5.actor .sheetbody {
| |
| overflow: hidden;
| |
| flex: 1; }
| |
| .sr5.actor .limit-title {
| |
| font-size: 115%; }
| |
| .sr5.actor .attributes {
| |
| display: flex;
| |
| flex-flow: row;
| |
| flex-wrap: nowrap;
| |
| justify-content: space-between; }
| |
| .sr5.actor .attributes.center {
| |
| justify-content: center;
| |
| gap: 20px; }
| |
| .sr5.actor .attributes.no-border {
| |
| border-top: none;
| |
| border-bottom: none; }
| |
| .sr5.actor .attributes.wrap {
| |
| flex-wrap: wrap; }
| |
| .sr5.actor .attributes .attribute {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| color: white;
| |
| color: white;
| |
| text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
| |
| align-items: center;
| |
| color: #ebb531;
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| flex: 1 0 auto;
| |
| font-size: 100%;
| |
| justify-content: space-evenly;
| |
| min-width: 4em;
| |
| padding-top: 4px;
| |
| text-align: center; }
| |
| .sr5.actor .attributes .attribute.no-border {
| |
| border-right: none; }
| |
| .sr5.actor .attributes .attribute.no-grow {
| |
| flex-grow: 0; }
| |
| .sr5.actor .attributes .attribute:hover .attribute-input-container.row {
| |
| visibility: visible; }
| |
| .sr5.actor .attributes .attribute.flex0 {
| |
| min-width: 0;
| |
| width: 0; }
| |
| .sr5.actor .attributes .attribute.row {
| |
| flex-flow: row nowrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| align-content: center; }
| |
| .sr5.actor .attributes .attribute.row > .attribute-name {
| |
| width: auto; }
| |
| .sr5.actor .attributes .attribute.row.space-around {
| |
| justify-content: space-around; }
| |
| .sr5.actor .attributes .attribute.row .attribute-input {
| |
| transform: translateY(20%); }
| |
| .sr5.actor .attributes .attribute > .attribute-value > .attribute-value-total {
| |
| color: white;
| |
| font-size: 125%;
| |
| width: 100%;
| |
| text-align: center; }
| |
| .sr5.actor .attributes .attribute > .attribute-name {
| |
| font-size: 115%;
| |
| width: 100%;
| |
| text-align: center;
| |
| margin-bottom: 0; }
| |
| .sr5.actor .attributes .attribute > .attribute-name.icon {
| |
| font-size: 0.75em; }
| |
| .sr5.actor .attributes .attribute > .attribute-name.roll:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5.actor .attributes .attribute .attribute-input-container {
| |
| text-align: center;
| |
| position: relative;
| |
| margin-bottom: 2px; }
| |
| .sr5.actor .attributes .attribute .attribute-input-container .mod {
| |
| font-size: 0.75em;
| |
| margin-top: -2px; }
| |
| .sr5.actor .attributes .attribute .attribute-input-container.row {
| |
| display: flex;
| |
| flex-flow: row; }
| |
| .sr5.actor .attributes .attribute .attribute-input-container > .attribute-input {
| |
| text-align: center;
| |
| margin: 2px; }
| |
| .sr5.actor .attributes .attribute .track {
| |
| display: flex;
| |
| flex-flow: row;
| |
| justify-content: space-evenly;
| |
| margin-bottom: 0.1em; }
| |
| .sr5.actor .attributes .attribute .track.center {
| |
| justify-content: center; }
| |
| .sr5.actor .attributes .attribute .track.center > *:not(:first-child) {
| |
| margin-left: 4px; }
| |
| .sr5.actor .attributes .attribute .track.center > *:not(:last-child) {
| |
| margin-right: 4px; }
| |
| .sr5.actor .attributes .attribute .track.between {
| |
| justify-content: space-between; }
| |
| .sr5.actor .attributes .attribute .track .track-slash {
| |
| width: 1.5em;
| |
| transform: translateY(10%);
| |
| flex: 0 0; }
| |
| .sr5.actor .attributes .attribute .track .track-slash:after {
| |
| content: '/'; }
| |
| .sr5.actor .attributes .attribute .track .track-plus {
| |
| width: 1em;
| |
| flex: 0 0; }
| |
| .sr5.actor .attributes .attribute .track .track-plus:after {
| |
| content: '+'; }
| |
| .sr5.actor .attributes .attribute .track .track-max-value {
| |
| margin-bottom: 0;
| |
| margin-left: 0.25em; }
| |
| .sr5.actor .limit {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| padding: 0 0.1em;
| |
| margin-top: -2px;
| |
| text-align: center;
| |
| font-size: 115%;
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| align-content: center; }
| |
| | |
| .sr5 #filter-skills.display.text.left {
| |
| font-size: 15px; }
| |
| | |
| .sr5.chat-card {
| |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("assets/page.webp") repeat;
| |
| color: white; | | color: white; |
| font-style: normal;
| | } |
| font-size: 1rem;
| |
| /**
| |
| * Content with this class should be hidden from players eyes
| |
| * Check SuccessTest._showGmOnlyContent for when to show it to users.
| |
| }
| |
| /* .sr5.chat-card .gm-only-content {
| |
| display: none !important; }
| |
| .sr5.chat-card .clickable:hover {
| |
| cursor: pointer;
| |
| background: #4b4a44;
| |
| color: white; }
| |
| .sr5.chat-card .card-header {
| |
| padding: 0.25em 0;
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5.chat-card .card-header img {
| |
| flex: 0 0;
| |
| margin-right: 0.5em;
| |
| padding: 1px 1px 1px 1px;
| |
| border: 0;
| |
| height: 28px;
| |
| width: 28px; }
| |
| .sr5.chat-card .card-header h3 {
| |
| font-weight: bold;
| |
| align-self: center;
| |
| flex: 1;
| |
| margin: 0;
| |
| font-size: var(--font-size-12); }
| |
| .sr5.chat-card .card-header:first-of-type {
| |
| color: #ebb531;
| |
| border-color: #ebb531; }
| |
| .sr5.chat-card .button {
| |
| color: white;
| |
| border-color: black;
| |
| background: rgba(230, 230, 230, 0.2);
| |
| border-radius: 0.3em;
| |
| text-align: center;
| |
| margin-top: 0.5em;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| padding-top: 2px;
| |
| padding-bottom: 2px;
| |
| padding-left: 1em;
| |
| padding-right: 1em;
| |
| text-align: center; }
| |
| .sr5.chat-card .button:hover {
| |
| cursor: pointer;
| |
| outline: none;
| |
| box-shadow: 0 0 5px var(--color-shadow-primary); }
| |
| .sr5.chat-card .card-description span {
| |
| border-right: 1px solid #4d4d4d;
| |
| padding: 0;
| |
| padding-right: 0.3em;
| |
| font-size: 0.75em; }
| |
| .sr5.chat-card .card-description span:last-child {
| |
| border-right: none;
| |
| padding-right: 0; }
| |
| .sr5.chat-card .card-description .card-description-content {
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5.chat-card .damage-line {
| |
| margin-top: 0.25em; }
| |
| .sr5.chat-card .reducedResult {
| |
| color: #aa0200;
| |
| filter: sepia(0.5) hue-rotate(-60deg); }
| |
| | |
| .sr5.roll-card {
| |
| margin: 0.15em;
| |
| font-size: 12px; }
| |
| .sr5.roll-card .card-title {
| |
| display: flex;
| |
| border-bottom: 1px solid #4d4d4d;
| |
| justify-content: flex-start;
| |
| align-content: center;
| |
| align-items: flex-end; }
| |
| .sr5.roll-card .card-title > * {
| |
| margin-left: 0.15em;
| |
| margin-right: 0.15em;
| |
| width: 100%; }
| |
| .sr5.roll-card .card-title .document {
| |
| overflow: hidden;
| |
| white-space: nowrap;
| |
| display: flex;
| |
| align-content: center; }
| |
| .sr5.roll-card .card-title .document * {
| |
| display: inline-block; }
| |
| .sr5.roll-card .card-title .header-name {
| |
| text-overflow: ellipsis;
| |
| overflow: hidden;
| |
| white-space: nowrap;
| |
| border-bottom: none; }
| |
| .sr5.roll-card .card-title .header-name:hover {
| |
| text-shadow: -1px -1px 0 #6495ed, 1px -1px 0 #6495ed, -1px 1px 0 #6495ed, 1px 1px 0 #6495ed; }
| |
| .sr5.roll-card .card-title .show-display-description,
| |
| .sr5.roll-card .card-title .hide-display-description {
| |
| border: none;
| |
| cursor: pointer;
| |
| height: 32px;
| |
| width: 32px; }
| |
| .sr5.roll-card .card-title .hide-display-description {
| |
| display: none; }
| |
| .sr5.roll-card .test-line {
| |
| margin-top: 0.25em;
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: space-between; }
| |
| .sr5.roll-card .test-line .test-name {
| |
| font-style: italic; }
| |
| .sr5.roll-card .test-line .test-name.test-roll {
| |
| text-decoration: underline; }
| |
| .sr5.roll-card .test-line .test-name.test-roll:hover {
| |
| cursor: pointer; }
| |
| .sr5.roll-card .test-line .place-template {
| |
| padding: 2px 5px;
| |
| line-height: 1em;
| |
| color: black;
| |
| font-size: 18px;
| |
| margin-right: 1em;
| |
| flex: 0; }
| |
| .sr5.roll-card .card-description {
| |
| padding: 0.25em;
| |
| border-bottom: 1px solid #4d4d4d;
| |
| display: none; }
| |
| .sr5.roll-card .card-content {
| |
| border-bottom: 1px solid #4d4d4d;
| |
| padding: 0.25em 0.25em 0.25em;
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: space-between; }
| |
| .sr5.roll-card .card-content .left-side {
| |
| display: flex;
| |
| flex: 1;
| |
| flex-flow: column; }
| |
| .sr5.roll-card .card-content .right-side {
| |
| display: flex;
| |
| flex: 1;
| |
| flex-flow: column;
| |
| text-align: right;
| |
| align-content: flex-end; }
| |
| .sr5.roll-card .card-content .right-side .limit-line {
| |
| justify-content: flex-end; }
| |
| .sr5.roll-card .card-content .key {
| |
| margin-right: 0.35em;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| max-width: 10em; }
| |
| .sr5.roll-card .card-content .key.bold {
| |
| font-weight: bold; }
| |
| .sr5.roll-card .card-content .value {
| |
| font-weight: bold;
| |
| align-self: flex-end; }
| |
| .sr5.roll-card .card-content .value-result {
| |
| text-align: right; }
| |
| .sr5.roll-card .card-content .limit-line {
| |
| display: flex;
| |
| flex-flow: nowrap row;
| |
| justify-content: flex-start; }
| |
| .sr5.roll-card .card-content .category-line {
| |
| font-style: italic; }
| |
| .sr5.roll-card .card-content .damage-line {
| |
| display: flex;
| |
| flex-flow: nowrap row;
| |
| justify-content: flex-start;
| |
| align-items: flex-end;
| |
| text-align: left; }
| |
| .sr5.roll-card .card-content .damage-line > :not(:first-child) {
| |
| margin-left: 0.1em; }
| |
| .sr5.roll-card .card-content .damage-line > :not(:last-child) {
| |
| margin-right: 0.1em; }
| |
| .sr5.roll-card .card-content .damage-line .icon {
| |
| font-style: italic; }
| |
| .sr5.roll-card .card-content p {
| |
| font-size: 0.8em; }
| |
| .sr5.roll-card .card-content h3 {
| |
| font-size: 1em;
| |
| margin: 0;
| |
| font-weight: bold; }
| |
| .sr5.roll-card .card-content .test-value {
| |
| display: flex; }
| |
| .sr5.roll-card .card-content .test-value span.value {
| |
| flex: auto;
| |
| text-align: left; }
| |
| .sr5.roll-card .card-content .test-value span.value-result {
| |
| flex: auto;
| |
| text-align: right;
| |
| padding-right: 8px;
| |
| white-space: nowrap; }
| |
| .sr5.roll-card .card-content .test-code {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| font-size: var(--font-size-12); }
| |
| .sr5.roll-card .dice-rolls {
| |
| display: none;
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5.roll-card .dice-roll-content {
| |
| padding: 0.5em 0.5em;
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| justify-content: center; }
| |
| .sr5.roll-card .dice-roll-content .dice-roll {
| |
| background-image: url(/icons/svg/d6-grey.svg);
| |
| background-size: 24px 24px;
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| width: 24px;
| |
| line-height: 24px;
| |
| margin-top: 5px; }
| |
| .sr5.roll-card .dice-roll-content .dice-roll.red {
| |
| color: #aa0200;
| |
| filter: sepia(0.5) hue-rotate(-60deg); }
| |
| .sr5.roll-card .dice-roll-content .dice-roll.green {
| |
| color: #18520b;
| |
| filter: sepia(0.5) hue-rotate(60deg); }
| |
| .sr5.roll-card .glitch-content {
| |
| display: flex;
| |
| flex-flow: column;
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5.roll-card .glitch-content .glitch {
| |
| position: relative;
| |
| text-decoration: none;
| |
| text-transform: uppercase;
| |
| margin: 0;
| |
| letter-spacing: 5px;
| |
| text-align: center;
| |
| padding-top: 4px;
| |
| font-weight: bold;
| |
| z-index: 1; }
| |
| .sr5.roll-card .glitch-content .glitch:before,
| |
| .sr5.roll-card .glitch-content .glitch:after {
| |
| display: inline;
| |
| position: absolute;
| |
| top: 4px;
| |
| right: 0;
| |
| left: 0;
| |
| content: attr(data-glitch);
| |
| text-transform: uppercase;
| |
| font-weight: normal; }
| |
| .sr5.roll-card .glitch-content .glitch:after {
| |
| color: #a0a;
| |
| opacity: 0;
| |
| z-index: -1;
| |
| animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 5; }
| |
| .sr5.roll-card .glitch-content .glitch:before {
| |
| color: #0aa;
| |
| opacity: 0;
| |
| z-index: -2;
| |
| animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5; }
| |
| .sr5.roll-card .glitch-content .message:hover .glitch:before {
| |
| animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
| |
| opacity: 1; }
| |
| .sr5.roll-card .glitch-content .message:hover .glitch:after {
| |
| animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
| |
| opacity: 1; }
| |
| @media only screen and (max-width: 400px) {
| |
| .sr5.roll-card .glitch-content .glitch {
| |
| font-size: 3em; } }
| |
| | |
| @keyframes glitch {
| |
| from {
| |
| opacity: 1; }
| |
| 0% {
| |
| transform: translate(0);
| |
| opacity: 0; }
| |
| 1% {
| |
| opacity: 1; }
| |
| 20% {
| |
| transform: translate(-2px, 2px); }
| |
| 40% {
| |
| transform: translate(-2px, -2px); }
| |
| 60% {
| |
| transform: translate(2px, 2px); }
| |
| 80% {
| |
| transform: translate(2px, -2px);
| |
| opacity: 1; }
| |
| to {
| |
| transform: translate(0); } }
| |
| | |
| .sr5.item-card .card-description {
| |
| display: block; }
| |
|
| |
|
| .sr5 .chat-select-link img:hover { | | table.skinned tr:nth-child(odd){ |
| padding: 0;
| | background-color: dimgrey; |
| border: 1px solid #4d4d4d; }
| |
| | |
| /**
| |
| * CSS for Success Test Dialog styling.
| |
|
| |
| .sr5.form-dialog .dialog-title {
| |
| font-weight: bold; }
| |
| | |
| .sr5.form-dialog .form-group {
| |
| /**
| |
| * Lazy hack to allow for a two segment elemnt style, with the right ones text
| |
| * being flush to the end.
| |
| }
| |
| .sr5.form-dialog .form-group .form-group-element-2 {
| |
| flex: 2; }
| |
| .sr5.form-dialog .form-group .form-group-element-1-right { | |
| flex: 1;
| |
| text-align: right; }
| |
| | |
| .sr5.form-dialog .dialog-content-common h2 {
| |
| border: none;
| |
| color: white; | | color: white; |
| margin: 0;
| | } |
| text-underline: none; }
| |
| | |
| .sr5 {
| |
| /**
| |
| * Rules applied to elements of the tagify input components
| |
| }
| |
| .sr5 .tagify-selection {
| |
| border-color: #4d4d4d; }
| |
| | |
| /**
| |
| * Is used on TokenHUDs to display a additional segment per situational modifer.
| |
|
| |
| .sr-modifier-container .modifier-column {
| |
| padding-top: 66px;
| |
| display: block;
| |
| font-weight: bold;
| |
| font-size: 18px;
| |
| z-index: -1; }
| |
| | |
| .sr-modifier-container .modifier-row {
| |
| position: relative;
| |
| display: grid;
| |
| flex-wrap: wrap;
| |
| align-items: stretch;
| |
| width: 160px;
| |
| background: rgba(0, 0, 0, 0.6);
| |
| box-shadow: 0 0 15px #000;
| |
| border: 1px solid #333;
| |
| color: #DDD;
| |
| height: 40px;
| |
| line-height: 40px;
| |
| margin-bottom: 18px;
| |
| border-radius: 8px;
| |
| pointer-events: all;
| |
| grid-template-columns: 36px auto;
| |
| overflow: hidden; }
| |
| .sr-modifier-container .modifier-row .modifier-description {
| |
| text-overflow: clip;
| |
| white-space: nowrap;
| |
| cursor: pointer; }
| |
| .sr-modifier-container .modifier-row .modifier-description:hover {
| |
| box-shadow: 0 0 0.25em 0.15em white;
| |
| border-radius: 8px; }
| |
| | |
| /**
| |
| * All stylings necessary for situation modifiers
| |
|
| |
| .sr5#situational-modifiers-application * {
| |
| font-weight: normal; }
| |
| | |
| .sr5#situational-modifiers-application h1 {
| |
| border-bottom: 1px solid #ebb531;
| |
| color: #ebb531;
| |
| font-weight: bold; }
| |
| | |
| .sr5#situational-modifiers-application h2,
| |
| .sr5#situational-modifiers-application h3 {
| |
| color: #ebb531;
| |
| border-bottom: none;
| |
| font-weight: normal; }
| |
| | |
| .sr5#situational-modifiers-application .modifier-total {
| |
| display: flex;
| |
| flex-direction: column; }
| |
| | |
| /**
| |
| * Rules around the value modifier pop up that's shown for Value style data structures like Attributes, Skills, etc.
| |
|
| |
| .sr5 .value > .value-modifiers-container {
| |
| display: none;
| |
| visibility: hidden;
| |
| position: absolute;
| |
| /* We WILL be on top!
| |
| z-index: 2147483647;
| |
| opacity: 0;
| |
| transition: opacity 0.3s; }
| |
| | |
| .sr5 .value:hover .value-modifiers-container {
| |
| display: block;
| |
| visibility: visible;
| |
| opacity: 1; }
| |
| | |
| .sr5 .value .value-modifiers {
| |
| display: grid;
| |
| grid-template-columns: 200px 50px;
| |
| background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("assets/page.webp") repeat;
| |
| border: 1px solid #4d4d4d;
| |
| padding: 0.5em 0.5em 0.5em 0.5em;
| |
| text-align: left;
| |
| font-weight: normal; }
| |
| .sr5 .value .value-modifiers > .value-modifier-name {
| |
| font-weight: bold; }
| |
| .sr5 .value .value-modifiers > .value-modifiers-base {
| |
| border-bottom: 1px solid #ebb531;
| |
| color: white; }
| |
| .sr5 .value .value-modifiers > .value-modifiers-modifier {
| |
| color: white; }
| |
| .sr5 .value .value-modifiers > .value-modifiers-total {
| |
| font-weight: bold;
| |
| border-top: 1px double #ebb531;
| |
| color: white; }
| |
| .sr5 .value .value-modifiers > .value-modifiers-invalid-total {
| |
| text-decoration: line-through; }
| |
|
| |
|
| /**
| | table.skinned tr th { |
| * Rules related to FoundryVTT styling meant to not be limited to the system id.
| | background-color: black; |
| * Everything here will overwrite default Foundry Styling.
| | border-top: solid 1px var(--yel); |
|
| | border-bottom: solid 1px var(--yel); |
| /**
| | } |
| * GENERAL ELEMENT STYLING
| |
|
| |
| blockquote {
| |
| padding-top: 5px; | |
| padding-bottom: 5px; | |
| background: linear-gradient(to right, rgba(85, 16, 30, 0.304) 0%, rgba(255, 255, 255, 0.2) 100%); } | |
|
| |
|
| input[type='text'].display {
| | table.skinned th { |
| border: 1; } | | color: var(--yel); |
| | padding: 0px 3px; |
| | } |
|
| |
|
| .settings-sidebar h2 { | | table.skinned td { |
| color: white; } | | padding: 0px 3px; |
| | } |
|
| |
|
| .display.text.left.document-name { | | table.skinned a { |
| font-size: 25px; | | color: var(--yel) !important; |
| border: 0; }
| | } |
|
| |
|
| .ProseMirror-selectednode { | | .blackbox { display: grid inline; |
| outline: 0; }
| | grid-template-columns: 16px auto 80px auto 12px; |
| | | grid-template-rows: 36px auto 24px; |
| .entity-link.content-link {
| |
| color: white; }
| |
| | |
| /**
| |
| * JOURNAL ENTRY STYLING
| |
|
| |
| .sheet.journal-entry .journal-entry-content,
| |
| .journal-sheet.journal-entry-page .window-content {
| |
| background: url("assets/light-page.webp") repeat; }
| |
| .sheet.journal-entry .journal-entry-content h1,
| |
| .journal-sheet.journal-entry-page .window-content h1 {
| |
| font-family: 'klavika-medium';
| |
| color: #55101e;
| |
| font-size: 25px; }
| |
| .sheet.journal-entry .journal-entry-content h2,
| |
| .journal-sheet.journal-entry-page .window-content h2 {
| |
| font-family: 'klavika-medium';
| |
| color: #55101e; }
| |
| .sheet.journal-entry .journal-entry-content table,
| |
| .journal-sheet.journal-entry-page .window-content table {
| |
| background: linear-gradient(to bottom, #3d3c3f, #000000);
| |
| font-size: 90%; }
| |
| .sheet.journal-entry .journal-entry-content th,
| |
| .journal-sheet.journal-entry-page .window-content th {
| |
| padding: 9px;
| |
| background: black;
| |
| color: #ebb531;
| |
| text-align: left; }
| |
| .sheet.journal-entry .journal-entry-content tr,
| |
| .journal-sheet.journal-entry-page .window-content tr {
| |
| color: white; }
| |
| .sheet.journal-entry .journal-entry-content tr:nth-child(even),
| |
| .journal-sheet.journal-entry-page .window-content tr:nth-child(even) {
| |
| background-color: #59595b; }
| |
| .sheet.journal-entry .journal-entry-content table td:first-child,
| |
| .journal-sheet.journal-entry-page .window-content table td:first-child {
| |
| text-align: left; }
| |
| .sheet.journal-entry .journal-entry-content td:not(.column-1),
| |
| .journal-sheet.journal-entry-page .window-content td:not(.column-1) {
| |
| text-align: center; }
| |
| .sheet.journal-entry .journal-entry-content table th:first-child,
| |
| .journal-sheet.journal-entry-page .window-content table th:first-child {
| |
| text-align: left; }
| |
| .sheet.journal-entry .journal-entry-content th:not(.column-1),
| |
| .journal-sheet.journal-entry-page .window-content th:not(.column-1) {
| |
| text-align: center; }
| |
| .sheet.journal-entry .journal-entry-content tr:first-child th,
| |
| .journal-sheet.journal-entry-page .window-content tr:first-child th {
| |
| border-top: 1px solid #ebb531; }
| |
| .sheet.journal-entry .journal-entry-content tr:first-child th,
| |
| .journal-sheet.journal-entry-page .window-content tr:first-child th {
| |
| border-bottom: 1px solid #ebb531; }
| |
| .sheet.journal-entry .journal-entry-content tr:last-child td, | |
| .journal-sheet.journal-entry-page .window-content tr:last-child td {
| |
| border-bottom: 1px solid #ebb531; }
| |
| .sheet.journal-entry .journal-entry-content table .content-link, | |
| .journal-sheet.journal-entry-page .window-content table .content-link {
| |
| background: none;
| |
| padding: 0px;
| |
| border: 0px; }
| |
| | |
| .journal-sheet .journal-header .title {
| |
| background: url("assets/journal-banner.webp") repeat;
| |
| font-family: 'klavika-medium';
| |
| text-align: left !important;
| |
| text-indent: 5px;
| |
| color: white; | | color: white; |
| border-width: 0;
| | } |
| height: 80px; }
| |
|
| |
|
| .journal-sheet h3 { | | .blackbox-1a { |
| font-family: 'klavika-medium'; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/6/68/Blackbox-1a.webp"); |
| color: #55101e; } | | background-repeat: no-repeat; |
| | grid-row-start: 1; |
| | grid-column-start: 1; |
| | grid-column: 1; |
| | } |
|
| |
|
| .journal-sheet select { | | .blackbox-1b { |
| color: #4d4d4d; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/3/33/Blackbox-1b.webp"); |
| | grid-row-start: 1; |
| | grid-column: 2 3; |
| | padding-top: 6px; |
| | } |
|
| |
|
| .journal-sheet option { | | .blackbox-1c { |
| color: white; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/9/96/Blackbox-1c.webp"); |
| | background-repeat: no-repeat; |
| | grid-row-start: 1; |
| | grid-column-start: 3; |
| | } |
|
| |
|
| /**
| | .blackbox-1d { |
| * CHAT MESSAGE STYLING
| | background-image: url("http://sr5-foundryvtt.privateworks.com/images/4/41/Blackbox-1d.webp"); |
|
| | grid-row-start: 1; |
| .chat-message, | | grid-column-start: 4; |
| .chat-message.emote {
| | } |
| color: white; | |
| background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.05)), url("assets/page.webp") repeat;
| |
| border: 1px solid #4d4d4d; } | |
|
| |
|
| .chat-message.whisper { | | .blackbox-1e { |
| background: linear-gradient(rgba(84, 84, 105, 0.5), rgba(0, 0, 0, 0.5)), url("assets/page.webp") repeat; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/d/de/Blackbox-1e.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 5; |
| | } |
|
| |
|
| .chat-message.blind { | | .blackbox-2a { |
| background: linear-gradient(rgba(107, 71, 107, 0.25), rgba(0, 0, 0, 0.5)), url("assets/page.webp") repeat; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/e/ea/Blackbox-2a.webp"); |
| | grid-row-start: 2; |
| | grid-column: 1; |
| | } |
|
| |
|
| .chat-message .message-header, | | .blackbox-2b { |
| .chat-message.blind .message-header,
| | background-image: url("http://sr5-foundryvtt.privateworks.com/images/8/8d/Blackbox-2b.webp"); |
| .chat-message.whisper .message-header {
| | grid-row-start: 2; |
| color: #b3b3b3; } | | grid-column-start: 2; grid-column-end: 5; |
| | } |
|
| |
|
| @font-face {
| | .blackbox-2c { |
| font-family: 'klavika-medium'; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/a/a7/Blackbox-2c.webp"); |
| src: url("assets/fonts/klavika-medium.otf"); }
| | grid-row-start: 2; |
| | grid-column-start: 5; |
| | } |
|
| |
|
| @font-face {
| | .blackbox-3a { |
| font-family: 'IwaOGoPro-Md'; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/5/59/Blackbox-3a.webp"); |
| src: url("assets/fonts/IwaOGoPro-Md.otf"); }
| | grid-row-start: 3; |
| | grid-column-start: 1; |
| | } |
|
| |
|
| .Roll:hover { | | .blackbox-3b { |
| text-shadow: 0 0 8px var(--color-shadow-primary); | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/c/ca/Blackbox-3b.webp"); |
| cursor: pointer; } | | grid-row-start: 3; |
| | grid-column-start: 2; |
| | } |
|
| |
|
| /**
| | .blackbox-3d { |
| * These are default FoundryVTT classes that have been used within Shadowrun5 CSS while not behaving as default.
| | background-image: url("http://sr5-foundryvtt.privateworks.com/images/8/8b/Blackbox-3d.webp"); |
| * TODO: This is abusing default FoundryVTT CSS classing, which often can cause default FoundryVTT styling to break.
| | grid-row-start: 3; |
|
| | grid-column-start: 3; |
| .sr5 .flexcol { | | grid-column-end: 5; |
| display: flex; | | text-align: right; |
| flex-direction: column; | | } |
| flex-wrap: nowrap; } | |
| .sr5 .flexcol > * { | |
| flex: 0; }
| |
|
| |
|
| .sr5 .flexcol-rev { | | .blackbox-3d a { |
| display: flex; | | color: var(--yel) !important; |
| flex-direction: column-reverse;
| | } |
| flex-wrap: nowrap; }
| |
| .sr5 .flexcol-rev > * {
| |
| flex: 0; }
| |
|
| |
|
| .sr5 .flexrow { | | .blackbox-3e { |
| display: flex; | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/e/e3/Blackbox-3e.webp"); |
| flex-direction: row; | | grid-row-start: 3; |
| flex-wrap: wrap;
| | grid-column-start: 5; |
| justify-content: flex-start; } | | } |
|
| |
|
| .sr5 .nowrap { | | .whitebox{ display: grid inline; |
| flex-wrap: nowrap; } | | color: black; |
| | grid-template-columns: 14px 6px auto 50px auto 24px 12px; |
| | grid-template-rows: 34px auto 50px 10px; |
| | } |
|
| |
|
| .sr5 .align-start { | | .whitebox-1a { |
| align-items: flex-start; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/7/7a/Whitebox-1a.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 1; |
| | grid-column-end: 3; |
| | } |
|
| |
|
| .sr5 .center { | | .whitebox-1b { |
| justify-content: center; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/b/b7/Whitebox-1b.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 3; |
| | padding: 3px 6px; |
| | } |
|
| |
|
| .sr5 .flex-end { | | .whitebox-1c { |
| justify-content: flex-end; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/5/57/Whitebox-1c.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 4; |
| | } |
|
| |
|
| .sr5 .space-between { | | .whitebox-1d { |
| justify-content: space-between; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/0/07/Whitebox-1d.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 5; |
| | } |
|
| |
|
| .sr5 .space-around { | | .whitebox-1e { |
| justify-content: space-around; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/4/45/Whitebox-1e.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 6; |
| | } |
|
| |
|
| .sr5 .align-center { | | .whitebox-1f { |
| align-items: center; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/e/e3/Whitebox-1f.webp"); |
| | grid-row-start: 1; |
| | grid-column-start: 7; |
| | } |
|
| |
|
| .sr5 .show-situation-modifiers-application:hover { | | .whitebox-2a { |
| text-shadow: 0 0 8px var(--color-shadow-primary); | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/9/96/Whitebox-2a.webp"); |
| cursor: pointer; } | | grid-row-start: 2; |
| | grid-column-start: 1; |
| | } |
|
| |
|
| .align-items-center { | | .whitebox-2b { |
| align-items: center; } | | background-color: white; |
| | grid-row-start: 2; |
| | grid-column-start: 2; |
| | grid-column-end: 7; |
| | grid-row-end: 4; |
| | } |
|
| |
|
| .align-content-center { | | .whitebox-2c { |
| align-content: center; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/1/1f/Whitebox-2c.webp"); |
| | grid-row-start: 2; |
| | grid-column-start: 7; |
| | } |
|
| |
|
| .flex0 { | | .whitebox-3a { |
| flex: 0; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/c/c2/Whitebox-3a.webp"); |
| | grid-row-start: 3; |
| | grid-column-start: 1; |
| | } |
|
| |
|
| .flex1 { | | .whitebox-3b { |
| flex: 1; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/9/92/Whitebox-3b.webp"); |
| | grid-row-start: 3; |
| | } |
|
| |
|
| .flex2 { | | .whitebox-3c { |
| flex: 2; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/0/09/Whitebox-3c.webp"); |
| | grid-row-start: 3; |
| | grid-column-start: 7; |
| | } |
|
| |
|
| .flex3 { | | .whitebox-4a { |
| flex: 3; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/f/f1/Whitebox-4a.webp"); |
| | grid-row-start: 4; |
| | grid-column-start: 1; |
| | } |
|
| |
|
| .flex4 { | | .whitebox-4b { |
| flex: 4; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/0/02/Whitebox-4b.webp"); |
| | grid-row-start: 4; |
| | grid-column-start: 2; |
| | grid-column-end: 7; |
| | } |
|
| |
|
| .input { | | .whitebox-4c { |
| position: relative; } | | background-image: url("http://sr5-foundryvtt.privateworks.com/images/8/82/Whitebox-4c.webp"); |
| .input .unit {
| | grid-row-start: 4; |
| color: white;
| | grid-column-start: 7; |
| text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
| | } |
| position: absolute;
| |
| display: block;
| |
| left: 5px;
| |
| top: 2px;
| |
| z-index: 9; }
| |
|
| |
|
| label.checkbox {
| | .yellowpages { |
| display: block; | | font-size: larger; |
| position: relative;
| | font-weight: bolder; |
| top: 0;
| | color: var(--yel) !important; |
| left: 0;
| | text-transform: uppercase; |
| cursor: pointer;
| | } |
| user-select: none;
| |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; }
| |
| label.checkbox:hover input ~ .checkmark { | |
| text-shadow: 0 0 0.2em darkblue; }
| |
| label.checkbox.init-edge-label {
| |
| margin-right: 1.75em;
| |
| font-size: 0.75em;
| |
| top: 0.95em;
| |
| left: -0.5em; }
| |
| label.checkbox input {
| |
| cursor: pointer; }
| |
| label.checkbox input.hidden {
| |
| position: absolute;
| |
| opacity: 0;
| |
| height: 0;
| |
| width: 0; }
| |
| label.checkbox .checkmark {
| |
| position: absolute;
| |
| font-size: 1.25em;
| |
| top: -0.5em;
| |
| left: 0.8em; }
| |
|
| |
|
| button.plus1_button {
| | .sr5-grey { |
| padding: 2px; | | font-weight: bold; |
| color: black; | | white-space: nowrap; |
| line-height: 0; | | color: white; |
| flex: 0; | | background-color: var(--dkg); |
| background: rgba(230, 230, 230, 0.1); | | padding: 4px 20px; |
| | border: thin white solid; |
| border-radius: 0.3em; | | border-radius: 0.3em; |
| text-align: center; }
| | } |
| button.plus1_button:hover {
| |
| cursor: pointer; }
| |
|
| |
|
| input[type='checkbox'].hidden {
| | .sr5-red{ |
| display: none; }
| | font-weight: bold; |
| | | white-space: nowrap; |
| input[type='checkbox'].display {
| |
| background: transparent;
| |
| color: white;
| |
| border: none;
| |
| text-align: center;
| |
| font-size: 1em; } | |
| input[type='checkbox'].display:hover {
| |
| background: transparent;
| |
| border: 1px solid #4d4d4d; }
| |
| | |
| input[type='text'].disabled-for-display {
| |
| color: black;
| |
| background-color: rgba(0, 0, 0, 0); } | |
| | |
| input[type='text'].display {
| |
| color: white;
| |
| text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
| |
| background: rgba(230, 230, 230, 0.1);
| |
| color: white; | | color: white; |
| | background-color: var(--red); |
| | padding: 4px 20px; |
| | border: thin white solid; |
| border-radius: 0.3em; | | border-radius: 0.3em; |
| border-color: black;
| | } |
| text-align: center;
| |
| min-height: 1em; }
| |
| input[type='text'].display::placeholder {
| |
| color: #b3b3b3; }
| |
| input[type='text'].display.short {
| |
| font-size: 0.75em; }
| |
| input[type='text'].display.text {
| |
| background: rgba(77, 77, 77, 0.1);
| |
| border-radius: 0; }
| |
| input[type='text'].display.right {
| |
| text-align: right; }
| |
| input[type='text'].display.left {
| |
| text-align: left; }
| |
| input[type='text'].display:disabled {
| |
| color: white;
| |
| background: transparent;
| |
| border-color: transparent;
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| margin-left: 0;
| |
| margin-right: 0; }
| |
| | |
| .invisible {
| |
| visibility: hidden; }
| |
| | |
| .show-child-on-hover .child-on-hover {
| |
| visibility: hidden; }
| |
| | |
| .show-child-on-hover:hover .child-on-hover {
| |
| visibility: visible; }
| |
| | |
| .sr5 {
| |
| /**
| |
| * Overwrite FoundryVTT default styling within sheets.
| |
|
| |
| /**
| |
| * Elements used for inline editing
| |
|
| |
| /**
| |
| * Elements used for linkable documents / entities.
| |
| *
| |
| * This is also present in foundry.scss, but is overwritten by Monks Enhanced Journals module.
| |
| * Let's force it within the SR5 context, while leaving it everywhere else.
| |
|
| |
| /** CSS for the Environmental Modifier Application Window
| |
| *
| |
|
| |
| /** Input element for inventory name editing }
| |
| .sr5 hr {
| |
| border-color: #ebb531; }
| |
| .sr5 select.display, .sr5 select {
| |
| color: white;
| |
| background: rgba(0, 0, 0, 0.05);
| |
| border-radius: 0.3em;
| |
| border-color: #4d4d4d; }
| |
| .sr5 select.display > option, .sr5 select > option {
| |
| background-color: #4d4d4d; }
| |
| .sr5 .form-group label {
| |
| font-weight: bold; }
| |
| .sr5 .form-group input {
| |
| color: white; }
| |
| .sr5 .form-group .form-group-element-numerical {
| |
| display: flex;
| |
| flex-direction: row; }
| |
| .sr5 .form-group .form-group-element-numerical button {
| |
| border-color: grey; }
| |
| .sr5 .form-group .form-group-element-numerical button,
| |
| .sr5 .form-group .form-group-element-numerical input {
| |
| width: 25px;
| |
| height: 25px;
| |
| line-height: inherit;
| |
| vertical-align: middle;
| |
| text-align: center; }
| |
| .sr5 .inline-input-inventory {
| |
| display: none; }
| |
| .sr5 .entity-link,
| |
| .sr5 .content-link,
| |
| .sr5 .inline-roll {
| |
| border: 0;
| |
| background: none;
| |
| color: white !important; }
| |
| .sr5 .entity-link.content-link {
| |
| color: white !important; }
| |
| .sr5 .origin-link {
| |
| background: #DDD;
| |
| padding: 1px 4px;
| |
| border: 1px solid #4b4a44;
| |
| border-radius: 2px;
| |
| white-space: nowrap;
| |
| word-break: break-all;
| |
| color: black; }
| |
| .sr5 .roll:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5 .editor {
| |
| height: 95%;
| |
| width: 100%; }
| |
| .sr5 .editor .tox-edit-area {
| |
| background: #939393; }
| |
| .sr5 .editor.prosemirror .pm-dropdown {
| |
| color: white;
| |
| background: rgba(0, 0, 0, 0.05);
| |
| border-radius: 0.3em;
| |
| border-color: #4d4d4d; }
| |
| .sr5 .editor.prosemirror .pm-dropdown i,
| |
| .sr5 .editor.prosemirror .pm-dropdown i:hover {
| |
| color: white; }
| |
| .sr5 .editor.prosemirror .pm-dropdown ul {
| |
| background-color: #4d4d4d; }
| |
| .sr5 .editor.prosemirror .pm-dropdown ul > li:hover {
| |
| color: white;
| |
| border-color: rgba(255, 255, 255, 0.1);
| |
| background: rgba(0, 0, 0, 0.05); }
| |
| .sr5 .editor.prosemirror textarea {
| |
| color: white; }
| |
| .sr5 .full-height {
| |
| height: 100%; }
| |
| .sr5 .parts-list {
| |
| font-size: 12px;
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| justify-content: center;
| |
| align-items: center; }
| |
| .sr5 .parts-list.vertical {
| |
| flex-flow: column nowrap;
| |
| justify-content: flex-end;
| |
| align-items: flex-end; }
| |
| .sr5 .parts-list .part {
| |
| white-space: nowrap; }
| |
| .sr5 .parts-list .part .value {
| |
| font-weight: bold; }
| |
| .sr5 .parts-list .part.underline {
| |
| text-decoration: underline; }
| |
| .sr5 .parts-list > * {
| |
| margin: 0 0.5em; }
| |
| .sr5 .no-break {
| |
| white-space: nowrap; }
| |
| .sr5 .window-content {
| |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("assets/page.webp") repeat;
| |
| color: white;
| |
| overflow: hidden;
| |
| border: 1px solid #222;
| |
| border-top: 0px; }
| |
| .sr5 .description > .editor {
| |
| height: 100%;
| |
| min-height: 15em;
| |
| width: 100%;
| |
| color: white; }
| |
| .sr5 .scroll-area {
| |
| height: 100%;
| |
| margin-bottom: 0.5em;
| |
| flex: 1;
| |
| overflow-y: auto; }
| |
| .sr5 img {
| |
| box-sizing: border-box;
| |
| border: 1px solid var(--color-border-dark);
| |
| border-radius: 2px;
| |
| max-width: 100%;
| |
| object-fit: contain; }
| |
| .sr5 .profile-img {
| |
| padding: 0.25em;
| |
| max-width: 100px; }
| |
| .sr5 .tabs {
| |
| flex: 0;
| |
| align-items: stretch;
| |
| border-bottom: 1px solid #ebb531; }
| |
| .sr5 .tabs > a {
| |
| margin: 0.25em;
| |
| padding: 0.25em;
| |
| margin-bottom: 0;
| |
| position: relative;
| |
| font-size: 1.15em; }
| |
| .sr5 .tabs > a:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5 .tabs > a.active {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| color: white;
| |
| background: rgba(230, 230, 230, 0.1); }
| |
| .sr5 .tabs > .item {
| |
| flex: 1;
| |
| text-align: center; }
| |
| .sr5 .tab {
| |
| height: 100%; }
| |
| .sr5 .tab .tabbody {
| |
| height: 100%;
| |
| display: flex;
| |
| flex-flow: column nowrap; }
| |
| .sr5 .tab .tabbody > * {
| |
| flex: 0; }
| |
| .sr5 .tab .tabbody > .inventory {
| |
| flex: 1; }
| |
| .sr5 .split-container {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: center;
| |
| align-items: stretch;
| |
| align-content: stretch;
| |
| height: 100%; }
| |
| .sr5 .split-container > * {
| |
| flex: 1;
| |
| width: 100%; }
| |
| .sr5 .split-container > *:not(:first-child) {
| |
| margin-left: 0.25em; }
| |
| .sr5 .split-container > *:not(:last-child) {
| |
| border-right: 1px solid #4d4d4d;
| |
| padding-right: 0.25em; }
| |
| .sr5 .container {
| |
| max-width: 690px;
| |
| margin: 0 auto; }
| |
| .sr5 .container--fluid {
| |
| margin: 0;
| |
| max-width: 100%; }
| |
| .sr5 .container__row {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| width: 100%; }
| |
| .sr5 .container__col-1 {
| |
| flex-basis: 8.33333%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-2 {
| |
| flex-basis: 16.66667%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-3 {
| |
| flex-basis: 25%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-4 {
| |
| flex-basis: 33.33333%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-5 {
| |
| flex-basis: 41.66667%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-6 {
| |
| flex-basis: 50%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-7 {
| |
| flex-basis: 58.33333%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-8 {
| |
| flex-basis: 66.66667%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-9 {
| |
| flex-basis: 75%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-10 {
| |
| flex-basis: 83.33333%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-11 {
| |
| flex-basis: 91.66667%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-12 {
| |
| flex-basis: 100%;
| |
| overflow: hidden; }
| |
| .sr5 .container__col-half {
| |
| flex-basis: 50%;
| |
| overflow: hidden; }
| |
| .sr5 .container .element {
| |
| padding: 4px; }
| |
| .sr5 .document {
| |
| overflow: hidden;
| |
| white-space: nowrap;
| |
| display: flex;
| |
| align-content: center; }
| |
| .sr5 .document img {
| |
| height: 34px; }
| |
| .sr5 .document * {
| |
| display: inline-block; }
| |
| .sr5 .block {
| |
| display: flex;
| |
| flex-flow: column;
| |
| padding: 2px 4px;
| |
| justify-content: space-around; }
| |
| .sr5 .block .block-line {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| padding: 4px; }
| |
| .sr5 .block .block-line.center {
| |
| justify-content: center; }
| |
| .sr5 .block .block-line.border-bottom {
| |
| border-bottom: 1px solid #4d4d4d; }
| |
| .sr5 .block .block-line.gap-4 > :not(:first-child) {
| |
| margin-left: 4px; }
| |
| .sr5 .block .block-line.gap-4 > :not(:last-child) {
| |
| margin-right: 4px; }
| |
| .sr5 .horizontal-cell-input {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: start;
| |
| padding: 4px; }
| |
| .sr5 .horizontal-cell-input.stun .cell {
| |
| box-shadow: 0 0 5px 1px rgba(0, 0, 255, 0.5); }
| |
| .sr5 .horizontal-cell-input.physical .cell {
| |
| box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.5); }
| |
| .sr5 .horizontal-cell-input.edge .cell {
| |
| box-shadow: 0 0 5px 1px rgba(199, 176, 2, 0.5); }
| |
| .sr5 .horizontal-cell-input.matrix .cell {
| |
| box-shadow: 0 0 5px 1px rgba(7, 145, 35, 0.5); }
| |
| .sr5 .horizontal-cell-input .roll {
| |
| width: 60px;
| |
| margin-right: 8px; }
| |
| .sr5 .horizontal-cell-input .cell-container {
| |
| display: flex;
| |
| flex-flow: row;
| |
| justify-content: stretch; }
| |
| .sr5 .horizontal-cell-input .cell-container .cell {
| |
| cursor: pointer;
| |
| text-align: center;
| |
| font-size: 80%;
| |
| border: 1px solid #4d4d4d;
| |
| color: #b3b3b3;
| |
| border-radius: 4px;
| |
| background: black;
| |
| min-width: 26px;
| |
| height: 18px; }
| |
| .sr5 .horizontal-cell-input .cell-container .cell:not(:first-child) {
| |
| margin-left: 2px; }
| |
| .sr5 .horizontal-cell-input .cell-container .cell:not(:last-child) {
| |
| margin-right: 2px; }
| |
| .sr5 .horizontal-cell-input .cell-container .cell.filled {
| |
| background: #b3b3b3;
| |
| border-color: black;
| |
| color: black; }
| |
| .sr5 .horizontal-cell-input .cell-container .cell:hover {
| |
| border-color: #e6e6e6; }
| |
| .sr5 .inventory {
| |
| overflow-y: hidden;
| |
| height: 100%;
| |
| width: 100%;
| |
| display: flex;
| |
| flex-flow: column nowrap; }
| |
| .sr5 .list-header,
| |
| .sr5 .list-item {
| |
| font-size: 85%;
| |
| padding: 0.1em 0.25em;
| |
| min-height: 26px;
| |
| margin: 0.1em;
| |
| margin-right: 1px;
| |
| margin-left: 1px; }
| |
| .sr5 .list-header .has-desc:hover,
| |
| .sr5 .list-item .has-desc:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5 .list-header.no-border,
| |
| .sr5 .list-item.no-border {
| |
| border-bottom: none; }
| |
| .sr5 .list-header.center,
| |
| .sr5 .list-item.center {
| |
| justify-content: center; }
| |
| .sr5 .list-header.space-evenly,
| |
| .sr5 .list-item.space-evenly {
| |
| justify-content: space-evenly; }
| |
| .sr5 .list-header.item-section,
| |
| .sr5 .list-item.item-section {
| |
| background: black;
| |
| color: #ebb531;
| |
| margin-right: 0;
| |
| margin-left: 0;
| |
| border-bottom: 1px solid #ebb531;
| |
| border-radius: 0.2em;
| |
| padding-top: 5px; }
| |
| .sr5 .list-header.item-section.faded,
| |
| .sr5 .list-item.item-section.faded {
| |
| color: grey; }
| |
| .sr5 .list-header .list-item-content,
| |
| .sr5 .list-item .list-item-content {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| align-content: center; }
| |
| .sr5 .list-header .list-item-content .item-center,
| |
| .sr5 .list-item .list-item-content .item-center {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| align-items: center;
| |
| align-self: center; }
| |
| .sr5 .list-header .list-item-content .item-left,
| |
| .sr5 .list-item .list-item-content .item-left {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: flex-start;
| |
| align-items: center; }
| |
| .sr5 .list-header .list-item-content .item-right,
| |
| .sr5 .list-item .list-item-content .item-right {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: flex-end;
| |
| align-items: center; }
| |
| .sr5 .list-header .list-item-content .item-img,
| |
| .sr5 .list-item .list-item-content .item-img {
| |
| padding-right: 0.25em;
| |
| max-width: 50px; }
| |
| .sr5 .list-header .list-item-content .item-img.item-roll:hover,
| |
| .sr5 .list-item .list-item-content .item-img.item-roll:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5 .list-header .list-item-content .item-img.item-roll:hover > img,
| |
| .sr5 .list-item .list-item-content .item-img.item-roll:hover > img {
| |
| content: url("assets/dice-solid.svg");
| |
| filter: invert(1); }
| |
| .sr5 .list-header .list-item-content .item-img > img,
| |
| .sr5 .list-item .list-item-content .item-img > img {
| |
| margin: 0;
| |
| transform: translateY(10%); }
| |
| .sr5 .list-header .list-item-content .item-img + .item-name,
| |
| .sr5 .list-item .list-item-content .item-img + .item-name {
| |
| border-left: none !important; }
| |
| .sr5 .list-header .list-item-content .item-input,
| |
| .sr5 .list-item .list-item-content .item-input {
| |
| width: 9.5em; }
| |
| .sr5 .list-header .list-item-content .item-icons,
| |
| .sr5 .list-item .list-item-content .item-icons {
| |
| display: flex;
| |
| flex-flow: row nowrap;
| |
| justify-content: space-evenly;
| |
| align-items: center;
| |
| color: grey;
| |
| font-size: 12px;
| |
| height: 100%; }
| |
| .sr5 .list-header .list-item-content .item-text,
| |
| .sr5 .list-item .list-item-content .item-text {
| |
| width: 6em;
| |
| margin: 0 0.1rem;
| |
| flex: 1 0 auto;
| |
| text-align: center;
| |
| height: 100%;
| |
| border: #e6e6e6; }
| |
| .sr5 .list-header .list-item-content .item-text.faded,
| |
| .sr5 .list-item .list-item-content .item-text.faded {
| |
| color: grey; }
| |
| .sr5 .list-header .list-item-content .item-text.center,
| |
| .sr5 .list-item .list-item-content .item-text.center {
| |
| display: flex;
| |
| flex-flow: row;
| |
| justify-content: space-around;
| |
| align-items: center;
| |
| align-content: center; }
| |
| .sr5 .list-header .list-item-content .item-text.item-name,
| |
| .sr5 .list-item .list-item-content .item-text.item-name {
| |
| text-align: left;
| |
| width: auto; }
| |
| .sr5 .list-header .list-item-content .item-text.element,
| |
| .sr5 .list-item .list-item-content .item-text.element {
| |
| width: 7em; }
| |
| .sr5 .list-header .list-item-content .item-text.radius,
| |
| .sr5 .list-item .list-item-content .item-text.radius {
| |
| width: 4em; }
| |
| .sr5 .list-header .list-item-content .item-text.dropoff,
| |
| .sr5 .list-item .list-item-content .item-text.dropoff {
| |
| width: 4em; }
| |
| .sr5 .list-header .list-item-content .item-text.rtg,
| |
| .sr5 .list-item .list-item-content .item-text.rtg {
| |
| width: 3em; }
| |
| .sr5 .list-header .list-item-content .item-text.rtg.active-skills-rating,
| |
| .sr5 .list-item .list-item-content .item-text.rtg.active-skills-rating {
| |
| padding-right: 1em; }
| |
| .sr5 .list-header .list-item-content .item-text.input,
| |
| .sr5 .list-item .list-item-content .item-text.input {
| |
| text-align: right;
| |
| width: 9.5em; }
| |
| .sr5 .list-header .list-item-content .item-text.desc,
| |
| .sr5 .list-item .list-item-content .item-text.desc {
| |
| width: 16em; }
| |
| .sr5 .list-header .list-item-content .skill-item,
| |
| .sr5 .list-item .list-item-content .skill-item {
| |
| width: 8em; }
| |
| .sr5 .list-header .list-item-content .skill-spec-item,
| |
| .sr5 .list-item .list-item-content .skill-spec-item {
| |
| width: 15em; }
| |
| .sr5 .list-header .list-item-content.skill-header:hover,
| |
| .sr5 .list-item .list-item-content.skill-header:hover {
| |
| text-shadow: 0 0 8px var(--color-shadow-primary);
| |
| cursor: pointer; }
| |
| .sr5 .list-item:nth-of-type(even) {
| |
| background: rgba(255, 255, 255, 0.03); }
| |
| .sr5 .list-item-description .item-desc {
| |
| padding: 0.25em;
| |
| font-size: 1em;
| |
| width: 100%; }
| |
| .sr5 .list-item-description .item-desc .props {
| |
| display: flex;
| |
| flex-flow: wrap row;
| |
| padding: 0.25em 0; }
| |
| .sr5 .list-item-description .item-desc .props > * {
| |
| flex-shrink: 0;
| |
| border-right: 1px solid #4d4d4d;
| |
| border-bottom: 1px solid #4d4d4d;
| |
| padding: 0.25em 0.5em;
| |
| margin: 0.1em 0.25em;
| |
| box-shadow: 0.2em 0.2em 0.3em black; }
| |
| .sr5 .list-item-description .item-desc .description {
| |
| margin: 0.5em 0.25em;
| |
| padding: 0.5em; }
| |
| .sr5 .modified-target-damage {
| |
| margin-top: 0.5em;
| |
| margin-bottom: 0.5em;
| |
| display: grid;
| |
| grid-template-columns: 40px auto auto; }
| |
| .sr5 .modified-target-damage .modified-target-damage-cell {
| |
| display: flex;
| |
| align-items: center;
| |
| margin-bottom: 0.15em; }
| |
| .sr5 .important {
| |
| font-weight: bold; }
| |
| .sr5 button,
| |
| .sr5 button.display {
| |
| color: white;
| |
| border-color: black;
| |
| background: rgba(230, 230, 230, 0.1);
| |
| border-radius: 0.3em;
| |
| text-align: center; }
| |
| .sr5 button:hover,
| |
| .sr5 button.display:hover {
| |
| cursor: pointer; }
| |
| .sr5 button.short,
| |
| .sr5 button.display.short {
| |
| line-height: 1.3em; }
| |
| .sr5 button.light,
| |
| .sr5 button.display.light {
| |
| color: black;
| |
| background: #e6e6e6; }
| |
| .sr5 button.env-modifier {
| |
| text-align: left;
| |
| font-size: var(--font-size-13) !important;
| |
| line-height: normal;
| |
| padding-top: 5px;
| |
| padding-bottom: 5px; }
| |
| .sr5 .env-modifier-active {
| |
| border-radius: 8px;
| |
| box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f, -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
| |
| background-color: #414040; }
| |
| .sr5 .env-modifier-total {
| |
| font-weight: bold; }
| |
| .sr5 td.env-modifier-level {
| |
| padding-right: 6px; }
| |
| .sr5 .skill-roll-not-defaultable {
| |
| font-style: italic; }
| |
| .sr5 input#input-inventory {
| |
| width: auto; }
| |
| .sr5 .document-name {
| |
| font-family: "Signika", "Palatino Linotype", serif;
| |
| font-size: var(--font-size-18);
| |
| font-weight: bold; }
| |
| .sr5 .cell-input-roll {
| |
| color: #ebb531; }
| |
| | |
| /** Replicate Foundry .dialog stiling for flex row buttons. FormDialog sublcasses simply adding class dialog will
| |
| * otherwise cause issues with custom button styling.
| |
|
| |
| .form-dialog .window-content .dialog-buttons {
| |
| display: flex;
| |
| flex-direction: row;
| |
| flex-wrap: wrap; }
| |
| | |
| .form-dialog .window-content .dialog-buttons > * {
| |
| flex: 1; }
| |
| | |
| .far-right {
| |
| justify-content: center;
| |
| right: -150px; }
| |
| | |
| /*# sourceMappingURL=bundle.css.map */
| |
