mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-11 09:32:33 +00:00
523 lines
11 KiB
CSS
523 lines
11 KiB
CSS
/* cyrillic-ext */
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2)
|
|
format('woff2');
|
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
|
U+FE2E-FE2F;
|
|
}
|
|
/* cyrillic */
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2)
|
|
format('woff2');
|
|
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
|
}
|
|
/* greek */
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2)
|
|
format('woff2');
|
|
unicode-range: U+0370-03FF;
|
|
}
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2)
|
|
format('woff2');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2)
|
|
format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
|
U+FEFF, U+FFFD;
|
|
}
|
|
|
|
.sheet-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 70px auto auto 100px;
|
|
grid-gap: 4px;
|
|
grid-template-areas:
|
|
'logo logo logo logo'
|
|
'info info info stats'
|
|
'approaches approaches elements elements'
|
|
'credits credits credits credits';
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 800px;
|
|
min-height: 600px;
|
|
background: #15131e;
|
|
}
|
|
/** main logo css */
|
|
|
|
.sheet-head-element {
|
|
grid-area: logo;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
span.sheet-logo-image {
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/See%20You%20In%20Hell/img/logo_eng_rgb.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
width: 252px;
|
|
height: 68px;
|
|
}
|
|
|
|
span.sheet-logo-image.lang-ru {
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/See%20You%20In%20Hell/img/logo_ru_rgb.png);
|
|
width: 252px;
|
|
height: 68px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.sheet-shg-logo-img {
|
|
left: 0;
|
|
width: 160px;
|
|
height: 100px;
|
|
display: block;
|
|
}
|
|
/*
|
|
grid areas
|
|
*/
|
|
.sheet-hero-info {
|
|
grid-area: info;
|
|
}
|
|
|
|
.sheet-hero-stats {
|
|
/* display: block; */
|
|
grid-area: stats;
|
|
}
|
|
|
|
.sheet-hero-approaches {
|
|
grid-area: approaches;
|
|
}
|
|
|
|
.sheet-hero-elements {
|
|
grid-area: elements;
|
|
}
|
|
|
|
.sheet-credits {
|
|
grid-area: credits;
|
|
}
|
|
|
|
/** sections */
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
}
|
|
.sheet-inline-info {
|
|
display: inline-block;
|
|
width: 95%;
|
|
padding: 10px;
|
|
}
|
|
/** inputs */
|
|
.sheet-input-label {
|
|
display: block;
|
|
color: #7aa3aa;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
|
|
.sheet-input-wrapper {
|
|
background-color: transparent;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-input-name {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid #7aa3aa;
|
|
font-size: 18px;
|
|
color: #c43327;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 32px;
|
|
font-family: 'Press Start 2P';
|
|
/** carret */
|
|
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
|
|
}
|
|
.sheet-input-name:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sheet-input-name::-webkit-input-placeholder {
|
|
color: #7aa3aa;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
|
|
.sheet-input-name:focus::-webkit-input-placeholder {
|
|
color: #c43327;
|
|
}
|
|
|
|
.sheet-input-name:focus + .sheet-input-underline {
|
|
transform: scale(1);
|
|
}
|
|
.sheet-input-underline {
|
|
background-color: #c43327;
|
|
display: inline-block;
|
|
height: 2px;
|
|
margin-top: -4px;
|
|
-webkit-transform: scale(0, 1);
|
|
transform: scale(0, 1);
|
|
-webkit-transition: all 0.5s linear;
|
|
transition: all 0.5s linear;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/** wounds */
|
|
|
|
.sheet-inline-stats {
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 10px;
|
|
width: 100%;
|
|
}
|
|
.sheet-checkbox-group {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-stats-label {
|
|
text-align: center;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
|
|
.sheet-number-input {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
width: 50px !important;
|
|
height: 42px !important;
|
|
border: solid 1px #c43327;
|
|
color: #c43327;
|
|
border-radius: 0;
|
|
vertical-align: bottom !important;
|
|
line-height: 25px;
|
|
padding: 0px 5px 0px 5px;
|
|
background-color: transparent;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
|
|
input.sheet-number-input[type='number'] {
|
|
-webkit-appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
pointer-events: none;
|
|
vertical-align: bottom;
|
|
}
|
|
input.sheet-number-input[type='number']::-webkit-inner-spin-button,
|
|
input.sheet-number-input[type='number']::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
pointer-events: none;
|
|
vertical-align: bottom;
|
|
margin: 0;
|
|
}
|
|
.sheet-input-button-group {
|
|
clear: both;
|
|
margin: 15px 0;
|
|
position: relative;
|
|
}
|
|
.sheet-input-button {
|
|
border: 1px solid #c43327;
|
|
background-color: #15131e;
|
|
height: 40px;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
padding: 0 !important;
|
|
font-size: x-large;
|
|
color: #c43327;
|
|
font-family: 'Press Start 2P';
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
}
|
|
.sheet-input-button:hover {
|
|
color: #15131e;
|
|
background-color: #da8127;
|
|
}
|
|
.sheet-input-button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/** inline approaches label */
|
|
.sheet-inline-approaches-label {
|
|
display: flex;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: #7aa3aa;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
|
|
.sheet-inline-approaches-label::before,
|
|
.sheet-inline-approaches-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid #7aa3aa;
|
|
}
|
|
|
|
.sheet-inline-approaches-label:not(:empty)::before {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.sheet-inline-approaches-label:not(:empty)::after {
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
/** approaches */
|
|
.sheet-inline-approaches {
|
|
display: table;
|
|
text-align: center;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin: auto;
|
|
}
|
|
|
|
/** approaches */
|
|
|
|
/** checkbox */
|
|
/* The switch - the box around the slider */
|
|
.sheet-approaches-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 25px;
|
|
margin: 15px 15px 15px 15px;
|
|
display: table-cell;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.sheet-approaches-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The slider */
|
|
.sheet-approaches-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #c43327; /*#ccc;*/
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.sheet-approaches-slider:before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 25px;
|
|
width: 25px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
padding-top: 2px;
|
|
padding-left: 2px;
|
|
font-size: x-large;
|
|
text-align: center;
|
|
background-color: #15131e;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.sheet-approaches-input:checked + .sheet-approaches-slider {
|
|
background-color: #c43327;
|
|
}
|
|
|
|
.sheet-approaches-input:focus + .sheet-approaches-slider {
|
|
box-shadow: 0 0 1px #c43327;
|
|
}
|
|
|
|
.sheet-approaches-input:checked + .sheet-approaches-slider:before {
|
|
-webkit-transform: translateX(35px);
|
|
-ms-transform: translateX(35px);
|
|
transform: translateX(35px);
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.sheet-approaches-slider.sheet-approaches-round {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.sheet-approaches-slider.sheet-approaches-round:before {
|
|
border-radius: 0;
|
|
height: 25px;
|
|
margin-bottom: 6px;
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
width: 25px;
|
|
}
|
|
|
|
/** button */
|
|
|
|
div .sheet-approaches-button.sheet-approaches-danger {
|
|
border: #c43327 solid 1px;
|
|
background-color: inherit;
|
|
padding: 14px 10px;
|
|
font-size: 10px;
|
|
width: 13em;
|
|
cursor: pointer;
|
|
display: inline-block !important;
|
|
font-family: 'Press Start 2P';
|
|
border-radius: 0;
|
|
text-shadow: initial;
|
|
box-shadow: initial;
|
|
margin-left: -3px;
|
|
margin-right: -3px;
|
|
}
|
|
div .sheet-approaches-button.sheet-approaches-danger::before {
|
|
display: none;
|
|
}
|
|
|
|
div .sheet-approaches-button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* On mouse-over */
|
|
div .sheet-approaches-button.sheet-approaches-danger:hover {
|
|
/* background: #7aa3aa ; */
|
|
background: #da8127;
|
|
color: #15131e;
|
|
}
|
|
div .sheet-approaches-button.sheet-approaches-danger {
|
|
background: transparent;
|
|
color: #c43327;
|
|
}
|
|
|
|
/** wounds checkbox */
|
|
.sheet-checkbox-container {
|
|
display: inline;
|
|
position: relative;
|
|
padding-left: 25px;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.sheet-checkbox-container:hover
|
|
.sheet-checkbox-input
|
|
~ .sheet-checkbox-checkmark {
|
|
/* background-color: #ccc; */
|
|
background-color: #da8127;
|
|
}
|
|
|
|
.sheet-checkbox-container
|
|
.sheet-checkbox-input:checked
|
|
~ .sheet-checkbox-checkmark {
|
|
background-color: #c43327;
|
|
height: 26px;
|
|
width: 26px;
|
|
/* border: solid 2px #7aa3aa; */
|
|
border: solid 2px #da8127;
|
|
}
|
|
|
|
.sheet-checkbox-input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.sheet-checkbox-checkmark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 30px;
|
|
width: 30px;
|
|
background-color: #7aa3aa;
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.sheet-checkbox-checkmark:after {
|
|
content: '';
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.sheet-checkbox-container
|
|
.sheet-checkbox-input:checked
|
|
~ .sheet-checkbox-checkmark:after {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
|
|
.sheet-checkbox-container .sheet-checkbox-checkmark:after {
|
|
content: '✖';
|
|
color: #da8127;
|
|
font-size: large;
|
|
padding-top: 7px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.sheet-inline-elements-container {
|
|
text-align: center;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin: auto;
|
|
}
|
|
|
|
.sheet-elements-textarea {
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
border: solid 1px #c43327;
|
|
color: #c43327;
|
|
width: 100%;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: stretch;
|
|
resize: none;
|
|
font-family: 'Press Start 2P';
|
|
}
|
|
.sheet-elements-textarea:focus {
|
|
outline: none;
|
|
}
|