MediaWiki:Common.css
From Dune Awakening DB
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/*--------------------------------------------------------------
# DIRECT HEADER FIXES - ADD TO COMMON.CSS
--------------------------------------------------------------*/
/* Hide the "FROM DUNE AWAKENING DB" tagline */
#tagline, h3#tagline {
display: none !important;
}
/* Reduce padding above the title */
h1.title,
.mw-page-title-main,
h1.firstHeading {
margin-top: 0 !important;
padding-top: 5px !important;
line-height: 1.2 !important;
}
/* Adjust content padding */
#content,
.mw-body,
.mw-content-ltr,
.mw-content-rtl {
padding-top: 10px !important;
margin-top: 0 !important;
}
/* Fix spacing for responsive container */
.responsive-container {
margin-top: 0 !important;
}
/* Adjust page title styling */
h1.title {
font-size: 28px !important;
margin-bottom: 10px !important;
}
/* Fix for page margins */
#p-cactions {
margin-top: 0 !important;
}
/* For smaller screens */
@media screen and (max-width: 768px) {
h1.title,
.mw-page-title-main,
h1.firstHeading {
font-size: 24px !important;
margin-bottom: 8px !important;
}
}
/* Simplified CSS for the radial menu */
/* Logo button styling */
.dune-logo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
cursor: pointer;
}
.dune-logo {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.dune-logo:hover {
transform: scale(1.1);
}
/* Breadcrumb nav styling */
.dune-breadcrumb-nav {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 14px;
background-color: rgba(0, 0, 2, 0.7);
border: 1px solid #fce7c8;
padding: 5px 10px;
border-radius: 3px;
}
.dune-breadcrumb-nav a {
color: #fce7c8;
text-decoration: none;
transition: all 0.2s ease;
}
.dune-breadcrumb-nav a:hover {
color: #E3BB7A;
text-shadow: 0 0 5px rgba(200, 161, 101, 0.4);
}
.dune-breadcrumb-separator {
margin: 0 8px;
color: #BBBBBB;
}
/* Radial menu styling */
.dune-radial-menu {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 250px;
height: 250px;
background-color: rgba(0, 0, 2, 0.9);
border-radius: 50%;
z-index: 9999;
border: 1px solid #fce7c8;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.dune-radial-menu.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
visibility: visible;
}
/* Radial menu items */
.dune-radial-item {
position: absolute;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(22, 22, 24, 0.8);
border: 1px solid #fce7c8;
border-radius: 50%;
color: #fce7c8;
font-size: 16px;
transition: all 0.2s ease;
}
.dune-radial-item:hover {
background-color: rgba(200, 161, 101, 0.2);
transform: scale(1.1);
color: #E3BB7A;
}
/* Position each item */
.dune-radial-item:nth-child(1) { top: 25px; left: 50%; transform: translateX(-50%); }
.dune-radial-item:nth-child(2) { top: 50%; right: 25px; transform: translateY(-50%); }
.dune-radial-item:nth-child(3) { bottom: 25px; left: 50%; transform: translateX(-50%); }
.dune-radial-item:nth-child(4) { top: 50%; left: 25px; transform: translateY(-50%); }
.dune-radial-item:nth-child(5) { top: 35%; left: 35%; transform: translate(-50%, -50%); }
.dune-radial-item:nth-child(6) { top: 35%; right: 35%; transform: translate(50%, -50%); }
.dune-radial-item:nth-child(7) { bottom: 35%; right: 35%; transform: translate(50%, 50%); }
.dune-radial-item:nth-child(8) { bottom: 35%; left: 35%; transform: translate(-50%, 50%); }
/* Tooltips */
.dune-radial-tooltip {
position: absolute;
background-color: rgba(0, 0, 2, 0.9);
border: 1px solid #fce7c8;
padding: 3px 8px;
border-radius: 3px;
color: #fce7c8;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
pointer-events: none;
}
.dune-radial-item:hover .dune-radial-tooltip {
opacity: 1;
visibility: visible;
}
/* Position tooltips */
.dune-radial-item:nth-child(1) .dune-radial-tooltip { top: -25px; left: 50%; transform: translateX(-50%); }
.dune-radial-item:nth-child(2) .dune-radial-tooltip { right: -5px; top: 50%; transform: translateY(-50%) translateX(100%); }
.dune-radial-item:nth-child(3) .dune-radial-tooltip { bottom: -25px; left: 50%; transform: translateX(-50%); }
.dune-radial-item:nth-child(4) .dune-radial-tooltip { left: -5px; top: 50%; transform: translateY(-50%) translateX(-100%); }
.dune-radial-item:nth-child(5) .dune-radial-tooltip { top: -25px; left: 0; }
.dune-radial-item:nth-child(6) .dune-radial-tooltip { top: -25px; right: 0; }
.dune-radial-item:nth-child(7) .dune-radial-tooltip { bottom: -25px; right: 0; }
.dune-radial-item:nth-child(8) .dune-radial-tooltip { bottom: -25px; left: 0; }
/* Overlay */
.dune-radial-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
}
.dune-radial-overlay.active {
display: block;
}
/* Basic header fixes */
h3#tagline {
display: none !important;
}
h1.title,
.mw-page-title-main,
h1.firstHeading {
margin-top: 0 !important;
padding-top: 5px !important;
margin-bottom: 10px !important;
}