592 lines
18 KiB
CSS
592 lines
18 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Parisienne&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@500&display=swap');
|
|
|
|
/* Set the min-width so that when the window is resized the look will stay consistent */
|
|
|
|
.sheet-ts {
|
|
--tab-bar-height : 18px;
|
|
--min-height : 650px;
|
|
--min-width : 850px;
|
|
|
|
min-width : var(--min-width);
|
|
background : white;
|
|
}
|
|
|
|
/* NPC View */
|
|
input[type=checkbox].sheet-isnpc-check:checked ~ .sheet-ts {
|
|
--show-npc-view : inline;
|
|
--show-pc-view : none;
|
|
}
|
|
|
|
input[type=checkbox].sheet-isnpc-check:not(:checked) ~ .sheet-ts {
|
|
--show-npc-view : none;
|
|
--show-pc-view : inline;
|
|
}
|
|
|
|
div.sheet-ts .sheet-npc-view {
|
|
display : var(--show-npc-view);
|
|
}
|
|
|
|
div.sheet-ts .sheet-pc-view {
|
|
display : var(--show-pc-view);
|
|
}
|
|
|
|
/* Universal styling applied to all elements of these types */
|
|
|
|
h2 {
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-cover h2, div.sheet-cover h3 {
|
|
color: goldenrod;
|
|
}
|
|
|
|
summary {
|
|
font-weight: 600;
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
details summary:after {
|
|
content: "+";
|
|
color: black;
|
|
position: absolute;
|
|
font-size: 2.5rem;
|
|
line-height: 0;
|
|
margin-top: 0.75rem;
|
|
right: 80;
|
|
font-weight: 200;
|
|
transform-origin: center;
|
|
transition: 200ms linear;
|
|
}
|
|
|
|
details[open] summary:after {
|
|
transform: rotate(45deg);
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
width: 30%;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
max-width: 92%;
|
|
}
|
|
/* Backgroundimages */
|
|
|
|
div.sheet-skills, div.sheet-character, div.sheet-gear, div.sheet-journal, div.sheet-combat, div.sheet-npc {
|
|
width : var(--min-width);
|
|
min-height : var(--min-height);
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/The-Troubleshooters-Pass-Hintergrund-linke-Seite.jpg), url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/The-Troubleshooters-Pass-Hintergrund-rechte-Seite.jpg);
|
|
background-position: left top, right top;
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-size: 425px 100%;
|
|
}
|
|
|
|
div.sheet-cover {
|
|
width : var(--min-width);
|
|
min-height : var(--min-height);
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/Pass_Back.png), url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/Pass_Front.png);
|
|
background-position: left top, right top;
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-size: 425px 100%;
|
|
}
|
|
|
|
.sheet-ts div.sheet-header {
|
|
display : grid;
|
|
grid-template-columns : 300px 160px auto;
|
|
}
|
|
|
|
.sheet-ts div.sheet-passport {
|
|
display : grid;
|
|
grid-template-columns : repeat(2, 50%);
|
|
width : 100%;
|
|
min-height : var(--min-height);
|
|
padding : 10px;
|
|
}
|
|
|
|
.sheet-ts div.sheet-passport div.sheet-passport-page:first-child {
|
|
border-right : 1px solid gray;
|
|
height : 100%;
|
|
}
|
|
|
|
.sheet-ts div.sheet-cover div.sheet-cover-centered {
|
|
padding-top : 120px;
|
|
}
|
|
|
|
.sheet-ts div.sheet-passport div.sheet-passport-page:nth-child(2) {
|
|
margin-left : 5px;
|
|
}
|
|
|
|
.charsheet .repcontrol button.repcontrol_edit {
|
|
float : left;
|
|
}
|
|
|
|
:is(.lang-undefined, .lang-de) div.sheet-conditions {
|
|
display : grid;
|
|
grid-template-areas :
|
|
"prone mortalperil"
|
|
"outcold terrified"
|
|
"stunned paralysed"
|
|
"intoxicated deaf"
|
|
"restrained overburdened"
|
|
"blinded surprised"
|
|
"onfire frightend"
|
|
"exhausted wounded";
|
|
}
|
|
|
|
.lang-en div.sheet-conditions {
|
|
display : grid;
|
|
grid-template-areas :
|
|
"blinded overburdened"
|
|
"deaf paralysed"
|
|
"exhausted prone"
|
|
"frightend restrained"
|
|
"intoxicated stunned"
|
|
"mortalperil surprised"
|
|
"onfire terrified"
|
|
"outcold wounded";
|
|
}
|
|
|
|
/* Targetted styling that only effects elements with these classes */
|
|
|
|
img.sheet-shield {
|
|
height: auto;
|
|
max-height: 600px;
|
|
text-align: center;
|
|
width: 500px;
|
|
}
|
|
|
|
img.sheet-logo {
|
|
width: 300px;
|
|
text-align: right;
|
|
}
|
|
|
|
img.sheet-portrait {
|
|
height: 350px;
|
|
text-align: center;
|
|
width: auto;
|
|
min-width: 300px;
|
|
border: 1px solid silver;
|
|
background-color: #ffffcc;
|
|
}
|
|
|
|
label.sheet-conditionlabel {
|
|
display : inline-block;
|
|
white-space : pre;
|
|
font-size : 1em;
|
|
font-weight : 550;
|
|
width : auto;
|
|
}
|
|
|
|
label.sheet-skilllabel {
|
|
display: inline-block;
|
|
white-space: pre;
|
|
font-size: 1em;
|
|
font-weight: 550;
|
|
width: 14ch;
|
|
}
|
|
|
|
input.sheet-skilllabel {
|
|
display: inline-block;
|
|
white-space: pre;
|
|
font-size: 1em;
|
|
font-weight: 550;
|
|
width: 70%;
|
|
}
|
|
|
|
input.sheet-number {
|
|
width: 5%;
|
|
}
|
|
|
|
input.sheet-skill {
|
|
display: inline-block;
|
|
width: 2.5em;
|
|
text-align: right;
|
|
}
|
|
|
|
input.sheet-npcskill {
|
|
display: inline-block;
|
|
width: 2.0em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* - - - - - Remove Number Spinner - - - - - */
|
|
input[type="number"].sheet-skill::-webkit-outer-spin-button,
|
|
input[type="number"].sheet-skill::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="number"].sheet-skill {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
select.sheet-short {
|
|
width: 10%;
|
|
}
|
|
|
|
select.sheet-shorter {
|
|
width: 9%;
|
|
}
|
|
|
|
.charsheet button[type="action"].sheet-skillroll {
|
|
width : 67%;
|
|
border : none;
|
|
background-color : white;
|
|
text-align : left;
|
|
font-weight : 550;
|
|
font-size : 12px;
|
|
}
|
|
|
|
.charsheet button[type="action"].sheet-skillroll:hover {
|
|
background-color: purple;
|
|
color: white;
|
|
}
|
|
|
|
.charsheet button[type="action"].sheet-cbtroll,
|
|
.charsheet button[type="action"].sheet-npcroll,
|
|
.charsheet .repcontrol button.repcontrol_edit,
|
|
.charsheet .repcontrol button.repcontrol_add,
|
|
.charsheet button[type="roll"].sheet-blank-button,
|
|
.charsheet button[type="action"].sheet-blank-button {
|
|
border : 1px solid black;
|
|
background-color : silver;
|
|
background-image : linear-gradient(to top, silver, white);
|
|
text-align : center;
|
|
font-size : 1.3em;
|
|
font-weight : 550;
|
|
}
|
|
|
|
.charsheet button[type="action"].sheet-cbtroll:hover,
|
|
.charsheet button[type="action"].sheet-npcroll:hover
|
|
.charsheet .repcontrol button.repcontrol_edit:hover,
|
|
.charsheet .repcontrol button.repcontrol_add:hover,
|
|
.charsheet button[type="roll"].sheet-blank-button:hover,
|
|
.charsheet button[type="action"].sheet-roll-button:hover {
|
|
background-color: purple;
|
|
background-image: linear-gradient(to top, purple, white);
|
|
color: white;
|
|
}
|
|
|
|
.charsheet button[type="roll"].sheet-blank-button::before,
|
|
.charsheet button[type=action].sheet-roll-button::before {
|
|
content : ' ';
|
|
}
|
|
|
|
/* Targetted styling that only effects elements contained within the stated class */
|
|
|
|
.sheet-mugshot {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-coverfluff {
|
|
width : 95%;
|
|
font-size : 1.5em;
|
|
border : none;
|
|
border-bottom : 2px dotted black;
|
|
}
|
|
|
|
.sheet-fluff {
|
|
width : 95%;
|
|
font-size : 1.2em;
|
|
border : none;
|
|
border-bottom : 2px dotted black;
|
|
}
|
|
|
|
.sheet-cover {
|
|
text-align : center;
|
|
}
|
|
|
|
/*Configure the tabs*/
|
|
.charsheet div.sheet-cover, .charsheet div.sheet-character, .charsheet div.sheet-skills, .charsheet div.sheet-gear, .charsheet div.sheet-journal, .charsheet div.sheet-combat, .charsheet div.sheet-npc {
|
|
display : none;
|
|
background-color : #f9f9eb;
|
|
margin-top : var(--tab-bar-height);
|
|
}
|
|
|
|
.charsheet input[type=radio] {
|
|
display: none;
|
|
float: left;
|
|
}
|
|
|
|
.charsheet input[type=radio] + label{
|
|
content: '';
|
|
border: none;
|
|
background-image: radial-gradient(#f9f9eb,#f5f5dc,#eeeec3);
|
|
color: black;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
width: 14%;
|
|
text-align: center;
|
|
padding: 0%;
|
|
float: left;
|
|
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
|
|
}
|
|
|
|
.charsheet input[type=radio]:hover + label{
|
|
color: purple;
|
|
}
|
|
|
|
.charsheet input[type=radio]:checked + label{
|
|
background: purple;
|
|
color: white;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
|
|
|
|
.charsheet input.sheet-page1:checked ~ div.sheet-cover,
|
|
.charsheet input.sheet-page2:checked ~ div.sheet-character,
|
|
.charsheet input.sheet-page3:checked ~ div.sheet-skills,
|
|
.charsheet input.sheet-page4:checked ~ div.sheet-gear,
|
|
.charsheet input.sheet-page5:checked ~ div.sheet-journal,
|
|
.charsheet input.sheet-page6:checked ~ div.sheet-combat,
|
|
.charsheet input.sheet-page7:checked ~ div.sheet-npc{
|
|
display: block;
|
|
}
|
|
|
|
|
|
/*Hide attack buttons by default*/
|
|
.sheet-meleebuttons,
|
|
.sheet-rangedbuttons {
|
|
display: none;
|
|
}
|
|
|
|
/* show the relevant combat skill buttons */
|
|
.sheet-revealbuttons[value="1"]:checked ~ div.sheet-meleebuttons,
|
|
.sheet-revealbuttons[value="2"]:checked ~ div.sheet-rangedbuttons {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* show the relevant combat skill buttons */
|
|
.sheet-revealbuttons[value="2"]:checked ~ div.sheet-meleebuttons,
|
|
.sheet-revealbuttons[value="1"]:checked ~ div.sheet-rangedbuttons {
|
|
display: none;
|
|
}
|
|
|
|
/* styling the CRP roll templates to look like the default*/
|
|
.sheet-rolltemplate-npc-ini-fix div.sheet-template-container,
|
|
.sheet-rolltemplate-basic div.sheet-template-container,
|
|
.sheet-rolltemplate-damage div.sheet-template-container,
|
|
.sheet-rolltemplate-soaks div.sheet-template-container,
|
|
.sheet-rolltemplate-recovers div.sheet-template-container,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container,
|
|
.sheet-rolltemplate-d100 div.sheet-template-container,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/rahmen_260x260.png);
|
|
background-repeat : no-repeat;
|
|
background-origin : border-box;
|
|
background-size : 100% 100%;
|
|
background-color : whitesmoke;
|
|
margin : 0;
|
|
padding-top : 25px;
|
|
width : 245px;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix div, .sheet-rolltemplate-recovers div, .sheet-rolltemplate-soaks div, .sheet-rolltemplate-basic div, .sheet-rolltemplate-d100 div, .sheet-rolltemplate-d100-flip div, .sheet-rolltemplate-d100-flip-ini div, .sheet-rolltemplate-d100-ini div, .sheet-rolltemplate-damage div,
|
|
.sheet-rolltemplate-npc-ini-fix p, .sheet-rolltemplate-recovers p, .sheet-rolltemplate-soaks p, .sheet-rolltemplate-basic p, .sheet-rolltemplate-d100 p, .sheet-rolltemplate-d100-flip p, .sheet-rolltemplate-d100-flip-ini p, .sheet-rolltemplate-d100-ini p, .sheet-rolltemplate-damage p {
|
|
font-family : 'Edu NSW ACT Foundation', cursive;
|
|
font-size : 18px;
|
|
text-align : center;
|
|
color : #000;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix li, .sheet-rolltemplate-recovers li, .sheet-rolltemplate-soaks p, .sheet-rolltemplate-basic p, .sheet-rolltemplate-damage p, .sheet-rolltemplate-d100 p, .sheet-rolltemplate-d100-flip p, .sheet-rolltemplate-d100-flip-ini p, .sheet-rolltemplate-d100-ini p {
|
|
margin-left : 15px;
|
|
margin-right : 15px;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix li, .sheet-rolltemplate-recovers li, .sheet-rolltemplate-soaks li, .sheet-rolltemplate-basic li, .sheet-rolltemplate-damage li,.sheet-rolltemplate-d100 li, .sheet-rolltemplate-d100-flip li, .sheet-rolltemplate-d100-flip-ini li, .sheet-rolltemplate-d100-ini li {
|
|
line-height : 30px;
|
|
font-size : 15px;
|
|
text-align : left;
|
|
margin-left : 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix h1, .sheet-rolltemplate-recovers h1, .sheet-rolltemplate-soaks h1, .sheet-rolltemplate-basic h1, .sheet-rolltemplate-damage h1, .sheet-rolltemplate-d100 h1, .sheet-rolltemplate-d100-flip h1, .sheet-rolltemplate-d100-flip-ini h1, .sheet-rolltemplate-d100-ini h1 {
|
|
font-size : 20px;
|
|
text-decoration : underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-basic div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-damage div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-soaks div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-recovers div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-result {
|
|
background-repeat : no-repeat;
|
|
background-position : center;
|
|
background-size : 200px;
|
|
|
|
font-size : 18px;
|
|
font-weight : bold;
|
|
margin-top : auto;
|
|
margin-bottom : auto;
|
|
|
|
display : inline-block;
|
|
width : 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-soaks div.sheet-template-container div.sheet-template-result {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/TS_dialog_peng_210.png);
|
|
height : 200px;
|
|
line-height : 200px;
|
|
}
|
|
|
|
.sheet-rolltemplate-recovers div.sheet-template-container div.sheet-template-result {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/TS_dialog_heal_210.png);
|
|
height : 200px;
|
|
line-height : 200px;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic div.sheet-template-container div.sheet-template-result {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/TS_Boom_grey_200.png);
|
|
height : 200px;
|
|
line-height : 200px;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage div.sheet-template-container div.sheet-template-result {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/TS_dialog_crash_210.png);
|
|
height : 200px;
|
|
line-height : 200px;
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container div.sheet-template-result,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-result {
|
|
background-image : url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Troubleshooters/images/TS_dice100_purple_210.png);
|
|
height : 100px;
|
|
line-height : 100px;
|
|
|
|
display : grid;
|
|
grid-template-columns : repeat(2, 50%);
|
|
}
|
|
|
|
.sheet-rolltemplate-npc-ini-fix div.sheet-template-info .inlinerollresult,
|
|
.sheet-rolltemplate-basic div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-damage div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-recovers div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-soaks div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-d100 div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-d100 div.sheet-template-info .inlinerollresult,
|
|
.sheet-rolltemplate-d100 div.sheet-template-container .inlinerollresult,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-info .inlinerollresult,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-pips .inlinerollresult,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-pips .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-result .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-pips .inlinerollresult,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container .inlinerollresult,
|
|
.sheet-rolltemplate-d100 div.sheet-template-pips .inlinerollresult {
|
|
all : unset;
|
|
background-color : transparent;
|
|
border : none;
|
|
}
|
|
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-tens,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-tens,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container div.sheet-template-tens,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-tens {
|
|
font-size : 25px;
|
|
margin-left : 26px;
|
|
color : whitesmoke;
|
|
}
|
|
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-ones,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-ones,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container div.sheet-template-ones,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-ones {
|
|
font-size : 25px;
|
|
margin-right : 20px;
|
|
color : whitesmoke;
|
|
}
|
|
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-flip,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-flip,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-flip {
|
|
height : 50px;
|
|
}
|
|
|
|
.sheet-rolltemplate-d100 div.sheet-template-container div.sheet-template-info,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-container div.sheet-template-info,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-container div.sheet-template-info,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-container div.sheet-template-info {
|
|
margin-bottom : 20px;
|
|
display : inline-block;
|
|
}
|
|
|
|
.sheet-rolltemplate-d100 div.sheet-template-pips,
|
|
.sheet-rolltemplate-d100-ini div.sheet-template-pips,
|
|
.sheet-rolltemplate-d100-flip div.sheet-template-pips,
|
|
.sheet-rolltemplate-d100-flip-ini div.sheet-template-pips {
|
|
display : inline-block;
|
|
position : relative;
|
|
background-color: aliceblue;
|
|
border : 3px solid grey;
|
|
border-radius : 4px;
|
|
width : 70px;
|
|
height : 35px;
|
|
transform : rotate(-22deg);
|
|
top : -45px;
|
|
left : 175px;
|
|
text-align : center;
|
|
font-size : 20px;
|
|
line-height : 35px;
|
|
}
|
|
|
|
/* Fill Radiobuttons from left to right */
|
|
.radiocontainer {
|
|
display : inline-flex;
|
|
gap : 10px;
|
|
float : right;
|
|
padding-right : 20px;
|
|
}
|
|
|
|
.radiocontainer input[type=radio].radiobox {
|
|
display : block;
|
|
order : 1;
|
|
border : 1px solid black;
|
|
border-radius : 50%;
|
|
background : grey;
|
|
height : 2rem;
|
|
width : 2rem;
|
|
appearance : none;
|
|
-webkit-appearance : none;
|
|
cursor : pointer;
|
|
z-index : 1;
|
|
}
|
|
|
|
.radiocontainer input[type=radio].radiobox:checked {
|
|
opacity : 0;
|
|
z-index : 0;
|
|
position : absolute;
|
|
}
|
|
|
|
.radiocontainer input[type=radio].radiobox:checked ~ .radiobox {
|
|
order : 3;
|
|
background-color : transparent;
|
|
}
|
|
|
|
.radiocontainer input[type=radio].radiobox.reset {
|
|
order : 2;
|
|
background-color : black;
|
|
} |