More actions
(forum styling) |
No edit summary |
||
| Line 244: | Line 244: | ||
/* Main display */ | /* Main display */ | ||
.table.mw-wikiforum-frame { | .table.mw-wikiforum-frame { | ||
padding: 15px !important; | |||
padding: 15px; | background: var(--color-surface-1) !important; | ||
background: var(--color-surface-1); | border-radius: 8px !important; | ||
border-radius: 8px; | box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575) !important; | ||
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575); | font-size: 0.875rem !important; | ||
font-size: 0.875rem; | margin-bottom: unset !important; | ||
margin-bottom: unset; | border: unset !important; | ||
border: unset; | |||
} | } | ||
td.mw-wikiforum-innerframe { | td.mw-wikiforum-innerframe { | ||
Revision as of 03:37, 8 February 2023
/* CSS DIRECTORY
[ 1. Imports
[ 2. Root Variables
[ 3. Javascript Mods
[ 4. Template Mods
[ 5. Sidebar Adjustments
[ 6. Header Adjustments
[ 7. Fixes
[ 8. Forums
============================================================================================*/
/* Imports
============================================================================================ */
/* latin-ext */
@font-face {
font-family: 'Azeret Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/hosted/fonts/3XFuErsiyJsY9O_Gepph-HHvZfnk3Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Azeret Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/hosted/fonts/3XFuErsiyJsY9O_Gepph-HHvZfnk3Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/hosted/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWcz8el2c.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Kreon';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/hosted/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWfT8e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/hosted/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58i-wi40.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/hosted/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/hosted/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DCGb-3vA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/hosted/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DMGb8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/hosted/fonts/w8gdH283Tvk__Lua32TysjIfqcuPP9g.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/hosted/fonts/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ROOT VARIABLES
[ These are variables explicitly supported by the theme.
[ https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Customizing-Citizen-styles
============================================================================================ */
/* Font replacements */
:root {
--font-family-base: 'Quicksand', sans-serif;
--font-family-serif: 'Kreon', serif;
--font-family-monospace: 'Azeret Mono', monospace;
}
/* Color replacements */
:root {
--background-color-overlay: rgba(255,255,255,0.80);
}
/* JAVASCRIPT MODS
[ These selectors are required for JavaScript modifications to function.
============================================================================================ */
/* Discord icon in header eith hover effect */
.mw-ui-icon-discord::before {
background-image: url(/images/site/interface/discord.svg);
background-image: linear-gradient(transparent,transparent),url(/images/site/interface/discord.svg);
}
@media (hover: hover){
.citizen-discord:hover .citizen-discord__button .citizen-ui-icon::before {
transform: rotate3d(0,0,1,360deg);
transition: all .25s
}
}
/* Completely hide old <img> tag*/
a.citizen-header__button > img:nth-child(1) {
display: none;
}
/* SIDEBAR MODS
[ These selectors modify sidebar elements of the Citizen theme.
============================================================================================ */
/* New background-image based logo with hover effect */
.mw-logo.citizen-header__button {
background-image: url(/images/site/logo/prismlogo.png);
background-size: 95%;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0px 2px 3px #0000002e)
}
.mw-logo.citizen-header__button:hover {
background-image: url(/images/site/logo/prismlogo_ani.png);
filter: drop-shadow(0px 2px 3px #0000002e);
transition: all 0.15s;
transform: scale(1.1);
}
.mw-logo.citizen-header__button:active {
background-image: url(/images/site/logo/prismlogo_ani.png);
filter: drop-shadow(0px 2px 3px #0000002e);
transition: all 0.15s;
transform: scale(0.9);
}
/* Animated bell - Should be updated to use an animation property and different tilt image*/
.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read:hover {
transform: rotate(-15deg);
transform-origin: center 22%;
/*image-rendering: pixelated;*/
background-image: url(/images/site/interface/bell_left.svg);
transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1),opacity 100ms ease;
}
.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read {
transition: all 0.1s;
}
/* Underline on sidebar titles */
.citizen-menu__heading-label {
text-decoration: underline;
}
/* MediaWiki:Sidebar Icons */
/* These icons must have a matching class pair in Citizen.js */
.mw-ui-icon-news::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/newspaper-solid.svg);}
.mw-ui-icon-specialpage::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/chart-simple-solid.svg);}
.mw-ui-icon-about::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/comment-question.svg);}
.mw-ui-icon-shop::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/shopping-cart.svg);}
.mw-ui-icon-map::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/map.svg);}
.mw-ui-icon-vote::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/check-to-slot-solid.svg);}
.mw-ui-icon-commands::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/code-solid.svg);}
.mw-ui-icon-plugins::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/puzzle-piece-solid.svg);}
.mw-ui-icon-rules::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/clipboard-list-solid.svg);}
.mw-ui-icon-faq::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/clipboard-question-solid.svg);}
.mw-ui-icon-staff::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/user-shield-solid.svg);}
.mw-ui-icon-forums::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/comments-solid.svg);}
.mw-ui-icon-punishments::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/gavel-solid.svg);}
.mw-ui-icon-start::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/street-view-solid.svg);}
.mw-ui-icon-gem::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/guarani-sign-solid.svg);}
.mw-ui-icon-level::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/arrow-up-right-dots-solid.svg);}
.mw-ui-icon-swords::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/swords.svg);}
.mw-ui-icon-shop2::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/store-solid.svg);}
.mw-ui-icon-claim::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/shield-halved-solid.svg);}
/* HEADER MODS
[ These selectors modify header elements of the Citizen theme, normal and sticky.
============================================================================================ */
/* Backdrop filter on sticky header */
.citizen-body-header--sticky .mw-body-header::before {
backdrop-filter: blur(16px);
border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
}
/* FIXES
[ These selectors "fix" buggy or unusable elements.
============================================================================================ */
/* Make TemplateData editor popup above all else on page */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
z-index: 999;
}
/* Missing category colors */
.catlinks li > a.new:hover {
color: #fff;
}
/* FORUMS
[ These selectors restyle the forums interface
============================================================================================ */
/* Main display */
.table.mw-wikiforum-frame {
padding: 15px !important;
background: var(--color-surface-1) !important;
border-radius: 8px !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575) !important;
font-size: 0.875rem !important;
margin-bottom: unset !important;
border: unset !important;
}
td.mw-wikiforum-innerframe {
border: unset;
}
tr.mw-wikiforum-title {
height: 3em;
background: var(--color-surface-2);
border-radius: var(--border-radius--medium);
color: var(--color-base--subtle);
font-size: 0.875rem;
}
th.mw-wikiforum-title, th.mw-wikiforum-admin, th.mw-wikiforum-value, th.mw-wikiforum-lastpost {
border-bottom: unset;
border-top: unset;
}