WordPress.org
Get WordPress

Plugin Directory


Ignore:
Timestamp:
10/02/2026 11:06:10 AM (2 weeks ago)
Author:
archivistai
Message:

Release 0.6.4: redesigned chat and settings, appearance options

File:
1 edited

Legend:

Unmodified
Added
Removed

  • archivist-ai/trunk/assets/css/admin.css

    r3724460 r3724623  
     1/*
     2 * Archivist AI admin screens. Everything is scoped to .arcai-wrap so nothing
     3 * leaks into the rest of wp-admin.
     4 */
    15.arcai-wrap {
    2         max-width: 1180px;
    3 }
    4 
    5 .arcai-wrap h1 {
    6         margin-bottom: 4px;
    7 }
    8 
    9 .arcai-wrap h2 {
    10         font-size: 1.05rem;
    11         margin: 0 0 12px;
    12 }
    13 
     6        --arcai-ink: #16130e;
     7        --arcai-ink-2: #211d16;
     8        --arcai-paper: #f3ecdd;
     9        --arcai-paper-dim: #c9bfa9;
     10        --arcai-card: #fffdf8;
     11        --arcai-text: #221d14;
     12        --arcai-muted: #6f6758;
     13        --arcai-line: #e6dfcf;
     14        --arcai-lamp: #e8502a;
     15        --arcai-lamp-dark: #c43d1b;
     16        --arcai-ok: #2f7d4f;
     17        --arcai-warn: #b5651d;
     18        --arcai-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
     19        --arcai-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
     20
     21        max-width: 1200px;
     22        color: var(--arcai-text);
     23}
     24
     25/* --- Header --- */
     26.arcai-hero {
     27        display: flex;
     28        align-items: center;
     29        justify-content: space-between;
     30        flex-wrap: wrap;
     31        gap: 16px 24px;
     32        margin: 14px 0 22px;
     33        padding: 22px 26px;
     34        background:
     35                radial-gradient(ellipse 50% 140% at 92% 50%, rgba(232, 80, 42, 0.16), transparent 70%),
     36                var(--arcai-ink);
     37        border-radius: 2px;
     38        color: var(--arcai-paper);
     39}
     40
     41.arcai-brand {
     42        display: flex;
     43        align-items: center;
     44        gap: 16px;
     45}
     46
     47.arcai-mark {
     48        display: flex;
     49        align-items: center;
     50        justify-content: center;
     51        width: 46px;
     52        height: 46px;
     53        flex-shrink: 0;
     54        border: 1px solid rgba(243, 236, 221, 0.18);
     55        font-family: Georgia, serif;
     56        font-style: italic;
     57        font-size: 30px;
     58        line-height: 1;
     59        color: var(--arcai-lamp);
     60        padding-bottom: 2px;
     61}
     62
     63.arcai-wrap .arcai-hero h1 {
     64        margin: 2px 0 0;
     65        padding: 0;
     66        font-family: var(--arcai-serif);
     67        font-size: 28px;
     68        font-weight: 400;
     69        line-height: 1.1;
     70        letter-spacing: -0.01em;
     71        color: var(--arcai-paper);
     72}
     73
     74.arcai-kicker {
     75        margin: 0;
     76        font-family: var(--arcai-mono);
     77        font-size: 10.5px;
     78        letter-spacing: 0.2em;
     79        text-transform: uppercase;
     80        color: var(--arcai-muted);
     81}
     82
     83.arcai-hero .arcai-kicker {
     84        color: #f4825f;
     85}
     86
     87.arcai-pills {
     88        display: flex;
     89        flex-wrap: wrap;
     90        gap: 8px;
     91        margin: 0;
     92}
     93
     94.arcai-pill {
     95        display: inline-flex;
     96        align-items: center;
     97        gap: 7px;
     98        margin: 0;
     99        padding: 5px 11px;
     100        border: 1px solid rgba(243, 236, 221, 0.2);
     101        font-family: var(--arcai-mono);
     102        font-size: 11px;
     103        letter-spacing: 0.04em;
     104        color: var(--arcai-paper-dim);
     105}
     106
     107.arcai-pill::before {
     108        content: "";
     109        width: 7px;
     110        height: 7px;
     111        border-radius: 50%;
     112        background: #8f8672;
     113}
     114
     115.arcai-pill-ok::before {
     116        background: #5fbf7f;
     117        box-shadow: 0 0 0 3px rgba(95, 191, 127, 0.18);
     118}
     119
     120.arcai-pill-warn {
     121        color: #f4b48f;
     122        border-color: rgba(232, 80, 42, 0.45);
     123}
     124
     125.arcai-pill-warn::before {
     126        background: var(--arcai-lamp);
     127}
     128
     129/* --- Layout --- */
    14130.arcai-columns {
    15         display: flex;
    16         gap: 28px;
    17         align-items: flex-start;
    18         margin-top: 20px;
    19 }
    20 
    21 .arcai-main {
    22         flex: 1;
    23         min-width: 0;
    24 }
    25 
    26 .arcai-side {
    27         width: 340px;
    28         flex-shrink: 0;
    29 }
    30 
    31 /* Panels — used for the settings form, usage dashboard and analytics tables. */
     131        display: grid;
     132        grid-template-columns: minmax(0, 1fr) 360px;
     133        gap: 22px;
     134        align-items: start;
     135}
     136
     137.arcai-columns-even {
     138        grid-template-columns: repeat(2, minmax(0, 1fr));
     139}
     140
    32141.arcai-main,
    33142.arcai-side {
     143        display: flex;
     144        flex-direction: column;
     145        gap: 18px;
     146        min-width: 0;
     147}
     148
     149/* --- Cards --- */
     150.arcai-card {
     151        background: var(--arcai-card);
     152        border: 1px solid var(--arcai-line);
     153        border-radius: 2px;
     154        padding: 20px 24px 22px;
     155        box-shadow: 0 1px 0 rgba(34, 29, 20, 0.03);
     156}
     157
     158.arcai-card-head {
     159        display: flex;
     160        align-items: baseline;
     161        gap: 12px;
     162        margin: 0 0 6px;
     163        padding-bottom: 12px;
     164        border-bottom: 1px solid var(--arcai-line);
     165}
     166
     167.arcai-card-head .arcai-kicker {
     168        color: var(--arcai-lamp);
     169}
     170
     171.arcai-wrap .arcai-card h2 {
     172        margin: 0;
     173        padding: 0;
     174        font-family: var(--arcai-serif);
     175        font-size: 21px;
     176        font-weight: 400;
     177        line-height: 1.2;
     178        color: var(--arcai-text);
     179}
     180
     181.arcai-wrap .description {
     182        color: var(--arcai-muted);
     183}
     184
     185.arcai-card > .description:last-child {
     186        margin-bottom: 0;
     187}
     188
     189/* --- Forms --- */
     190.arcai-card .form-table {
     191        margin: 0;
     192}
     193
     194.arcai-card .form-table th {
     195        width: 170px;
     196        padding: 18px 16px 14px 0;
     197        font-weight: 600;
     198        color: var(--arcai-text);
     199}
     200
     201.arcai-card .form-table td {
     202        padding: 14px 0;
     203}
     204
     205.arcai-card .form-table tr + tr th,
     206.arcai-card .form-table tr + tr td {
     207        border-top: 1px dashed var(--arcai-line);
     208}
     209
     210.arcai-wrap input[type="text"],
     211.arcai-wrap input[type="password"],
     212.arcai-wrap input[type="number"] {
     213        border-color: #d9d0bd;
     214        border-radius: 2px;
    34215        background: #fff;
    35         border: 1px solid #e2e4e9;
    36         border-radius: 10px;
    37         padding: 20px 22px;
    38         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    39 }
    40 
    41 .arcai-main hr {
    42         margin: 26px -22px;
    43         border: 0;
    44         border-top: 1px solid #eceef2;
    45 }
    46 
    47 /* Make WP's form-table a little airier inside the panel. */
    48 .arcai-main .form-table th {
     216        min-height: 34px;
     217}
     218
     219.arcai-wrap input[type="password"] {
     220        font-family: var(--arcai-mono);
     221}
     222
     223.arcai-wrap input[type="text"]:focus,
     224.arcai-wrap input[type="password"]:focus,
     225.arcai-wrap input[type="number"]:focus {
     226        border-color: var(--arcai-lamp);
     227        box-shadow: 0 0 0 1px var(--arcai-lamp);
     228}
     229
     230.arcai-wrap input[type="checkbox"]:focus {
     231        border-color: var(--arcai-lamp);
     232        box-shadow: 0 0 0 1px var(--arcai-lamp);
     233}
     234
     235.arcai-wrap input[type="color"] {
     236        width: 52px;
     237        height: 34px;
     238        padding: 3px;
     239        border: 1px solid #d9d0bd;
     240        border-radius: 2px;
     241        background: #fff;
     242        cursor: pointer;
     243}
     244
     245.arcai-checks label {
     246        display: inline-flex;
     247        align-items: center;
     248        gap: 6px;
     249        margin: 0 18px 4px 0;
     250}
     251
     252.arcai-affix {
     253        display: inline-block;
     254        margin-right: 6px;
     255        font-family: var(--arcai-mono);
     256        color: var(--arcai-muted);
     257}
     258
     259.arcai-affix-after {
     260        margin-left: 8px;
     261        color: var(--arcai-muted);
     262}
     263
     264.arcai-savebar {
     265        position: sticky;
     266        bottom: 0;
     267        z-index: 2;
     268        display: flex;
     269        align-items: center;
     270        justify-content: space-between;
     271        gap: 12px;
     272        padding: 12px 24px;
     273        background: var(--arcai-card);
     274        border: 1px solid var(--arcai-line);
     275        box-shadow: 0 -8px 24px -12px rgba(34, 29, 20, 0.25);
     276}
     277
     278.arcai-savebar-note {
     279        margin: 0;
     280        font-family: var(--arcai-mono);
     281        font-size: 11.5px;
     282        color: var(--arcai-muted);
     283}
     284
     285.arcai-wrap select {
     286        min-height: 34px;
     287        border-color: #d9d0bd;
     288        border-radius: 2px;
     289}
     290
     291.arcai-wrap select:focus {
     292        border-color: var(--arcai-lamp);
     293        box-shadow: 0 0 0 1px var(--arcai-lamp);
     294}
     295
     296/* Corners: a segmented control; each option previews its own radius. */
     297.arcai-segmented {
     298        display: inline-flex;
     299        gap: 6px;
     300}
     301
     302.arcai-segmented label {
     303        position: relative;
     304        margin: 0;
     305}
     306
     307.arcai-segmented input {
     308        position: absolute;
     309        opacity: 0;
     310        pointer-events: none;
     311}
     312
     313.arcai-segmented span {
     314        display: inline-block;
     315        padding: 7px 14px;
     316        border: 1px solid #d9d0bd;
     317        background: #fff;
     318        cursor: pointer;
     319        transition: border-color 0.15s ease, background 0.15s ease;
     320}
     321
     322.arcai-segmented .arcai-corner-square {
     323        border-radius: 2px;
     324}
     325
     326.arcai-segmented .arcai-corner-soft {
     327        border-radius: 8px;
     328}
     329
     330.arcai-segmented .arcai-corner-rounded {
     331        border-radius: 18px;
     332}
     333
     334.arcai-segmented span:hover {
     335        border-color: var(--arcai-text);
     336}
     337
     338.arcai-segmented input:checked + span {
     339        border-color: var(--arcai-lamp);
     340        background: #fdf0ea;
     341        box-shadow: inset 0 0 0 1px var(--arcai-lamp);
     342}
     343
     344.arcai-segmented input:focus-visible + span {
     345        outline: 2px solid var(--arcai-lamp);
     346        outline-offset: 2px;
     347}
     348
     349/* --- Live chat preview --- */
     350.arcai-preview-wrap {
     351        margin-top: 8px;
    49352        padding-top: 16px;
    50 }
    51 
    52 .arcai-main .form-table td {
    53         padding-top: 12px;
    54         padding-bottom: 12px;
    55 }
    56 
    57 /* Tables (usage + analytics) */
    58 .arcai-wrap .widefat {
    59         border-radius: 8px;
     353        border-top: 1px solid var(--arcai-line);
     354}
     355
     356.arcai-preview-stage {
     357        display: flex;
     358        justify-content: flex-end;
     359        margin-top: 10px;
     360        padding: 26px;
     361        background:
     362                repeating-linear-gradient(0deg, transparent 0 22px, rgba(34, 29, 20, 0.05) 22px 23px),
     363                #ece7dc;
     364        border: 1px solid var(--arcai-line);
     365}
     366
     367.arcai-preview {
     368        display: flex;
     369        flex-direction: column;
     370        align-items: flex-end;
     371        gap: 14px;
     372        width: 100%;
     373        max-width: 380px;
     374        pointer-events: none;
     375        user-select: none;
     376}
     377
     378.arcai-preview .arcai-panel {
     379        position: static;
     380        width: 100%;
     381        height: auto;
     382        max-height: none;
     383        animation: none;
     384}
     385
     386.arcai-preview .arcai-messages {
    60387        overflow: hidden;
    61         border: 1px solid #e2e4e9;
    62 }
    63 
    64 .arcai-wrap .widefat thead th {
    65         font-weight: 600;
    66 }
    67 
    68 .arcai-wrap .widefat td,
    69 .arcai-wrap .widefat th {
    70         padding: 10px 12px;
    71 }
    72 
    73 /* Indexing progress */
    74 .arcai-progress-bar {
     388}
     389
     390.arcai-preview .arcai-preview-input {
     391        display: flex;
     392        align-items: center;
     393        color: var(--arcai-faint);
     394}
     395
     396.arcai-preview .arcai-send {
     397        display: inline-flex;
     398        align-items: center;
     399}
     400
     401/* --- Buttons --- */
     402.arcai-wrap .button {
     403        border-radius: 2px;
     404        min-height: 34px;
     405        padding: 0 14px;
     406}
     407
     408.arcai-wrap .button-primary {
     409        background: var(--arcai-lamp);
     410        border-color: var(--arcai-lamp-dark);
     411        color: #fff;
     412        text-shadow: none;
     413}
     414
     415.arcai-wrap .button-primary:hover,
     416.arcai-wrap .button-primary:focus {
     417        background: var(--arcai-lamp-dark);
     418        border-color: var(--arcai-lamp-dark);
     419        color: #fff;
     420}
     421
     422.arcai-wrap .button-primary:focus {
     423        box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--arcai-lamp);
     424}
     425
     426.arcai-wrap .button-primary[disabled],
     427.arcai-wrap .button-primary:disabled {
     428        background: #e9a48f !important;
     429        border-color: #e9a48f !important;
     430        color: #fff !important;
     431}
     432
     433.arcai-wrap .button:not(.button-primary) {
     434        border-color: #d9d0bd;
     435        color: var(--arcai-text);
     436        background: #fff;
     437}
     438
     439.arcai-wrap .button:not(.button-primary):hover {
     440        border-color: var(--arcai-text);
     441}
     442
     443.arcai-actions {
     444        display: flex;
     445        flex-wrap: wrap;
     446        gap: 8px;
     447        margin: 14px 0 10px;
     448}
     449
     450/* --- Stats --- */
     451.arcai-stat {
     452        display: flex;
     453        align-items: baseline;
     454        gap: 10px;
     455        margin: 14px 0 4px;
     456}
     457
     458.arcai-stat strong {
     459        font-family: var(--arcai-serif);
     460        font-size: 46px;
     461        font-weight: 400;
     462        line-height: 1;
     463        color: var(--arcai-text);
     464}
     465
     466.arcai-stat span {
     467        color: var(--arcai-muted);
     468}
     469
     470.arcai-tiles {
     471        display: grid;
     472        grid-template-columns: repeat(3, minmax(0, 1fr));
     473        gap: 1px;
     474        margin: 16px 0 14px;
     475        background: var(--arcai-line);
     476        border: 1px solid var(--arcai-line);
     477}
     478
     479.arcai-tile {
     480        display: flex;
     481        flex-direction: column;
     482        justify-content: space-between;
     483        gap: 8px;
     484        padding: 12px;
     485        background: var(--arcai-card);
     486}
     487
     488.arcai-tile-label {
     489        font-family: var(--arcai-mono);
     490        font-size: 9.5px;
     491        letter-spacing: 0.16em;
     492        text-transform: uppercase;
     493        color: var(--arcai-muted);
     494}
     495
     496.arcai-tile strong {
     497        font-family: var(--arcai-serif);
     498        font-size: 21px;
     499        font-weight: 400;
     500        line-height: 1.1;
     501        overflow-wrap: anywhere;
     502}
     503
     504/* --- Bars (indexing progress + daily cap) --- */
     505.arcai-progress-bar,
     506.arcai-meter-bar {
    75507        width: 100%;
    76         max-width: 480px;
    77         height: 12px;
    78         background: #e7e9ef;
    79         border-radius: 999px;
     508        height: 6px;
     509        background: #ece5d5;
    80510        overflow: hidden;
    81511        margin: 10px 0 6px;
    82512}
    83513
    84 .arcai-progress-bar span {
     514.arcai-progress-bar span,
     515.arcai-meter-bar span {
    85516        display: block;
    86517        height: 100%;
    87518        width: 0;
    88         background: #2271b1;
    89         border-radius: 999px;
     519        background: var(--arcai-lamp);
    90520        transition: width 0.4s ease;
    91521}
    … …  
    96526
    97527#arcai-progress[data-status="error"] .arcai-progress-bar span {
    98         background: #d63638;
     528        background: #b32d2e;
    99529}
    100530
    101531#arcai-progress[data-status="done"] .arcai-progress-bar span {
    102         background: #00a32a;
    103 }
    104 
    105 .arcai-progress-text {
    106         font-size: 13px;
    107         color: #50575e;
    108         margin-top: 4px;
    109 }
    110 
    111 @media (max-width: 1100px) {
     532        background: var(--arcai-ok);
     533}
     534
     535.arcai-progress-text,
     536.arcai-meter-text {
     537        margin: 4px 0 0;
     538        font-family: var(--arcai-mono);
     539        font-size: 11.5px;
     540        color: var(--arcai-muted);
     541}
     542
     543.arcai-meter {
     544        margin: 0 0 16px;
     545}
     546
     547/* --- Tables --- */
     548.arcai-table {
     549        width: 100%;
     550        border-collapse: collapse;
     551        margin: 0 0 10px;
     552}
     553
     554.arcai-table th {
     555        padding: 8px 0;
     556        border-bottom: 1px solid var(--arcai-text);
     557        font-family: var(--arcai-mono);
     558        font-size: 9.5px;
     559        font-weight: 400;
     560        letter-spacing: 0.16em;
     561        text-align: left;
     562        text-transform: uppercase;
     563        color: var(--arcai-muted);
     564}
     565
     566.arcai-table td {
     567        padding: 9px 0;
     568        border-bottom: 1px solid var(--arcai-line);
     569        vertical-align: top;
     570}
     571
     572.arcai-table .num {
     573        padding-left: 12px;
     574        text-align: right;
     575        white-space: nowrap;
     576}
     577
     578.arcai-table td.num {
     579        font-family: var(--arcai-mono);
     580        font-size: 12px;
     581}
     582
     583.arcai-table .arcai-empty {
     584        color: var(--arcai-muted);
     585        font-style: italic;
     586}
     587
     588/* --- Analytics summary --- */
     589.arcai-summary {
     590        display: flex;
     591        flex-wrap: wrap;
     592        align-items: center;
     593        justify-content: space-between;
     594        gap: 14px;
     595        margin-bottom: 18px;
     596}
     597
     598.arcai-summary .arcai-tiles {
     599        flex: 1;
     600        min-width: 280px;
     601        max-width: 620px;
     602        margin: 0;
     603}
     604
     605@media (max-width: 1180px) {
    112606        .arcai-columns {
    113                 flex-direction: column;
     607                grid-template-columns: minmax(0, 1fr);
    114608        }
    115         .arcai-side {
    116                 width: 100%;
     609}
     610
     611@media (max-width: 782px) {
     612        .arcai-hero {
     613                padding: 18px;
    117614        }
    118 }
     615        .arcai-card {
     616                padding: 16px 16px 18px;
     617        }
     618        .arcai-card .form-table th {
     619                width: auto;
     620                padding-bottom: 0;
     621        }
     622        .arcai-card .form-table tr + tr td {
     623                border-top: 0;
     624        }
     625}
Note: See TracChangeset for help on using the changeset viewer.