Files
roll20-character-sheets-tester/Symbaroum/symbaroum.scss
T
Cassie Levett 3098728180 Symbaroum v2.11 (#5520)
* fix defense

* fix CSS bug
2019-10-07 11:07:31 -05:00

851 lines
19 KiB
SCSS

/* COLORS
============================= */
@import 'src/scss/_colors';
// REPEATING SECTIONS
//=============================
@import 'src/scss/_repcontrol';
/* SWITCHES
============================= */
@import 'src/scss/_globals';
/* SWITCHES
============================= */
@import 'src/scss/_switch';
/* GRID
============================= */
div.sheet-grid {
display: inline-grid;
grid-column-gap: 1%;
}
/* GENERIC STYLES
============================= */
.sheet-border-bottom { border-bottom: 0.15em solid $maincolor; }
.sheet-center { text-align: center; }
.sheet-background-color {background-color: rgba(1,1,1,0.71);}
.sheet-dashed {
border: 3px dashed rgba(1,1,1,0.71);
}
/* PC
============================= */
div.sheet-pc {
background-color: rgba(1, 1, 1, 0.71);
grid-column-gap: 0.1%;
grid-row-gap: 1%;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
padding-bottom: 10%;
width: 100%;
/* CHARACTER INFO
----------------------------- */
div.sheet-character-info {
grid-template-columns: 22em 2fr 3fr 2fr 1fr 1fr;
grid-area: 1 / 1 / 1 / 3;
label {
grid-row: 1;
}
span {
grid-row: 2;
}
}
/* CHARACTER QUOTE
----------------------------- */
div.sheet-character-quote {
grid-template-columns: 1fr 90% 1fr;
grid-column: 1 / 2;
input[type="text"] {
font-style: italic;
}
label {
grid-column: 2 / 3;
font-style: italic;
}
span.sheet-quote {
transform: rotate(180deg);
position: relative;
font-size:3em;
&:nth-of-type(1) {
transform: rotate(360deg);
top: -20%
}
&:nth-of-type(2) {
transform: rotate(180deg);
top: -20%;
}
}
}
/* CHARACTER SHAOOW
----------------------------- */
div.sheet-character-shadow { grid-column: 2 / 3; }
/* TABS
----------------------------- */
div.sheet-tabs {
grid-column: 1 / 4;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 5px solid $dark;
@for $i from 1 through 4 {
input.sheet-tab:nth-of-type(#{$i}),
span.sheet-tab:nth-of-type(#{$i}) {
grid-row: 1;
grid-column: #{$i} / #{$i};
}
}
}
/* TOUGHNESS & CORRUPTION SHARED STYLES
----------------------------- */
div.sheet-tough-corr-row {
margin: 0px 20%;
label { grid-row: 2; }
span { grid-row: 3; }
}
/* TOUGHNESS
----------------------------- */
div.sheet-toughness {
grid-column: 1 / 2;
grid-template-columns: 1fr 1fr 1fr;
h1 { grid-area: 1 / 1 / 1 / 4; }
}
/* CORRUPTION
----------------------------- */
div.sheet-corruption {
grid-column: 2 / 3;
grid-template-columns: 5em 1fr 1fr 1fr;
button[type="roll"] {
grid-row: 2;
background-image:url(http://i.imgur.com/MC61Qmt.png?1);
background-position: center;
height: 1.5em;
&:before {
display: none;
}
}
h1 { grid-area: 1 / 1 / 1 / 5; }
select { grid-row: 3; }
}
/* ATTRIBUTES
----------------------------- */
div.sheet-attributes {
grid-column: 1 / 3;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin-bottom: 2%;
input[type="number"] {
background: $accent1;
border-radius: 3em;
border: 3px solid $maincolor;
color: $dark;
font-size: 1.5em;
height: 3em;
text-align: center;
width: 3em;
grid-row: 1;
margin-left: 15%;
padding: 0 .5em;
}
button {
background: rgba(16, 32, 48, 0.78);
grid-row: 2;
height:1.5em;
overflow: hidden;
text-align:center;
font-size: 1.3em;
border-bottom: 2px solid $accent2;
border-right: 2px solid $accent2;
color: $accent1;
text-shadow: 1px 1px 2px $maincolor, 0 0 25px $accent2, 0 0 5px $accent2;
&:before {
display: none;
}
span {
box-shadow: 3px 3px 2px $gray inset, -3px -3px 1px $accent2 inset;
padding: .5em 0;
}
}
}
/* ATTACKS & DEFENSE SHARED STYLES
----------------------------- */
div.sheet-attacks,
div.sheet-defense {
grid-column: 1 / 3;
button[type="roll"] {
background-position:center;
background-repeat:no-repeat;
height:100%;
width:100%;
&:before {
display: none;
}
}
div.sheet-section-header {
h1 {
grid-row: 1;
}
h2 {
grid-row: 1;
border-top-left-radius: 3em;
border-top-right-radius: 3em;
}
h3 {
grid-row: 3;
}
}
}
/* ATTACKS
----------------------------- */
div.sheet-attacks {
h1 {
grid-column: 1 / 6;
}
h2 {
grid-column: 6 / 9;
}
button[type="roll"] {
background-image:url(http://i.imgur.com/EPH4536.png);
}
div.sheet-section-header,
div.sheet-section-body {
grid-template-columns: 2.5em 15em 8em 5em 1fr 5em 5em 5em;
width: 100%;
}
}
/* DEFENSE
----------------------------- */
div.sheet-defense {
h1 {
grid-column: 1 / 7;
}
h2 {
grid-column: 7 / 10;
}
button[type="roll"] {
background-image:url(http://i.imgur.com/QFy0qCe.png?);
}
div.sheet-section-header,
div.sheet-section-body {
grid-template-columns: 2.5em 15em 4em 8em 5em 1fr 4em 5em 5em;
width: 100%;
}
}
/* TRAITS & ABILITIES
----------------------------- */
div.sheet-section-pc2 {
grid-column: 1 / 3;
div.sheet-left-side,
div.sheet-right-side {
display: inline-block;
vertical-align: top;
width: 48%;
}
div.sheet-left-side {
margin-right: 2%;
}
}
div.sheet-traits,
div.sheet-abilities {
margin: 0px 5%;
grid-template-rows: min-content;
width: 100%;
button[type=roll] {
color: $dark;
&:before {
display: block;
}
}
h1 { grid-area: 1 / 1 / 1 / 4; }
label.sheet-long { grid-column: 2 / 7; }
select[name*="attribute"] { grid-column: 1 / 3; }
input[type="text"][name*="type"] { grid-column: 3 / 5; }
textarea { grid-column: 1 / 7; }
div.sheet-section-body {
margin-bottom: 2%;
}
div.sheet-section-header {
max-height: 2.5em;
}
}
div.sheet-traits,
div.sheet-abilities {
div.sheet-section-header,
div.sheet-section-body {
grid-template-columns: 2.5em 1fr 1fr 1fr 1fr 1fr;
width: 98%;
}
}
div.sheet-boon,
div.sheet-burdens {
margin: 0px 5%;
grid-template-rows: min-content;
width: 100%;
div.sheet-section-header,
div.sheet-section-body {
grid-template-columns: 1fr 1fr 1fr 1fr;
label:nth-of-type(1) {
grid-row: 1;
grid-column: 1 / 5;
}
}
textarea { grid-column: 1 / 5; }
}
/* TRAITS
----------------------------- */
div.sheet-traits,
div.sheet-boon {
grid-column: 1 / 2;
}
/* ABILITIES
----------------------------- */
div.sheet-abilities,
div.sheet-burdens {
grid-column: 2 / 3;
}
div.sheet-section-pc3,
div.sheet-section-pc4 {
grid-column: 1 / 3;
}
div.sheet-section-pc3 {
select {
width: 15%;
}
}
}
/* OLD CSS
============================= */
/*** Background ***/
.sheet-col-small {
text-align: center;
min-width: 5em;
}
.sheet-col-medium {
text-align: center;
min-width: 6em;
}
.sheet-row >div{
display:inline-block;
}
.sheet-row {
padding:0 30px 10px 30px;
}
.sheet-2colrow >.sheet-col{
margin:10px !important;
}
/*** Font ***/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #fafafa;
background-color: transparent;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fafafa;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fafafa;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fafafa;
}
/*** Pages ***/
.sheet-row div[class^="repcontrol"]{
padding:1em;
}
input.sheet-tab {
width: 100%;
height: 23px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
vertical-align:top;
}
span.sheet-tab {
text-align: center;
display: inline-block;
padding-left: 3px;
padding-right: 3px;
height: 23px;
cursor: pointer;
position: relative;
margin-top: 0px;
color: #FAFAFA;
border-radius: 5px 5px 0px 0px;
font-size: 12px;
box-shadow: 2px 2px 5px #FAFAFA inset,-2px -2px 5px #202020 inset;
vertical-align:top;
background-color: #303030;
}
input.sheet-tab::before {
display: inline-block;
margin-top:-30px;
content: attr(title);
text-align: center;
width: 100%;
height: 100%;
}
input.sheet-tab:checked::before {
background: #4E686A;
color:blue;
}
/* Next section makes a page visible when the tab is clicked */
div.sheet-section-pc1,
div.sheet-section-pc2,
div.sheet-section-pc3,
div.sheet-section-pc4 {
display: none;
}
input.sheet-tab[value="1"] ~ div.sheet-pc div.sheet-section-pc1 {
display: inline-grid;
}
input.sheet-tab[value="1"] ~ div.sheet-pc div.sheet-section-pc2,
input.sheet-tab[value="2"] ~ div.sheet-pc div.sheet-section-pc2,
input.sheet-tab[value="3"] ~ div.sheet-pc div.sheet-section-pc3,
input.sheet-tab[value="4"] ~ div.sheet-pc div.sheet-section-pc4 {
display: inline-block;
}
input.sheet-tab:checked + span.sheet-tab {
box-shadow: -2px -2px 5px #FAFAFA inset, 2px 2px 5px #202020 inset;
opacity: 1;
}
label {
margin: 0;
padding:0;
text-align: left;
font-size: 1em;
font-weight: normal;
color: #D8D8D8 ;
}
input[type=radio]{
margin:0 5px 0 5px;
}
input[type=number] {
-moz-appearance: textfield;
}
input[type="number"].sheet-number-box-small {
border: 3px solid #004040;
padding:0 0 0 3px;
width:3.1em;
height:2em;
text-align: left;
vertical-align:middle;
border-radius:6px;
}
.sheet-roll {
width:25px;
height:25px;
border: 2px solid #004040;
border-radius: 6px;
}
input[type="checkbox"] {
border: 3px solid #004040;
color: #000000;
background: #FBFCFC;
border-radius:6px;
font-size: 12px;
box-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101;
}
textarea {
padding:3px;
box-sizing: border-box;
margin:0;
resize: vertical;
overflow:hidden;
display: block;
text-align: left;
border: 3px solid #004040;
color: #000000;
background: #FBFCFC;
border-radius:6px;
height:6.3em;
width:100%
}
input[name^="attr_friend"] {
width:48%;
}
.sheet-table fieldset,
.sheet-table {
display:table;
text-align:center;
}
.sheet-table >fieldset,
.sheet-table >div{
display:table-row;
width:75px;
}
.sheet-table fieldset >div,
.sheet-table >div >div {
display:table-cell;
vertical-align:bottom;
}
.sheet-table label {
text-align:center;
}
/*** Buttons ***/
button {
}
[class="btn repcontrol_edit"]{
}
/*** Roll Templates ***/
.sheet-rolltemplate-defense,
.sheet-rolltemplate-attack, .sheet-rolltemplate-attrib {
padding: 1px;
}
.sheet-rolltemplate-attack table {
font-family: "Georgia";
background-color: #a0a0a0;
background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
width: 100%;
border: 3px solid #7f0000;
}
.sheet-rolltemplate-attack th {
border-top:3px solid #7f0000;
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
font-weight:bold;
color:#7f0000;
}
.sheet-rolltemplate-attack td {
padding: 3px;
}
.sheet-rolltemplate-attack .sheet-attkhead {
border-bottom:3px solid #7f0000;
}
.sheet-rolltemplate-attack .sheet-attkcat {
text-align:right;
width: 50%;
}
.sheet-rolltemplate-attack .sheet-attkresult {
font-weight:bold;
text-align:left;
width: 50%;
padding-left: 5px;
}
.sheet-rolltemplate-attack .sheet-attkhit {
color:#007f00;
}
.sheet-rolltemplate-attack .sheet-attkmiss {
color:#7f0000;
}
.sheet-rolltemplate-attack .sheet-effex {
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
/* border-top:3px solid #7f0000; */
}
.sheet-rolltemplate-defense table {
font-family: "Georgia";
background-color: #a0a0a0;
background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
width: 100%;
border: 3px solid #00007f;
}
.sheet-rolltemplate-defense th{
border-top:3px solid #00007f;
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
font-weight:bold;
color:#00007f;
}
.sheet-rolltemplate-defense td {
padding: 3px;
}
.sheet-rolltemplate-defense .sheet-defhead {
border-bottom:3px solid #00007f;
}
.sheet-rolltemplate-defense .sheet-defcat {
text-align:right;
width: 50%;
}
.sheet-rolltemplate-defense .sheet-defresult {
font-weight:bold;
text-align:left;
width: 50%;
padding-left: 5px;
}
.sheet-rolltemplate-defense .sheet-defhit {
color:#7f0000;
}
.sheet-rolltemplate-defense .sheet-defmiss {
color:#007f00;
}
.sheet-rolltemplate-defense .sheet-effex {
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
/* border-top:3px solid #00007f; */
}
.sheet-rolltemplate-attrib table {
font-family: "Georgia";
background-color: #a0a0a0;
background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
width: 100%;
border: 3px solid #007f00;
}
.sheet-rolltemplate-attrib th{
border-top:3px solid #007f00;
border-bottom:3px solid #007f00;
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
color:#007f00;
}
.sheet-rolltemplate-attrib td {
padding: 3px;
}
.sheet-rolltemplate-attrib .sheet-attribhead {
}
.sheet-rolltemplate-attrib .sheet-attribcat {
text-align:right;
width: 50%;
}
.sheet-rolltemplate-attrib .sheet-attribresult {
font-weight:bold;
text-align:left;
width: 50%;
padding-left: 5px;
}
.sheet-rolltemplate-attrib .sheet-attribhit {
color:#007f00;
font-weight:bold;
}
.sheet-rolltemplate-attrib .sheet-attribmiss {
color:#7f0000;
font-weight:bold;
}
.sheet-rolltemplate-attrib .sheet-effex {
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
border-top:3px solid #007f00;
}
.sheet-rolltemplate-abilitycheck table {
font-family: "Georgia";
background-color: #a0a0a0;
background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
width: 100%;
border: 3px solid #cc6600;
}
.sheet-rolltemplate-abilitycheck th{
border-top:3px solid #cc6600;
border-bottom:3px solid #cc6600;
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
color:#cc6600;
}
.sheet-rolltemplate-abilitycheck td {
padding: 3px;
}
.sheet-rolltemplate-abilitycheck .sheet-attribhead {
}
.sheet-rolltemplate-abilitycheck .sheet-attribcat {
text-align:right;
width: 50%;
}
.sheet-rolltemplate-abilitycheck .sheet-attribresult {
font-weight:bold;
text-align:left;
width: 50%;
padding-left: 5px;
}
.sheet-rolltemplate-abilitycheck .sheet-attribhit {
color:#007f00;
font-weight:bold;
}
.sheet-rolltemplate-abilitycheck .sheet-attribmiss {
color:#7f0000;
font-weight:bold;
}
.sheet-rolltemplate-abilitycheck .sheet-effex {
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
border-top:3px solid #cc6600;
}
.sheet-rolltemplate-powercheck table {
font-family: "Georgia";
background-color: #a0a0a0;
background:url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
width: 100%;
border: 3px solid #9900ff;
}
.sheet-rolltemplate-powercheck th{
border-top:3px solid #9900ff;
border-bottom:3px solid #9900ff;
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
color: #9900ff;
}
.sheet-rolltemplate-powercheck td {
padding: 3px;
}
.sheet-rolltemplate-powercheck .sheet-attribhead {
}
.sheet-rolltemplate-powercheck .sheet-attribcat {
text-align:right;
width: 50%;
}
.sheet-rolltemplate-powercheck .sheet-attribresult {
font-weight:bold;
text-align:left;
width: 50%;
padding-left: 5px;
}
.sheet-rolltemplate-powercheck .sheet-attribhit {
color:#007f00;
font-weight:bold;
}
.sheet-rolltemplate-powercheck .sheet-attribmiss {
color:#7f0000;
font-weight:bold;
}
.sheet-rolltemplate-powercheck .sheet-effex {
background-color: #ffffff;
background:url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
text-align:center;
border-top:3px solid #9900ff;
}
.charsheet {
background-color:#000303 ;
background-image:url("http://i.imgur.com/XOomnMY.jpg?1");
background-repeat: no-repeat;
background-position: 0px 33px;
text-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101,
1px 1px 12px #000101, -1px -1px 12px #000101,1px -1px 12px #000101, -1px 1px 12px #000101;
color: #FAFAFA;
}
/*** Misc***/
[class^="sheet-faded"]{
background-color:rgba(0,0,0,.3);
display:inline;
border-radius:1em 1em 0 0 ;
}
.sheet-faded-nam {
vertical-align:middle;
width:76px;
padding:4px;
}
.sheet-faded-nam >div{
display:inline-block;
width:32%;
}
.sheet-faded-text {
vertical-align:middle;
padding:4px;
}
.sheet-label-row div,
.sheet-label-row label {
display:inline-block;
}
.sheet-label-row div > span{
margin-right:6px;
}
.sheet-label-large {
padding:0;
font-size:1.5em;
margin:0px 0px .5em 0px;
}
.sheet-row-with-labels div{
display:inline-block;
vertical-align:bottom;
}
.sheet-row-with-labels label{
text-align:center;
}
.sheet-ability-section {
width:360px;
display:inline-block;
padding:4px 4px 0 4px;
}
.sheet-attributes{
display:inline-block;
width:100%;
vertical-align:top;
height:80px;
border-radius:6px;
text-align:center;
}
.sheet-attributes > div{
display:inline-block;
padding-bottom:5px;
font-size:16px;
width:10.5%;
}
.charsheet * {
box-sizing: border-box;
font-family: "Georgia";
}