/*-------------------------------------------*/ /*------------- SWD6 Main CSS----------------*/ /*-------------------------------------------*/ .charsheet { /*https://cdn.pixabay.com/photo/2017/01/02/11/10/sky-1946508_960_720.png more and brighter stars*/ background-image: url(https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png); /*black space with tiny white stars*/ background-color: black; background-repeat: repeat; color:white; } .charsheet .sheet-version::after { content: 'Sheet Version 1.72'; } .charsheet label, h1, h2, h3{ color:white; } .charsheet table{ border-collapse:separate; border-spacing:4px; } .charsheet textarea{ resize:none; } .charsheet .sheet-toppad{ padding:2px; } .charsheet .sheet-section{ border-top: 5px dotted white; padding-top:10px; padding-bottom:10px; width: 100%; } .charsheet input[type=number].sheet-pipnumber{ width:33px; } .charsheet input[type=number].sheet-smallnumber{ width:40px; } .charsheet input[type=number].sheet-smallshortnumber{ width:40px; padding-top:2px; padding-bottom:2px; display: inline-block; float:right; } .charsheet input[type=number].sheet-shortnumber{ padding-top:2px; padding-bottom:2px; } .charsheet input[type=number].sheet-mediumnumber{ width:60px; } .charsheet input[type=number].sheet-credits{ width:80px; padding-top:2px; padding-bottom:2px; } .charsheet input[type=text].sheet-smalltext{ width:60px; margin:0px; } .charsheet input[type=text].sheet-mediumtext{ width:80px; margin:0px; } .charsheet input[type=text].sheet-shorttext{ padding-top:2px; padding-bottom:2px; } .charsheet input[type=text].sheet-skilltext{ /*changed width from 135*/ width:115px; padding:2px; margin-left:3px; } .charsheet .sheet-right{ float:right; } .charsheet .sheet-left{ float:left; } .charsheet .sheet-bold{ font-size: 12pt; margin-bottom: 10px; } .charsheet .sheet-tdborder{ border: 2px solid white; vertical-align:top; /*width:260px;*/ } .charsheet .sheet-rightmargin{ margin-right:0px; } .charsheet select.sheet-smallselect{ width:60px; height:25px; padding-top:2px; padding-bottom:2px; margin:0px; display: inline-block; float:right; } .charsheet select.sheet-mediumselect{ /*Used for Wound levels dropdown select*/ width:100px; height:25px; padding-top:2px; padding-bottom:2px; margin:0px; display: inline-block; float:right; } .charsheet label.sheet-areaLabel{ margin:0px; } /*-----------------------------------------*/ /*----------Roll Buttons classes-----------*/ .charsheet button[type=roll].sheet-d6-dice::before { /*new die changes die roller to d6*/ font-family: 'dicefontd6',arial; content: 'F '; color: red; } .charsheet .sheet-forcebutton{ width:90px; padding-right:5px; } .charsheet .sheet-redtxt{ font-size: 6pt; color: red; } /*Original button :button[type=roll].sheet-blank-roll-button::before { content: ''; } */ /*-------------------------------------------*/ /*-----Main Settings and hide classes--------*/ /*-----------(from GUMSHOE Official)---------*/ .charsheet .sheet-main-settings .sheet-input-row label { display: inline-block; width: auto; } .charsheet .sheet-main-settings .sheet-input-row input { margin-right: 30px; } .charsheet .sheet-main-settings .sheet-input-row select { width: 45%; margin-right: 15px; } input.sheet-main-options.sheet-options-flag + span,/*displays the cog icon*/ input[type=radio]:checked ~ .sheet-master-container input.sheet-options-flag + span { font-family: pictos; font-style: normal; } div.sheet-main-settings { display: none; position: relative; margin-left: 0; } input.sheet-options-flag:checked ~ div.sheet-main-settings { display: inline-block; width: 600px; height: 500px; } input.sheet-selector-switch , input.sheet-options-flag:checked ~ div.sheet-main-container { display: none; } /* all hide options using option menu checkboxes*/ input.sheet-wild:checked ~ .sheet-master-container .sheet-wild-hide, input.sheet-nowild:checked ~ .sheet-master-container .sheet-nowild-hide, input.sheet-background:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-background-hide, input.sheet-force:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-force-hide, input.sheet-equipment:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-equipment-hide, input.sheet-npc:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-npc-hide , input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-pc-hide, input.sheet-gmroll:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-gmroll-hide { display: none; } /*-------------------------------------------*/ /*------------- General Styles---------------*/ /*------------(from GUMSHOE Official)--------*/ input[type=number]::-webkit-inner-spin-button {} .sheet-master-container { position: relative; padding: 0; display: inline-block; /*width: 900px;*/ background-image: url(https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png); /*black space with tiny stars*/ background-color: black; background-repeat: repeat; } .sheet-container { padding: 5px; margin-left: -25px; position: relative; } .sheet-main-container { display: inline-block; padding-top: 75px; margin-left: 0; } /*-------------------------------------------*/ /*------------- Options Toggles--------------*/ /*-----------(from GUMSHOE Official)---------*/ input.sheet-options-flag, input.sheet-options-flag + span { position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; } input.sheet-options-flag { z-index: 99; opacity: 0; } input.sheet-options-flag + span { margin-top: 0px; display: none; white-space: nowrap; line-height: 15px; font-size: 17px; color: white; cursor: pointer; } input.sheet-options-flag.sheet-main-options { width: 30px; height: 30px; top: 20px; left: 20px; z-index: 3; } input.sheet-options-flag.sheet-main-options + span { width: 30px; height: 30px; top: 20px; left: 20px; font-size: 34px; z-index: 2; line-height: 30px; opacity: .5; display: block; } input.sheet-options-flag.sheet-main-options:hover + span { opacity: 1; } input.sheet-options-flag:checked + span { color: white; display: block; } input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options, input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options-flag:checked ~ .sheet-display { display: none; } input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options-flag:checked ~ .sheet-options { display: block; } /*-------------------------------------------*/ /*--------------- NPC Styles ----------------*/ /*---------(from GUMSHOE Official)-----------*/ input.sheet-selector-switch:checked ~ .sheet-master-container div.sheet-npc-hide{ display: inline-block; } input.sheet-npc:checked ~ input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-pc-hide { display: inherit; }