|
|
| Line 1: |
Line 1: |
| /* | | /* ===== GitBook Base ===== */ |
| * =====================================================
| |
| * EstoriaRO Wiki Background & General Styling
| |
| * =====================================================
| |
| */
| |
| | |
| /* Global Body Styling (Background & Default Text Color) */
| |
| body { | | body { |
| background-color: #f8f9fa00; /* Fully transparent base color */
| | font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; |
| color: #ffffff; /* Default text color is white */
| | background: #ffffff; |
| font-family: "Baloo Paaji 2", cursive; /* Default font */
| | color: #111827; |
| background-image: url("/wiki/images/4/46/Estoria_background_5.png");
| | line-height: 1.7; |
| background-repeat: no-repeat;
| |
| background-position: center top;
| |
| background-attachment: fixed; /* Background stays put when scrolling */
| |
| background-size: cover; /* Ensures background covers the entire viewport */
| |
| }
| |
| | |
| /*
| |
| * =====================================================
| |
| * Main Content Container (mw-body)
| |
| * =====================================================
| |
| */
| |
| #pt-userpage-2 a:not(.mw-selflink) {
| |
| color: #ffffff;
| |
| }
| |
| | |
| /* Main content container styling */
| |
| .mw-body {
| |
| background-color: rgb(34 50 83 / 63%); /* Semi-transparent dark blue/grey */
| |
| border-radius: 12px;
| |
| padding: 20px;
| |
| box-shadow: 0 8px 25px rgb(0 0 0); /* Soft shadow for depth */
| |
| }
| |
| | |
| /* Ensure all content inside the body uses the custom font */
| |
| .mw-body-content,
| |
| .mw-body-content * {
| |
| font-family: "Baloo Paaji 2", cursive;
| |
| }
| |
| | |
| /* Content Area Container and Header/Pin Container Transparency */
| |
| .mw-page-container {
| |
| min-width: 18.75em;
| |
| max-width: 99.75rem;
| |
| box-sizing: border-box;
| |
| position: relative;
| |
| z-index: 0;
| |
| margin: 0 auto;
| |
| padding-top: 0.05px;
| |
| padding-left: 1.5rem;
| |
| padding-right: 1.5rem;
| |
| background-color: #ffffff00; /* Transparent */
| |
| }
| |
| | |
| .vector-pinned-container {
| |
| background-color: #ffffff13; /* Very slight white transparency */
| |
| }
| |
| | |
| /*
| |
| * =====================================================
| |
| * Headers & Typography
| |
| * =====================================================
| |
| */
| |
| | |
| /* All headings (H1-H6) styling */
| |
| .mw-heading,
| |
| h1, h2, h3, h4, h5, h6 {
| |
| color: #f0c75e; /* Soft yellow highlight color */
| |
| font-weight: 800;
| |
| font-family: "Baloo Paaji 2", cursive;
| |
| margin: 0;
| |
| padding-top: 0.5em;
| |
| padding-bottom: 0.17em;
| |
| display: flow-root;
| |
| word-break: break-word;
| |
| }
| |
| | |
| /* Separator under the pinnable header */
| |
| .vector-pinnable-header {
| |
| padding-bottom: 6px;
| |
| margin-bottom: 6px;
| |
| border-bottom: 1px solid #f5f6e8;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| /*
| |
| * =====================================================
| |
| * Links
| |
| * =====================================================
| |
| */
| |
| | |
| /* Normal and Visited link colors within content */
| |
| #content a:link,
| |
| #content a:visited {
| |
| color: #ffffff;
| |
| }
| |
| | |
| /* Hover link color (soft yellow highlight) */
| |
| #content a:hover {
| |
| color: #f0c75e;
| |
| }
| |
| | |
| /* Visited links specifically for where(:not([role='button'])) */
| |
| a:where(:not([role='button'])):visited {
| |
| color: #eaecf0; /* Off-white color */
| |
| } | | } |
|
| |
|
| /*
| |
| * =====================================================
| |
| * Tables
| |
| * =====================================================
| |
| */
| |
|
| |
|
| /* Wikitable styling */ | | /* ===== Content Area ===== */ |
| .wikitable { | | .mw-body-content { |
| background-color: #f8f9fa00; /* Transparent */
| | max-width: 900px; |
| color: #ffffff;
| | margin: auto; |
| margin: 5em 0;
| | padding: 3em 2em; |
| border: 0px solid #a2a9b1; /* Removed border */
| |
| border-collapse: collapse;
| |
| } | | } |
|
| |
|
| /*
| |
| * =====================================================
| |
| * Navigation & UI Elements
| |
| * =====================================================
| |
| */
| |
|
| |
|
| /* Vector Header Container (top bar) */ | | /* ===== Sidebar ===== */ |
| .vector-header-container .mw-header,
| | #mw-panel { |
| .vector-header-container .vector-sticky-header {
| | background: #f8f9fb; |
| width: 100%;
| | border-right: 1px solid #e5e7eb; |
| min-height: 3.125rem;
| |
| background-color: #ffffff00; /* Transparent */
| |
| min-width: 18.75em;
| |
| max-width: 99.75rem;
| |
| padding-left: 1.5rem;
| |
| padding-right: 1.5rem;
| |
| box-sizing: border-box;
| |
| } | | } |
|
| |
|
| /* Dropdown menu styling */
| |
| .vector-dropdown .vector-dropdown-content {
| |
| position: absolute;
| |
| top: 100%;
| |
| left: -1px;
| |
| opacity: 0;
| |
| height: 0;
| |
| visibility: hidden;
| |
| overflow: hidden auto;
| |
| z-index: 50;
| |
| background-color: #ffffff17; /* Very light transparent background */
| |
| padding: 16px 16px;
| |
| font-size: var(--font-size-small, 0.875rem);
| |
| box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2);
| |
| transition-property: opacity;
| |
| transition-duration: 100ms;
| |
| width: max-content;
| |
| max-width: 200px;
| |
| max-height: 75vh;
| |
| }
| |
|
| |
|
| /* WikiEditor Textarea */
| | #mw-panel a { |
| .wikiEditor-ui textarea {
| | color: #374151; |
| width: 75%;
| | font-size: 14px; |
| border: 0;
| |
| } | | } |
|
| |
|
| .oo-ui-toolbar-bar {
| |
| background-color: #ffffff00;
| |
| color: #ffffff;
| |
| }
| |
|
| |
|
| textarea {
| | #mw-panel a:hover { |
| display: block;
| | color: #2563eb; |
| box-sizing: border-box;
| |
| width: 100%;
| |
| border: 1px solid #a2a9b1;
| |
| padding: 0.1em;
| |
| background-color: #ffffff00;
| |
| } | | } |
|
| |
|
| .wikiEditor-ui-toolbar {
| |
| background-color: #f8f9fa00;
| |
| box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
|
| .editOptions {
| | /* ===== Headings ===== */ |
| background-color: #eaecf000;
| | h1 { |
| color: #ffffff;
| | font-size: 2.3em; |
| border: 1px solid #c8ccd100;
| | border-bottom: 1px solid #e5e7eb; |
| border-top: 0;
| | padding-bottom: .3em; |
| padding: 1em 1em 1.5em 1em;
| |
| margin-bottom: 2em;
| |
| } | | } |
|
| |
|
| .ve-ui-mwNoticesPopupTool-items {
| |
| padding: 0.5em 1em;
| |
| line-height: 1.6em;
| |
| background-color: #eaecf000;
| |
| }
| |
|
| |
|
| .ve-ui-mwNoticesPopupTool-items {
| | h2 { |
| padding: 0.5em 1em;
| | font-size: 1.6em; |
| line-height: 1.6em;
| | margin-top: 2em; |
| background-color: #3b4d73;
| |
| } | | } |
|
| |
|
| .mw-echo-ui-placeholderItemWidget {
| |
| padding: 2em;
| |
| background-color: #3b4d73;
| |
| }
| |
|
| |
|
| .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
| | h3 { |
| min-height: 3.5em;
| | font-size: 1.3em; |
| position: -webkit-sticky;
| |
| position: sticky;
| |
| padding-bottom: 1em;
| |
| padding-top: 0.5em;
| |
| margin-top: -0.5em;
| |
| top: 0;
| |
| z-index: 2;
| |
| background-color: #ffffff00;
| |
| box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
| |
| } | | } |
|
| |
|
| /* Echo */
| |
|
| |
|
| .mw-echo-ui-notificationItemWidget {
| | /* ===== Code Block ===== */ |
| background-color: #ffffff00;
| | pre { |
| | background: #f3f4f6; |
| | padding: 1em; |
| | border-radius: 8px; |
| | overflow-x: auto; |
| } | | } |
|
| |
|
| .mw-echo-ui-notificationItemWidget-unread,
| |
| .mw-echo-ui-placeholderItemWidget {
| |
| backgroundor: #ffffff00;
| |
| }
| |
|
| |
|
| .mw-echo-ui-notificationItemWidget-unread:hover,
| | code { |
| .mw-echo-ui-notificationItemWidget:hover, | | background: #f3f4f6; |
| .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
| | padding: .2em .4em; |
| background-color: #ffffff00;
| | border-radius: 4px; |
| | font-family: JetBrains Mono, monospace; |
| } | | } |
|
| |
|
| .mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
| |
| .mw-echo-ui-notificationItemWidget-content-message-body {
| |
| color: #ffffff00;
| |
| }
| |
|
| |
|
| .mw-echo-ui-notificationsListWidget:not(:hover) a,
| | /* ===== TOC ===== */ |
| #p-personal .mw-echo-ui-notificationsListWidget:not(:hover) a.new, | | #toc { |
| .mw-echo-ui-notificationItemWidget-content-message-header,
| | background: #f9fafb; |
| .mw-echo-ui-notificationItemWidget-content-actions-timestamp{
| | border: 1px solid #e5e7eb; |
| color:var(--wiki-content-text-color);
| | border-radius: 8px; |
| | padding: 1em; |
| } | | } |
|
| |
|
| /* special:replacetext */
| |
| .ext-replacetext-searchoptions {
| |
| background-color: transparent;
| |
| border: 1px solid var(--wiki-content-border-color);
| |
| }
| |
|
| |
| .ext-replacetext-searchoptions .ext-replacetext-divider {
| |
| border-bottom: 1px solid var(--wiki-content-border-color);
| |
| }
| |
|
| |
|
| |
|
| |
| .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
| |
| background-color: #ffffff00;
| |
| position: relative;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
| |
| background-color: #f8f9fa00;
| |
| }
| |
|
| |
| .mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
| |
| background-color: #ffffff00;
| |
| border: 1px solid #a2a9b100;
| |
| border-bottom: 0;
| |
| border-radius: 2px 2px 0 0;
| |
| padding: 0 0.6em 0.6em 0.6em;
| |
| color: #ffffff00;
| |
| line-height: normal;
| |
| }
| |
|
| |
| .mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
| |
| font-weight: bold;
| |
| color: #ffffff;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
| |
| background-color: #f8f9fa00;
| |
| color: #ffffff;
| |
| border-color: #a2a9b100;
| |
| }
| |
|
| |
| /* special:replacetext */
| |
| .ext-replacetext-searchoptions {
| |
| background-color: #ffffff00;
| |
| border: 1px solid var(--wiki-content-border-color);
| |
| }
| |
|
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
| |
| background-color: #f8f9fa00;
| |
| color: #2f3a89;
| |
| border-color: #a2a9b100;
| |
| }
| |
|
| |
| #pagehistory li.selected {
| |
| background-color: #162f478f;
| |
| color: #f5f6e8
| |
| outline: 1px dashed #a2a9b1;
| |
| }
| |
|
| |
| .oo-ui-textInputWidget .oo-ui-inputWidget-input {
| |
| background-color: #ffffff00;
| |
| color: #101418;
| |
| margin: 0;
| |
| border: 1px solid var(--border-color-base, #a2a9b1);
| |
| border-radius: 2px;
| |
| padding: 5px 8px;
| |
| font-size: inherit;
| |
| font-family: inherit;
| |
| line-height: 1.42857143em;
| |
| }
| |
|
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
| |
| background-color: #1d3955b0;
| |
| color: #ffffff;
| |
| border-color: #ffffff00;
| |
| }
| |
|
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
| |
| color: var(--color-inverted-fixed, #fff);
| |
| background-color: #1d3955b0;
| |
| border-color: var(--background-color-progressive, #36c);
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| a:where(:not([role='button'])) {
| |
| color: #ffffff;
| |
| border-radius: 2px;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| a {
| |
| text-decoration: none;
| |
| color: #f5f6e8
| |
| background: none;
| |
| }
| |
|
| |
| .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
| |
| color: #f5f6e8;
| |
| }
| |
|
| |
| .cdx-text-input__input:enabled {
| |
| background-color: #ffffff00;
| |
| color: var(--color-base, #202122);
| |
| border-color: var(--border-color-interactive, #72777d);
| |
| box-shadow: inset 0 0 0 1px var(--box-shadow-color-transparent, transparent);
| |
| transition-property: background-color, color, border-color, box-shadow;
| |
| transition-duration: .25s;
| |
| }
| |
|
| |
| a:where(:not([role='button'])):visited:hover {
| |
| color :#ff9900;
| |
|
| |
|
| |
| }
| |
|
| |
| a:where(:not([role='button'])):hover {
| |
| color: #ff9900;
| |
| text-decoration: underline
| |
| }
| |
|
| |
| .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited:hover,.vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited:hover {
| |
| color: #ff9900;
| |
|
| |
| }
| |
|
| |
| .vector-menu-tabs .mw-list-item.selected a {
| |
| color: #f5f6e8 !important;
| |
| border-bottom: 2px solid
| |
| }
| |
|
| |
| .vector-toc .vector-toc-list-item-active > .vector-toc-link, .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link, .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
| |
| color: #ff9900 !important;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-active) > .vector-toc-link {
| |
| color: #f5f6e8 !important;
| |
| }
| |
|
| |
| .vector-icon {
| |
| -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
| |
| mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
| |
| min-width: 10px;
| |
| min-height: 10px;
| |
| width: calc(var(--font-size-medium, 1rem) + 4px);
| |
| height: calc(var(--font-size-medium, 1rem) + 4px);
| |
| display: inline-block;
| |
| vertical-align: text-bottom;
| |
| background-color: #ffffff;
| |
| }
| |
|
| |
|
| pre, code, .mw-code {
| | /* ===== Remove Wiki Noise ===== */ |
| background-color: #23356645;
| | #footer, #p-print, #p-tb { |
| color: #ffffff;
| | display: none; |
| border: 1px solid var(--border-color-muted, #dadde3);
| |
| } | | } |