User:Peacock Plume/cwn.css

/* Header styles using system font stack */ .cwn-container { /* fonts */ --cwn-header-font: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; --cwn-content-font: -apple-system, system-ui, segoe ui, noto, sans-serif; /* colors */ --cwn-c1: #0003; --cwn-c2: #fff6; --fandom-red: #f83233; --fandom-yellow: #fee34e; /* styles adapting to the original */ border-radius: 10px; border: 2px outset var(--fandom-red); box-shadow: inset -2px -2px 5px 0 var(--fandom-yellow); }

.cwn-header { font-family: var(--cwn-header-font); font-size: 1.5rem; font-weight: bold; text-align: var(--align-header); padding: 0.5rem; height: 48px; }

/* The content box of each section */ .cwn-content { padding: 5px; border-radius: 10px; }

/* Fixing margin and padding issue with p tags in tabber and making it a flexbox */ .cwn .tabber .wds-tab__content p { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: var(--justify-content); margin: 0.5em 0 0.8em; /* 0.8 em is only needed if box-shadow frame is used */ }

/* Making buttons out of the links inside content box */ .cwn .tabber .wds-tab__content p a { font-family: var(--cwn-content-font); /*text-decoration: none;*/ border: 1px solid rgb(var(--theme-border-color--rgb), 0.8); /* Prev: transparent */ border-radius: 4px; padding: 0 5px; background-color: var(--cwn-c1); transition: background-color 400ms ease-out, color 400ms ease-out, border-color 400ms ease-out; }

.cwn .tabber .wds-tab__content p a:hover { background-color: transparent; border-color: var(--theme-link-color); transition: background-color 250ms ease-in, color 250ms ease-in, border-color 250ms ease-in; }

.theme-fandomdesktop-light .cwn .tabber .wds-tab__content p a { background-color: var(--cwn-c2); }

/* Styling tabber tabs */

.cwn .tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab a { font-family: var(--cwn-header-font); }

.cwn .tabber > .wds-tabs__wrapper.with-bottom-border { border-block: 1px solid var(--theme-link-color); background: content-box var(--cwn-c1); padding-inline: 0 4px; }

.theme-fandomdesktop-light .cwn .tabber > .wds-tabs__wrapper.with-bottom-border { background: content-box var(--cwn-c2); }

.cwn .wds-tabs { justify-content: var(--justify-tabs); }

.cwn .tabber ul li { line-height: 3; }