WordPress.org
Get WordPress

Plugin Directory

Changeset 3366801


Ignore:
Timestamp:
09/23/2025 10:20:49 PM (5 months ago)
Author:
RoxxiStudios
Message:

WeatherBot v1.0.9 release: updated plugin files, readme, assets, and changelog.

Location:
weatherbot
Files:
4 edited
1 copied

Legend:

Unmodified
Added
Removed

  • weatherbot/tags/1.0.9/assets/css/weather-bot.css

    r3366760 r3366801  
    1 /* WeatherBot by RoxxiStudios Public Styles (optimized v3.2.2 with compat patch) */
     1/* WeatherBot by RoxxiStudios — Public Styles (optimized v3.3.1 + ADA enhancements)
     2   - Component-scoped, class-only selectors (no element qualifiers)
     3   - Predictable typography + color baseline (prevents footer/theme bleed)
     4   - Accessible focus states, reduced-motion fallback, high-contrast support
     5   - Flat specificity (optional class-doubling bumps at bottom)
     6*/
     7
     8
     9/* =========================
     10   0) CSS Reset (component scope)
     11   ========================= */
     12
     13.roxxi-weather,
     14.roxxi-weather * {
     15    box-sizing: border-box;
     16}
    217
    318
    … …  
    1227    --wb-light: #D3D3D3;
    1328    --wb-dark: #1A1A1A;
     29    /* Focus/outline tokens */
     30    --wb-focus: #6799cc;
     31    /* fallback if currentColor unavailable */
     32    --wb-outline: #000000;
     33    --wb-outline-contrast: #ffffff;
    1434}
    1535
    … …  
    2444    gap: 5px;
    2545    width: fit-content;
     46    /* Typography baseline */
    2647    font-family: inherit;
    27     font-weight: 600;
    28     background: white;
    29 }
     48    font-weight: 400;
     49    font-size: 16px;
     50    line-height: 1.3;
     51    /* Color baseline to resist footer/theme overrides */
     52    color: var(--wb-dark);
     53    background: #ffffff;
     54    /* Improve tap targets in touch contexts */
     55    -webkit-tap-highlight-color: transparent;
     56}
     57
     58
     59/* Inherit typography safely for children */
    3060
    3161.roxxi-weather * {
    … …  
    3363    font-weight: inherit;
    3464    font-size: inherit;
    35     line-height: normal;
     65    line-height: inherit;
    3666    word-break: normal;
    3767    white-space: normal;
    38     box-sizing: border-box;
    39 }
    40 
    41 span.roxxi-weather .details,
    42 span.roxxi-weather .conditions {
     68}
     69
     70
     71/* =========================
     72   3) Layout Groups
     73   ========================= */
     74
     75.roxxi-weather .details,
     76.roxxi-weather .conditions {
    4377    display: flex;
    4478    flex-wrap: wrap;
    … …  
    4882
    4983
     84/* =========================
     85   4) Variants
     86   ========================= */
     87
     88
    5089/*** BADGE ***/
    5190
    52 span.roxxi-weather.wb-type-badge {
     91.roxxi-weather.wb-type-badge {
    5392    display: inline-flex;
    5493    align-items: flex-start;
    … …  
    61100}
    62101
    63 span.roxxi-weather.wb-type-badge span.badge {
     102.roxxi-weather.wb-type-badge .badge {
    64103    display: flex;
    65104    gap: 8px;
    66105}
    67106
    68 span.roxxi-weather.wb-type-badge span.details {
     107.roxxi-weather.wb-type-badge .details {
    69108    flex-direction: column;
    70109    align-items: flex-start;
    71110}
    72111
    73 span.roxxi-weather.wb-type-badge span.conditions {
     112.roxxi-weather.wb-type-badge .conditions {
    74113    align-items: center;
    75114}
    76115
    77 span.roxxi-weather.wb-type-badge span.temp {
     116.roxxi-weather.wb-type-badge .temp {
    78117    gap: 5px;
    79118}
    80119
    81 span.roxxi-weather.wb-type-badge .wb-ico {
     120.roxxi-weather.wb-type-badge .wb-ico {
    82121    width: 28px;
    83122    height: auto;
    84123}
    85124
    86 span.roxxi-weather.wb-type-badge span.temp span.degree {
    87     font-size: inherit;
    88 }
    89 
    90125
    91126/*** COMPACT ***/
    92127
    93 span.roxxi-weather.wb-type-compact {
     128.roxxi-weather.wb-type-compact {
    94129    flex-direction: column;
    95130    padding: 8px 10px;
    … …  
    97132    border-radius: 5px;
    98133    font-size: 16px;
     134    /* variant scale */
    99135}
    100136
    … …  
    107143    flex-wrap: wrap;
    108144    gap: 8px;
    109     background: unset;
     145    background: transparent;
    110146    border: 0;
    111147    font-size: inherit;
    112     vertical-align: text-bottom;
    113 }
    114 
    115 
    116 /*** ALIGNMENT ***/
    117 
    118 span.roxxi-weather.wb-left,
    119 span.roxxi-weather.wb-left .details,
    120 span.roxxi-weather.wb-left .conditions {
     148    vertical-align: baseline;
     149}
     150
     151
     152/* =========================
     153   5) Alignment Utilities
     154   ========================= */
     155
     156.roxxi-weather.wb-left,
     157.roxxi-weather.wb-left .details,
     158.roxxi-weather.wb-left .conditions {
    121159    justify-content: flex-start;
    122160    margin: 0;
    … …  
    124162}
    125163
    126 span.roxxi-weather.wb-center,
    127 span.roxxi-weather.wb-center .details,
    128 span.roxxi-weather.wb-center .conditions {
     164.roxxi-weather.wb-center,
     165.roxxi-weather.wb-center .details,
     166.roxxi-weather.wb-center .conditions {
    129167    display: flex;
    130168    justify-content: center;
    … …  
    133171}
    134172
    135 span.roxxi-weather.wb-right,
    136 span.roxxi-weather.wb-right .details,
    137 span.roxxi-weather.wb-right .conditions {
     173.roxxi-weather.wb-right,
     174.roxxi-weather.wb-right .details,
     175.roxxi-weather.wb-right .conditions {
    138176    display: flex;
    139177    justify-content: flex-end;
    … …  
    142180}
    143181
    144 span.roxxi-weather.wb-center:not(.wp-badge),
    145 span.roxxi-weather.wb-right:not(.wp-badge) {
     182.roxxi-weather.wb-center:not(.wp-badge),
     183.roxxi-weather.wb-right:not(.wp-badge) {
    146184    align-items: inherit;
    147185}
    148186
    149 span.roxxi-weather.wb-right .wb-badge.conditions {
     187.roxxi-weather.wb-right .wb-badge.conditions {
    150188    display: inline-flex;
    151189    align-items: center;
    152190}
    153191
    154 span.roxxi-weather .conditions {
    155     display: flex;
    156     flex-direction: row;
    157     align-items: center;
    158     flex-wrap: wrap;
    159     gap: 5px;
    160 }
    161 
    162 span.roxxi-weather strong.wb-pre {
    163     font-size: inherit;
    164     font-weight: inherit;
    165     line-height: 1.2;
    166 }
    167 
    168 
    169 /*** temperature and conditions ***/
    170 
    171 span.roxxi-weather span.details,
    172 span.roxxi-weather span.conditions {
    173     font-size: inherit;
    174 }
    175 
    176 span.roxxi-weather span.wb-ico {
     192
     193/* =========================
     194   6) Temperature & Conditions
     195   ========================= */
     196
     197.roxxi-weather .wb-ico {
    177198    width: 20px;
    178199    height: auto;
    179200}
    180201
    181 span.roxxi-weather span.temp {
     202.roxxi-weather .temp {
    182203    display: flex;
    183204    align-items: center;
    184205    gap: 3px;
    185     font-weight: inherit;
    186 }
    187 
    188 span.roxxi-weather span.degree {
     206}
     207
     208.roxxi-weather .degree {
    189209    display: inline-flex;
    190210    align-items: baseline;
    191211    gap: 2px;
    192     font-weight: inherit;
    193 }
    194 
    195 span.roxxi-weather span.wb-temp {
    196     font-weight: inherit;
     212}
     213
     214.roxxi-weather .wb-temp,
     215.roxxi-weather .wb-unit {
    197216    opacity: 0.9;
    198217}
    199218
    200 span.roxxi-weather span.wb-unit {
    201     font-weight: inherit;
    202     opacity: 0.9;
    203 }
    204 
    205 span.roxxi-weather span.wb-desc {
     219.roxxi-weather .wb-desc {
    206220    color: var(--wb-neutral);
    207     font-size: inherit;
    208     font-weight: inherit;
    209 }
    210 
    211 
    212 /*** powered-by line ***/
    213 
    214 span.widget.widget_roxxi_weather_widget .wb-powered,
    215 span.roxxi-weather span.wb-powered {
     221}
     222
     223.roxxi-weather .wb-pre,
     224.roxxi-weather .wb-temp,
     225.roxxi-weather .wb-unit {
     226    font-weight: 600;
     227    line-height: 1.2;
     228}
     229
     230
     231/* =========================
     232   7) Powered-by Line
     233   ========================= */
     234
     235.widget.widget_roxxi_weather_widget .wb-powered,
     236.roxxi-weather .wb-powered {
    216237    color: var(--wb-neutral);
    217238    font-size: 12px;
    … …  
    219240}
    220241
    221 span.roxxi-weather span.wb-powered a.wb-powered-link {
     242.roxxi-weather .wb-powered a.wb-powered-link {
    222243    font-size: inherit;
    223     font-weight: 500;
    224 }
    225 
    226 span.roxxi-weather a.wb-powered-link {
     244    transition: 250ms;
     245}
     246
     247
     248/* Default link styles inside component (distinguished from text) */
     249
     250.roxxi-weather a {
    227251    color: var(--wb-primary);
    228     text-decoration: none;
    229     transition: 250ms;
    230 }
    231 
    232 span.roxxi-weather a.wb-powered-link:hover,
    233 span.roxxi-weather a.wb-powered-link:focus {
     252    text-decoration: underline;
     253    text-underline-offset: 2px;
     254    transition: color 250ms;
     255}
     256
     257.roxxi-weather a:hover,
     258.roxxi-weather a:focus {
    234259    color: var(--wb-secondary);
    235     text-decoration: none;
    236 }
    237 
    238 
    239 /* =========================
    240    Font Color Helpers
    241    ========================= */
    242 
    243 span.roxxi-weather.wb-font-light {
     260}
     261
     262
     263/* Powered-by link: keep underline to avoid color-only cue */
     264
     265.roxxi-weather a.wb-powered-link {
     266    text-decoration: underline;
     267    text-underline-offset: 2px;
     268}
     269
     270
     271/* === FIX: ensure powered-by hover/focus beats theme a:hover and adds a clearer cue === */
     272
     273.roxxi-weather a.wb-powered-link:hover,
     274.roxxi-weather a.wb-powered-link:focus {
     275    color: var(--wb-secondary);
     276    text-underline-offset: 4px;
     277}
     278
     279
     280/* =========================
     281   8) Color Utilities
     282   ========================= */
     283
     284
     285/* Support both wb-text-* and wb-font-* for backward compatibility */
     286
     287.roxxi-weather.wb-text-dark,
     288.roxxi-weather.wb-font-dark {
     289    color: var(--wb-dark);
     290}
     291
     292.roxxi-weather.wb-text-dark a,
     293.roxxi-weather.wb-font-dark a {
     294    color: var(--wb-primary);
     295}
     296
     297.roxxi-weather.wb-text-light,
     298.roxxi-weather.wb-font-light {
    244299    color: #ffffff;
    245300}
    246301
    247 span.roxxi-weather.wb-font-light span.wb-powered-link {
     302.roxxi-weather.wb-text-light a,
     303.roxxi-weather.wb-font-light a {
    248304    color: inherit;
    249 }
    250 
    251 span.roxxi-weather.wb-font-dark {
    252     color: var(--wb-dark);
    253 }
    254 
    255 span.roxxi-weather.wb-font-dark span.wb-powered-link {
    256     color: inherit;
    257 }
    258 
    259 
    260 /* While loading, show only the line; hide icon/temp/unit/desc */
    261 
    262 span.roxxi-weather .conditions.wb-loading span.wb-ico,
    263 span.roxxi-weather .conditions.wb-loading span.wb-temp,
    264 span.roxxi-weather .conditions.wb-loading span.wb-sep,
    265 span.roxxi-weather .conditions.wb-loading span.wb-unit,
    266 span.roxxi-weather .conditions.wb-loading span.wb-desc {
     305    /* white links on dark */
     306}
     307
     308
     309/* Description color adjusts for light mode cards */
     310
     311.roxxi-weather.wb-text-light .wb-desc,
     312.roxxi-weather.wb-font-light .wb-desc {
     313    color: var(--wb-light);
     314}
     315
     316
     317/* Card backgrounds for light text variants */
     318
     319.roxxi-weather.wb-type-badge.wb-text-light,
     320.roxxi-weather.wb-type-compact.wb-text-light {
     321    background: var(--wb-dark);
     322}
     323
     324
     325/* =========================
     326   9) Loading States
     327   ========================= */
     328
     329
     330/* Hide icon/temp/unit/desc while loading */
     331
     332.roxxi-weather .conditions.wb-loading .wb-ico,
     333.roxxi-weather .conditions.wb-loading .wb-temp,
     334.roxxi-weather .conditions.wb-loading .wb-sep,
     335.roxxi-weather .conditions.wb-loading .wb-unit,
     336.roxxi-weather .conditions.wb-loading .wb-desc {
    267337    display: none;
    268338}
    … …  
    271341/* Show the loading message only during loading */
    272342
    273 span.roxxi-weather span.conditions span.wb-loading-msg {
     343.roxxi-weather .conditions .wb-loading-msg {
    274344    display: none;
    275345}
    276346
    277 span.roxxi-weather span.conditions.wb-loading span.wb-loading-msg {
     347.roxxi-weather .conditions.wb-loading .wb-loading-msg {
    278348    display: inline;
    279349}
    280350
    281351
    282 /*** Optional niceties ***/
    283 
    284 span.roxxi-weather span.conditions span.wb-loading-msg {
     352/* Optional niceties */
     353
     354.roxxi-weather .conditions .wb-loading-msg {
    285355    font-size: 15px;
    286356    margin-left: 0;
    287357    font-style: italic;
    288     font-weight: normal;
     358    font-weight: 400;
    289359    text-align: center;
    290360    opacity: .85;
    291361}
    292362
    293 span.roxxi-weather span.conditions.wb-loading span.wb-loading-msg::after {
     363.roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
    294364    content: "";
    295365    display: inline-block;
    … …  
    319389
    320390
    321 /* =========================
    322    Compat Patch
     391/* Respect user motion preferences */
     392
     393@media (prefers-reduced-motion: reduce) {
     394    .roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
     395        animation: none;
     396        content: "...";
     397    }
     398    .roxxi-weather a {
     399        transition: none;
     400    }
     401}
     402
     403
     404/* =========================
     405   10) Focus Visibility (ADA)
     406   ========================= */
     407
     408.roxxi-weather a:focus-visible,
     409.roxxi-weather button:focus-visible,
     410.roxxi-weather [role="button"]:focus-visible {
     411    outline: 3px solid currentColor;
     412    /* ensures ≥3:1 contrast vs background */
     413    outline-offset: 2px;
     414    border-radius: 3px;
     415    /* subtle rounding to improve visibility on icons */
     416}
     417
     418
     419/* When keyboard navigating within dark cards, allow explicit contrast override if needed */
     420
     421.roxxi-weather.wb-text-light a:focus-visible,
     422.roxxi-weather.wb-font-light a:focus-visible {
     423    outline-color: currentColor;
     424    /* still inherits white; strong on dark */
     425}
     426
     427
     428/* High-contrast/forced-colors support (Windows HC Mode) */
     429
     430@media (forced-colors: active) {
     431    .roxxi-weather {
     432        forced-color-adjust: none;
     433        border: 1px solid CanvasText;
     434        background: Canvas;
     435        color: CanvasText;
     436    }
     437    .roxxi-weather a {
     438        color: LinkText;
     439    }
     440    .roxxi-weather a:focus-visible {
     441        outline: 3px solid Highlight;
     442    }
     443    .roxxi-weather .wb-desc {
     444        color: CanvasText;
     445    }
     446}
     447
     448
     449/* =========================
     450   11) Responsive Adjustments
     451   ========================= */
     452
     453@media (max-width: 480px) {
     454    .roxxi-weather.wb-type-badge .badge {
     455        display: flex;
     456        flex-direction: column;
     457        justify-content: center;
     458        gap: 8px;
     459    }
     460    .roxxi-weather .wb-sep {
     461        display: none;
     462    }
     463}
     464
     465@media (max-width: 320px) {
     466    .roxxi-weather.wb-type-badge,
     467    .roxxi-weather.wb-type-compact,
     468    .roxxi-weather.wb-type-inline {
     469        font-size: 14px;
     470    }
     471    .roxxi-weather.wb-type-inline .wb-ico {
     472        display: none;
     473    }
     474}
     475
     476
     477/* =========================
     478   12) Compat Patch
    323479   ========================= */
    324480
    … …  
    326482/*** Badge wrapper class used by renderer ***/
    327483
    328 span.roxxi-weather.wb-type-badge span.wb-badge {
     484.roxxi-weather.wb-type-badge .wb-badge {
    329485    display: flex;
    330486    flex-direction: column;
    … …  
    335491
    336492
    337 /*** Support both wb-text-* and wb-font-* ***/
    338 
    339 span.roxxi-weather.wb-text-light * {
     493/* Keep legacy utility name working (alias of wb-text-*) */
     494
     495.roxxi-weather.wb-font-light * {
    340496    color: #ffffff;
    341497}
    342498
    343 .roxxi-weather.wb-text-light span.wb-desc {
    344     color: var(--wb-light);
    345 }
    346 
    347 span.roxxi-weather.wb-type-badge.wb-text-light,
    348 span.roxxi-weather.wb-type-compact.wb-text-light {
    349     background: var(--wb-dark)
    350 }
    351 
    352 span.roxxi-weather.wb-text-dark {
    353     color: var(--wb-dark);
    354 }
    355 
    356 span.roxxi-weather.wb-text-light a.wb-powered-link {
    357     color: inherit;
    358 }
    359 
    360 .roxxi-weather.wb-text-dark a.wb-powered-link {
    361     color: var(--wb-primary);
    362 }
    363 
    364 
    365 /* =========================
    366    Responsive Adjustments
    367    ========================= */
    368 
    369 @media (max-width: 480px) {
    370     span.roxxi-weather.wb-type-badge .badge {
    371         display: flex;
    372         flex-direction: column;
    373         justify-content: center;
    374         gap: 8px;
    375     }
    376     span.roxxi-weather .wb-sep {
    377         display: none;
    378     }
    379 }
    380 
    381 @media (max-width: 320px) {
    382     span.roxxi-weather.wb-type-badge,
    383     span.roxxi-weather.wb-type-compact,
    384     span.roxxi-weather.wb-type-inline {
    385         font-size: 14px;
    386     }
    387     span.roxxi-weather.wb-type-inline .wb-ico {
    388         display: none;
    389     }
    390 }
     499
     500/*
     501.roxxi-weather.roxxi-weather { color: var(--wb-dark); }
     502.roxxi-weather.roxxi-weather a { color: var(--wb-primary); }
     503*/

  • weatherbot/tags/1.0.9/readme.txt

    r3366762 r3366801  
    55Tested up to: 6.8
    66Requires PHP: 7.4
    7 Stable tag: 1.0.8
     7Stable tag: 1.0.9
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    181181== Changelog ==
    182182
     183= 1.0.9 =
     184* Improved CSS with layering and theme style inherit for consistency.
     185* Added additional CSS for ADA enhancements
     186
    183187= 1.0.8 =
    184188* Updated readme.txt content

  • weatherbot/trunk/assets/css/weather-bot.css

    r3366760 r3366801  
    1 /* WeatherBot by RoxxiStudios Public Styles (optimized v3.2.2 with compat patch) */
     1/* WeatherBot by RoxxiStudios — Public Styles (optimized v3.3.1 + ADA enhancements)
     2   - Component-scoped, class-only selectors (no element qualifiers)
     3   - Predictable typography + color baseline (prevents footer/theme bleed)
     4   - Accessible focus states, reduced-motion fallback, high-contrast support
     5   - Flat specificity (optional class-doubling bumps at bottom)
     6*/
     7
     8
     9/* =========================
     10   0) CSS Reset (component scope)
     11   ========================= */
     12
     13.roxxi-weather,
     14.roxxi-weather * {
     15    box-sizing: border-box;
     16}
    217
    318
    … …  
    1227    --wb-light: #D3D3D3;
    1328    --wb-dark: #1A1A1A;
     29    /* Focus/outline tokens */
     30    --wb-focus: #6799cc;
     31    /* fallback if currentColor unavailable */
     32    --wb-outline: #000000;
     33    --wb-outline-contrast: #ffffff;
    1434}
    1535
    … …  
    2444    gap: 5px;
    2545    width: fit-content;
     46    /* Typography baseline */
    2647    font-family: inherit;
    27     font-weight: 600;
    28     background: white;
    29 }
     48    font-weight: 400;
     49    font-size: 16px;
     50    line-height: 1.3;
     51    /* Color baseline to resist footer/theme overrides */
     52    color: var(--wb-dark);
     53    background: #ffffff;
     54    /* Improve tap targets in touch contexts */
     55    -webkit-tap-highlight-color: transparent;
     56}
     57
     58
     59/* Inherit typography safely for children */
    3060
    3161.roxxi-weather * {
    … …  
    3363    font-weight: inherit;
    3464    font-size: inherit;
    35     line-height: normal;
     65    line-height: inherit;
    3666    word-break: normal;
    3767    white-space: normal;
    38     box-sizing: border-box;
    39 }
    40 
    41 span.roxxi-weather .details,
    42 span.roxxi-weather .conditions {
     68}
     69
     70
     71/* =========================
     72   3) Layout Groups
     73   ========================= */
     74
     75.roxxi-weather .details,
     76.roxxi-weather .conditions {
    4377    display: flex;
    4478    flex-wrap: wrap;
    … …  
    4882
    4983
     84/* =========================
     85   4) Variants
     86   ========================= */
     87
     88
    5089/*** BADGE ***/
    5190
    52 span.roxxi-weather.wb-type-badge {
     91.roxxi-weather.wb-type-badge {
    5392    display: inline-flex;
    5493    align-items: flex-start;
    … …  
    61100}
    62101
    63 span.roxxi-weather.wb-type-badge span.badge {
     102.roxxi-weather.wb-type-badge .badge {
    64103    display: flex;
    65104    gap: 8px;
    66105}
    67106
    68 span.roxxi-weather.wb-type-badge span.details {
     107.roxxi-weather.wb-type-badge .details {
    69108    flex-direction: column;
    70109    align-items: flex-start;
    71110}
    72111
    73 span.roxxi-weather.wb-type-badge span.conditions {
     112.roxxi-weather.wb-type-badge .conditions {
    74113    align-items: center;
    75114}
    76115
    77 span.roxxi-weather.wb-type-badge span.temp {
     116.roxxi-weather.wb-type-badge .temp {
    78117    gap: 5px;
    79118}
    80119
    81 span.roxxi-weather.wb-type-badge .wb-ico {
     120.roxxi-weather.wb-type-badge .wb-ico {
    82121    width: 28px;
    83122    height: auto;
    84123}
    85124
    86 span.roxxi-weather.wb-type-badge span.temp span.degree {
    87     font-size: inherit;
    88 }
    89 
    90125
    91126/*** COMPACT ***/
    92127
    93 span.roxxi-weather.wb-type-compact {
     128.roxxi-weather.wb-type-compact {
    94129    flex-direction: column;
    95130    padding: 8px 10px;
    … …  
    97132    border-radius: 5px;
    98133    font-size: 16px;
     134    /* variant scale */
    99135}
    100136
    … …  
    107143    flex-wrap: wrap;
    108144    gap: 8px;
    109     background: unset;
     145    background: transparent;
    110146    border: 0;
    111147    font-size: inherit;
    112     vertical-align: text-bottom;
    113 }
    114 
    115 
    116 /*** ALIGNMENT ***/
    117 
    118 span.roxxi-weather.wb-left,
    119 span.roxxi-weather.wb-left .details,
    120 span.roxxi-weather.wb-left .conditions {
     148    vertical-align: baseline;
     149}
     150
     151
     152/* =========================
     153   5) Alignment Utilities
     154   ========================= */
     155
     156.roxxi-weather.wb-left,
     157.roxxi-weather.wb-left .details,
     158.roxxi-weather.wb-left .conditions {
    121159    justify-content: flex-start;
    122160    margin: 0;
    … …  
    124162}
    125163
    126 span.roxxi-weather.wb-center,
    127 span.roxxi-weather.wb-center .details,
    128 span.roxxi-weather.wb-center .conditions {
     164.roxxi-weather.wb-center,
     165.roxxi-weather.wb-center .details,
     166.roxxi-weather.wb-center .conditions {
    129167    display: flex;
    130168    justify-content: center;
    … …  
    133171}
    134172
    135 span.roxxi-weather.wb-right,
    136 span.roxxi-weather.wb-right .details,
    137 span.roxxi-weather.wb-right .conditions {
     173.roxxi-weather.wb-right,
     174.roxxi-weather.wb-right .details,
     175.roxxi-weather.wb-right .conditions {
    138176    display: flex;
    139177    justify-content: flex-end;
    … …  
    142180}
    143181
    144 span.roxxi-weather.wb-center:not(.wp-badge),
    145 span.roxxi-weather.wb-right:not(.wp-badge) {
     182.roxxi-weather.wb-center:not(.wp-badge),
     183.roxxi-weather.wb-right:not(.wp-badge) {
    146184    align-items: inherit;
    147185}
    148186
    149 span.roxxi-weather.wb-right .wb-badge.conditions {
     187.roxxi-weather.wb-right .wb-badge.conditions {
    150188    display: inline-flex;
    151189    align-items: center;
    152190}
    153191
    154 span.roxxi-weather .conditions {
    155     display: flex;
    156     flex-direction: row;
    157     align-items: center;
    158     flex-wrap: wrap;
    159     gap: 5px;
    160 }
    161 
    162 span.roxxi-weather strong.wb-pre {
    163     font-size: inherit;
    164     font-weight: inherit;
    165     line-height: 1.2;
    166 }
    167 
    168 
    169 /*** temperature and conditions ***/
    170 
    171 span.roxxi-weather span.details,
    172 span.roxxi-weather span.conditions {
    173     font-size: inherit;
    174 }
    175 
    176 span.roxxi-weather span.wb-ico {
     192
     193/* =========================
     194   6) Temperature & Conditions
     195   ========================= */
     196
     197.roxxi-weather .wb-ico {
    177198    width: 20px;
    178199    height: auto;
    179200}
    180201
    181 span.roxxi-weather span.temp {
     202.roxxi-weather .temp {
    182203    display: flex;
    183204    align-items: center;
    184205    gap: 3px;
    185     font-weight: inherit;
    186 }
    187 
    188 span.roxxi-weather span.degree {
     206}
     207
     208.roxxi-weather .degree {
    189209    display: inline-flex;
    190210    align-items: baseline;
    191211    gap: 2px;
    192     font-weight: inherit;
    193 }
    194 
    195 span.roxxi-weather span.wb-temp {
    196     font-weight: inherit;
     212}
     213
     214.roxxi-weather .wb-temp,
     215.roxxi-weather .wb-unit {
    197216    opacity: 0.9;
    198217}
    199218
    200 span.roxxi-weather span.wb-unit {
    201     font-weight: inherit;
    202     opacity: 0.9;
    203 }
    204 
    205 span.roxxi-weather span.wb-desc {
     219.roxxi-weather .wb-desc {
    206220    color: var(--wb-neutral);
    207     font-size: inherit;
    208     font-weight: inherit;
    209 }
    210 
    211 
    212 /*** powered-by line ***/
    213 
    214 span.widget.widget_roxxi_weather_widget .wb-powered,
    215 span.roxxi-weather span.wb-powered {
     221}
     222
     223.roxxi-weather .wb-pre,
     224.roxxi-weather .wb-temp,
     225.roxxi-weather .wb-unit {
     226    font-weight: 600;
     227    line-height: 1.2;
     228}
     229
     230
     231/* =========================
     232   7) Powered-by Line
     233   ========================= */
     234
     235.widget.widget_roxxi_weather_widget .wb-powered,
     236.roxxi-weather .wb-powered {
    216237    color: var(--wb-neutral);
    217238    font-size: 12px;
    … …  
    219240}
    220241
    221 span.roxxi-weather span.wb-powered a.wb-powered-link {
     242.roxxi-weather .wb-powered a.wb-powered-link {
    222243    font-size: inherit;
    223     font-weight: 500;
    224 }
    225 
    226 span.roxxi-weather a.wb-powered-link {
     244    transition: 250ms;
     245}
     246
     247
     248/* Default link styles inside component (distinguished from text) */
     249
     250.roxxi-weather a {
    227251    color: var(--wb-primary);
    228     text-decoration: none;
    229     transition: 250ms;
    230 }
    231 
    232 span.roxxi-weather a.wb-powered-link:hover,
    233 span.roxxi-weather a.wb-powered-link:focus {
     252    text-decoration: underline;
     253    text-underline-offset: 2px;
     254    transition: color 250ms;
     255}
     256
     257.roxxi-weather a:hover,
     258.roxxi-weather a:focus {
    234259    color: var(--wb-secondary);
    235     text-decoration: none;
    236 }
    237 
    238 
    239 /* =========================
    240    Font Color Helpers
    241    ========================= */
    242 
    243 span.roxxi-weather.wb-font-light {
     260}
     261
     262
     263/* Powered-by link: keep underline to avoid color-only cue */
     264
     265.roxxi-weather a.wb-powered-link {
     266    text-decoration: underline;
     267    text-underline-offset: 2px;
     268}
     269
     270
     271/* === FIX: ensure powered-by hover/focus beats theme a:hover and adds a clearer cue === */
     272
     273.roxxi-weather a.wb-powered-link:hover,
     274.roxxi-weather a.wb-powered-link:focus {
     275    color: var(--wb-secondary);
     276    text-underline-offset: 4px;
     277}
     278
     279
     280/* =========================
     281   8) Color Utilities
     282   ========================= */
     283
     284
     285/* Support both wb-text-* and wb-font-* for backward compatibility */
     286
     287.roxxi-weather.wb-text-dark,
     288.roxxi-weather.wb-font-dark {
     289    color: var(--wb-dark);
     290}
     291
     292.roxxi-weather.wb-text-dark a,
     293.roxxi-weather.wb-font-dark a {
     294    color: var(--wb-primary);
     295}
     296
     297.roxxi-weather.wb-text-light,
     298.roxxi-weather.wb-font-light {
    244299    color: #ffffff;
    245300}
    246301
    247 span.roxxi-weather.wb-font-light span.wb-powered-link {
     302.roxxi-weather.wb-text-light a,
     303.roxxi-weather.wb-font-light a {
    248304    color: inherit;
    249 }
    250 
    251 span.roxxi-weather.wb-font-dark {
    252     color: var(--wb-dark);
    253 }
    254 
    255 span.roxxi-weather.wb-font-dark span.wb-powered-link {
    256     color: inherit;
    257 }
    258 
    259 
    260 /* While loading, show only the line; hide icon/temp/unit/desc */
    261 
    262 span.roxxi-weather .conditions.wb-loading span.wb-ico,
    263 span.roxxi-weather .conditions.wb-loading span.wb-temp,
    264 span.roxxi-weather .conditions.wb-loading span.wb-sep,
    265 span.roxxi-weather .conditions.wb-loading span.wb-unit,
    266 span.roxxi-weather .conditions.wb-loading span.wb-desc {
     305    /* white links on dark */
     306}
     307
     308
     309/* Description color adjusts for light mode cards */
     310
     311.roxxi-weather.wb-text-light .wb-desc,
     312.roxxi-weather.wb-font-light .wb-desc {
     313    color: var(--wb-light);
     314}
     315
     316
     317/* Card backgrounds for light text variants */
     318
     319.roxxi-weather.wb-type-badge.wb-text-light,
     320.roxxi-weather.wb-type-compact.wb-text-light {
     321    background: var(--wb-dark);
     322}
     323
     324
     325/* =========================
     326   9) Loading States
     327   ========================= */
     328
     329
     330/* Hide icon/temp/unit/desc while loading */
     331
     332.roxxi-weather .conditions.wb-loading .wb-ico,
     333.roxxi-weather .conditions.wb-loading .wb-temp,
     334.roxxi-weather .conditions.wb-loading .wb-sep,
     335.roxxi-weather .conditions.wb-loading .wb-unit,
     336.roxxi-weather .conditions.wb-loading .wb-desc {
    267337    display: none;
    268338}
    … …  
    271341/* Show the loading message only during loading */
    272342
    273 span.roxxi-weather span.conditions span.wb-loading-msg {
     343.roxxi-weather .conditions .wb-loading-msg {
    274344    display: none;
    275345}
    276346
    277 span.roxxi-weather span.conditions.wb-loading span.wb-loading-msg {
     347.roxxi-weather .conditions.wb-loading .wb-loading-msg {
    278348    display: inline;
    279349}
    280350
    281351
    282 /*** Optional niceties ***/
    283 
    284 span.roxxi-weather span.conditions span.wb-loading-msg {
     352/* Optional niceties */
     353
     354.roxxi-weather .conditions .wb-loading-msg {
    285355    font-size: 15px;
    286356    margin-left: 0;
    287357    font-style: italic;
    288     font-weight: normal;
     358    font-weight: 400;
    289359    text-align: center;
    290360    opacity: .85;
    291361}
    292362
    293 span.roxxi-weather span.conditions.wb-loading span.wb-loading-msg::after {
     363.roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
    294364    content: "";
    295365    display: inline-block;
    … …  
    319389
    320390
    321 /* =========================
    322    Compat Patch
     391/* Respect user motion preferences */
     392
     393@media (prefers-reduced-motion: reduce) {
     394    .roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
     395        animation: none;
     396        content: "...";
     397    }
     398    .roxxi-weather a {
     399        transition: none;
     400    }
     401}
     402
     403
     404/* =========================
     405   10) Focus Visibility (ADA)
     406   ========================= */
     407
     408.roxxi-weather a:focus-visible,
     409.roxxi-weather button:focus-visible,
     410.roxxi-weather [role="button"]:focus-visible {
     411    outline: 3px solid currentColor;
     412    /* ensures ≥3:1 contrast vs background */
     413    outline-offset: 2px;
     414    border-radius: 3px;
     415    /* subtle rounding to improve visibility on icons */
     416}
     417
     418
     419/* When keyboard navigating within dark cards, allow explicit contrast override if needed */
     420
     421.roxxi-weather.wb-text-light a:focus-visible,
     422.roxxi-weather.wb-font-light a:focus-visible {
     423    outline-color: currentColor;
     424    /* still inherits white; strong on dark */
     425}
     426
     427
     428/* High-contrast/forced-colors support (Windows HC Mode) */
     429
     430@media (forced-colors: active) {
     431    .roxxi-weather {
     432        forced-color-adjust: none;
     433        border: 1px solid CanvasText;
     434        background: Canvas;
     435        color: CanvasText;
     436    }
     437    .roxxi-weather a {
     438        color: LinkText;
     439    }
     440    .roxxi-weather a:focus-visible {
     441        outline: 3px solid Highlight;
     442    }
     443    .roxxi-weather .wb-desc {
     444        color: CanvasText;
     445    }
     446}
     447
     448
     449/* =========================
     450   11) Responsive Adjustments
     451   ========================= */
     452
     453@media (max-width: 480px) {
     454    .roxxi-weather.wb-type-badge .badge {
     455        display: flex;
     456        flex-direction: column;
     457        justify-content: center;
     458        gap: 8px;
     459    }
     460    .roxxi-weather .wb-sep {
     461        display: none;
     462    }
     463}
     464
     465@media (max-width: 320px) {
     466    .roxxi-weather.wb-type-badge,
     467    .roxxi-weather.wb-type-compact,
     468    .roxxi-weather.wb-type-inline {
     469        font-size: 14px;
     470    }
     471    .roxxi-weather.wb-type-inline .wb-ico {
     472        display: none;
     473    }
     474}
     475
     476
     477/* =========================
     478   12) Compat Patch
    323479   ========================= */
    324480
    … …  
    326482/*** Badge wrapper class used by renderer ***/
    327483
    328 span.roxxi-weather.wb-type-badge span.wb-badge {
     484.roxxi-weather.wb-type-badge .wb-badge {
    329485    display: flex;
    330486    flex-direction: column;
    … …  
    335491
    336492
    337 /*** Support both wb-text-* and wb-font-* ***/
    338 
    339 span.roxxi-weather.wb-text-light * {
     493/* Keep legacy utility name working (alias of wb-text-*) */
     494
     495.roxxi-weather.wb-font-light * {
    340496    color: #ffffff;
    341497}
    342498
    343 .roxxi-weather.wb-text-light span.wb-desc {
    344     color: var(--wb-light);
    345 }
    346 
    347 span.roxxi-weather.wb-type-badge.wb-text-light,
    348 span.roxxi-weather.wb-type-compact.wb-text-light {
    349     background: var(--wb-dark)
    350 }
    351 
    352 span.roxxi-weather.wb-text-dark {
    353     color: var(--wb-dark);
    354 }
    355 
    356 span.roxxi-weather.wb-text-light a.wb-powered-link {
    357     color: inherit;
    358 }
    359 
    360 .roxxi-weather.wb-text-dark a.wb-powered-link {
    361     color: var(--wb-primary);
    362 }
    363 
    364 
    365 /* =========================
    366    Responsive Adjustments
    367    ========================= */
    368 
    369 @media (max-width: 480px) {
    370     span.roxxi-weather.wb-type-badge .badge {
    371         display: flex;
    372         flex-direction: column;
    373         justify-content: center;
    374         gap: 8px;
    375     }
    376     span.roxxi-weather .wb-sep {
    377         display: none;
    378     }
    379 }
    380 
    381 @media (max-width: 320px) {
    382     span.roxxi-weather.wb-type-badge,
    383     span.roxxi-weather.wb-type-compact,
    384     span.roxxi-weather.wb-type-inline {
    385         font-size: 14px;
    386     }
    387     span.roxxi-weather.wb-type-inline .wb-ico {
    388         display: none;
    389     }
    390 }
     499
     500/*
     501.roxxi-weather.roxxi-weather { color: var(--wb-dark); }
     502.roxxi-weather.roxxi-weather a { color: var(--wb-primary); }
     503*/

  • weatherbot/trunk/readme.txt

    r3366762 r3366801  
    55Tested up to: 6.8
    66Requires PHP: 7.4
    7 Stable tag: 1.0.8
     7Stable tag: 1.0.9
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    181181== Changelog ==
    182182
     183= 1.0.9 =
     184* Improved CSS with layering and theme style inherit for consistency.
     185* Added additional CSS for ADA enhancements
     186
    183187= 1.0.8 =
    184188* Updated readme.txt content
Note: See TracChangeset for help on using the changeset viewer.