mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
1400 lines
33 KiB
CSS
1400 lines
33 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&family=Dosis:wght@300&display=swap');
|
|
|
|
:root {
|
|
--color-dark: #405fa5;
|
|
--color-light: #dae1f1;
|
|
--fade-begin: 1px;
|
|
--fade-end: 5px;
|
|
--clock-gradient-filled:var(--color-dark);
|
|
--clock-gradient-empty-start-odd: var(--color-dark);
|
|
--clock-gradient-empty-end-odd: var(--color-light);
|
|
--clock-gradient-empty-start-even: var(--color-dark);
|
|
--clock-gradient-empty-end-even: var(--color-light);
|
|
}
|
|
.sheets-wrapper {
|
|
width: 750px;
|
|
}
|
|
|
|
.character-tab,
|
|
.band-tab,
|
|
.revolution-tab,
|
|
.npc-tab {
|
|
display: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-toggle[value="character"] ~ .character-tab {
|
|
display:block;
|
|
}
|
|
|
|
.sheet-toggle[value="band"] ~ .band-tab {
|
|
display:block;
|
|
}
|
|
|
|
.sheet-toggle[value="revolution"] ~ .revolution-tab {
|
|
display:block;
|
|
}
|
|
.sheet-toggle[value="npcs"] ~ .npc-tab {
|
|
display:block;
|
|
}
|
|
|
|
.header-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 365px);
|
|
column-gap: 20px;
|
|
grid-template-rows: 150px;
|
|
height:200px;
|
|
margin-bottom: 1em;
|
|
background-image: url(https://raw.githubusercontent.com/richranallo/vg-charactersheet/ec2a05d8c12e775855bcd3c9a860430d2a93b5d2/img/right-block.svg);
|
|
background-repeat: no-repeat;
|
|
background-width: cover;
|
|
}
|
|
.logo-cell {
|
|
grid-template-columns: 1;
|
|
grid-template-rows: 1;
|
|
z-index: 200;
|
|
}
|
|
.logo-cell img {
|
|
}
|
|
.sheet-type-cell {
|
|
grid-template-columns: 2;
|
|
grid-template-rows: 1;
|
|
align-self: end;
|
|
padding-left: 5em;
|
|
}
|
|
.sheet-type-cell h2 select {
|
|
color: white;
|
|
}
|
|
|
|
.character-section {
|
|
display: grid;
|
|
justify-content: center;
|
|
margin: auto;
|
|
grid-template-columns: repeat(2, 365px);
|
|
column-gap: 20px;
|
|
grid-template-areas:
|
|
"logo-cell sheet-type-cell"
|
|
"names fame"
|
|
"action-scores descent"
|
|
"action-scores roles"
|
|
"relationships instruments"
|
|
"relationships genre"
|
|
"solos riffs"
|
|
"injury injury"
|
|
"notes gear"
|
|
"mojo mojo"
|
|
}
|
|
.names-cell {
|
|
grid-area: names;
|
|
padding-top: 1em;
|
|
}
|
|
.descent-cell {
|
|
grid-area: descent;
|
|
padding-top: 1em;
|
|
}
|
|
.roles-cell {
|
|
grid-area: roles;
|
|
padding-top: 1em;
|
|
}
|
|
.fame-cell {
|
|
grid-area: fame;
|
|
padding-top: 1em;
|
|
}
|
|
.solos-cell {
|
|
grid-area: solos;
|
|
padding-top: 1em;
|
|
}
|
|
.riffs-cell {
|
|
grid-area: riffs;
|
|
padding-top: 1em;
|
|
}
|
|
.relationships-cell {
|
|
grid-area: relationships;
|
|
padding-top: 1em;
|
|
}
|
|
.genre-cell {
|
|
grid-area: genre;
|
|
padding-top: 1em;
|
|
}
|
|
.instruments-cell {
|
|
grid-area: instruments;
|
|
padding-top: 1em;
|
|
}
|
|
.action-score-cell {
|
|
grid-area: action-scores;
|
|
padding-top: 1em;
|
|
}
|
|
.stress-violence-cell {
|
|
grid-area: injury;
|
|
padding-top: 1em;
|
|
}
|
|
.notes-cell {
|
|
grid-area: notes;
|
|
}
|
|
.gear-cell {
|
|
grid-area: gear;
|
|
}
|
|
.mojo-cell {
|
|
grid-area: mojo;
|
|
}
|
|
.descent-indicator[value="starchild" i] ~ .action-score-cell .action-grid .mojo {
|
|
display: block;
|
|
}
|
|
|
|
.active-drop-target {
|
|
background-color: aliceblue;
|
|
}
|
|
|
|
.band-section {
|
|
display: grid;
|
|
justify-content: center;
|
|
margin: auto;
|
|
column-gap: 20px;
|
|
grid-template-columns: repeat(2, 365px);
|
|
grid-template-areas:
|
|
"band-name band-fame"
|
|
"band-genre band-heat"
|
|
"band-scene band-faction-status"
|
|
"band-sister-cells band-connections"
|
|
"band-assets band-assets"
|
|
"band-discography band-discography"
|
|
;
|
|
}
|
|
.band-name {
|
|
grid-area: band-name;
|
|
padding-top: 1em;
|
|
}
|
|
.band-fame {
|
|
grid-area: band-fame;
|
|
padding-top: 1em;
|
|
}
|
|
.band-heat {
|
|
grid-area: band-heat;
|
|
padding-top: 1em;
|
|
}
|
|
.band-genre {
|
|
grid-area: band-genre;
|
|
padding-top: 1em;
|
|
}
|
|
.band-scene {
|
|
grid-area: band-scene;
|
|
}
|
|
.band-faction-status {
|
|
grid-area: band-faction-status;
|
|
}
|
|
.band-sister-cells {
|
|
grid-area: band-sister-cells;
|
|
}
|
|
.band-connections {
|
|
grid-area: band-connections;
|
|
}
|
|
.band-assets {
|
|
grid-area: band-assets;
|
|
}
|
|
.band-discography {
|
|
grid-area: band-discography;
|
|
}
|
|
|
|
.revolution-strategies {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
justify-content: center;
|
|
grid-template-columns: repeat(5, 150px);
|
|
grid-template-rows: repeat(4, auto) repeat(5, 5em) auto repeat(2, 3em);
|
|
}
|
|
.revolution-section .revolution-strategies .alienation {
|
|
grid-column: 1;
|
|
text-align: center;
|
|
padding-left:5px;
|
|
padding-right: 5px;
|
|
}
|
|
.revolution-section .revolution-strategies .propaganda {
|
|
grid-column: 2;
|
|
text-align: center;
|
|
padding-left:5px;
|
|
padding-right: 5px;
|
|
}
|
|
.revolution-section .revolution-strategies .surveillance {
|
|
grid-column: 3;
|
|
text-align: center;
|
|
padding-left:5px;
|
|
padding-right: 5px;
|
|
}
|
|
.revolution-section .revolution-strategies .subversion {
|
|
grid-column: 4;
|
|
text-align: center;
|
|
padding-left:5px;
|
|
padding-right: 5px;
|
|
}
|
|
.revolution-section .revolution-strategies .violence {
|
|
grid-column: 5;
|
|
text-align: center;
|
|
padding-left:5px;
|
|
padding-right: 5px;
|
|
}
|
|
.revolution-section .revolution-strategies .band-name {
|
|
grid-column: 1 / span 3;
|
|
grid-row: 1;
|
|
padding-right: 20px;
|
|
}
|
|
.revolution-section .revolution-strategies .band-heat {
|
|
grid-column: 4 / span 2;
|
|
grid-row: 1;
|
|
vertical-align: top;
|
|
box-align: top;
|
|
}
|
|
.revolution-section .revolution-strategies .strategies-title {
|
|
grid-row: 3;
|
|
grid-column: 1 / span 5;
|
|
}
|
|
.revolution-section .revolution-strategies .title {
|
|
grid-row: 4;
|
|
}
|
|
.revolution-section .revolution-strategies .width2 {
|
|
grid-row: 5;
|
|
}
|
|
.revolution-section .revolution-strategies .width3 {
|
|
grid-row: 6;
|
|
}
|
|
.revolution-section .revolution-strategies .width4 {
|
|
grid-row: 7;
|
|
}
|
|
.revolution-section .revolution-strategies .width5 {
|
|
grid-row: 8;
|
|
}
|
|
.revolution-section .revolution-strategies .width6 {
|
|
grid-row: 9;
|
|
}
|
|
.revolution-section .revolution-strategies .praxis-title {
|
|
grid-row: 10;
|
|
grid-column: 1 / span 5;
|
|
}
|
|
.revolution-section .revolution-strategies .velvet {
|
|
grid-row: 11;
|
|
}
|
|
.revolution-section .revolution-strategies .cobalt-army {
|
|
grid-row: 12;
|
|
}
|
|
|
|
.centerer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.stress-header {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
.injury-header {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
}
|
|
.injury-limit {
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
}
|
|
.rough-label {
|
|
grid-row: 3;
|
|
grid-column: 2;
|
|
text-align: center;
|
|
}
|
|
.bloody-label {
|
|
grid-row: 3;
|
|
grid-column: 3;
|
|
text-align: center;
|
|
}
|
|
.deadly-label {
|
|
grid-row: 3;
|
|
grid-column: 4;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .action-grid input[type="number"].score {
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
body, p {
|
|
font-family: 'Dosis', sans-serif;
|
|
font-size: : 16px;
|
|
line-height: 1.42857143;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Exo 2',sans-serif;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h2 {
|
|
/* background-image: url("https://raw.githubusercontent.com/richranallo/vg-charactersheet/31ade31e5d350025339cf1d5dc236d03f3ab52b5/img/swipe-pink.svg");*/
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-opacity: .1;
|
|
z-index: -1;
|
|
}
|
|
|
|
label {
|
|
color:inherit;
|
|
}
|
|
|
|
input[type=text], input[type=number], select, textarea {
|
|
padding: 5px;
|
|
margin:3px;
|
|
border: 0;
|
|
background-color: white;
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
border-radius: 5px;
|
|
font-family: inherit;
|
|
font-size: : inherit;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
input[type=text].full {
|
|
width: 100%;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
select.full {
|
|
width: 100%;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
input[type="checkbox"].bubble, input[type="radio"].bubble{
|
|
width: 1.5em;
|
|
height: 1em;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
border: 1px solid var(--color-dark);
|
|
-webkit-appearance: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
margin:0;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
}
|
|
|
|
input[type="radio"]:checked {
|
|
background-color: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
}
|
|
|
|
textarea.full {
|
|
height: 3em;
|
|
width:98%;
|
|
}
|
|
|
|
.header-section select {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
color: var(--color-light);
|
|
font-size: 24px;
|
|
padding:0;
|
|
}
|
|
.no-show {
|
|
opacity: 0;
|
|
}
|
|
|
|
.repcontrol {
|
|
padding-left: 5em;
|
|
padding-right: 5em;
|
|
}
|
|
|
|
.repcontrol button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 50%;
|
|
color: var(--color-dark);
|
|
/* padding-top: 3px;*/
|
|
/* padding-bottom: 3px;*/
|
|
/* padding-left: 8px;*/
|
|
/* padding-right: 8px;*/
|
|
text-shadow: none;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.repcontrol button:hover {
|
|
background-color: var(--color-light);
|
|
}
|
|
|
|
/* ACTION GRID */
|
|
|
|
.action-grid {
|
|
display: grid;
|
|
grid-template-columns: 5em repeat(6,4em);
|
|
grid-template-rows: auto repeat(5, 2em);
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.table-topline {
|
|
text-align: right;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.action-grid .action-roller button {
|
|
border-radius: 5px;
|
|
border: none;
|
|
background-image: none;
|
|
background:none;
|
|
background-color: var(--color-dark);
|
|
color: var(--color-light);
|
|
}
|
|
|
|
.action-grid .action-roller {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.action-grid .mojo {
|
|
display:none;
|
|
}
|
|
|
|
.table-topline>button, .left-column>button {
|
|
border:none;
|
|
background: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
.table-topline>button.selected, .left-column>button.selected {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-dark);
|
|
}
|
|
|
|
.table-topline {
|
|
text-align: center;
|
|
}
|
|
|
|
.action-grid .action-roller {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.action-grid .organize {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.action-grid .perform {
|
|
grid-row: 3;
|
|
}
|
|
|
|
.action-grid .pose {
|
|
grid-row: 4;
|
|
}
|
|
|
|
.action-grid .perceive {
|
|
grid-row: 5;
|
|
}
|
|
|
|
.action-grid .evade {
|
|
grid-row: 6;
|
|
}
|
|
|
|
.action-grid .music {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.action-grid .violence {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.action-grid .tech {
|
|
grid-column: 4;
|
|
}
|
|
|
|
.action-grid .authority {
|
|
grid-column: 5;
|
|
}
|
|
|
|
.action-grid .minds {
|
|
grid-column: 6;
|
|
}
|
|
|
|
.action-grid .mojo {
|
|
grid-column: 7;
|
|
}
|
|
|
|
.action-grid .music:hover ~ .music > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .violence:hover ~ .violence > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .tech:hover ~ .tech > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .authority:hover ~ .authority > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .minds:hover ~ .minds > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .mojo:hover ~ .mojo > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .organize:hover ~ .organize > .left-column > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .perform:hover ~ .perform > .left-column > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .pose:hover ~ .pose > .left-column > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .perceive:hover ~ .perceive > .left-column > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.action-grid .evade:hover ~ .evade > .left-column > button {
|
|
box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
|
|
}
|
|
|
|
.left-column {
|
|
grid-column: 1;
|
|
line-height: 0px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.action-grid input[type=number] {
|
|
padding: 2px;
|
|
}
|
|
|
|
/* SOLOS */
|
|
.solo-line {
|
|
display: grid;
|
|
grid-template-columns: 2em 1fr;
|
|
white-space: nowrap;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
.solo-name>input {
|
|
/* width: 100%;*/
|
|
}
|
|
|
|
.solo-spent {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.solo-name {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
/* RELATIONSHIPS */
|
|
|
|
.relationship-line {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
column-gap: 15px;
|
|
}
|
|
|
|
.relationship-target input[type=text] {
|
|
/* width:75%;*/
|
|
}
|
|
|
|
.relationship-type select {
|
|
width:100%;
|
|
}
|
|
|
|
.relationship-line ~ select {
|
|
/* width:100%;*/
|
|
}
|
|
|
|
.relationship-spent {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.relationship-target {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.relationship-strength {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.relationship-type {
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
/* FAME */
|
|
.fame-line {
|
|
display: grid;
|
|
grid-template-columns: 2em 3fr 1fr;
|
|
align-items: center;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
.fame-score,
|
|
.fame-check,
|
|
.fame-clock {
|
|
align-self: center;
|
|
}
|
|
.fame-line .fame-check {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
.fame-line .fame-score {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
.fame-line .fame-clock {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.band-fame-line {
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
align-items: center;
|
|
column-gap: 15px;
|
|
}
|
|
.band-fame-line .fame-score {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
.band-fame-line .fame-clock {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* INJURY/STRESS */
|
|
.stress-violence-container {
|
|
display: grid;
|
|
align-content: left;
|
|
grid-template-areas:
|
|
"stress rough bloody deadly";
|
|
}
|
|
.stress-violence-container .stress-cell {
|
|
grid-area: stress;
|
|
}
|
|
.stress-violence-container .rough-cell {
|
|
grid-area: rough;
|
|
}
|
|
.stress-violence-container .bloody-cell {
|
|
grid-area: bloody;
|
|
}
|
|
.stress-violence-container .deadly-cell {
|
|
grid-area: deadly;
|
|
}
|
|
.injury-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"third-degree clock"
|
|
"second-degree clock"
|
|
"first-degree clock"
|
|
"injury-label injury-label";
|
|
column-gap: 5px;
|
|
}
|
|
.injury-container .injury-clock {
|
|
grid-area: clock;
|
|
}
|
|
.injury-container .third-degree {
|
|
grid-area: third-degree;
|
|
text-align: right;
|
|
}
|
|
.injury-container .second-degree {
|
|
grid-area: second-degree;
|
|
text-align: right;
|
|
}
|
|
.injury-container .first-degree {
|
|
grid-area: first-degree;
|
|
text-align: right;
|
|
}
|
|
.injury-container .injury-label {
|
|
grid-area: injury-label;
|
|
text-align: center;
|
|
}
|
|
|
|
/* MOJO */
|
|
.mojo-cell {
|
|
display: none;
|
|
}
|
|
|
|
.descent-indicator[value="starchild" i] ~ .mojo-cell {
|
|
display: inherit;
|
|
}
|
|
|
|
.mojo-line {
|
|
display: none;
|
|
height: 5em;
|
|
}
|
|
|
|
.mojo-grid .repcontrol {
|
|
display:none;
|
|
}
|
|
|
|
.mojo-talent {
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.mojo-line h3 {
|
|
width: 5em;
|
|
margin: 10px;
|
|
}
|
|
|
|
.mojo-line p {
|
|
width: 7em;
|
|
margin: 10px;
|
|
}
|
|
|
|
.riff-indicator[value~="flex" i] ~ .flex {
|
|
display: flex;
|
|
}
|
|
|
|
.riff-indicator[value~="sparkle" i] ~ .sparkle {
|
|
display: flex;
|
|
}
|
|
|
|
.riff-indicator[value~="vibe" i] ~ .vibe {
|
|
display: flex;
|
|
}
|
|
|
|
.organize-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .organize {
|
|
display: block;
|
|
}
|
|
|
|
.perform-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .perform {
|
|
display: block;
|
|
}
|
|
|
|
.pose-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .pose {
|
|
display: block;
|
|
}
|
|
|
|
.evade-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .evade {
|
|
display: block;
|
|
}
|
|
|
|
.perceive-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .perceive {
|
|
display: block;
|
|
}
|
|
|
|
/* FACTION STATUS */
|
|
.faction-status-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"velvet . . cobalt"
|
|
"velvet5 velvetcheck5 cobaltcheck5 cobalt5"
|
|
"velvet4 velvetcheck4 cobaltcheck4 cobalt4"
|
|
"velvet3 velvetcheck3 cobaltcheck3 cobalt3"
|
|
"velvet2 velvetcheck2 cobaltcheck2 cobalt2"
|
|
"velvet1 velvetcheck1 cobaltcheck1 cobalt1"
|
|
;
|
|
}
|
|
|
|
.faction-status-container .velvet {
|
|
grid-area: velvet;
|
|
}
|
|
.faction-status-container .velvet5 {
|
|
grid-area: velvet5;
|
|
}
|
|
.faction-status-container .velvet4 {
|
|
grid-area: velvet4;
|
|
}
|
|
.faction-status-container .velvet3 {
|
|
grid-area: velvet3;
|
|
}
|
|
.faction-status-container .velvet2 {
|
|
grid-area: velvet2;
|
|
}
|
|
.faction-status-container .velvet1 {
|
|
grid-area: velvet1;
|
|
}
|
|
.faction-status-container .velvetcheck1 {
|
|
grid-area: velvetcheck1;
|
|
}
|
|
.faction-status-container .velvetcheck2 {
|
|
grid-area: velvetcheck2;
|
|
}
|
|
.faction-status-container .velvetcheck3 {
|
|
grid-area: velvetcheck3;
|
|
}
|
|
.faction-status-container .velvetcheck4 {
|
|
grid-area: velvetcheck4;
|
|
}
|
|
.faction-status-container .velvetcheck5 {
|
|
grid-area: velvetcheck5;
|
|
}
|
|
.faction-status-container .cobalt {
|
|
grid-area: cobalt;
|
|
}
|
|
.faction-status-container .cobalt5 {
|
|
grid-area: cobalt5;
|
|
}
|
|
.faction-status-container .cobalt4 {
|
|
grid-area: cobalt4;
|
|
}
|
|
.faction-status-container .cobalt3 {
|
|
grid-area: cobalt3;
|
|
}
|
|
.faction-status-container .cobalt2 {
|
|
grid-area: cobalt2;
|
|
}
|
|
.faction-status-container .cobalt1 {
|
|
grid-area: cobalt1;
|
|
}
|
|
.faction-status-container .cobaltcheck5 {
|
|
grid-area: cobaltcheck5;
|
|
}
|
|
.faction-status-container .cobaltcheck4 {
|
|
grid-area: cobaltcheck4;
|
|
}
|
|
.faction-status-container .cobaltcheck3 {
|
|
grid-area: cobaltcheck3;
|
|
}
|
|
.faction-status-container .cobaltcheck2 {
|
|
grid-area: cobaltcheck2;
|
|
}
|
|
.faction-status-container .cobaltcheck1 {
|
|
grid-area: cobaltcheck1;
|
|
}
|
|
.velvet-status:checked ~ .velvet-status {
|
|
background-color: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
}
|
|
.cobalt-status:checked ~ .cobalt-status {
|
|
background-color: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
}
|
|
|
|
/* SCENE */
|
|
.band-scene-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
grid-column-gap: 1em;
|
|
grid-template-rows: repeat(6, auto);
|
|
}
|
|
|
|
.band-scene-container p {
|
|
margin-top:9px;
|
|
}
|
|
|
|
.band-scene-container .fame {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.band-scene-container .level {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.band-scene-container .scene {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.band-scene-container .title {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.band-scene-container .global {
|
|
grid-row: 2;
|
|
display: none;
|
|
}
|
|
|
|
.band-scene-container .nation {
|
|
grid-row: 3;
|
|
display: none;
|
|
}
|
|
|
|
.band-scene-container .region {
|
|
grid-row: 4;
|
|
display: none;
|
|
}
|
|
|
|
.band-scene-container .city {
|
|
grid-row: 5;
|
|
display: none;
|
|
}
|
|
|
|
.band-scene-container .dims {
|
|
grid-row: 6;
|
|
display: none;
|
|
}
|
|
|
|
.fame-width-indicator[value="2"] ~ .dims {
|
|
display: block;
|
|
}
|
|
|
|
.fame-width-indicator[value="3"] ~ .dims,
|
|
.fame-width-indicator[value="3"] ~ .city {
|
|
display: block;
|
|
}
|
|
|
|
.fame-width-indicator[value="4"] ~ .dims,
|
|
.fame-width-indicator[value="4"] ~ .city,
|
|
.fame-width-indicator[value="4"] ~ .region {
|
|
display: block;
|
|
}
|
|
|
|
.fame-width-indicator[value="5"] ~ .dims,
|
|
.fame-width-indicator[value="5"] ~ .city,
|
|
.fame-width-indicator[value="5"] ~ .region,
|
|
.fame-width-indicator[value="5"] ~ .nation {
|
|
display: block;
|
|
}
|
|
|
|
.fame-width-indicator[value="6"] ~ .dims,
|
|
.fame-width-indicator[value="6"] ~ .city,
|
|
.fame-width-indicator[value="6"] ~ .region,
|
|
.fame-width-indicator[value="6"] ~ .nation,
|
|
.fame-width-indicator[value="6"] ~ .global {
|
|
display: block;
|
|
}
|
|
|
|
/* ASSETS */
|
|
|
|
.asset-container .repcontainer .repitem {
|
|
width: 25%;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.asset-container .repcontainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.vehicle-options,
|
|
.music-space-options,
|
|
.hideout-options,
|
|
.crime-lab-options,
|
|
.community-options,
|
|
.network-options {
|
|
display: none;
|
|
}
|
|
|
|
.active-asset[value="vehicle"] ~ .vehicle-options {
|
|
display: block;
|
|
}
|
|
|
|
.active-asset[value="musicSpace"] ~ .music-space-options {
|
|
display: block;
|
|
}
|
|
|
|
.active-asset[value="hideout"] ~ .hideout-options {
|
|
display: block;
|
|
}
|
|
|
|
.active-asset[value="crimeLab"] ~ .crime-lab-options {
|
|
display: block;
|
|
}
|
|
|
|
.active-asset[value="community"] ~ .community-options {
|
|
display: block;
|
|
}
|
|
|
|
.active-asset[value="network"] ~ .network-options {
|
|
display: block;
|
|
}
|
|
|
|
/* DISCOGRAPHY */
|
|
|
|
.song-container .repcontainer .repitem {
|
|
width: 25%;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.song-container .repcontainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.song-container .repcontainer .repitem textarea {
|
|
height:3em;
|
|
}
|
|
|
|
/* NPCs */
|
|
.npc-container{
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
grid-template-rows: repeat(4, auto);
|
|
}
|
|
.npc-name {
|
|
grid-column: 1/span 2;
|
|
grid-row: 1;
|
|
}
|
|
.npc-action-scores {
|
|
grid-column: 1;
|
|
grid-row: 2/span 2;
|
|
}
|
|
.npc-secondary-stats {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
.npc-injury {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
}
|
|
.npc-injury .injury-container {
|
|
padding-top: 10px;
|
|
}
|
|
.npc-notes {
|
|
grid-column: 1/span 2;
|
|
grid-row: 4;
|
|
}
|
|
.npc-secondary-stats .score-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dogsheet .repcontainer .repitem {
|
|
width: 50%;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.dogsheet .repcontainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
input[type="checkbox"].npc-check {
|
|
display:none;
|
|
}
|
|
.npc-score[value="1"] ~ .npc-check[class*="1"] {
|
|
display: inline-block;
|
|
}
|
|
.npc-score[value="2"] ~ .npc-check[class*="2"] {
|
|
display: inline-block;
|
|
}
|
|
.npc-score[value="3"] ~ .npc-check[class*="3"] {
|
|
display: inline-block;
|
|
}
|
|
.npc-score[value="4"] ~ .npc-check[class*="4"] {
|
|
display: inline-block;
|
|
}
|
|
.npc-score[value="5"] ~ .npc-check[class*="5"] {
|
|
display: inline-block;
|
|
}
|
|
.npc-score[value="6"] ~ .npc-check[class*="6"] {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/* CLOCK STUFF */
|
|
|
|
.clock-checkbox {
|
|
width: 1em;
|
|
height: 1em;
|
|
align-self: center;
|
|
}
|
|
|
|
.clock-0 {
|
|
grid-area: c0;
|
|
align-self: center;
|
|
}
|
|
|
|
.clock-1 {
|
|
grid-area: c1;
|
|
}
|
|
.clock-2 {
|
|
grid-area: c2;
|
|
}
|
|
.clock-3 {
|
|
grid-area: c3;
|
|
}
|
|
.clock-4 {
|
|
grid-area: c4;
|
|
}
|
|
.clock-5 {
|
|
grid-area: c5;
|
|
}
|
|
.clock-6 {
|
|
grid-area: c6;
|
|
}
|
|
.clock-7 {
|
|
grid-area: c7;
|
|
}
|
|
.clock-8 {
|
|
grid-area: c8;
|
|
}
|
|
|
|
.clock-0:checked {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 3-CLOCK */
|
|
|
|
.clock-container-3 {
|
|
display: grid;
|
|
grid-template-areas:
|
|
". c3 c3 c1 c1 c0"
|
|
". c3 c3 c1 c1 ww"
|
|
". xx c2 c2 yy yy"
|
|
". xx c2 c2 yy yy";
|
|
width: 7.25em;
|
|
height: 5em;
|
|
}
|
|
|
|
.clock-container-3 .clock {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
grid-column: 2 / span 4;
|
|
grid-row: 1 / span 4;
|
|
z-index: -1;
|
|
}
|
|
|
|
.clock-container-3 .clock-checkbox.clock-0:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 120deg,
|
|
var(--clock-gradient-empty-start-even) 120deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-3 .clock-checkbox.clock-1:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 60deg, var(--clock-gradient-filled) 120deg,
|
|
var(--clock-gradient-empty-start-even) 120deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-3 .clock-checkbox.clock-2:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 240deg, var(--clock-gradient-filled) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-3 .clock-checkbox.clock-3:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
|
|
);
|
|
}
|
|
|
|
/* 6-CLOCK */
|
|
|
|
.clock-container-6 {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-areas:
|
|
". c6 xx c1 c0"
|
|
". c5 xx c2 yy"
|
|
". c4 xx c3 yy";
|
|
width: 8em;
|
|
height: 5em;
|
|
}
|
|
|
|
.clock-container-6 .clock {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
grid-column: 2 / span 3;
|
|
grid-row: 1 / span 3;
|
|
z-index: -1;
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-0:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 60deg,
|
|
var(--clock-gradient-empty-start-even) 60deg, var(--clock-gradient-empty-end-even) 120deg,
|
|
var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
|
|
var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-1:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 60deg, var(--clock-gradient-filled) 60deg,
|
|
var(--clock-gradient-empty-start-even) 60deg, var(--clock-gradient-empty-end-even) 120deg,
|
|
var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
|
|
var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-2:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 120deg, var(--clock-gradient-filled) 120deg,
|
|
var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
|
|
var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-3:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 180deg, var(--clock-gradient-filled) 180deg,
|
|
var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-4:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 240deg, var(--clock-gradient-filled) 240deg,
|
|
var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-5:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled), var(--clock-gradient-filled) 300deg,
|
|
var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-6 .clock-checkbox.clock-6:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
|
|
);
|
|
}
|
|
|
|
/* 8-CLOCK */
|
|
|
|
.clock-container-8 {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-template-areas:
|
|
". . c8 c1 . c0"
|
|
". c7 . . c2 ."
|
|
". c6 . . c3 ."
|
|
". . c5 c4 . ."
|
|
;
|
|
width: 7.25em;
|
|
height: 5em;
|
|
}
|
|
|
|
.clock-container-8 .clock {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
/* border: 2px solid black; */
|
|
grid-column: 2 / span 4;
|
|
grid-row: 1 / span 4;
|
|
z-index: -1;
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-0:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 45deg,
|
|
var(--clock-gradient-empty-start-even) 45deg, var(--clock-gradient-empty-end-even) 90deg,
|
|
var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
|
|
var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
|
|
var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-1:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 45deg, var(--clock-gradient-filled) 45deg,
|
|
var(--clock-gradient-empty-start-even) 45deg, var(--clock-gradient-empty-end-even) 90deg,
|
|
var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
|
|
var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
|
|
var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-2:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 90deg, var(--clock-gradient-filled) 90deg,
|
|
var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
|
|
var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
|
|
var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-3:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 135deg, var(--clock-gradient-filled) 135deg,
|
|
var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
|
|
var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-4:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 180deg, var(--clock-gradient-filled) 180deg,
|
|
var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-5:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 225deg, var(--clock-gradient-filled) 225deg,
|
|
var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-6:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 270deg, var(--clock-gradient-filled) 270deg,
|
|
var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-7:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 315deg, var(--clock-gradient-filled) 315deg,
|
|
var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
|
|
);
|
|
}
|
|
|
|
.clock-container-8 .clock-checkbox.clock-8:checked ~ .clock {
|
|
background: conic-gradient(
|
|
var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
|
|
);
|
|
}
|