Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
Zippy (talk | contribs)
add cool CSS stuff borrowed from Star Citizen Wiki (https://starcitizen.tools/MediaWiki:Citizen.css for attribution)
Tag: Recreated
 
Zippy (talk | contribs)
make better
Line 12: Line 12:
--woa-accent: #00B8E6;
--woa-accent: #00B8E6;
--woa-dark: #053E73;
--woa-dark: #053E73;
/* Override Codex default blues with WikiOasis brand */
--color-primary: var(--woa-primary);
--color-progressive: var(--woa-secondary);
--color-destructive: #d32424;
}
}


Line 27: Line 32:


h1 {
h1 {
border-bottom: 3px solid var(--woa-secondary);
padding-bottom: 0.5em;
padding-bottom: 0.5em;
}
}
Line 72: Line 76:
}
}


/* External portlet hidden */
.mw-portlet-External {
.mw-portlet-External {
position: sticky;
bottom: 0;
margin-top: var(--space-md);
margin-inline: calc(var(--space-xs) * -1);
padding: var(--space-xs);
border-top: 2px solid var(--woa-secondary);
backdrop-filter: var(--backdrop-filter-frosted-glass);
font-size: var(--font-size-x-small);
grid-column: 1 / -1;
white-space: nowrap;
}
.mw-portlet-External .citizen-menu__heading {
display: none;
display: none;
}
.mw-portlet-External ul {
display: flex;
overflow: auto;
}
.mw-portlet-External .mw-list-item a {
gap: 0;
transition: color 200ms ease;
}
.mw-portlet-External .mw-list-item a:hover {
color: var(--woa-secondary) !important;
}
}


Line 245: Line 223:
gap: var(--space-sm);
gap: var(--space-sm);
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg, var(--woa-primary), var(--woa-secondary));
color: var(--woa-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}


Line 364: Line 339:
--gradient-angle: 360deg;
--gradient-angle: 360deg;
}
}
}
@keyframes woa-gradient-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.woa-gradient-glow {
animation: woa-gradient-pulse var(--gradient-time) ease-in-out infinite;
}
}


Cookies help us deliver our services. By using our services, you agree to our use of cookies.