about/static/css/plugin-webring.css

.webring-section .plugin-header{
    box-shadow:none;
    border:none;
}

.webring-nav{
    display:flex;
    align-items:center;
    justify-content:center;     /* center the trio */
    flex-wrap:nowrap;           /* always one row */
    width:100%;
    min-height:0;
    gap:clamp(6px, 0.8vw, 10px);/* tighter spacing */
    padding:0;                  /* no background padding strip */
    background:transparent;
    box-shadow:none;
    overflow:hidden;            /* hide tiny overflow on super small screens */
}

.webring-prev,
.webring-home,
.webring-next{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.55em;

    height:clamp(32px, 2.6vw, 46px);
    padding:0 clamp(10px, 1.6vw, 18px);

    border-radius:12px;
    border:1px solid var(--edge-0);
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:0 1px 3px rgba(0,0,0,.15);

    color:var(--ink);
    font-weight:700;
    font-size:clamp(12px, 0.95vw, 16px);
    line-height:1;

    white-space:nowrap;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;

    text-decoration:none;
    cursor:pointer;
    user-select:none;

    transition:
            transform .15s ease,
            box-shadow .2s ease,
            background .2s ease,
            opacity .2s ease;
}

.webring-prev:hover,
.webring-home:hover,
.webring-next:hover{
    transform:translateY(-1px);
    box-shadow:0 3px 12px rgba(0,0,0,.25);
}

.webring-prev:active,
.webring-home:active,
.webring-next:active{
    transform:none;
}

.webring-home{
    background:linear-gradient(135deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 85%, black) 100%);
    color:#fff;
    border-color:transparent;
    font-weight:800;
    letter-spacing:.1px;
}

.webring-prev,
.webring-next{ flex:1 1 0; max-width:33%; }
.webring-home{ flex:0 0 auto; min-width:clamp(56px, 6vw, 120px); }

.webring-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
}

.webring-prev img,
.webring-home img,
.webring-next img,
.webring-prev svg,
.webring-home svg,
.webring-next svg{
    width:clamp(14px, 1.2vw, 18px);
    height:clamp(14px, 1.2vw, 18px);
    flex-shrink:0;
    object-fit:contain;
}
/* Make the pills a touch larger on very wide screens */
@media (min-width: 1440px){
    .webring-nav{ gap:clamp(8px, 0.7vw, 14px); }
    .webring-prev,
    .webring-home,
    .webring-next{
        height:clamp(40px, 2.4vw, 50px);
        font-size:clamp(13px, 0.9vw, 17px);
        padding:0 clamp(12px, 1.8vw, 20px);
    }
}

@media (max-width: 900px){
    .webring-prev,
    .webring-home,
    .webring-next{
        height:38px;
        font-size:13px;
        padding:0 12px;
    }
}

@media (max-width: 520px){
    .webring-nav{ gap:6px; }
    .webring-prev,
    .webring-next{ padding:0 10px; height:34px; font-size:12px; }
    .webring-home{ padding:0 12px; height:34px; min-width:52px; }
}

/* Ultra-narrow: hide prev/next text to keep one line, show arrows */
@media (max-width: 380px){
    .webring-prev .webring-text,
    .webring-next .webring-text{ display:none; }
    .webring-prev::after{ content:"←"; font-weight:900; }
    .webring-next::after{ content:"→"; font-weight:900; }
}