/* ++IMPERIUM MALEDICTUM EXCULTUS++ */ @import url('https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer:ital@0;1&display=swap'); body .charsheet * { font-family: 'IM Fell Great Primer', serif; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { display: none; } input[type=number] { -moz-appearance: textfield; /* ++FIREFOX++ */ } body .charsheet { background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/bg.jpg') center top repeat-y; background-size: 100% auto; border: solid 1px darkslategray; box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001; mix-blend-mode: multiply; } body .charsheet > div:not(.tabs) { position: relative; box-shadow: inset 0 2px 4px 0 #0003; margin: -10px -10px 0 -10px; padding: 10px 10px 0 10px; } body .charsheet > div:not(.tabs):before { position: absolute; content: ''; background: 95% 25px no-repeat; background-size: auto 100px; width: 100%; height: 100%; opacity: 0.15; z-index: -1; } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Administratum'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Administratum'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/administratum.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Astra Telepathica'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Astra Telepathica'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/telepathica.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Mechanicus'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Mechanicus'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/mechanicus.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Adeptus Ministorum'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Adeptus Ministorum'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/ministorum.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Astra Militarum'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Astra Militarum'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/militarum.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Imperial Fleet'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Imperial Fleet'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/navy.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Infractionist'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Infractionist'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/infractionist.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='The Inquisition'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='The Inquisition'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/inquisition.png'); } body .charsheet .toggle-sheet[value='character'] ~ .faction[value='Rogue Trader Dynasty'] ~ div:not(.tabs):before, body .charsheet .toggle-sheet[value='patron'] ~ .patron-faction[value='Rogue Trader Dynasty'] ~ div:not(.tabs):before { background-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/rogue_trader.png'); } .charsheet h1 { background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/logo.png') left top no-repeat; background-size: contain; display: block; width: 100%; padding: 0; margin: 0; text-indent: -9999px; } .charsheet h2, .charsheet h3 { text-transform: uppercase; font-size: 18px; text-align: center; line-height: unset; border-bottom: solid 1.5px slategray; margin-bottom: 5px; } .charsheet h3 { font-size: 10px; } .charsheet label, .label { font-size: 10px; font-weight: normal; display: inline-block; width: 100%; line-height: 20px; padding: 0; margin: 0; box-sizing: border-box; text-align: left; vertical-align: middle; text-transform: uppercase; color: black; border-radius: 0; white-space: unset; } .charsheet label sub, .label sub { display: block; bottom: unset; font-size: 0.5em; } .label:empty { display: unset; } .charsheet .vcol > label, .vcol > .label { margin: -10px 0 0 0; } .charsheet .vsplit .vcol > label, .vsplit .vcol > .label { margin: 0; } .charsheet .vcol.nogap > label, .vcol.nogap > .label { margin: 0; } body .charsheet div .grid input, body .charsheet div .grid input[type=number], body .charsheet select, body .charsheet .input, body .charsheet .input * { font-family: Times, 'Times New Roman', serif; font-size: 14px; } body .charsheet div .grid input, body .charsheet div .grid input[type=number], body .charsheet select, body .charsheet .input { display: inline-block; width: 100%; height: 20px; border: none; border-bottom: solid 0.5px black; border-radius: 0; padding: 0 5px; margin: 0; box-sizing: border-box; background: none; color: black; line-height: 20px; text-align: left; vertical-align: middle; outline: none; overflow: hidden; } body .charsheet *:not(button).input { cursor: default; } body .charsheet select { background: white; appearance: none; box-shadow: none; } body .charsheet div .grid input[type=checkbox] { appearance: none; place-content: center; width: 20px; } body .charsheet input[type=checkbox]:before { content: ''; font-family: 'Pictos'; } body .charsheet input[type=checkbox]:checked:before { content: '3'; } body .charsheet > div:not(.tabs) button[type=roll] { content: ''; padding: 0; margin: 0; font-size: unset; text-shadow: unset; border: unset; border-color: unset; box-shadow: unset; } body .charsheet > div:not(.tabs) button[type=roll]:before { content: ''; } body .charsheet > div:not(.tabs) button[type=action], body .charsheet > div:not(.tabs) button[type=roll] { transition: 120ms all ease-in-out; border-radius: 5px; box-shadow: inset 0 -1px 4px black; border: unset; } body .charsheet > div:not(.tabs) button[type=action]:hover, body .charsheet > div:not(.tabs) button[type=roll]:hover { background: darkslategray; color: whitesmoke; } body .charsheet > div:not(.tabs) button[type=action]:hover *, body .charsheet > div:not(.tabs) button[type=roll]:hover * { color: whitesmoke; } body .charsheet > div:not(.tabs) button[type=action]:active, body .charsheet > div:not(.tabs) button[type=roll]:active { background: slategray; color: white; } body .charsheet > div:not(.tabs) button[type=action]:active *, body .charsheet > div:not(.tabs) button[type=roll]:active * { color: white; } body .charsheet > div:not(.tabs) button[type=action].dice, body .charsheet > div:not(.tabs) button[type=roll].dice { text-align: center; } body .charsheet > div:not(.tabs) button[type=action].dice:before, body .charsheet > div:not(.tabs) button[type=roll].dice:before { content: '0'; font-family: 'dicefontd10'; } .itemcontrol { z-index: 100; } .charsheet .grid, .repcontainer, .repitem { display: grid; margin: 0; padding: 0; grid-auto-rows: minmax(min-content, max-content); gap: 10px; } .charsheet .flex { display: flex; margin: 0; padding: 0; gap: 10px; align-items: center; } body .charsheet .slim { width: fit-content; justify-self: center; } body .charsheet div .flex > *, body .charsheet div .flex > input { width: unset; } .repcontainer { margin-bottom: 10px; } .charsheet .nogap { gap: 0px; } .charsheet .novgap { row-gap: 0px; } .charsheet .widegap { gap: 20px; } .charsheet .vwidegap { row-gap: 20px; } .col2 { grid-template-columns: repeat(2, 1fr); } .col3 { grid-template-columns: repeat(3, 1fr); } .col3-chars { grid-template-columns: 3fr 1fr 2fr; } .col3-hitloc { grid-template-columns: 1fr 5fr 3fr; } .col4 { grid-template-columns: repeat(4, 1fr); } .col4-profile1 { grid-template-columns: 5fr 7fr 4fr 5fr; } .col5 { grid-template-columns: repeat(5, 1fr); } .col5-skills { grid-template-columns: 8fr 3fr 2fr 3fr 4fr; } .col5-npcname { grid-template-columns: 2fr 1fr 1fr 2fr 1fr; } .col6 { grid-template-columns: repeat(6, 1fr); } .col7 { grid-template-columns: repeat(7, 1fr); } .col8 { grid-template-columns: repeat(8, 1fr); } .col9 { grid-template-columns: repeat(9, 1fr); } .col10 { grid-template-columns: repeat(10, 1fr); } .col10-chars { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .slot1 { grid-column: 1; } .slot2 { grid-column: 2; } .slot3 { grid-column: 3; } .slot4 { grid-column: 4; } .span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span5 { grid-column: span 5; width: unset; } .span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span9 { grid-column: span 9; } .span10 { grid-column: span 10; } .vspan2 { grid-row: span 2; } .vspan3 { grid-row: span 3; } .vcol { grid-template-rows: 20px auto; grid-auto-flow: column; } .col4-skills, .repeating_specialisations ~ .repcontainer .repitem { grid-template-columns: 8fr 5fr 3fr 4fr; } .col3-influences, .repeating_influences ~ .repcontainer .repitem { grid-template-columns: 5fr 1fr 12fr; } .col2-talents, .repeating_talents ~ .repcontainer .repitem { grid-template-columns: 5fr 13fr; } .col2-crits, .repeating_criticals ~ .repcontainer .repitem { grid-template-columns: 3fr 13fr; } .col8-weapons, .repeating_weapons ~ .repcontainer .repitem { grid-template-columns: 6fr 3fr 1fr 2fr 3fr 2fr 1fr 8fr; } .col5-armour, .repeating_armour ~ .repcontainer .repitem { grid-template-columns: 6fr 4fr 1fr 1fr 9fr; } .col10-powers, .repeating_powers ~ .repcontainer .repitem { grid-template-columns: 5fr 5fr 1fr 1fr 1fr 4fr 4fr 4fr 3fr 50px; } .col4-influences, .repeating_patroninfluences ~ .repcontainer .repitem { grid-template-columns: 5fr 1fr 12fr 10fr; } .repeating_npcskills ~ .repcontainer .repitem { grid-template-columns: 22fr 3fr 2fr; } .repeating_npctraits ~ .repcontainer .repitem { grid-template-columns: 2fr 5fr; } .col7-npcattacks, .repeating_npcattacks ~ .repcontainer .repitem { grid-template-columns: 4fr 4fr 2fr 1fr 4fr 2fr 4fr; } /* ++AUTOEXPAND++ */ .auto-expand { position: relative; cursor: text; word-wrap: break-word; min-height: 20px; } .auto-expand.tall { min-height: 100px; } .auto-expand span { font-family: Times, 'Times New Roman', serif; visibility: hidden; white-space: pre-wrap; display: block; line-height: 20px; padding: 0 5px; border: dashed 0.5px gray; border-radius: 5px; } .auto-expand textarea { font-family: Times, 'Times New Roman', serif; position: absolute; z-index: 1; top: 0; left: 0; margin: 0; padding: 0 5px; overflow: hidden; resize: none; line-height: 20px; height: 100%; width: 100%; display: block; box-sizing: border-box; background: transparent; box-shadow: none; color: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; border: dashed 0.5px gray; border-radius: 5px; } /* ++TABS++ */ .tabs { display: flex; background: linear-gradient(105deg, slategray 0%, lightslategray 45%, darkslategray 55%, slategray 100%); color: silver; text-shadow: 0 0 4px lightslategray; box-shadow: inset 0 2px 2px silver, inset 0 -2px 2px #333; margin: -10px -10px 10px -10px; padding: 0 10px; border-bottom: solid 1px darkslategray; align-items: center; } .tabs div { box-sizing: border-box; margin: 0; padding: 0; } .tabs button { background: unset; font-family: courier; color: silver; text-shadow: 0 1px 1px darkslategray; box-shadow: inset 0 -2px 2px #333, inset 0 2px 2px silver; height: 30px; padding: 5px 15px; border: solid 1px darkslategray; text-transform: uppercase; font-weight: bold; transition: 120ms all ease-in-out; } .tabs button:hover { filter: brightness(85%); box-shadow: inset 0 2px 2px #000; } .tabs button:active, .toggle-tabs[value='page1'] ~ .tabs div.tab-page1 button, .toggle-tabs[value='page2'] ~ .tabs div.tab-page2 button, .toggle-tabs[value='patron'] ~ .tabs div.tab-patron button, .toggle-tabs[value='npc'] ~ .tabs div.tab-npc button, .toggle-tabs[value='settings'] ~ .tabs div.tab-settings button { filter: brightness(85%); box-shadow: inset 0 3px 5px #000; } body .charsheet .page1, body .charsheet .page2, body .charsheet .patron, body .charsheet .npc, body .charsheet .settings { display: none; } body .charsheet .page1:after, body .charsheet .page2:after, body .charsheet .patron:after, body .charsheet .npc:after, body .charsheet .settings:after { content: 'Imperium Maledictum Excultus Character Sheet Ver.0.24 | https://app.roll20.net/users/561389/craig-g | https://app.roll20.net/users/2699740/robert-b'; text-align: right; font-size: 8px; } body .toggle-tabs[value='page1'] ~ div.page1, body .toggle-tabs[value='page2'] ~ div.page2, body .toggle-tabs[value='patron'] ~ div.patron, body .toggle-tabs[value='npc'] ~ div.npc, body .toggle-tabs[value='settings'] ~ div.settings { display: grid; } .charsheet .toggle-sheet:not([value='character']) ~ .tabs div.tab-page1, .charsheet .toggle-sheet:not([value='character']) ~ .tabs div.tab-page2, .charsheet .toggle-sheet:not([value='patron']) ~ .tabs div.tab-patron, .charsheet .toggle-sheet:not([value='npc']) ~ .tabs div.tab-npc, .charsheet .toggle-sheet[value='patron'] ~ div .character { display: none; } body .charsheet .tabs .roller { flex: 1; height: 30px; text-align: right; align-items: center; } body .charsheet .tabs .roller > * { width: fit-content; } body .charsheet .tabs .roller > input, body .charsheet .tabs .roller > input[type=number], body .charsheet .tabs .roller > select, body .charsheet .tabs .roller > .input { background: repeating-linear-gradient( #000 2px, #050 4px); font-family: courier; text-transform: uppercase; color: white; text-shadow: 0 0 4px white; box-shadow: inset 0 2px 2px black, 0 1px 1px silver; border: solid 1px darkslategray; height: 100%; line-height: unset; } /* ++END TABS++ */ .charsheet .grid.lined { mix-blend-mode: multiply; } .charsheet .grid.lined > .grid, .charsheet .grid.lined .repcontainer, .charsheet .grid.lined .repitem { background: darkgray; gap: 1px; height: fit-content; } .charsheet .grid.lined .repcontainer { border-top: solid 1px darkgray; } body .charsheet div .grid.lined input, body .charsheet div .grid.lined input[type=number], body .charsheet .grid.lined select, body .grid.lined .input, .charsheet .grid.lined > .grid > *, .charsheet .grid.lined .repitem > * { background: white; border: none; border-radius: unset; padding: 2px 0; height: unset; text-align: center; overflow: hidden; } body .charsheet .grid.lined > .grid > *.pullup, body .charsheet .grid.lined .repitem > *.pullup { padding: 0; } .charsheet .grid.lined:not(.tight) label::first-letter, .charsheet .grid.lined:not(.tight) .label::first-letter { font-size: 1.5em; } .charsheet .grid.lined > .grid > *:first-child, .charsheet .grid.lined .repitem > *:nth-child(2), .characteristics .lined > .grid > *:nth-child(10n+11), .skills .lined > .grid > *:nth-child(7n+5) { text-align: left; } .skills .lined > .grid > *:nth-child(n+0):nth-child(-n+4) { font-weight: bold; font-size: 0.8em; } body .charsheet .repitem input[type=checkbox] { -webkit-appearance: none; appearance: none; background: none; margin: 0; padding: 0; border: none; display: grid; place-content: center; } body .charsheet .repitem input[type=checkbox]:before { transition: 120ms all ease-in-out; content: '&'; font-family: 'Pictos'; } body .charsheet .repitem input[type=checkbox]:checked:before { content: '_'; } body .charsheet .repitem .toggle-details + .auto-expand { transition: 120ms all ease-in-out; display: none; } body .charsheet .repitem .toggle-details[value='1'] + .auto-expand { display: block; } body .charsheet .grid .hint { color: gray; text-transform: capitalize; text-align: center; } body .charsheet .grid .lrg { font-size: 18px; } .vsplit { position: relative; } .vsplit:before { content: ''; position: absolute; bottom: 0; left: 50%; background: slategray; height: calc(100% - 50px); width: 1.5px; margin-left: -0.75px; } .vsplit h2 { xbackground-color: white; } body .charsheet div .grid.vsplit label, body .charsheet div .grid.vsplit .label { text-align: center; xbackground-color: white; } body .charsheet div .grid.vsplit input, body .charsheet div .grid.vsplit input[type=number], body .charsheet .grid.vsplit select, body .charsheet div .grid input.dotted, body .charsheet div .grid input[type=number].dotted, body .charsheet div .grid select.dotted { border: dashed 0.5px gray; border-radius: 5px; text-align: center; } body .grid.vsplit .input, body .charsheet div .grid .input.dotted { border: none; text-align: center; } body .charsheet div .grid input.unlined, body .charsheet div .grid input[type=number].unlined, body .charsheet div .grid select.unlined, body .charsheet div .grid .input.unlined { border: none; text-align: center; } /* ++PAGE 1++ */ body .charsheet .split { position: relative; } body .charsheet .split:before { content: ''; position: absolute; top: 6px; left: 50%; transform: translate(-50%, -0%); height: 14px; width: 14px; background: linear-gradient(105deg, #00000000 0%, #00000000 calc(50% - 0.8px), black 50%, #00000000 calc(50% + 0.8px), #00000000 100%); } body .charsheet .xp:after { content: 'XP'; position: absolute; bottom: 4px; left: 50%; transform: translate(-50%, -0%); font-size: 10px; } body .charsheet div .grid.split input[type=number], body .charsheet div .grid.split .input { text-align: center; } body .charsheet .characteristics .grid.lined > .grid > *:nth-child(n+32):nth-child(-n+41) { background: linear-gradient(90deg, gainsboro 50%, white 50%); letter-spacing: 0.2em; font-weight: bold; text-indent: 0.2em; } body .charsheet .characteristics .grid.lined > .grid > button[type=action]:hover { background: linear-gradient(90deg, black 50%, darkslategray 50%); } body .charsheet .characteristics .grid.lined > .grid > button[type=action]:active { background: linear-gradient(90deg, darkslategray 50%, slategray 50%); } .corruption.vsplit:before { left: 24%; } .corruption .auto-expand { background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/imperium-maledictum-dev/Imperium%20Maledictum%20Excultus/images/chaos.png') center center no-repeat; background-size: contain; min-height: 75px; mix-blend-mode: multiply; } /* ++PAGE 2++ */ .warpcharge.vsplit:before { bottom: 20px; left: 57px; height: calc(100% - 97px); } .wounds.vsplit:before { height: calc(100% - 72px); } .encumbrance.vsplit:before { bottom: 20px; height: calc(100% - 61px); } .repeating_weapons ~ .repcontainer .melee, .repeating_weapons ~ .repcontainer .weaponspec[value='Brawling'] ~ .ranged, .repeating_weapons ~ .repcontainer .weaponspec[value='One-handed'] ~ .ranged, .repeating_weapons ~ .repcontainer .weaponspec[value='Two-handed'] ~ .ranged { display: none; } .repeating_weapons ~ .repcontainer .weaponspec[value='Brawling'] ~ .melee, .repeating_weapons ~ .repcontainer .weaponspec[value='One-handed'] ~ .melee, .repeating_weapons ~ .repcontainer .weaponspec[value='Two-handed'] ~ .melee { display: grid; } .powers h2 { position: relative; } .powers h2 .flex { position: absolute; right: 0; top: 0; } /* ++NPC++ */ .charsheet .npc .grid.lined > .grid > * > .label { text-align: center; } /* ++ROLL TEMPLATES++ */ .sheet-rolltemplate-imtest, .sheet-rolltemplate-imbasic { box-sizing: border-box; background: repeating-linear-gradient( #000 2px, #050 4px); width: 100%; box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001; } .sheet-rolltemplate-imtest .sheet-container .inlinerollresult, .sheet-rolltemplate-imbasic .sheet-container .inlinerollresult { background: none; border: 0; padding: 0; } .sheet-rolltemplate-imtest .sheet-container, .sheet-rolltemplate-imbasic .sheet-container { display: grid; grid-template-columns: 1fr; gap: 0; } .sheet-rolltemplate-imtest .sheet-container *, .sheet-rolltemplate-imbasic .sheet-container * { font-family: courier; text-transform: uppercase; color: white; text-shadow: 0 0 4px white; } .sheet-rolltemplate-imtest .sheet-container h1, .sheet-rolltemplate-imtest .sheet-container p, .sheet-rolltemplate-imbasic .sheet-container h1, .sheet-rolltemplate-imbasic .sheet-container p { font-size: 13px; margin: 0; padding: 0 5px; line-height: unset; } .sheet-rolltemplate-imtest .sheet-container h1, .sheet-rolltemplate-imtest .sheet-container h1 *, .sheet-rolltemplate-imbasic .sheet-container h1, .sheet-rolltemplate-imbasic .sheet-container h1 * { color: yellow; text-shadow: 0 0 4px yellow; padding: 5px; } .sheet-rolltemplate-imtest .sheet-container *:first-child, .sheet-rolltemplate-imbasic .sheet-container *:first-child { margin-top: 5px; } .sheet-rolltemplate-imtest .sheet-container .sheet-options, .sheet-rolltemplate-imbasic .sheet-container .sheet-options { text-align: center; } .sheet-rolltemplate-imtest .sheet-container .sheet-options, .sheet-rolltemplate-imbasic .sheet-container .sheet-options { margin-top: 5px; } .sheet-rolltemplate-imtest .sheet-container .sheet-options, .sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"], .sheet-rolltemplate-imbasic .sheet-container .sheet-options, .sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"] { background: linear-gradient(105deg, slategray 0%, lightslategray 45%, darkslategray 55%, slategray 100%); color: silver; border: solid 1px darkslategray; text-shadow: 0 1px 1px darkslategray; box-shadow: inset 0 2px 2px silver; transition: 120ms all ease-in-out; } .sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"], .sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"] { background: unset; } .sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"]:hover, .sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"]:hover { filter: brightness(85%); box-shadow: inset 0 2px 2px #000; color: yellow; } .sheet-rolltemplate-imtest .sheet-container .sheet-options a[href^="~"]:active, .sheet-rolltemplate-imbasic .sheet-container .sheet-options a[href^="~"]:active { filter: brightness(85%); box-shadow: inset 0 3px 5px #000; color: yellow; }