MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 645: | Line 645: | ||
box-shadow: none !important; | box-shadow: none !important; | ||
transform: none !important; | transform: none !important; | ||
} | |||
/* Make the Transight MediaWiki header sticky */ | |||
.vector-header-container { | |||
position: sticky; | |||
top: 0; | |||
z-index: 1000; /* keeps it above other elements */ | |||
background-color: #680022; /* match your header background color */ | |||
} | |||
/* Prevent content from being hidden behind the sticky header */ | |||
.mw-page-container { | |||
padding-top: 120px; /* adjust based on header height (px) */ | |||
} | } | ||
Revision as of 04:42, 8 October 2025
html {
scroll-behavior: smooth;
}
/* Hide the appearance landmark menu completely */
nav.vector-appearance-landmark {
display: none !important;
}
/* Hide the Appearance UI (both the sidebar block and the header trigger) */
nav.vector-appearance-landmark,
#vector-appearance,
#vector-appearance-pinned-container,
[id^="vector-appearance"] {
display: none !important;
}
/* Force wide layout */
body.skin-vector-2022 {
max-width: none !important;
}
/* Force icon on menu button using pseudo element */
#vector-main-menu-dropdown-label::before {
content: "☰";
font-size: 30px;
color: white;
position: centre;
top: 10px;
left: 10px;
z-index: 999;
}
/* Force all user links (login, editor, etc.) to white */
.vector-user-links-main a,
.vector-user-links-main span,
.vector-user-links-main .mw-ui-icon
.vector-header-end {
color: white !important;
fill: white !important;
}
body.skin-vector-2022 .vector-sidebar-container {
display: block !important;
}
body.skin-vector-2022 .vector-menu-toggle-button {
display: none;
}
/* Hide broken SVG to avoid overlapping */
#vector-main-menu-dropdown-label svg {
display: none !important;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
ul#footer-icons {
display: none !important;
}
/* Wrapper bar background */
.scroll-banner {
background-color: #680022;
overflow: hidden;
width: 100%;
height: 2.5em; /* Adjust height as needed */
display: flex;
align-items: center;
}
/* Scrolling text style */
.scroll-text {
display: inline-block;
white-space: nowrap;
color: white;
font-weight: bold;
font-size: 25px;
font-family: 'Segoe UI', sans-serif;
font-color:#680022;
animation: scroll-left 25s linear infinite;
padding-left: 100vw;
}
/* === GLOBAL HEADER AREA BURGUNDY === */
body {
--header-background-color: #680022 !important;
--header-text-color: white !important;
}
/* === HEADER SECTIONS === */
.vector-header,
.vector-header-container,
.vector-sticky-header {
background-color: #680022 !important;
color: white !important;
border: none !important;
}
.vector-search-box input {
color: black !important;
}
.vector-search-box button {
background-color: #FFFFFF !important;
position: centre;
color: black !important;
border: none !important;
border-radius: 3px;
}
/* === Make entire top header burgundy === */
.vector-header-container {
background-color: #680022 !important;
}
/* === Set all page link colors to burgundy === */
a, a:visited {
color: #680022 !important;
}
/* === TOP TABS === */
.vector-tab,
.vector-tab a {
background: transparent !important;
color: white !important;
font-weight: bold;
}
.vector-tab a:hover {
border-bottom: 2px solid white !important;
}
.vector-tab.selected a {
border-bottom: 3px solid white !important;
}
/* LOGIN / USERNAME TEXT */
.vector-header .vector-user-links a,
.vector-header .vector-user-links a:visited,
.vector-header .vector-user-links .mw-ui-icon {
color: black !important;
fill: black !important;
}
/* SVG icons (user icon, bell, etc.) */
.vector-header .vector-user-links svg,
.vector-header .vector-user-links path {
fill: black !important;
stroke: black !important;
}
/* DROPDOWN MENU (if shown after login) */
.vector-header .vector-user-menu .vector-menu-content,
.vector-header .vector-user-menu .vector-menu-content a
{
color: White!important;
fill: White!important;
}
/* === CUSTOM LOGO (for Vector-2022) === */
.vector-header .mw-logo {
background-image: url("/resources/assets/TRANSIGHT_NEW.jpg"); /* Fix path and encode spaces */
background-repeat: no-repeat;
background-size: contain;
background-position: left;
width: 400px;
height: 100px;
}
/* === Hide the default MediaWiki logo === */
.vector-header .mw-logo img {
opacity: 0 !important;
}
/* === Global font style for entire wiki === */
body,
.mw-body,
.vector-body,
.vector-page-titlebar,
.vector-user-menu,
.vector-menu,
.vector-tab,
.vector-tabs,
#content,
#mw-content-text,
#firstHeading,
.mw-parser-output {
font-family: 'Segoe UI', 'Open Sans', 'Arial', sans-serif !important;
color: #000000;
}
body,
body * {
font-family: 'Segoe UI', 'Open Sans', 'Arial', simportant;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
display: inline-block;
white-space: nowrap;
animation: scroll-left 20s linear infinite;
font-weight: bold;
color: #680022;
}
/* Fix for the Personal Tools dropdown in Vector skin */
#p-personal .vector-menu-content,
#p-personal .vector-menu-content a,
#p-personal .vector-menu-content li {
color: black !important;
}
/* Optional: Ensure background isn't transparent */
#p-personal .vector-menu-content
{
background-color: white !important;
}
/* Hover styling (optional) */
#p-personal .vector-menu-content a:hover {
background-color: #f0f0f0 !important;
color: #202122 !important;
}
/* Hide footer links in all skins */
#footer, #footer-info, #footer-places {
display: none !important;
}
/* === Hide default MediaWiki footer across skins === */
.mw-footer,
#footer,
.mw-footer-container { display: none !important; }
/* Hide default MediaWiki footer */
.mw-footer,
#footer,
.mw-footer-container { display: none !important; }
/* === Transight Footer Styles === */
.ts-footer {
background: #C0C0C0; /* grey shaded */
color: #ffffff;
padding: 50px 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 20px; /* default body font in footer */
}
.ts-footer__container {
max-width: 1200px;
margin: 0 auto;
}
/* Footer sitemap layout */
.ts-footer__sitemap {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
justify-content: space-between;
}
.ts-footer__col {
list-style: none;
margin: 0;
padding: 0;
min-width: 220px;
}
/* Section headings */
.ts-footer__title {
font-size: 16px; /* bigger than links */
letter-spacing: .5px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 14px 0;
color: #ffffff;
}
/* Links */
.ts-footer__col li { margin: 0 0 10px 0; }
.ts-footer a {
color: #f1f1f1;
text-decoration: none;
font-size: 20px; /* increased link size */
font-weight: 400;
}
.ts-footer a:hover {
color: #ffd166;
text-decoration: underline;
}
/* Bottom bar */
.ts-footer__bottom {
border-top: 1px solid rgba(255,255,255,.25);
margin-top: 40px;
padding-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.ts-footer__legal {
margin: 0;
font-size: 18px; /* increased */
color: #f9eaea;
}
.ts-footer__social a {
margin-left: 14px;
font-size: 18px; /* increased */
color: #f1f1f1;
}
.ts-footer__social a:first-child { margin-left: 0; }
.ts-footer__social a:hover { color: #ffd166; }
/* Mobile */
@media (max-width: 720px) {
.ts-footer { padding: 36px 16px; font-size: 14px; }
.ts-footer__sitemap { gap: 28px; }
.ts-footer__col { min-width: 48%; }
.ts-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/*Download option for firmware*/
/*Download option for firmware*/
.download-box {
display: inline-block;
padding: 10px; /* reduced from 20px */
border: 1px solid #ddd;
border-radius: 8px; /* smaller corners */
background: #f9f9f9;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
margin: 8px 0; /* tighter spacing */
}
.download-button {
display: inline-block;
padding: 6px 12px; /* reduced size */
font-size: 14px; /* smaller text */
font-weight: bold;
color: #fff;
background: linear-gradient(45deg, #4CAF50, #46c748);
border: none;
border-radius: 20px; /* smaller curve */
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
/* Hover animation */
.download-button:hover {
background: linear-gradient(45deg, #0ac410, #1d7a1f);
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}
/* Tap (click) animation */
.download-button:active {
transform: translateY(1px) scale(0.97);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* =========================
Transight Tracker Table Styling
========================= */
/* Style table cells (cards) */
.wikitable.transight-trackers td,
.transight-tracker-cell {
width: 20%;
vertical-align: top;
text-align: center;
padding: 25px;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 30px;
background: #fff;
transition: box-shadow 0.28s ease, transform 0.28s ease;
box-shadow: 0 5px 10px rgba(0,0,0,0.08);
cursor: default;
}
/* Hover / focus shadow glow */
.wikitable.transight-trackers td:hover,
.transight-tracker-cell:hover,
.wikitable.transight-trackers td:focus-within {
box-shadow: 0 15px 30px rgba(0,0,0,0.22);
transform: translateY(-6px);
}
/* Images inside cells */
.transight-tracker-cell img,
.wikitable.transight-trackers img {
max-width: 130px;
height: auto;
margin-bottom: 10px;
}
/* Headings inside cells */
.transight-tracker-cell big,
.wikitable.transight-trackers big {
font-size: 18px;
font-weight: 600;
}
/* Descriptions */
.transight-tracker-cell,
.wikitable.transight-trackers td {
font-size: 14px;
line-height: 1.4em;
color: #333;
}
/* Collapsible lists */
.mw-collapsible {
margin-top: 8px;
text-align: centre;
font-size: 14px;
line-height: 1.4em;
}
/* Toggle links */
.mw-customtoggle-1,
.mw-customtoggle-2,
.mw-customtoggle-3 {
font-weight: bold;
cursor: pointer;
display: inline-block;
margin-top: 6px;
transition: opacity 0.3s ease;
}
.mw-customtoggle-1:hover,
.mw-customtoggle-2:hover,
.mw-customtoggle-3:hover {
opacity: 0.7;
}
/* Responsive stack for small screens */
@media (max-width: 760px) {
.wikitable.transight-trackers,
.wikitable.transight-trackers tr,
.wikitable.transight-trackers td {
display: block;
width: 100% !important;
margin-bottom: 14px;
}
/* Style table cells (cards) */
.wikitable.transight-trackers td,
.transight-tracker-cell {
width: 20%;
vertical-align: top;
text-align: center;
padding: 15px;
border: none; /* Removed the inner column borders */
border-radius: 30px;
background: #fff;
transition: box-shadow 0.28s ease, transform 0.28s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
cursor: default;
}
/* Remove background table boundaries for tracker table */
.wikitable.transight-trackers {
border: none !important;
border-collapse: separate; /* Ensures no merged lines */
border-spacing: 20px; /* Adds space between cells instead of borders */
background: transparent !important;
box-shadow: none !important;
}
.wikitable.transight-trackers td,
.wikitable.transight-trackers th {
border: none !important;
background: transparent !important;
}
}
/* === Floating buttons wrapper === */
.ts-fab {
position: fixed;
z-index: 2147483646;
width: 54px;
height: 54px;
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
}
/* === Round button === */
.ts-fab__btn {
width: 54px;
height: 54px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7A0F2F;
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ts-fab__btn:hover,
.ts-fab__btn:focus {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.28);
background: #680022;
}
/* === Icons inside buttons === */
#ts-webfab .ts-fab__btn::before {
content: "";
width: 22px;
height: 22px;
display: block;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M10 7h7v7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#ts-topfab .ts-fab__btn::before {
content: "↑";
font-size: 20px;
font-weight: bold;
}
/* === Bubble tooltip === */
.ts-fab__bubble {
position: absolute;
right: 64px;
bottom: 7px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 18px;
border-radius: 10px;
background: #D3D3D3;
color: #fff;
text-decoration: none;
box-shadow: 0 10px 22px rgba(0,0,0,.22);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.ts-fab:hover .ts-fab__bubble,
.ts-fab:focus-within .ts-fab__bubble {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* === Hide bubbles on small screens === */
@media (max-width: 680px) {
.ts-fab__bubble { display: none !important; }
}
/* === Hide buttons in print === */
@media print {
.ts-fab { display: none !important; }
}
/* === Stack buttons vertically if both exist === */
#ts-webfab { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); }
#ts-topfab { bottom: max(16px, env(safe-area-inset-bottom)); }
/* === Icons inside buttons — both arrows white === */
#ts-webfab .ts-fab__btn::before {
content: "";
width: 22px;
height: 22px;
display: block;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M10 7h7v7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#ts-topfab .ts-fab__btn::before {
content: "";
width: 22px;
height: 22px;
display: block;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Hide only table background lines and borders, keep content visible */
.wikitable.transight-trackers,
.wikitable.transight-trackers tr,
.wikitable.transight-trackers td,
.wikitable.transight-trackers th {
border: none !important;
background: transparent !important;
}
.mw-body-content img {
transition: box-shadow 0.28s ease, transform 0.28s ease;
border-radius: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.08);
cursor: pointer;
}
.mw-body-content img:hover {
box-shadow: 0 15px 30px rgba(0,0,0,0.25);
transform: translateY(-6px);
}
/* === Glow effect for all wikitable tables === */
.wikitable {
transition: box-shadow 0.3s ease, transform 0.3s ease;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.08);
background: #fff;
border: 1px solid rgba(0,0,0,0.05);
}
/* Glow and lift effect on hover */
.wikitable:hover {
box-shadow: 0 15px 30px rgba(0,0,0,0.25);
transform: translateY(-6px);
}
/* === Remove glow and hover effects from transight tracker table === */
.wikitable.transight-trackers {
box-shadow: none !important;
transform: none !important;
transition: none !important;
border: none !important;
background: transparent !important;
}
/* Also disable hover glow for this specific table */
.wikitable.transight-trackers:hover {
box-shadow: none !important;
transform: none !important;
}
/* Make the Transight MediaWiki header sticky */
.vector-header-container {
position: sticky;
top: 0;
z-index: 1000; /* keeps it above other elements */
background-color: #680022; /* match your header background color */
}
/* Prevent content from being hidden behind the sticky header */
.mw-page-container {
padding-top: 120px; /* adjust based on header height (px) */
}