Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 19:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
94e36d302894de95551cb5f70bd2b229ba9d280b
roll20-character-sheets/Talus/talus.css
T
Thomas 83ea3117f2 Improved styling 
Readability of inlineroles
Layout of Headlines
Dagger Dividers sizing
2023-12-08 15:21:43 +01:00

909 lines
26 KiB
CSS
Raw Blame History

/*------------------------------------------------*\
#GENERAL
\*------------------------------------------------*/
.ui-dialog .charsheet {
padding: 0px;
}
/* --------- Text ------------- */
span.bold{
font-weight: 800;
font-size: medium;
}
/* latin-ext */
@font-face {
font-family: 'Metamorphous';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/metamorphous/v20/Wnz8HA03aAXcC39ZEX5y133ENSqstTs.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Metamorphous';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/metamorphous/v20/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVIGxA.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: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4kaVIGxA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4saVIGxA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4jaVIGxA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4iaVIGxA.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4vaVIGxA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVIGxA.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@import url('https://fonts.googleapis.com/css?family=Metamorphous|Open+Sans:300;400;500;600;700;800&display=swap');
.ui-dialog .characterviewer label {
margin: 5px 0px 5px 0px;
font-size: 1.1em;
font-family: 'Metamorphous', cursive;
}
.ui-dialog .characterviewer h1,
.ui-dialog .characterviewer h2,
.ui-dialog .characterviewer h3,
.ui-dialog .characterviewer h4 {
font-family: 'Metamorphous', cursive;
}
.ui-dialog .characterviewer input,
.ui-dialog textarea,
.ui-dialog select
{
font-family: 'Open Sans';
}
.sheet-darkmode .characterviewer h2 {
color: var(--dark-primarytext);
}
.sheet-darkmode .characterviewer span {
color: var(--dark-secondarytext);
}
/* ------- Buttons ---------- */
button[type="roll"]:not(.small){
color: black;
height: 30px;
width: 30px;
margin-left: 15px;
}
button[type="roll"]:not(.small)::before{
font-size: 1.4em;
}
/*-----------------------------------------------------------------*\
#SECTIONS
\*-----------------------------------------------------------------*/
/* --------- General Section Styling ------------- */
.flex-center {
display: flex;
align-items: center;
}
.flex-middle {
display: flex;
justify-content: center;
}
.flex-down {
flex-flow: column nowrap;
}
.section {
padding: 5px;
min-height: 90%;
}
/* ----- Character Sheet Structure -------
'.main' defines the sheet's general structure and dimensions using CSS Grid.
It uses 'Grid template areas' to name each sheet section,
so that they can be positioned in the grid easily,
while also providing a human-readable overview. */
div.main {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
grid-template-rows: 0.2fr 1fr 0.2fr 0.8fr 0.2fr 0.7fr 0.2fr 1fr 1fr 0.2fr;
grid-template-areas:"header header"
"info-container info-container"
"divider-1 divider-1"
"skills skills"
"divider-2 divider-2"
"consequences consequences"
"divider-3 divider-3"
"items-persons-container items-persons-container"
"notes notes"
"footer footer";
grid-gap: 6px;
}
.sheet-darkmode .characterviewer div.main {
background: rgb(56, 56, 56);
}
/* Section-specific CSS is written in a way that removes the need to define classes
on each individual */
/* LOGO SECTION */
div.logo{
grid-area: logo;
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/talus_logo.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
}
/* Dice SECTION */
div.logo-dice{
grid-area: dicelogo;
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus_dice.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
}
/* Footer & Header */
div.footer{
grid-area: footer;
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-footer_light-mode.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
}
.sheet-darkmode div.footer{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-footer_dark-mode.png?raw=true);
}
div.header{
grid-area: header;
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-header_light-mode.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
}
.sheet-darkmode div.header{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-header_dark-mode.png?raw=true);
}
div.divider{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-ornament_light-mode.png?raw=true);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
border-right: none;
}
.sheet-darkmode div.divider{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-ornament_dark-mode.png?raw=true);
}
div.divider-1{
grid-area: divider-1;
}
div.divider-2{
grid-area: divider-2;
}
div.divider-3{
grid-area: divider-3;
}
div.dagger{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-dagger_light-mode.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
margin-left: 5px;
}
.sheet-darkmode div.dagger{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-dagger_dark-mode.png?raw=true);
}
/* Info Container */
div.info-container {
grid-area: info-container;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
grid-gap: 6px;
height: fit-content;
}
div.left-info-block {
display: grid;
grid-template-columns: minmax(0,1fr);
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 6px;
margin: auto;
}
div.right-info-block {
margin: auto;
width: 100%;
height: 100%;
}
div.talus-pnp-logo{
background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-pnp-logo.png?raw=true);
background-repeat: no-repeat;
background-size: contain;
display: flex;
justify-content:flex-end;
align-items:flex-end;
flex-flow: column;
background-position: center;
}
div.name{
margin-left: 15px;
}
div.circle{
margin-left: 15px;
}
div.campaign{
margin-left: 15px;
}
div.experience{
margin-left: 15px;
}
/* Skills SECTION */
div.skills-container {
grid-area: skills;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,0.1fr) minmax(0,1fr);
grid-gap: 6px;
height: fit-content;
}
div.skills-block-left,
div.skills-block-right {
display: grid;
grid-template-rows: 2fr 0.5fr 0.5fr 0.5fr;
grid-gap: 6px;
margin: auto;
}
div.skills-block {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
grid-gap: 6px;
}
.ui-dialog .charsheet button[type="roll"].talus-roll::before {
content: "";
}
/* Consequences SECTION */
div.consequences{
grid-area: consequences;
margin-left: 15px;
margin-right: 15px;
height: fit-content;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
grid-gap: 6px;
}
div.consequences > div {
display: grid;
grid-template-columns: minmax(0,0.2fr) minmax(0,0.8fr);
grid-gap: 6px;
}
/* Persons SECTION */
div.items-persons-container {
grid-area: items-persons-container;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,0.1fr) minmax(0,1fr);
grid-gap: 6px;
height: fit-content;
}
div.persons{
margin-left: 15px;
margin-right: 15px;
}
/* Items SECTION */
div.items{
margin-left: 15px;
margin-right: 15px;
}
/* Notes SECTION */
div.notes{
grid-area: notes;
margin-left: 15px;
margin-right: 15px;
}
/* Custom Roll SECTION */
/* 1200 x 670 */
/* 280 x 156 */
.sheet-rolltemplate-talus {
background-image: url("https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-border_light-mode.png?raw=true");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 280px;
height: 156px;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode {
background-image: url("https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-border_dark-mode.png?raw=true");
}
.sheet-rolltemplate-talus .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
color: #000;
font-weight:bold;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode .inlinerollresult {
background-color: var(--el-fill-color);
}
.sheet-rolltemplate-talus div.sheet-talus-crit > span {
border: none;
color: green;
font-weight:bold;
}
.sheet-rolltemplate-talus div.sheet-talus-fumble > span {
border: none;
color: red;
font-weight:bold;
}
.sheet-rolltemplate-talus div.sheet-template-container-talus {
font-family: 'Metamorphous', cursive;
font-size: 1.0em;
text-align: center;
padding-top: 13px;
padding-left: 1px;
width: 278px;
height: 140px;
}
.sheet-rolltemplate-talus .sheet-template-header {
background: rgb(56, 56, 56);
background-clip: content-box;
color: var(--dark-primarytext);
padding: 2px;
border-bottom: 1px solid black;
line-height: 1.6em;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode .sheet-template-header {
background-color: rgba(112, 32, 130,1);
background-clip: content-box;
color: #000;
}
.sheet-rolltemplate-talus div,
.sheet-rolltemplate-talus span {
color: var(--dark-primarytext);
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div,
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode span {
color: #000;
}
.sheet-rolltemplate-talus > div {
padding: 5px;
border-bottom: 1px solid black;
}
.sheet-template-container-talus > div {
padding: 5px;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-talus div.sheet-template-header {
font-weight: bold;
font-size: 1.5em;
text-align: center;
padding: 5px;
}
.sheet-rolltemplate-talus div.sheet-result-row {
font-weight: bold;
font-size: 1.4em;
text-align: center;
padding: 5px;
font-family: 'Open Sans';
}
.sheet-rolltemplate-talus div.sheet-template-grid {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
text-align: center;
font-family: 'Open Sans';
}
.sheet-rolltemplate-talus div.sheet-template-grid span {
text-align: center;
}
.sheet-rolltemplate-talus div.sheet-template-grid > span:nth-child(1),
.sheet-rolltemplate-talus div.sheet-template-grid div {
border-right: 2px solid black;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div:nth-child(odd) {
background-color: white;
background-clip: content-box;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div:nth-child(even) {
background-color: rgba(233, 233, 233,1);
background-clip: content-box;
}
.sheet-rolltemplate-talus div:nth-child(odd) {
background-color: rgb(40, 40, 37,1);
background-clip: content-box;
}
.sheet-rolltemplate-talus div:nth-child(even) {
background-color: rgb(56, 56, 56,1);
background-clip: content-box;
}
Reference in New Issue View Git Blame Copy Permalink