More actions
No edit summary |
mNo edit summary |
||
(17 intermediate revisions by 2 users not shown) | |||
Line 93: | Line 93: | ||
} | } | ||
.citizen-menu__content-list > li.mw-list-item:hover { | .citizen-menu__content-list > li.mw-list-item:hover:not(#pt-logout):not(#pt-login) { | ||
background-color: #e8eaed; | background-color: #e8eaed; | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
} | } | ||
.citizen-menu__content-list > li.mw-list-item:hover a { | .citizen-menu__content-list > li.mw-list-item:hover:not(#pt-logout):not(#pt-login) a { | ||
color: #162132; | color: #162132; | ||
} | } | ||
Line 257: | Line 257: | ||
display: block; | display: block; | ||
margin-top: 0.25em; | margin-top: 0.25em; | ||
} | |||
.vho-research-container { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
background-color: #2a2a2a; | |||
border: 2px solid #555; | |||
border-radius: 4px; | |||
padding: 20px; | |||
position: relative; | |||
font-family: 'Minecraft'; | |||
color: #ffffff; | |||
} | |||
.vho-research-header { | |||
font-size: 18px; | |||
font-weight: bold; | |||
margin-bottom: 20px; | |||
color: #ffffff; | |||
text-shadow: 2px 2px 0px #000000; | |||
} | |||
.vho-categories-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 15px; | |||
margin-bottom: 20px; | |||
} | |||
.vho-category { | |||
background-color: #1a1a1a; | |||
border: 2px solid #444; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | |||
.vho-category-header { | |||
padding: 4px 12px; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #ffffff; | |||
text-shadow: 1px 1px 0px #000000; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
text-align: left; | |||
justify-content: flex-start; | |||
min-height: 70px; | |||
} | |||
.vho-category-header.storage { background-color: #4a9b9b; } | |||
.vho-category-header.looting { background-color: #d4af37; } | |||
.vho-category-header.power { background-color: #b22222; } | |||
.vho-category-header.handling { background-color: #8b0000; } | |||
.vho-category-header.big-mods { background-color: #228b22; } | |||
.vho-category-header.qol { background-color: #cd853f; } | |||
.vho-category-header.big-toys { background-color: #0000cd; } | |||
.vho-category-header.production { background-color: #4682b4; } | |||
.vho-category-header.vault-upgrades { background-color: #daa520; } | |||
.vho-category-content { | |||
padding: 15px; | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 10px; | |||
} | |||
.vho-mod-icon { | |||
width: 48px; | |||
height: 48px; | |||
background-color: #333; | |||
border: 2px solid #555; | |||
border-radius: 4px; | |||
cursor: pointer; | |||
transition: all 0.2s ease; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 24px; | |||
position: relative; | |||
background-size: cover; | |||
background-position: center; | |||
margin: 0 auto; | |||
} | |||
.vho-mod-icon:hover { | |||
border-color: #888; | |||
background-color: #444; | |||
transform: scale(1.05); | |||
} | |||
.vho-mod-icon.unlocked { | |||
border-color: #4CAF50; | |||
background-color: #2a4a2a; | |||
} | |||
/* Placeholder for empty slots to maintain layout */ | |||
.vho-mod-placeholder { | |||
width: 48px; | |||
height: 48px; | |||
margin: 0 auto; | |||
visibility: hidden; | |||
} | |||
.vho-tooltip { | |||
position: absolute; | |||
bottom: 100%; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
background-color: #1a1a1a; | |||
color: #ffffff; | |||
padding: 4px 8px; | |||
border-radius: 4px; | |||
font-size: 12px; | |||
white-space: nowrap; | |||
opacity: 0; | |||
pointer-events: none; | |||
transition: opacity 0.2s ease; | |||
z-index: 1000; | |||
margin-bottom: 5px; | |||
border: 1px solid #555; | |||
} | |||
.vho-mod-icon:hover .tooltip { | |||
opacity: 1; | |||
} | |||
.vho-flyout { | |||
position: absolute; | |||
background-color: #2a2a2a; | |||
border: 2px solid #555; | |||
border-radius: 4px; | |||
padding: 20px; | |||
min-width: 300px; | |||
max-width: 400px; | |||
z-index: 9999; | |||
display: none; | |||
color: #ffffff; | |||
font-family: 'Minecraft'; | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); | |||
max-height: 400px; | |||
overflow-y: auto; | |||
} | |||
.vho-flyout.active { | |||
display: block; | |||
} | |||
.vho-flyout-header { | |||
font-size: 16px; | |||
font-weight: bold; | |||
margin-bottom: 15px; | |||
color: #ffffff; | |||
text-shadow: 1px 1px 0px #000000; | |||
border-bottom: 1px solid #555; | |||
padding-bottom: 10px; | |||
} | |||
.vho-flyout-section { | |||
margin-bottom: 15px; | |||
} | |||
.vho-flyout-section h4 { | |||
margin: 0 0 8px 0; | |||
color: #cccccc; | |||
font-size: 14px; | |||
} | |||
.vho-flyout-section p { | |||
margin: 0; | |||
font-size: 12px; | |||
line-height: 1.4; | |||
color: #aaaaaa; | |||
} | |||
.vho-prerequisites { | |||
background-color: #1a1a1a; | |||
border: 1px solid #444; | |||
border-radius: 4px; | |||
padding: 8px; | |||
margin-top: 5px; | |||
} | |||
.vho-prerequisites-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.vho-prerequisites-list li { | |||
font-size: 12px; | |||
color: #cccccc; | |||
margin-bottom: 4px; | |||
} | |||
.vho-prerequisites-list li:before { | |||
content: "• "; | |||
color: #888; | |||
} | |||
.vho-external-links { | |||
display: flex; | |||
gap: 10px; | |||
margin-top: 10px; | |||
} | |||
.vho-external-link { | |||
background-color: #444; | |||
color: #ffffff; | |||
padding: 6px 12px; | |||
border-radius: 4px; | |||
text-decoration: none; | |||
font-size: 12px; | |||
transition: background-color 0.2s ease; | |||
} | |||
.vho-external-link:hover { | |||
background-color: #555; | |||
} | |||
.vho-close-button { | |||
position: absolute; | |||
top: 10px; | |||
right: 15px; | |||
background: none; | |||
border: none; | |||
color: #888; | |||
font-size: 18px; | |||
cursor: pointer; | |||
padding: 0; | |||
line-height: 1; | |||
} | |||
.vho-close-button:hover { | |||
color: #ffffff; | |||
} | |||
.vho-category-icon { | |||
width: 50px; | |||
height: 50px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background-color: #c6c6c6; | |||
border: 2px solid #fff; | |||
border-bottom-color: #555555; | |||
border-right-color: #555555; | |||
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.3); | |||
border-radius: 2px; | |||
flex-shrink: 0; | |||
} | |||
.vho-category-icon img { | |||
width: 50px; | |||
height: 50px; | |||
display: block; | |||
} | } |
Latest revision as of 02:34, 14 July 2025
:root {
color-scheme: dark !important;
}
/* All CSS here will be loaded for users of the Citizen skin */
:root.skin-theme-clientpref-dark {
--color-surface-0: #050e1b;
--color-surface-1: #0d1014;
--color-base: #fff;
--color-base--emphasized: #808080;
--color-base--subtle: #162132;
--color-subtle: #e8eaed;
}
:root.skin-theme-clientpref-os {
--color-surface-0: #050e1b;
--color-surface-1: #0d1014;
--color-base: #fff;
--color-base--emphasized: #808080;
--color-base--subtle: #162132;
}
:root.skin-theme-clientpref-night {
--color-emphasized: #fff;
--color-base: #e8eaed;
--color-subtle: #ffffff75;
--color-link: #ffa800;
--color-link--hover: #fcb326;
--color-link--active: #fcb326;
--color-progressive: #ffa800;
--color-progressive--hover: #fcb326;
--color-progressive--active: #fcb326;
}
.citizen-page-container {
position: relative;
background-image: url("resources/assets/hero.webp");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
z-index: 0;
overflow: hidden;
}
.citizen-page-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
pointer-events: none;
}
.citizen-page-container > * {
position: relative;
z-index: 2;
}
.citizen-body {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
padding: 1rem 1.5rem;
}
h1, h2 {
margin-block-start: 0;
}
.mw-logo-wordmark {
height: 4rem !important;
filter: none !important;
}
#footer-icons a {
background: none;
border: none;
}
@font-face {
font-family: Minecraft;
src: url('/resources/assets/fonts/Minecraft.woff2') format('woff2'),
url('/resources/assets/fonts/Minecraft.woff') format('woff');
}
.content a > img, .content span > img, .content noscript > img {
max-width: 100% !important;
height: auto !important;
}
.citizen-menu__content-list > li.mw-list-item:hover:not(#pt-logout):not(#pt-login) {
background-color: #e8eaed;
border-radius: var(--border-radius-medium);
}
.citizen-menu__content-list > li.mw-list-item:hover:not(#pt-logout):not(#pt-login) a {
color: #162132;
}
.invslot {
position: relative;
display: inline-block;
border: 2px solid;
width: 36px;
height: 36px;
font-size: 16px;
line-height: 1;
text-align: left;
vertical-align: bottom;
background: #333333;
border-color: #262626 #6b6b6b #6b6b6b #262626;
}
.invslot::before,
.invslot::after {
content: "";
position: absolute;
background-color: #8b8b8b;
height: 2px;
width: 2px;
pointer-events: none;
}
.invslot::before { bottom: -2px; left: -2px; }
.invslot::after { top: -2px; right: -2px; }
.invslot-item,
.invslot-item a:first-child {
position: relative;
display: block;
margin: -2px;
padding: 2px;
width: 36px;
height: 36px;
}
.invslot-item img {
width: 32px;
height: auto;
}
.invslot-item-image a.new:first-child {
background-image: url("images/3/35/Grid_Unknown.png");
background-repeat: no-repeat;
background-size: cover;
width: 32px;
height: 32px;
text-indent: -9999px;
overflow: hidden;
}
.invslot-stacksize {
position: absolute;
right: 0;
bottom: 0;
font-family: Minecraft, sans-serif !important;
font-weight: normal !important;
color: #fff !important;
text-shadow: 2px 2px 0 #3f3f3f;
filter: dropshadow(color=#3F3F3F, offx=2, offy=2);
z-index: 2;
}
.invslot-plain {
background-color: transparent;
border: 0;
}
.invslot-plain::before,
.invslot-plain::after {
content: none;
}
.invslot-plain > .invslot-item,
.invslot-plain > .invslot-item a:first-child {
margin: 0;
padding: 0;
}
.mc-hearts::before { content: " ("; }
.mc-hearts::after { content: ")"; }
.mcui {
display: inline-block;
position: relative;
border: 2px solid;
padding: 6px;
text-align: left;
white-space: nowrap;
vertical-align: bottom;
background-color: #535353;
border-color: #6b6b6b #333333 #333333 #6b6b6b;
}
.mw-body-content .animated > *:not(.animated-active),
.mw-body-content .animated > .animated-subframe > *:not(.animated-active) {
display: none;
}
.mw-body-content span.animated,
.mw-body-content span.animated.animated-visible > *,
.mw-body-content span.animated.animated-visible > .animated-subframe > * {
display: inline-block;
}
.mw-body-content div.animated.animated-visible > *,
.mw-body-content div.animated.animated-visible > .animated-subframe > * {
display: block;
}
#minetip-tooltip {
position: fixed;
top: 0;
left: 0;
color: #fbfbfb;
text-shadow: 0.125em 0.125em 0 #3e3e3e;
background-color: rgba(16, 0, 16, 0.94);
padding: 0.375em;
font-family: Minecraft, sans-serif;
font-size: 16px;
word-spacing: 4px;
white-space: nowrap;
line-height: 1.25em;
margin: 0.125em 0.25em;
pointer-events: none;
z-index: 9999;
}
#minetip-tooltip::before {
content: "";
position: absolute;
top: 0.125em;
right: -0.125em;
bottom: 0.125em;
left: -0.125em;
border-style: none solid;
border-color: rgba(16, 0, 16, 0.94);
}
#minetip-tooltip::after {
content: "";
position: absolute;
top: 0.125em;
right: 0;
bottom: 0.125em;
left: 0;
border: 0.125em solid #2d0a63;
border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
}
#minetip-tooltip > .description,
#minetip-tooltip > .minetip-description {
display: block;
margin-top: 0.25em;
}
.vho-research-container {
max-width: 1200px;
margin: 0 auto;
background-color: #2a2a2a;
border: 2px solid #555;
border-radius: 4px;
padding: 20px;
position: relative;
font-family: 'Minecraft';
color: #ffffff;
}
.vho-research-header {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #ffffff;
text-shadow: 2px 2px 0px #000000;
}
.vho-categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.vho-category {
background-color: #1a1a1a;
border: 2px solid #444;
border-radius: 4px;
overflow: hidden;
}
.vho-category-header {
padding: 4px 12px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px 0px #000000;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
justify-content: flex-start;
min-height: 70px;
}
.vho-category-header.storage { background-color: #4a9b9b; }
.vho-category-header.looting { background-color: #d4af37; }
.vho-category-header.power { background-color: #b22222; }
.vho-category-header.handling { background-color: #8b0000; }
.vho-category-header.big-mods { background-color: #228b22; }
.vho-category-header.qol { background-color: #cd853f; }
.vho-category-header.big-toys { background-color: #0000cd; }
.vho-category-header.production { background-color: #4682b4; }
.vho-category-header.vault-upgrades { background-color: #daa520; }
.vho-category-content {
padding: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.vho-mod-icon {
width: 48px;
height: 48px;
background-color: #333;
border: 2px solid #555;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: relative;
background-size: cover;
background-position: center;
margin: 0 auto;
}
.vho-mod-icon:hover {
border-color: #888;
background-color: #444;
transform: scale(1.05);
}
.vho-mod-icon.unlocked {
border-color: #4CAF50;
background-color: #2a4a2a;
}
/* Placeholder for empty slots to maintain layout */
.vho-mod-placeholder {
width: 48px;
height: 48px;
margin: 0 auto;
visibility: hidden;
}
.vho-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #1a1a1a;
color: #ffffff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
margin-bottom: 5px;
border: 1px solid #555;
}
.vho-mod-icon:hover .tooltip {
opacity: 1;
}
.vho-flyout {
position: absolute;
background-color: #2a2a2a;
border: 2px solid #555;
border-radius: 4px;
padding: 20px;
min-width: 300px;
max-width: 400px;
z-index: 9999;
display: none;
color: #ffffff;
font-family: 'Minecraft';
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
max-height: 400px;
overflow-y: auto;
}
.vho-flyout.active {
display: block;
}
.vho-flyout-header {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: #ffffff;
text-shadow: 1px 1px 0px #000000;
border-bottom: 1px solid #555;
padding-bottom: 10px;
}
.vho-flyout-section {
margin-bottom: 15px;
}
.vho-flyout-section h4 {
margin: 0 0 8px 0;
color: #cccccc;
font-size: 14px;
}
.vho-flyout-section p {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: #aaaaaa;
}
.vho-prerequisites {
background-color: #1a1a1a;
border: 1px solid #444;
border-radius: 4px;
padding: 8px;
margin-top: 5px;
}
.vho-prerequisites-list {
list-style: none;
margin: 0;
padding: 0;
}
.vho-prerequisites-list li {
font-size: 12px;
color: #cccccc;
margin-bottom: 4px;
}
.vho-prerequisites-list li:before {
content: "• ";
color: #888;
}
.vho-external-links {
display: flex;
gap: 10px;
margin-top: 10px;
}
.vho-external-link {
background-color: #444;
color: #ffffff;
padding: 6px 12px;
border-radius: 4px;
text-decoration: none;
font-size: 12px;
transition: background-color 0.2s ease;
}
.vho-external-link:hover {
background-color: #555;
}
.vho-close-button {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
color: #888;
font-size: 18px;
cursor: pointer;
padding: 0;
line-height: 1;
}
.vho-close-button:hover {
color: #ffffff;
}
.vho-category-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #c6c6c6;
border: 2px solid #fff;
border-bottom-color: #555555;
border-right-color: #555555;
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.3);
border-radius: 2px;
flex-shrink: 0;
}
.vho-category-icon img {
width: 50px;
height: 50px;
display: block;
}