@import url("https://fonts.googleapis.com/css?family=Roboto:300|Roboto:400|Roboto:700|Exo:500|Exo:700|Exo:800|&display=swap"); /* Attributes */ .sheet-hidden { display: none; } .sheet-span2{ grid-column: span 2; } .sheet-span3{ grid-column: span 3; } .sheet-span4{ grid-column: span 4; } .sheet-mid{ text-align: center;} /* Overrides */ .charsheet{ padding:0px!important; } input[type=number] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } select, button[type=roll]:focus, button[type=action], button.repcontrol_edit{ outline: none; } select { -webkit-appearance: none; -moz-appearance: none; } textarea{ box-sizing: border-box; padding: 0.5em 0.5em; background: #EFEFEF; color: #363330; font-size:16px; line-height:24px; margin-bottom:0px; min-height:120px; resize: vertical; height: 200px; border-radius:0px; border: 0px none; } /* Wrapper */ .sheet-wrapper{ box-sizing: border-box; width: 100%; min-width: 848px; background: #000000; color: #555; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 24px; margin: 0px; padding: 2em 1em 4em; } /* Header and sheet toggle ========================================================================== */ .sheet-header{ text-align:center; } .sheet-toggle__wrapper{ margin:auto; display: flex; width: fit-content; } .sheet-toggle__wrapper label{ width:fit-content; position: relative; margin: 0; padding: 0; white-space: nowrap; } .sheet-toggle__wrapper input[type=radio] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sheet-toggle__wrapper span { width:100%; padding: 2px 8px; border: 2px solid #ffffff; color: #ffffff; font-family: "Exo", sans-serif; font-size: 12px; text-transform: uppercase; font-weight: 400; } .sheet-toggle__wrapper input[type=radio]:checked + span { color: #000000!important; background: #ffffff!important; } .sheet-toggle__wrapper input[type=radio]:hover + span { background: #555252; color: #ffffff; } .sheet-toggle__wrapper .sheet-button__left span{ border-radius: 4px 0px 0px 4px; border-right: 0px; } .sheet-toggle__wrapper .sheet-button__right span{ border-radius: 0px 4px 4px 0px; border-left: 1px; } div.sheet-page { /* max-width: 1080px; margin:auto; */ display: none; } .sheet-toggle__pc:checked ~ div.sheet-page__pc, .sheet-toggle__spaceship:checked ~ div.sheet-page__spaceship, .sheet-toggle__readme:checked ~ div.sheet-page__readme { max-width: 1080px; width:100%; margin:auto; display: block; } /* Grids ========================================================================== */ /* Generic */ .sheet-grid__1col{ display: grid; align-items: start; gap: 1em; } .sheet-grid__2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px 1px; } .sheet-grid__3col{ display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 1em; } .sheet-grid__4col{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: start; gap: 1em; } .sheet-grid__stat{ display: grid; grid-template-columns: 1fr 54px; } .sheet-grid__list{ display: grid; align-items: start; gap: 1px; } .sheet-grid__pc-weapons{ display:grid; grid-template-columns: 3.2fr 1.4fr 1.4fr 1.4fr 1.4fr 1.4fr 1.7fr 2.2fr 1.5fr 1fr; align-items: start; gap: 1px; } .sheet-grid__pc-armor{ display:grid; grid-template-columns: 4.2fr 1.5fr 10.3fr 1.5fr; align-items: start; gap: 1px; } .sheet-grid__pc-relationships-panel{ display:grid; grid-template-columns: 16fr 1.5fr; align-items: start; gap: 1px; } .sheet-grid__pc-relationships-row{ display:grid; grid-template-columns: 2fr 14fr 1.5fr; align-items: start; gap: 1px; } /* Spaceship Grids */ .sheet-grid__spaceship{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: start; gap: 1em; } .sheet-grid__generic-info{ display: grid; align-items: start; gap: 1px; } .sheet-grid__spaceship-class{ display:grid; grid-template-columns: 1fr 3fr; gap: 1px; } .sheet-grid__spaceship-sensors-dashboard{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 1px } .sheet-grid__spaceship-combat-manager{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px 16px; padding:16px } .sheet-grid__spaceship-crew{ display: grid; grid-template-columns: 1.5fr 4fr 2.5fr 2.5fr 54px; align-items: start; gap: 1px; } .sheet-grid__spaceship-crew-captain{ display: grid; grid-template-columns: 5.5fr 2.5fr 2.5fr 54px; align-items: start; gap: 1px; } .sheet-grid__spaceship-crew-gunner{ display: grid; grid-template-columns: 54px 4fr 3.25fr 3.25fr; align-items: start; gap: 1px; } .sheet-grid__spaceship-weapons{ display: grid; grid-template-columns: 4fr 1.5fr 1.5fr 1.5fr 1.5fr 3fr 1.5fr 54px; align-items: start; gap: 1px; } .sheet-grid__spaceship-generic{ display: grid; grid-template-columns: 9fr 3fr; align-items: start; gap: 1px; } /* Cards ========================================================================== */ .sheet-card, .sheet-card__alt{ border: 2px solid #555252; border-radius: 4px; background: #555252; overflow:hidden; } .sheet-card__alt{ background: transparent; } .sheet-card__panel{ min-height:40px; max-height:40px; color: #ffffff; background: #272626; text-transform: uppercase; white-space: nowrap; } .sheet-card__row{ min-height:40px; max-height:40px; background: #EFEFEF; color: #363330; overflow: hidden; } .sheet-card__panel span{ font-family:"Exo"; } .sheet-card__panel span, .sheet-card__row span{ margin: 8px; } .sheet-card__panel button[type=roll]{ color: #ffffff; } .sheet-card__panel input[type=number], .sheet-card__row input[type=number]{ width:40px; box-sizing: border-box; padding: 2px; margin: 4px auto; text-align: center; border: 2px solid #555252; color: #363330; font-size:16px; line-height:24px; /* background: url(https://i.imgur.com/pdPtjgE.png); padding: 0px; border: 0px none; */ } .sheet-card__panel-group{ width:100%; min-height:40px; max-height:40px; color: #ffffff; background: #272626; text-align:center; } .sheet-card__panel-group input[type=checkbox]{ margin: 10px; width: 20px; height: 20px; } .sheet-grid__spaceship-sensors-dashboard select{ -webkit-appearance: none; -moz-appearance: none; margin: 0; width: 100%; height: 100%; border: 0; border-radius: 0; text-align:center; text-align-last: center; background: #272626; font-size: 16px; color: #FFB931; } .sheet-grid__spaceship-sensors-dashboard span{ text-transform: uppercase; } .sheet-grid__spaceship-sensors-dashboard input[type=number]{ width:40px; box-sizing: border-box; padding: 2px; margin: 4px auto; text-align: center; border: 2px solid #555252; color: #363330; font-size:16px; line-height:24px; font-family: "Roboto", sans-serif!important; } span.sheet-signature{ font-size: 20px!important; } .sheet-grid__stat button[type=roll]{ margin: 0 !important; padding: 8px 0px 8px 8px; border: 0; background: transparent; box-shadow: none; text-shadow: none; text-align: left; font-weight: 400; font-family: "Exo", sans-serif; font-size: 15px; flex-grow:1; text-transform: uppercase; } .sheet-grid__stat button[type=roll]:hover { color: #FFB931; } /* disable advanced skill buttons when input is invalid */ .sheet-advanced input:placeholder-shown ~ button { pointer-events: none; opacity: 0.5; } .sheet-advanced { display: flex; flex-direction: row-reverse; background: #DBDBDB; } .sheet-advanced input[type=number] { margin-right: 7px; } /* Tables ========================================================================== */ .sheet-table__panel{ color: #ffffff; } .sheet-table__panel span{ background: #272626; padding: 8px 0px 8px 8px; font-size: 14px; font-family:"Exo"; text-transform: uppercase; } .charsheet .sheet-table__panel span.sheet-count{ padding: 8px 0px;} span.sheet-center{ padding: 8px 0px; text-align: center; white-space: nowrap; overflow: hidden; } .sheet-table__row input, .sheet-table__row input[type=number], .sheet-table__row select, .sheet-table__row span, .sheet-table__row .sheet-panel-checkbox{ padding: 0.5em 0.5em; width:100%; border: 0px; border-radius: 0px; background: #EFEFEF; color: #363330; box-sizing: border-box; font-size:16px; line-height:24px; } .sheet-table__row input[type=number]{ text-align:center; } .sheet-table__row select{ height: auto; -webkit-box-sizing: border-box; text-align: center; margin-bottom: 0; text-align-last:center; } .sheet-table__row input:hover, .sheet-table__row select:hover, .sheet-table__row input[type=number]:hover { background-color: #DBDBDB; } .sheet-card__table-row-group{ width:100%; min-height:40px; max-height:40px; color: #363330; background: #EFEFEF; text-align:center; } .sheet-card__table-row-group input[type=checkbox]{ margin: 10px; width: 20px; height: 20px; } .sheet-settings__content{ background: #efefef; padding: 8px; } /* Rows with floating label, used for character/ship information */ .sheet-label__float{ position:relative; height:40px; padding: 0px 6px; background: #EFEFEF; font-size:16px; } .sheet-label__float span{ color: #555353; font-size:10px; font-weight:700; text-transform: uppercase; } .sheet-label__float input,.sheet-label__float select, .sheet-label__float input[type=number]{ left:0px; top:0px; position:absolute; width:100%; height:100%; margin: 0px; padding: 22px 6px 4px; background:transparent; border:0px; box-sizing: border-box; font-size:16px; text-align:left; } .sheet-label__float select{ -webkit-appearance: menulist-button; padding: 18px 3px 4px; } .sheet-label__float input:hover, .sheet-label__float select:hover, .sheet-label__float input[type=number]:hover { background-color: rgba(140, 140, 140, 0.2); } /* Repeating ========================================================================== */ .sheet-repitem .repitem, .sheet-wrapper .repcontainer .repitem{ border-bottom: 1px solid #555252!important; } /* .sheet-repeating input{ border-bottom: 1px solid #555252; } .sheet-repeating button[type=roll]{ border-bottom: 1px solid #555252!important; box-sizing: border-box; } */ /* Roll-button styling ========================================================================== */ button[type=action].sheet-action, button[type=roll].sheet-action{ width:100%; background:#272626; margin: 0px; padding: 10px 0px; border: 0px; border-radius: 0px; box-shadow: none; text-shadow: none; text-align: center; text-transform: uppercase; color: #FFB931; font-size: 16px; max-height:40px; line-height:18px; font-family:"Exo"; } button[type=action].sheet-action{ line-height:20px; } button[type=action].sheet-left{ text-align:left; } button[type=action]:hover.sheet-action, button[type=roll]:hover.sheet-action{ background:#FFB931; color: #272626; } .sheet-grid__stat button[type=roll]:before, .sheet-action button[type=action]:before, .sheet-no-icon button[type=roll]:before{ content: ''; } .sheet-table__row button[type=roll]{ width:100%; height:100%; font-size:20px; margin:0px; padding:0px; border-radius:0px; border: 0px; } .sheet-wrapper .repcontrol .btn { display: inline-block; min-height: 36px; min-width: 36px; height: 2em; width: 2em; margin: 0.4em; padding: 0; border: none; background: #272626; font-size: 0; line-height: 1; text-shadow: none; box-shadow: none; webkit-box-shadow: none; border-radius:0; } .sheet-wrapper .repcontrol { background: #272626; } .sheet-wrapper .repcontrol button.repcontrol_add { border-right: 1px solid #555252; } .sheet-wrapper .repcontrol button:hover{ background:#3E3C3C; } .sheet-wrapper .repcontrol .repcontrol_add:after { content: "&"; } .sheet-wrapper .repcontrol .repcontrol_add:after { color: #FFB931; font-family: "pictos"; font-size: 2rem; opacity: 1; } .sheet-wrapper .repcontrol button.repcontrol_edit { border-left: 1px solid #555252; } .sheet-wrapper .repcontrol .repcontrol_edit:after { content: "("; } .sheet-wrapper .repcontrol .repcontrol_edit:after { color: #FFB931; font-family: "pictos"; font-size: 2rem; opacity: 1; } .sheet-wrapper .itemcontrol .btn{ display: inline-block; min-height: 36px; min-width: 36px; height: 100%; width: 2em; padding: 0; border: none; background: #272626; font-size: 16px; line-height: 1; text-shadow: none; box-shadow: none; webkit-box-shadow: none; border-radius:0; } .sheet-wrapper .itemcontrol button.btn-danger { color: #ffffff; background: #a80b0b; height:40px; } .sheet-wrapper .repcontainer .repitem .itemcontrol .repcontrol_move{ color: #363330; background: #EFEFEF; font-size: 32px; height:40px; width: auto; } /* Roll Templates ========================================================================== */ .sheet-rolltemplate-wrapper { font-family: "Roboto"; background: #efefef; font-size: 12pt; border: 4px solid #555252; line-height:24px; text-align: center; border-radius: 8px; overflow: hidden; } .sheet-rolltemplate-title{ font-size: 18px; font-weight: 700; text-transform: uppercase; font-family: 'Exo', sans-serif; } .sheet-rolltemplate-skill-weapon-stats{ text-transform:uppercase; font-size:12px; font-weight:700; } .sheet-rolltemplate-skill-weapon-comment{ font-style:italic; font-size:12px; font-weight:400; } .sheet-rolltemplate-header { padding:10px 0.25em; background: #272626; color: #ffffff; overflow:hidden; } .sheet-rolltemplate-content { padding: 0.5em 0.25em; overflow:hidden; } .sheet-rolltemplate-footer{ padding-bottom:1em; } /* Rolltemplate Result Styling */ .sheet-rolltemplate-wrapper .sheet-coriolis-roll .importantroll, .sheet-rolltemplate-stat .sheet-coriolis-roll .importantroll, .sheet-rolltemplate-wrapper .sheet-coriolis-roll .fullcrit, .sheet-rolltemplate-stat .sheet-coriolis-roll .fullcrit, .sheet-rolltemplate-wrapper .sheet-coriolis-roll .inlinerollresult, .sheet-rolltemplate-stat .sheet-coriolis-roll .inlinerollresult .sheet-rolltemplate-wrapper .sheet-coriolis-roll .fullfail { display: block; border: none; background: url('https://i.imgur.com/bSMCjVY.png') no-repeat; line-height: 1em; margin: 0px auto 0px; font-size: 24pt; font-weight: 700; text-align:center; padding: 7px 0px 0px; width:74px; height:44px; font-family: 'Exo', sans-serif; color: #000; } .sheet-rolltemplate-wrapper .sheet-coriolis-roll-fail .inlinerollresult{ background: url('https://i.imgur.com/AFapc19.png') no-repeat; } .sheet-rolltemplate-wrapper .sheet-coriolis-roll-crit .inlinerollresult{ background: url('https://i.imgur.com/MzQrEWB.png') no-repeat; } /* Initiative, Radiation and Armor Checks */ .sheet-rolltemplate-stat .importantroll, .sheet-rolltemplate-stat .fullcrit, .sheet-rolltemplate-stat .inlinerollresult.fullfail, .sheet-rolltemplate-stat .inlinerollresult.fullcrit, .sheet-rolltemplate-stat .inlinerollresult.importantroll, .sheet-rolltemplate-stat .textchatcontainer .inlinerollresult, .sheet-rolltemplate-stat .fullfail { border: 0px none; line-height: 1em; margin: 0px auto 0px; font-weight: 700; color: #000; padding: 0px; background: none; } .sheet-rolltemplate-stat .inlinerollresult{ background: none; border: 0px none; } .sheet-rolltemplate-wrapper .sheet-coriolis-buttons { text-align: center; } .sheet-rolltemplate-wrapper .sheet-coriolis-buttons a { margin-top: 0.5em; padding: 6px 12px; background:#16140E; border-radius: 4px; } .sheet-rolltemplate-menu a[href^="~"]{ width: 100%; font-size: 14px; left: 0px; right: 0px; margin-top: 1px; background-color: #272626; padding: 4px 8px; color: #FFB931; display: inline-block; border: none; text-align: left; text-decoration: none; border-radius: 0px; } .sheet-rolltemplate-menu .sheet-rolltemplate-content{ padding: 0px; background: #555252; overflow:hidden; }