mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
850 lines
16 KiB
CSS
850 lines
16 KiB
CSS
/**
|
|
* CONTENTS
|
|
*
|
|
* GENERAL..............All universal configs
|
|
* ..Section............Universal section CSS
|
|
* ..Text...............Static text(Label, span etc.)
|
|
* ..Inputs.............Input field styling(text,number)
|
|
* ..Radio Etc..........Radio and checkboxes
|
|
*
|
|
* SECTIONS.............Adjustments for specific sections of content
|
|
*
|
|
* PAGE.................CSS for switching tabs/pages
|
|
*
|
|
* ROLL TEMPATES........Styling roll outputs
|
|
*
|
|
* SPECIAL..............special CSS tricks applied last
|
|
*/
|
|
|
|
|
|
/*------------------------------------*\
|
|
#GENERAL
|
|
\*------------------------------------*/
|
|
|
|
/* Sheet height is defined for each tab separatly */
|
|
|
|
/* --------- Section ------------- */
|
|
|
|
.sheet-version {
|
|
position:relative;
|
|
right:-350px;
|
|
top: -22px;
|
|
}
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.sheet-flex-col-wrap {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
}
|
|
|
|
.sheet-flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
min-height: 90%;
|
|
}
|
|
|
|
div.sheet-border{
|
|
border-style: solid;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
div.sheet-section hr{
|
|
display: block;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-color: black;
|
|
}
|
|
|
|
|
|
/* ---------- Colors ---------- */
|
|
|
|
|
|
|
|
/* --------- Text ------------- */
|
|
span.sheet-bold{
|
|
font-weight: 800;
|
|
font-size: medium;
|
|
}
|
|
|
|
div.sheet-border-label label {
|
|
border-style: solid;
|
|
max-width: 80%;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
.sheet-small-font{
|
|
font-size: xx-small;
|
|
height:18px;
|
|
}
|
|
|
|
span.sheet-txtfield{
|
|
border: 2px solid black;
|
|
border-radius: 13px;
|
|
display: inline-block;
|
|
font-weight: 300;
|
|
width: 40px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
padding: 2px 0px 2px 6px;
|
|
}
|
|
|
|
/* --------- Inputs ------------- */
|
|
|
|
input[type="text"] {
|
|
background-color: transparent;
|
|
border-style: none none solid none;
|
|
border-color: black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
border: 2px solid black;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-checkbox {
|
|
border-style: solid black;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* -----Hides up/down buttons on numberfields that don't need them ---*/
|
|
input[type="number"].sheet-ref {
|
|
border-style: none none solid none;
|
|
border-color: black;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
input[type=number].sheet-ref::-webkit-inner-spin-button,
|
|
input[type=number].sheet-ref::-webkit-outer-spin-button,
|
|
input[type=number].sheet-txtfield::-webkit-inner-spin-button,
|
|
input[type=number].sheet-txtfield::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type=number].sheet-ref,
|
|
input[type=number].sheet-txtfield {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
textarea {
|
|
width: 90%;
|
|
height: 85%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#SECTIONS
|
|
\*------------------------------------*/
|
|
|
|
/* -------------------------- Page 1 ----------------------- */
|
|
/* ------ Attribute section ------- */
|
|
|
|
div.sheet-common {
|
|
grid-area: common;
|
|
}
|
|
|
|
div.sheet-common span input[type="text"] {
|
|
width: 23%;
|
|
}
|
|
|
|
/* ------ Battle section ------- */
|
|
|
|
div.sheet-battle {
|
|
grid-area: battle;
|
|
border-radius: 0px;
|
|
margin-top: 0px;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 20px;
|
|
padding: 2px;
|
|
}
|
|
|
|
div.sheet-battle label {
|
|
padding-left: 80px;
|
|
}
|
|
|
|
div.sheet-battle label input{
|
|
width: 70%;
|
|
border-style:none none solid none;
|
|
border-color: black;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* ------ Attribute section ------- */
|
|
div.sheet-attrs {
|
|
grid-area: attrs;
|
|
padding-left: 15px;
|
|
}
|
|
div.sheet-attrs > label {
|
|
margin: 2px;
|
|
padding: 0px;
|
|
width: 30%;
|
|
border-style: solid;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
div.sheet-attrs > label.sheet-titel {
|
|
text-align: center;
|
|
margin: 0px 20px 0px 30px;
|
|
width: 23%;
|
|
font-size: x-large;
|
|
padding: 3px;
|
|
}
|
|
|
|
div.sheet-attrs .sheet-spread-info > label{
|
|
margin: 18px 0px 18px 0px;
|
|
}
|
|
|
|
div.sheet-attrs span.sheet-padding1{
|
|
padding-right: 20px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
div.sheet-attrs span.sheet-padding2{
|
|
padding-right: 25px;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.sheet-spread-info > label:nth-child(2) > span:nth-child(1) {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
div.sheet-attrs span.sheet-bold:not(.sheet-slash){
|
|
margin-left: 20px;
|
|
}
|
|
|
|
div.sheet-attrs input.sheet-save{
|
|
margin-left: 25px;
|
|
}
|
|
|
|
span.sheet-slash{
|
|
position: relative;
|
|
font-size: x-large;
|
|
top: 5px;
|
|
}
|
|
|
|
/* ------ Proficiencies section ------- */
|
|
div.sheet-profs {
|
|
grid-area: profs;
|
|
}
|
|
|
|
div.sheet-profs > label {
|
|
max-width: 40%;
|
|
margin-left: 10px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
div.sheet-profs input[type="number"],
|
|
div.sheet-profs input[type="checkbox"],
|
|
div.sheet-profs span{
|
|
float:right;
|
|
}
|
|
|
|
div.sheet-profs span{
|
|
position: relative;
|
|
top: 13px;
|
|
left: 9px;
|
|
font-weight: 600;
|
|
font-size: small;
|
|
}
|
|
|
|
|
|
/* ------ Ability + Backgrounds section ------- */
|
|
div.sheet-ability {
|
|
grid-area: ability;
|
|
}
|
|
|
|
div.sheet-ability > *{
|
|
margin: 2px 3px;
|
|
}
|
|
|
|
div.sheet-ability > hr{
|
|
margin: 1px;
|
|
}
|
|
|
|
div.sheet-ability label input[type="text"]{
|
|
width: 73%;
|
|
}
|
|
|
|
|
|
/* --- Simplifications & Complications section -- */
|
|
div.sheet-comps {
|
|
grid-area: comps;
|
|
align-content:space-around;
|
|
}
|
|
|
|
div.sheet-comps > input {
|
|
margin-left: 10px;
|
|
width: 45%;
|
|
}
|
|
|
|
div.sheet-comps > span{
|
|
margin-bottom: 0px;
|
|
padding-left: 40px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
width: 32%;
|
|
}
|
|
|
|
/* ----------- Techniques section ------------ */
|
|
div.sheet-techq {
|
|
grid-area: techq;
|
|
}
|
|
|
|
div.sheet-techq > span {
|
|
padding-left: 140px;
|
|
}
|
|
|
|
div.sheet-techq input[type="text"] {
|
|
margin-left:5px;
|
|
width:82%;
|
|
}
|
|
div.sheet-techq input[type="number"] {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
/* ----------- Quirks & Personal section ------------ */
|
|
div.sheet-quirks {
|
|
grid-area: quirks;
|
|
}
|
|
|
|
div.sheet-quirks > span {
|
|
padding-left: 150px;
|
|
}
|
|
|
|
div.sheet-quirks input[type="text"] {
|
|
margin-left:5px;
|
|
width:82%;
|
|
}
|
|
div.sheet-quirks input[type="number"] {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
|
|
/* ------------------------- Page 2 ------------------------- */
|
|
|
|
/* ----------- Credits section ------------ */
|
|
.sheet-credits {
|
|
grid-area: credits;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
align-content: space-around;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 0px;
|
|
height: 27px;
|
|
border-style: solid;
|
|
}
|
|
|
|
/* --- augmentation & Oparations title ---- */
|
|
.sheet-augmentation-title {
|
|
grid-area: augmentation-title;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-top: 5px;
|
|
padding-bottom: 0px;
|
|
height: 27px;
|
|
}
|
|
|
|
.sheet-augmentation-title span {
|
|
border-style: solid solid none solid;
|
|
padding: 3px 10px 0px 10px;
|
|
}
|
|
|
|
/* ----- augmentation & Oparations HEAD----- */
|
|
.sheet-augmentation-head {
|
|
grid-area: augmentation-head;
|
|
}
|
|
|
|
/* ----- augmentation & Oparations CORE----- */
|
|
.sheet-augmentation-core {
|
|
grid-area: augmentation-core;
|
|
}
|
|
|
|
/* --- augmentation & Oparations DERMIS---- */
|
|
.sheet-augmentation-derms {
|
|
grid-area: augmentation-derms;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* ----- Reclamation Surgeries section---- */
|
|
div.sheet-rec-surgeries {
|
|
grid-area: rec-surgeries;
|
|
}
|
|
|
|
/* ------- All Aug section styles --------- */
|
|
.sheet-aug-align{
|
|
min-height: 19px;
|
|
line-height: 22.85px;
|
|
}
|
|
|
|
div.sheet-augmentation-head,
|
|
div.sheet-augmentation-core,
|
|
div.sheet-augmentation-derms,
|
|
div.sheet-rec-surgeries {
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
div.sheet-augmentation-head div,
|
|
div.sheet-augmentation-core div,
|
|
div.sheet-augmentation-derms div,
|
|
div.sheet-rec-surgeries div {
|
|
margin:5px;
|
|
}
|
|
|
|
div.sheet-augmentation-head div input,
|
|
div.sheet-augmentation-core div input,
|
|
div.sheet-augmentation-derms div input,
|
|
div.sheet-rec-surgeries div input {
|
|
width: 245px;
|
|
}
|
|
|
|
div.sheet-augmentation-head div span.sheet-bold,
|
|
div.sheet-augmentation-core div span.sheet-bold,
|
|
div.sheet-augmentation-derms div span.sheet-bold,
|
|
div.sheet-rec-surgeries div span.sheet-bold {
|
|
padding-left:50px;
|
|
}
|
|
|
|
input.sheet-grey{
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
/* -------- Inventory Cargo points ------- */
|
|
.sheet-inv-head {
|
|
grid-area: inv-head;
|
|
align-items: flex-start;
|
|
margin-bottom:-15px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
/* ------------- Inventory --------------- */
|
|
.sheet-inv-main {
|
|
grid-area: inv-main;
|
|
display: flex;
|
|
align-content: flex-start;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.sheet-inv-main span {
|
|
height:25px;
|
|
}
|
|
|
|
.sheet-inv-main .sheet-border {
|
|
border-style: none solid none none ;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.sheet-inv-main input[type="text"]{
|
|
padding-left: 10px;
|
|
width:375px;
|
|
}
|
|
|
|
div.sheet-inv-main input.sheet-ref {
|
|
text-align: center;
|
|
}
|
|
|
|
/* --Active Equipment Effects section -- */
|
|
.sheet-equip-effects {
|
|
grid-area: equip-effects;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* -------------------------- Page 3 ----------------------- */
|
|
|
|
/* ------ Large xp spending tracker ----- */
|
|
.sheet-xp-tracker {
|
|
grid-area: xp-tracker;
|
|
display: grid;
|
|
grid-gap: 3px;
|
|
grid-template-columns: repeat(14, 1fr);
|
|
grid-template-rows: 1fr repeat(6, 3fr);
|
|
align-items: center;
|
|
justify-items: center;
|
|
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.sheet-xp-tracker label.sheet-grid-header,
|
|
.sheet-xp-tracker div label.sheet-grid-or{
|
|
width: 25px;
|
|
margin-bottom: 5px;
|
|
text-align: center;
|
|
}
|
|
.sheet-xp-tracker div label.sheet-grid-or{
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
border-style: solid;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
|
|
.sheet-xp-tracker div{
|
|
display:flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-xp-tracker div span {
|
|
font-size: x-small;
|
|
}
|
|
/*
|
|
.sheet-xp-tracker div.sheet-grid-side label:first-child {
|
|
font-size: x-large;
|
|
} */
|
|
|
|
.sheet-xp-tracker div input[type="number"]{
|
|
text-align: center;
|
|
font-weight: 800;
|
|
font-size: large;
|
|
width: 30px;
|
|
}
|
|
|
|
.sheet-xp-tracker div input[type="number"] +input[type="checkbox"] {
|
|
margin-top: 4px;
|
|
|
|
}
|
|
|
|
/* ------ Exp spending summary ---------- */
|
|
.sheet-xp-summary {
|
|
grid-area: xp-summary;
|
|
}
|
|
|
|
.sheet-xp-summary > label {
|
|
padding-left: 120px;
|
|
}
|
|
|
|
.sheet-xp-summary > span.sheet-prog {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
/* ------ Exp milestone section -------- */
|
|
.sheet-xp-milestone {
|
|
grid-area: xp-milestone;
|
|
border-style: solid;
|
|
}
|
|
|
|
/* ------ Notoriety Tracker section -------- */
|
|
.sheet-notoriety-tracker {
|
|
grid-area: notoriety-tracker;
|
|
-webkit-flex-flow: column nowrap;
|
|
flex-flow: column nowrap;
|
|
min-height: 1px;
|
|
-webkit-flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.sheet-notoriety-tracker div.sheet-trackerline {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
.sheet-notoriety-tracker > input[type="radio"] {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.sheet-notoriety-tracker span.sheet-bold {
|
|
padding-left: 130px;
|
|
}
|
|
.sheet-notoriety-tracker span {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-notoriety-tracker hr {
|
|
width: 90%;
|
|
}
|
|
|
|
.sheet-notoriety-tracker div.sheet-landmark-center {
|
|
margin-left: 150px;
|
|
}
|
|
|
|
|
|
|
|
/*------------------------------------*\
|
|
#PAGE
|
|
\*------------------------------------*/
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-tab1,
|
|
input.sheet-tab2:checked ~ div.sheet-tab2,
|
|
input.sheet-tab3:checked ~ div.sheet-tab3
|
|
{
|
|
display: grid;
|
|
}
|
|
/* styles tab button */
|
|
input.sheet-tab
|
|
{
|
|
width: 150px;
|
|
height: 22px;
|
|
position: relative;
|
|
top: -26px;
|
|
left: 80px;
|
|
|
|
margin: 5px 0px 5px 0px;
|
|
padding: 0px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-tab + span::before
|
|
{
|
|
content: attr(title);
|
|
|
|
width: 150px;
|
|
height: 22px;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 110px;
|
|
|
|
border: solid 2px grey;
|
|
border-radius: 13px;
|
|
padding-bottom: 2px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
display: inline-block;
|
|
background: white;
|
|
}
|
|
|
|
input.sheet-tab:checked + span::before
|
|
{
|
|
background: grey;
|
|
}
|
|
|
|
input.sheet-tab2 + span::before
|
|
{
|
|
left: 263px;
|
|
}
|
|
|
|
input.sheet-tab3 + span::before
|
|
{
|
|
left: 415px;
|
|
}
|
|
|
|
|
|
/* styles page content looks */
|
|
|
|
div.sheet-pg1 {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 6fr 30px 4fr 8fr 2fr 10fr;
|
|
grid-template-areas:"common ability"
|
|
"battle comps "
|
|
"attrs comps "
|
|
"attrs techq "
|
|
"profs techq "
|
|
"profs quirks ";
|
|
width: 1200px;
|
|
height: 900px;
|
|
position: relative;
|
|
top: -20px;
|
|
}
|
|
|
|
div.sheet-pg2 {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 30px 30px 1fr 1fr 1fr 1fr;
|
|
grid-template-areas:"credits inv-head "
|
|
"augmentation-title inv-head "
|
|
"augmentation-head inv-main "
|
|
"augmentation-core inv-main "
|
|
"augmentation-derms inv-main "
|
|
"rec-surgeries equip-effects";
|
|
width: 1200px;
|
|
height: 900px;
|
|
position: relative;
|
|
top: -20px;
|
|
}
|
|
|
|
div.sheet-pg3 {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 100px 1fr;
|
|
grid-template-rows: 5fr 2fr;
|
|
grid-template-areas:"xp-tracker xp-tracker xp-tracker "
|
|
"xp-summary xp-milestone notoriety-tracker";
|
|
width: 1200px;
|
|
height: 900px;
|
|
position: relative;
|
|
top: -20px;
|
|
}
|
|
|
|
div.sheet-tab-content { display: none; }
|
|
|
|
/*------------------------------------*\
|
|
#ROLL TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-hsd2 {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-hsd2 {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-hsd2 .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-hsd2 .sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
color: var(--header-text-color);
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
.sheet-rolltemplate-hsd2 .sheet-title {
|
|
font-size:1.2em;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-hsd2 .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
/* example colors */
|
|
.sheet-rolltemplate-hsd2 .sheet-container {
|
|
/* this is the default color */
|
|
--header-bg-color: #FFF;
|
|
--header-text-color: #000;
|
|
}
|
|
|
|
/* alt template colors */
|
|
.sheet-rolltemplate-hsd2 .sheet-container.sheet-color-grey {
|
|
--header-bg-color: #A4A4A4;
|
|
}
|
|
.sheet-rolltemplate-hsd2 .sheet-container.sheet-color-black {
|
|
--header-bg-color: #000;
|
|
--header-text-color: #FFF;
|
|
}
|
|
.sheet-rolltemplate-hsd2 .sheet-container.sheet-color-red {
|
|
--header-bg-color: #a83521;
|
|
--header-text-color: #FFF;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-hsd2 .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
/* Header formatting - modify the column layout below */
|
|
grid-template-columns: auto auto;
|
|
/* Line height to match default roll template */
|
|
line-height:1.4em;
|
|
}
|
|
.sheet-rolltemplate-hsd2 .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-hsd2 .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-hsd2 .sheet-value {
|
|
}
|
|
*/
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-hsd2 .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-hsd2 .sheet-content :nth-child(4n) {
|
|
background:#EEE;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-hsd2 .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#SPECIAL
|
|
\*------------------------------------*/
|
|
|
|
/* custom cechbox/radio buttons for notierity section */
|
|
|
|
/* Hide actual radio */
|
|
input[type="radio"].sheet-checkbox {
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 2px;
|
|
left: 4px;
|
|
margin: -12px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake radio */
|
|
input[type="radio"].sheet-checkbox + span.sheet-checkbox::before {
|
|
margin-right: 4px;
|
|
border: solid 1px black;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: #f6f6f6;
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
font-family: "Pictos";
|
|
content: "3";
|
|
line-height: 14px;
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input[type="radio"].sheet-checkbox:checked ~ input[type="radio"].sheet-checkbox + span.sheet-checkbox::before {
|
|
content: "";
|
|
}
|
|
|
|
input.sheet-zero:checked + span.sheet-checkbox::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zero:hover + span.sheet-checkbox::before
|
|
{
|
|
opacity: 0.25;
|
|
font-size: 12px;
|
|
content: "✖";
|
|
text-indent: 0.5px;
|
|
}
|
|
|
|
input.sheet-zero + span.sheet-checkbox::before
|
|
{
|
|
opacity: 0;
|
|
} |