WordPress.org
Get WordPress

Plugin Directory


Ignore:
Timestamp:
09/24/2024 10:19:35 AM (18 months ago)
Author:
joostdevalk
Message:

Update to version 0.9.5 from GitHub

File:
1 edited

Legend:

Unmodified
Added
Removed

  • progress-planner/trunk/assets/css/admin.css

    r3114153 r3156816  
    9797.prpl-widget-title {
    9898    margin-top: 0;
    99 }
    100 
    101 .prpl-widget-title:has(.prpl-info-icon) {
    102     display: flex;
    103     justify-content: space-between;
     99
     100    &:has(.prpl-info-icon) {
     101        display: flex;
     102        justify-content: space-between;
     103    }
     104}
     105
     106.prpl-hidden {
     107    display: none !important;
    104108}
    105109
    … …  
    176180}
    177181
    178 .prpl-column-main-primary .prpl-column {
    179     display: flex;
    180     flex-direction: column;
    181 }
    182 
    183 .prpl-column-main-primary .prpl-column-two-col {
    184     display: grid;
    185     grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
    186     grid-gap: var(--prpl-gap);
     182.prpl-column-main-primary {
     183
     184    .prpl-column {
     185        display: flex;
     186        flex-direction: column;
     187    }
     188
     189    .prpl-column-two-col {
     190        display: grid;
     191        grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
     192        grid-gap: var(--prpl-gap);
     193    }
    187194}
    188195
    … …  
    194201    flex-wrap: wrap;
    195202    gap: var(--prpl-gap);
    196 }
    197 
    198 .two-col:has(.counter-big-wrapper) {
    199     gap: var(--prpl-padding);
    200 }
    201 
    202 .two-col > * {
    203     flex: 1;
    204     min-width: 12em;
    205     max-width: 100%;
    206 }
    207 
    208 .two-col.narrow > * {
    209     min-width: 7em;
     203
     204    &:has(.counter-big-wrapper) {
     205        gap: var(--prpl-padding);
     206    }
     207
     208    > * {
     209        flex: 1;
     210        min-width: 12em;
     211        max-width: 100%;
     212    }
     213
     214    &.narrow > * {
     215        min-width: 7em;
     216    }
    210217}
    211218
    … …  
    264271    flex-direction: column;
    265272    justify-content: space-between;
    266 }
    267 
    268 .prpl-top-counter-bottom-content .counter-big-wrapper {
    269     display: flex;
    270     flex-direction: column;
    271     justify-content: center;
     273
     274    .counter-big-wrapper {
     275        display: flex;
     276        flex-direction: column;
     277        justify-content: center;
     278    }
    272279}
    273280
    … …  
    287294    Activity-score widget.
    288295\*------------------------------------*/
    289 .prpl-widget-wrapper.prpl-website-activity-score .two-col > *:first-child {
    290     flex: 1.4;
    291 }
    292 
    293 .prpl-widget-wrapper.prpl-website-activity-score ul {
    294     margin-top: 10px;
    295 }
    296 
    297 .prpl-widget-wrapper.prpl-website-activity-score ul li {
    298     margin-left: 10px;
    299     line-height: 1.2em;
    300 }
    301 
    302 .prpl-widget-wrapper.prpl-website-activity-score .prpl-icon {
    303     display: inline-block;
    304     text-align: center;
    305     width: .75em;
    306     font-size: 1.25em;
    307     margin-right: 5px;
    308     vertical-align: top;
    309 }
    310 
    311 /* .prpl-widget-wrapper.prpl-website-activity-score .prpl-icon.prpl-green {
    312     color: var(--prpl-color-notification-green);
    313 
    314 }
    315 
    316 .prpl-widget-wrapper.prpl-website-activity-score .prpl-icon.prpl-red {
    317     color: var(--prpl-color-notification-red);
    318 } */
     296.prpl-widget-wrapper.prpl-website-activity-score {
     297
     298    .two-col > *:first-child {
     299        flex: 1.4;
     300    }
     301
     302    ul {
     303        margin-top: 10px;
     304
     305        li {
     306            margin-left: 10px;
     307            line-height: 1.2;
     308        }
     309    }
     310
     311    .prpl-icon {
     312        display: inline-block;
     313        text-align: center;
     314        width: 0.75em;
     315        font-size: 1.25em;
     316        margin-right: 5px;
     317        vertical-align: top;
     318    }
     319}
    319320
    320321.prpl-gauge-number {
    … …  
    339340    position: relative;
    340341    margin-bottom: var(--prpl-padding);
    341 }
    342 
    343 .prpl-activities-gauge-container .prpl-gauge-0, .prpl-gauge-100 {
     342
     343    .prpl-gauge-0 {
     344        left: 10px;
     345    }
     346
     347    .prpl-gauge-100 {
     348        right: 3px;
     349    }
     350}
     351
     352.prpl-activities-gauge-container .prpl-gauge-0,
     353.prpl-gauge-100 {
    344354    font-size: var(--prpl-font-size-small);
    345355    position: absolute;
    … …  
    348358}
    349359
    350 .prpl-activities-gauge-container .prpl-gauge-0 {
    351     left: 10px;
    352 }
    353 
    354 .prpl-activities-gauge-container .prpl-gauge-100 {
    355     right: 3px;
    356 }
    357 
    358360/*------------------------------------*\
    359361    Activity scores
    … …  
    366368    Badges progress widget.
    367369\*------------------------------------*/
    368 .prpl-widget-wrapper.prpl-badges-progress .progress-label {
    369     display: inline-block;
    370 }
    371 
    372 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper {
    373     display: grid;
    374     grid-template-columns: 1fr 1fr 1fr;
    375     gap: calc(var(--prpl-gap) / 2);
    376     background-color: var(--prpl-background-blue);
    377     padding: calc(var(--prpl-padding) / 2);
    378     border-radius: var(--prpl-border-radius);
    379     margin-bottom: var(--prpl-padding);
    380 }
    381 
    382 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper .prpl-badge {
    383     display: flex;
    384     flex-direction: column;
    385     align-items: center;
    386     justify-content: space-between;
    387     flex-wrap: wrap;
    388     min-width: 0;
    389 }
    390 
    391 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper p {
    392     margin: 0;
    393     font-size: var(--prpl-font-size-xs);
    394     text-align: center;
    395     line-height: 1.2;
    396 }
    397 
    398 .prpl-widget-wrapper.prpl-badges-progress .prpl-badge {
    399     /* Change this number to adjust the rate of growth of the badges size. */
    400     --multiplier-default: 1.125;
    401     --multiplier: var(--multiplier-default);
    402 }
    403 
    404 .prpl-widget-wrapper.prpl-badges-progress .prpl-badge + .prpl-badge {
    405     --multiplier: calc(var(--multiplier-default) * var(--multiplier-default));
    406 }
    407 
    408 .prpl-widget-wrapper.prpl-badges-progress .prpl-badge + .prpl-badge + .prpl-badge {
    409     --multiplier: calc(var(--multiplier-default) * var(--multiplier-default) * var(--multiplier-default));
    410 }
    411 
    412 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper svg {
    413     width: calc(100% * var(--multiplier));
    414     margin-left: calc(100% * (1 - var(--multiplier)) / 2)
    415 }
    416 
    417 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper + .progress-wrapper {
    418     background-color: var(--prpl-background-orange);
    419 }
    420 
    421 .prpl-widget-wrapper.prpl-badges-progress .progress-wrapper + .progress-wrapper.badge-group-maintenance {
    422     background-color: var(--prpl-background-red);
    423 }
    424 
    425 .prpl-widget-wrapper.prpl-badges-progress .prpl-widget-content {
    426     margin-bottom: 1em;
     370.prpl-widget-wrapper.prpl-badges-progress {
     371
     372    .progress-label {
     373        display: inline-block;
     374    }
     375
     376    .progress-wrapper {
     377        display: grid;
     378        grid-template-columns: 1fr 1fr 1fr;
     379        gap: calc(var(--prpl-gap) / 2);
     380        background-color: var(--prpl-background-blue);
     381        padding: calc(var(--prpl-padding) / 2);
     382        border-radius: var(--prpl-border-radius);
     383        margin-bottom: var(--prpl-padding);
     384
     385        .prpl-badge {
     386            display: flex;
     387            flex-direction: column;
     388            align-items: center;
     389            justify-content: space-between;
     390            flex-wrap: wrap;
     391            min-width: 0;
     392        }
     393
     394        p {
     395            margin: 0;
     396            font-size: var(--prpl-font-size-xs);
     397            text-align: center;
     398            line-height: 1.2;
     399        }
     400
     401        svg {
     402            width: calc(100% * var(--multiplier));
     403            margin-left: calc(100% * (1 - var(--multiplier)) / 2);
     404        }
     405
     406        + .progress-wrapper {
     407            background-color: var(--prpl-background-orange);
     408
     409            &.badge-group-maintenance {
     410                background-color: var(--prpl-background-red);
     411            }
     412        }
     413    }
     414
     415    .prpl-badge {
     416
     417        /* Change this number to adjust the rate of growth of the badges size. */
     418        --multiplier-default: 1.125;
     419        --multiplier: var(--multiplier-default);
     420
     421        + .prpl-badge {
     422            --multiplier: calc(var(--multiplier-default) * var(--multiplier-default));
     423
     424            + .prpl-badge {
     425                --multiplier: calc(var(--multiplier-default) * var(--multiplier-default) * var(--multiplier-default));
     426            }
     427        }
     428    }
     429
     430    .prpl-widget-content {
     431        margin-bottom: 1em;
     432    }
    427433}
    428434
    … …  
    430436    Published content widget.
    431437\*------------------------------------*/
    432 .prpl-widget-wrapper.prpl-published-content .two-col {
    433     align-items: flex-start;
    434 }
    435 
    436 .prpl-widget-wrapper.prpl-published-content table {
    437     width: 100%;
    438     margin-bottom: 1em;
    439 }
    440 
    441 .prpl-widget-wrapper.prpl-published-content th,
    442 .prpl-widget-wrapper.prpl-published-content td {
    443     border: none;
    444 }
    445 
    446 .prpl-widget-wrapper.prpl-published-content th {
    447     text-align: start;
    448     border-bottom: 1px solid var(--prpl-color-gray-3);
    449 }
    450 
    451 .prpl-widget-wrapper.prpl-published-content th:not(:first-child),
    452 .prpl-widget-wrapper.prpl-published-content td:not(:first-child) {
    453     padding: 0.5em;
    454     text-align: center;
    455 }
    456 
    457 .prpl-widget-wrapper.prpl-published-content tr:nth-child(even) {
    458     background-color: #f9fafb;
    459 }
    460 
    461 .prpl-widget-wrapper.prpl-published-content tr:last-child td {
    462     border-bottom: none;
     438.prpl-widget-wrapper.prpl-published-content {
     439
     440    .two-col {
     441        align-items: flex-start;
     442    }
     443
     444    table {
     445        width: 100%;
     446        margin-bottom: 1em;
     447    }
     448
     449    th,
     450    td {
     451        border: none;
     452
     453        &:not(:first-child) {
     454            padding: 0.5em;
     455            text-align: center;
     456        }
     457    }
     458
     459    th {
     460        text-align: start;
     461        border-bottom: 1px solid var(--prpl-color-gray-3);
     462    }
     463
     464    tr:nth-child(even) {
     465        background-color: #f9fafb;
     466    }
     467
     468    tr:last-child td {
     469        border-bottom: none;
     470    }
    463471}
    464472
    … …  
    500508    position: relative;
    501509    overflow: hidden;
    502 }
    503 
    504 .prpl-badge-wrapper * {
    505     z-index: 1;
     510
     511    * {
     512        z-index: 1;
     513    }
    506514}
    507515
    … …  
    525533.prpl-widget-wrapper.prpl-badge-streak .prpl-badge-wrapper {
    526534    background: var(--prpl-background-red);
    527 }
    528 
    529 .prpl-widget-wrapper.prpl-badge-streak .prpl-badge-wrapper .prpl-badge-gauge {
    530     --background: var(--prpl-background-red);
     535
     536    .prpl-badge-gauge {
     537        --background: var(--prpl-background-red);
     538    }
    531539}
    532540
    … …  
    541549    What's new widget.
    542550\*------------------------------------*/
    543 .prpl-widget-wrapper.prpl-whats-new ul {
    544     margin: 0;
    545 }
    546 
    547 .prpl-widget-wrapper.prpl-whats-new ul p {
    548     margin: 0;
    549 }
    550 
    551 .prpl-widget-wrapper.prpl-whats-new li > a {
    552     color: var(--prpl-color-gray-6);
    553     text-decoration: none;
    554 }
    555 
    556 .prpl-widget-wrapper.prpl-whats-new li > a h3 {
    557     margin-top: 0;
    558     font-size: 1.15em;
    559     font-weight: 600;
    560 }
    561 
    562 .prpl-widget-wrapper.prpl-whats-new li > a h3::after {
    563     content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%23currentcolor" d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/></svg>');
    564     margin-left: 0.25em;
    565     width: .75em;
    566     height: .75em;
    567     display: inline-block;
    568 }
    569 
    570 .prpl-widget-wrapper.prpl-whats-new li img {
    571     width: 100%;
     551.prpl-widget-wrapper.prpl-whats-new {
     552
     553    ul {
     554        margin: 0;
     555
     556        p {
     557            margin: 0;
     558        }
     559    }
     560
     561    li {
     562
     563        > a {
     564            color: var(--prpl-color-gray-6);
     565            text-decoration: none;
     566
     567            h3 {
     568                margin-top: 0;
     569                font-size: 1.15em;
     570                font-weight: 600;
     571
     572                &::after {
     573                    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%23currentcolor" d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/></svg>');
     574                    margin-left: 0.25em;
     575                    width: 0.75em;
     576                    height: 0.75em;
     577                    display: inline-block;
     578                }
     579            }
     580        }
     581
     582        img {
     583            width: 100%;
     584        }
     585    }
    572586}
    573587
    … …  
    616630
    617631/*------------------------------------*\
     632    Top notice - used above logo.
     633\*------------------------------------*/
     634.prpl-wrap .prpl-top-notice {
     635    margin-bottom: var(--prpl-gap);
     636    position: relative;
     637
     638    button.prpl-button-primary {
     639        margin: 0;
     640        width: 250px;
     641    }
     642
     643    button.prpl-close-button {
     644        border: none;
     645        width: 40px;
     646        height: 40px;
     647        position: absolute;
     648        right: 10px;
     649        top: 10px;
     650        background: none;
     651        cursor: pointer;
     652    }
     653}
     654
     655/*------------------------------------*\
    618656    Welcome widget.
    619657\*------------------------------------*/
    620658.prpl-widget-wrapper.prpl-welcome {
    621659    padding: 0;
    622     margin-bottom: var(--prpl-gap);
    623660    overflow: hidden;
    624 }
    625 
    626 .prpl-welcome .welcome-header {
    627     background: var(--prpl-color-accent-orange);
    628     display: flex;
    629     justify-content: space-between;
    630     align-items: center;
    631 }
    632 
    633 .prpl-welcome .welcome-header h1 {
    634     font-size: var(--prpl-font-size-3xl);
    635     padding: var(--prpl-padding) calc(var(--prpl-gap) * 1.5);
    636     font-weight: 600;
    637 }
    638 
    639 .welcome-header .welcome-header-icon {
    640     background: var(--prpl-background-orange);
    641     background: linear-gradient(105deg, var(--prpl-color-accent-orange) 25%, var(--prpl-background-orange) 25%);
    642     padding: var(--prpl-padding);
    643     padding-left: 100px;
    644     padding-right: calc(var(--prpl-gap) * 1.5);
    645 }
    646 
    647 .welcome-header .welcome-header-icon svg {
    648     height: 100px;
    649 }
    650 
    651 .prpl-welcome .welcome-subheader {
    652     display: flex;
    653     justify-content: space-around;
    654     gap: var(--prpl-padding);
    655 }
    656 
    657 .prpl-welcome .welcome-subheader > div {
    658     padding: var(--prpl-padding);
    659     text-align: center;
    660     color: var(--prpl-color-gray-3);
    661     display: flex;
    662     flex-direction: column;
    663     justify-content: center;
    664     align-items: center;
    665 }
    666 
    667 .prpl-welcome .welcome-subheader .icon {
    668     --font-size: var(--prpl-font-size-4xl);
    669     font-size: var(--font-size);
    670     width: var(--font-size);
    671     height: var(--font-size);
    672 }
    673 
    674 .prpl-widget-wrapper.prpl-welcome .inner-content {
    675     padding: calc(var(--prpl-gap) * 1.5);
    676     padding-bottom: 0;
    677     margin-bottom: calc(var(--prpl-gap) * 1.5);
    678     overflow: hidden;
    679     display: grid;
    680     grid-template-columns: 1fr 1px 1fr;
    681     grid-gap: calc(var(--prpl-gap) / 2); /* halve it because we have a separator */
    682 }
    683 
    684 .prpl-widget-wrapper.prpl-welcome .inner-content .separator {
    685     background: var(--prpl-color-gray-1);
     661    max-height: 80vh;
     662    width: 80vw;
     663    margin: 10vh 10vw;
     664    z-index: 9999;
     665
     666    .inner-content {
     667        padding: calc(var(--prpl-gap) * 1.5);
     668        padding-bottom: 0;
     669        margin-bottom: calc(var(--prpl-gap) * 1.5);
     670        overflow: hidden;
     671        display: grid;
     672        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     673        gap: calc(var(--prpl-gap) * 2);
     674
     675        img {
     676            max-width: 100%;
     677            height: auto;
     678        }
     679    }
     680}
     681
     682.welcome-header {
     683
     684    .welcome-header-icon {
     685        background: var(--prpl-background-orange);
     686        background: linear-gradient(105deg, var(--prpl-color-accent-orange) 25%, var(--prpl-background-orange) 25%);
     687        padding: var(--prpl-padding);
     688        padding-left: 100px;
     689        padding-right: calc(var(--prpl-gap) * 1.5);
     690
     691        svg {
     692            height: 100px;
     693        }
     694    }
     695}
     696
     697.prpl-welcome {
     698
     699    .welcome-header {
     700        background: var(--prpl-color-accent-orange);
     701        display: flex;
     702        justify-content: space-between;
     703        align-items: center;
     704
     705        h1 {
     706            font-size: var(--prpl-font-size-3xl);
     707            padding: var(--prpl-padding) calc(var(--prpl-gap) * 1.5);
     708            font-weight: 600;
     709        }
     710    }
     711}
     712
     713/*------------------------------------*\
     714  Buttons
     715\*------------------------------------*/
     716
     717.prpl-wrap input.prpl-button-primary,
     718.prpl-wrap input.prpl-button-secondary,
     719.prpl-wrap button.prpl-button-primary,
     720.prpl-wrap button.prpl-button-secondary {
    686721    display: block;
    687     height: 100%;
     722    margin: 1em 0;
     723    padding: 1em;
     724    color: #fff;
     725    text-decoration: none;
     726    cursor: pointer;
     727    font-size: var(--prpl-font-size-base);
     728    background: var(--prpl-color-accent-red);
     729    box-shadow: none;
     730    border: none;
     731    border-radius: var(--prpl-border-radius);
     732
     733    &:hover,
     734    &:focus {
     735        text-decoration: underline;
     736        box-shadow: 3px 3px 10px var(--prpl-color-accent-red);
     737    }
     738}
     739
     740.prpl-wrap input.prpl-button-secondary,
     741.prpl-wrap button.prpl-button-secondary {
     742    background: var(--prpl-color-gray-3);
     743
     744    &:hover,
     745    &:focus {
     746        background: var(--prpl-color-gray-4);
     747        box-shadow: 3px 3px 10px var(--prpl-color-gray-4);
     748    }
    688749}
    689750
    … …  
    691752    Onboarding form.
    692753\*------------------------------------*/
     754
    693755#prpl-onboarding-form label,
    694756#prpl-onboarding-submit-grid-wrapper {
    … …  
    699761}
    700762
    701 #prpl-onboarding-form label >span:has(input[type="checkbox"]) {
     763#prpl-onboarding-form label > span:has(input[type="checkbox"]) {
    702764    display: flex;
    703765    align-items: baseline;
    704766}
    705767
    706 #prpl-onboarding-form input[type="submit"] {
    707     display: block;
    708     margin: 1em 0;
    709     padding: 0.5em 1em;
    710     font-size: var(--prpl-font-size-base);
    711     background: var(--prpl-color-accent-red);
    712     box-shadow: none;
    713     border: none;
    714     border-radius: var(--prpl-border-radius);
    715 }
    716 
    717 #prpl-onboarding-form input[type="submit"]:hover,
    718 #prpl-onboarding-form input[type="submit"]:focus {
    719     text-decoration: underline;
    720     box-shadow: 3px 3px 10px var(--prpl-color-accent-red);
    721 }
    722 
    723 .prpl-form-notice {
    724     background: var(--prpl-background-orange);
    725     border: 1px solid var(--prpl-color-accent-orange);
    726     border-radius: var(--prpl-border-radius);
    727     padding: var(--prpl-padding);
    728     margin-bottom: var(--prpl-padding);
     768.prpl-onboard-form-radio-select {
     769
     770    label {
     771        display: block !important;
     772    }
    729773}
    730774
    … …  
    739783    font-weight: 400;
    740784    max-height: 82vh;
    741 }
    742 
    743 .prpl-popover p {
    744     font-weight: 400;
     785
     786    p {
     787        font-weight: 400;
     788    }
    745789}
    746790
    … …  
    748792    background: rgba(0, 0, 0, 0.5);
    749793}
     794
    750795/*------------------------------------*\
    751796    Popups close button.
    … …  
    760805    border: none;
    761806    color: var(--prpl-color-gray-4);
    762 }
    763 
    764 .prpl-popover-close:hover,
    765 .prpl-popover-close:focus {
    766     color: var(--prpl-color-gray-6);
     807
     808    &:hover,
     809    &:focus {
     810        color: var(--prpl-color-gray-6);
     811    }
    767812}
    768813
    … …  
    775820    grid-template-columns: 1fr 1fr 1fr;
    776821    grid-gap: var(--prpl-padding);
    777 }
    778 
    779 #popover-badges-content .inner,
    780 #popover-badges-maintenance .inner {
    781     border-radius: var(--prpl-border-radius-big);
    782     padding: var(--prpl-padding);
    783     font-size: var(--prpl-font-size-small);
    784     text-align: center;
     822
     823    .inner {
     824        border-radius: var(--prpl-border-radius-big);
     825        padding: var(--prpl-padding);
     826        font-size: var(--prpl-font-size-small);
     827        text-align: center;
     828    }
    785829}
    786830
    … …  
    798842    height: 20px;
    799843    background: var(--prpl-color-gray-1);
    800 }
    801 
    802 .badges-popover-progress-total > span {
    803     display: block;
    804     height: 100%;
    805     background: var(--prpl-color-accent-red);
    806 }
    807 
    808 #prpl-popover-badges-details .indicators-maintenance {
    809     display: grid;
    810     grid-template-columns: 1fr 1fr 1fr;
    811     grid-gap: var(--prpl-padding);
    812 }
    813 
    814 #prpl-popover-badges-details .indicators-maintenance .indicator {
    815     text-align: center;
    816     line-height: 1.2;
    817     margin-top: 5px;
    818 }
    819 
    820 #prpl-popover-badges-details .indicators-maintenance .indicator .number {
    821     font-size: var(--prpl-font-size-2xl);
    822     font-weight: 500;
    823     display: block;
    824 }
    825 
    826 #prpl-popover-badges-details .prpl-widgets-container {
    827     display: grid;
    828     grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
    829     grid-gap: var(--prpl-gap);
     844
     845    > span {
     846        display: block;
     847        height: 100%;
     848        background: var(--prpl-color-accent-red);
     849    }
     850}
     851
     852#prpl-popover-badges-details {
     853
     854    .indicators-maintenance {
     855        display: grid;
     856        grid-template-columns: 1fr 1fr 1fr;
     857        grid-gap: var(--prpl-padding);
     858
     859        .indicator {
     860            text-align: center;
     861            line-height: 1.2;
     862            margin-top: 5px;
     863
     864            .number {
     865                font-size: var(--prpl-font-size-2xl);
     866                font-weight: 500;
     867                display: block;
     868            }
     869        }
     870    }
     871
     872    .prpl-widgets-container {
     873        display: grid;
     874        grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
     875        grid-gap: var(--prpl-gap);
     876    }
    830877}
    831878
    … …  
    837884    Mobile styles.
    838885\*------------------------------------*/
    839 @media all and (max-width:610px) {
     886@media all and (max-width: 610px) {
     887
    840888    :root {
    841889        --prpl-gap: 16px;
    … …  
    851899    .prpl-welcome .welcome-header {
    852900        flex-wrap: wrap;
    853     }
    854 
    855     .prpl-welcome .welcome-subheader {
    856         display: none;
    857901    }
    858902
    … …  
    875919.prpl-widget-wrapper.prpl-todo {
    876920    padding-left: 0;
    877 }
    878 
    879 .prpl-widget-wrapper.prpl-todo > * {
    880     padding-left: var(--prpl-padding);
     921
     922    > * {
     923        padding-left: var(--prpl-padding);
     924    }
    881925}
    882926
    … …  
    886930    flex-direction: row-reverse;
    887931    gap: 1em;
    888 }
    889 
    890 #create-todo-item button {
    891     padding: 0;
    892     border: 1.5px solid;
    893     border-radius: 50%;
    894     background: none;
    895     box-shadow: none;
    896     color: var(--prpl-color-gray-3);
    897     display: flex;
    898     align-items: center;
    899     justify-content: center;
    900     padding: 0.2em;
    901 }
    902 
    903 #create-todo-item button .dashicons {
    904     font-size: 0.825em;
    905     width: 1em;
    906     height: 1em;
     932
     933    button {
     934        border: 1.5px solid;
     935        border-radius: 50%;
     936        background: none;
     937        box-shadow: none;
     938        color: var(--prpl-color-gray-3);
     939        display: flex;
     940        align-items: center;
     941        justify-content: center;
     942        padding: 0.2em;
     943
     944        .dashicons {
     945            font-size: 0.825em;
     946            width: 1em;
     947            height: 1em;
     948        }
     949    }
    907950}
    908951
    … …  
    915958    list-style: none;
    916959    padding: 0;
    917     max-height:30em;
     960    max-height: 30em;
    918961    overflow-y: auto;
    919     margin: 0 0 .5em -5px;
    920 }
    921 
    922 #todo-list li {
    923     position: relative;
    924     display: flex;
    925     align-items: center;
    926 }
    927 
    928 #todo-list li:not(:focus-within):has(:checked) .content {
    929     opacity: 0.5;
    930     text-decoration: line-through;
    931 }
    932 
    933 #todo-list li .content {
    934     padding: 0 .5em;
    935     width: 100%;
    936     display:border-box;
    937     border-bottom: 1.5px solid transparent;
    938 }
    939 
    940 #todo-list li:focus-within .content {
    941     outline: none;
    942     border-bottom: 1.5px solid var(--prpl-color-gray-3);
    943 }
    944 
    945 #todo-list li input {
    946     margin: 0 5px;
    947 }
    948 
    949 #todo-list li .trash {
    950     opacity: 0;
    951     padding: 0;
    952     border: 0;
    953     background: none;
    954     color: var(--prpl-color-gray-3);
    955     cursor: pointer;
    956     box-shadow: none;
    957     transition: all 0.1s;
    958 }
    959 
    960 #todo-list li:hover .trash,
    961 #todo-list li:focus-within .trash {
    962     opacity: 1;
    963 }
    964 
    965 #todo-list li .trash:hover {
    966     color: var(--prpl-color-accent-red);
     962    margin: 0 0 0.5em -5px;
     963
     964    li {
     965        position: relative;
     966        display: flex;
     967        align-items: center;
     968        font-size: 14px;
     969
     970        .content {
     971            padding: 0 0.5em;
     972            width: 100%;
     973            display: border-box;
     974            border-bottom: 1.5px solid transparent;
     975        }
     976
     977        input {
     978            margin: 0 5px;
     979
     980            &[type="checkbox"]:checked::before {
     981                content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2316a34a%27%2F%3E%3C%2Fsvg%3E");
     982            }
     983        }
     984
     985        .trash {
     986            opacity: 0;
     987            padding: 0;
     988            border: 0;
     989            background: none;
     990            color: var(--prpl-color-gray-3);
     991            cursor: pointer;
     992            box-shadow: none;
     993            transition: all 0.1s;
     994
     995            &:hover {
     996                color: var(--prpl-color-accent-red);
     997            }
     998        }
     999
     1000        :not(:focus-within):has(:checked) .content {
     1001            opacity: 0.5;
     1002            text-decoration: line-through;
     1003        }
     1004
     1005        &:focus-within .content {
     1006            outline: none;
     1007            border-bottom: 1.5px solid var(--prpl-color-gray-3);
     1008        }
     1009
     1010        &:hover,
     1011        &:focus-within {
     1012
     1013            .trash {
     1014                opacity: 1;
     1015            }
     1016
     1017            .prpl-todo-drag-handle {
     1018                opacity: 1;
     1019            }
     1020        }
     1021    }
    9671022}
    9681023
    … …  
    9731028}
    9741029
    975 #todo-list li:hover .prpl-todo-drag-handle,
    976 #todo-list li:focus-within .prpl-todo-drag-handle {
    977     opacity: 1;
    978 }
    979 
    980 #todo-list li input[type=checkbox]:checked::before {
    981     content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2316a34a%27%2F%3E%3C%2Fsvg%3E");
    982 }
    983 
    9841030/*------------------------------------*\
    9851031    Dashboard widget styles.
    9861032\*------------------------------------*/
    987 #progress_planner_dashboard_widget_score .prpl-dashboard-widget.show-badges {
    988     display: grid;
    989     grid-template-columns: 1fr 1px 140px;
    990     grid-gap: calc(var(--prpl-gap) / 2);
    991 }
    992 
    993 #progress_planner_dashboard_widget_score .prpl-activities-gauge-container {
    994     padding-bottom: calc(var(--prpl-padding) * 2);
    995 }
    996 
    997 #progress_planner_dashboard_widget_score .prpl-badge-wrapper {
    998     background: none;
    999     display: grid;
    1000     grid-template-columns: 1fr max-content;
    1001     grid-gap: 1em;
    1002     align-items: center;
    1003     border: none;
    1004     padding: 0 0 1em 0;
    1005 }
    1006 
    1007 #progress_planner_dashboard_widget_score .prpl-gauge-0, .prpl-gauge-100 {
    1008     font-size: var(--prpl-font-size-small);
    1009     position: absolute;
    1010     top: 50%;
    1011     color: var(--prpl-color-gray-5);
    1012 }
    1013 
    1014 #progress_planner_dashboard_widget_score .prpl-gauge-0 {
    1015     left: 6px;
    1016 }
    1017 
    1018 #progress_planner_dashboard_widget_score .prpl-gauge-100 {
    1019     right: 0px;
    1020 }
    1021 
    1022 #progress_planner_dashboard_widget_score .prpl-badge-wrapper .progress-percent {
    1023     font-size: 28px;
    1024     font-weight: 600;
    1025     padding-top: 0;
    1026     color: var(--prpl-color-gray-5);
    1027 }
    1028 
    1029 #progress_planner_dashboard_widget_score h3 {
    1030     font-weight: 500;
    1031 }
    1032 
    1033 #progress_planner_dashboard_widget_score .grid-separator {
    1034     background: #c3c4c7; /* same color as the one WP-Core uses */
    1035     width: 0.5px;
    1036     height: 100%;
    1037 }
    1038 
    1039 #progress_planner_dashboard_widget_score .prpl-badge-gauge {
    1040     width: 64px;
    1041 }
    1042 
    1043 #progress_planner_dashboard_widget_score .prpl-dashboard-widget-latest-activities {
    1044     margin-top: 1em;
    1045     padding-top: 1em;
    1046     border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
    1047 }
    1048 
    1049 #progress_planner_dashboard_widget_score .prpl-dashboard-widget-latest-activities li {
    1050     display: flex;
    1051     justify-content: space-between;
    1052 }
    1053 
    1054 #progress_planner_dashboard_widget_score .prpl-dashboard-widget-footer {
    1055     margin-top: 1em;
    1056     padding-top: 1em;
    1057     border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
    1058     font-size: var(--prpl-font-size-base);
    1059     display: flex;
    1060     gap: 1em;
    1061     align-items: center;
    1062 }
    1063 
    1064 #progress_planner_dashboard_widget_score .prpl-activities-gauge-container {
    1065     background-color: #ffffff;
    1066 }
    1067 
    1068 #progress_planner_dashboard_widget_score .prpl-activities-gauge-container-container p {
    1069     text-align: center;
    1070     font-size: var(--prpl-font-size-base);
    1071     color: var(--prpl-color-gray-5);
    1072     margin-top: -15px;
    1073 }
    1074 
    1075 #progress_planner_dashboard_widget_score .prpl-gauge-number {
    1076     font-size: var(--prpl-font-size-4xl);
     1033#progress_planner_dashboard_widget_score {
     1034
     1035    .prpl-dashboard-widget.show-badges {
     1036        display: grid;
     1037        grid-template-columns: 1fr 1px 140px;
     1038        grid-gap: calc(var(--prpl-gap) / 2);
     1039    }
     1040
     1041    .prpl-activities-gauge-container {
     1042        padding-bottom: calc(var(--prpl-padding) * 2);
     1043        background-color: #fff;
     1044    }
     1045
     1046    .prpl-badge-wrapper {
     1047        background: none;
     1048        display: grid;
     1049        grid-template-columns: 1fr max-content;
     1050        grid-gap: 1em;
     1051        align-items: center;
     1052        border: none;
     1053        padding: 0 0 1em 0;
     1054
     1055        .progress-percent {
     1056            font-size: 28px;
     1057            font-weight: 600;
     1058            padding-top: 0;
     1059            color: var(--prpl-color-gray-5);
     1060        }
     1061    }
     1062
     1063    .prpl-gauge-0,
     1064    .prpl-gauge-100 {
     1065        font-size: var(--prpl-font-size-small);
     1066        position: absolute;
     1067        top: 50%;
     1068        color: var(--prpl-color-gray-5);
     1069    }
     1070
     1071    .prpl-gauge-0 {
     1072        left: 6px;
     1073    }
     1074
     1075    .prpl-gauge-100 {
     1076        right: 0;
     1077    }
     1078
     1079    h3 {
     1080        font-weight: 500;
     1081    }
     1082
     1083    .grid-separator {
     1084        background: #c3c4c7; /* same color as the one WP-Core uses */
     1085        width: 0.5px;
     1086        height: 100%;
     1087    }
     1088
     1089    .prpl-badge-gauge {
     1090        width: 64px;
     1091    }
     1092
     1093    .prpl-dashboard-widget-latest-activities {
     1094        margin-top: 1em;
     1095        padding-top: 1em;
     1096        border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
     1097        li {
     1098            display: flex;
     1099            justify-content: space-between;
     1100        }
     1101    }
     1102
     1103    .prpl-dashboard-widget-footer {
     1104        margin-top: 1em;
     1105        padding-top: 1em;
     1106        border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */
     1107        font-size: var(--prpl-font-size-base);
     1108        display: flex;
     1109        gap: 1em;
     1110        align-items: center;
     1111    }
     1112
     1113    .prpl-activities-gauge-container-container p {
     1114        text-align: center;
     1115        font-size: var(--prpl-font-size-base);
     1116        color: var(--prpl-color-gray-5);
     1117        margin-top: -15px;
     1118    }
     1119
     1120    .prpl-gauge-number {
     1121        font-size: var(--prpl-font-size-4xl);
     1122    }
    10771123}
    10781124
    … …  
    10901136    margin-bottom: 1em;
    10911137    padding: 0 16px;
    1092 }
    1093 
    1094 #prpl-dashboard-widget-todo-header p, #todo-list li {
    1095     font-size: 14px;
     1138
     1139    p {
     1140        font-size: 14px;
     1141    }
    10961142}
    10971143
    … …  
    10991145    Settings popup.
    11001146\*------------------------------------*/
    1101 #prpl-settings-form label {
    1102     display: block;
    1103 }
    1104 
    1105 #prpl-settings-form p {
    1106     max-width: 42em;
    1107 }
    1108 
    1109 #prpl-settings-form h3 {
    1110     font-size: 1.15em;
    1111 }
    1112 
    1113 #prpl-settings-form button.button-primary {
    1114     margin-top: 1em;
    1115 }
     1147#prpl-settings-form {
     1148
     1149    label {
     1150        display: block;
     1151    }
     1152
     1153    p {
     1154        max-width: 42em;
     1155    }
     1156
     1157    h3 {
     1158        font-size: 1.15em;
     1159    }
     1160
     1161    button.button-primary {
     1162        margin-top: 1em;
     1163    }
     1164}
     1165
     1166.driver-popover.prpl-driverjs-theme {
     1167    background-color: var(--prpl-background-orange);
     1168    color: var(--prpl-color-text);
     1169
     1170    .driver-popover-title {
     1171        color: var(--prpl-color-headings);
     1172    }
     1173
     1174    button {
     1175        color: var(--prpl-color-headings);
     1176    }
     1177
     1178    button:hover {
     1179        background-color: var(--prpl-background-orange);
     1180    }
     1181}
Note: See TracChangeset for help on using the changeset viewer.