MediaWiki:Citizen.css: Difference between revisions

Revision as of 23:53, 27 March 2026

/* Star Fishing Wiki Theme */

/* Subtle space-themed background */
:root {
    --background-color-dp-00: #0d0f1a;
    --background-color-dp-01: #131527;
    --background-color-dp-02: #181b33;
    --background-color-dp-03: #1d2040;
    --color-primary: #9b6dff;
    --color-primary-active: #b490ff;
}

/* Sidebar styling */
.citizen-drawer {
    background: #0d0f1a !important;
}

/* Infobox tables subtle glow */
.wikitable {
    border-color: rgba(155, 109, 255, 0.15) !important;
}

.wikitable th {
    background: rgba(155, 109, 255, 0.1) !important;
    color: #c4b5ff !important;
}

.wikitable td {
    background: rgba(155, 109, 255, 0.03) !important;
}

/* Links - purple theme */
a:not(.new) {
    color: #9b6dff !important;
}

a:not(.new):hover {
    color: #b490ff !important;
}

/* Red links (uncreated pages) */
a.new {
    color: #ff6b6b !important;
}

/* Section headers accent */
.mw-heading h2 {
    border-bottom: 2px solid rgba(155, 109, 255, 0.3) !important;
    padding-bottom: 6px;
}

/* Category tags */
.catlinks {
    background: rgba(155, 109, 255, 0.05) !important;
    border: 1px solid rgba(155, 109, 255, 0.1) !important;
    border-radius: 8px !important;
}

/* Search bar */
.citizen-search__card {
    background: #131527 !important;
    border-color: rgba(155, 109, 255, 0.2) !important;
}

/* Content area subtle gradient */
.citizen-body-container {
    background: linear-gradient(180deg, rgba(155, 109, 255, 0.02) 0%, transparent 300px) !important;
}

/* Footer */
.citizen-footer {
    background: #0d0f1a !important;
    border-top: 1px solid rgba(155, 109, 255, 0.1) !important;
}

/* Scrollbar theming */
::-webkit-scrollbar-thumb {
    background: rgba(155, 109, 255, 0.3) !important;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #0d0f1a !important;
}

/* Quest part tables - full width of content area */
.wikitable {
    width: 100% !important;
}

/* Remove extra table margin */
.wikitable {
    margin-bottom: 0.5rem !important;
}
```

Then for the infobox being too small, edit the Quest_Infobox template:
```
https://wiki.sebreezee.com/index.php?title=Template:Quest_Infobox&action=edit
```

Change `width: 260px` to `width: 300px` and change `[[File:{{{image|}}}|180px]]` to `[[File:{{{image|}}}|260px]]`. Here's the full updated template:
```
<div style="float: right; width: 300px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; margin: 0 0 16px 20px;">
<div style="background: rgba(155,109,255,0.15); padding: 16px; text-align: center;">
[[File:{{{image|}}}|260px]]
<div style="font-size: 14px; font-weight: bold; color: #e0e0e0; margin-top: 8px;">{{{title|}}}</div>
<div style="font-size: 12px; color: rgba(255,255,255,0.5); font-style: italic;">{{{caption|}}}</div>
</div>
<div style="padding: 10px 14px; font-size: 13px;">
<div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);"><span style="color: rgba(255,255,255,0.4);">Location</span><span style="color: rgba(255,255,255,0.7);">{{{location|}}}</span></div>
<div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);"><span style="color: rgba(255,255,255,0.4);">Prerequisite</span><span style="color: rgba(255,255,255,0.7);">{{{prerequisite|None}}}</span></div>
<div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);"><span style="color: rgba(255,255,255,0.4);">Parts</span><span style="color: rgba(255,255,255,0.7);">{{{parts|}}}</span></div>
<div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);"><span style="color: rgba(255,255,255,0.4);">Money</span><span style="color: #4ee44e;">{{{money|}}}</span></div>
<div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);"><span style="color: rgba(255,255,255,0.4);">Gems</span><span style="color: #B163FF;">{{{gems|}}}</span></div>
<div style="display: flex; justify-content: space-between; padding: 6px 0;"><span style="color: rgba(255,255,255,0.4);">XP</span><span style="color: gold;">{{{xp|}}}</span></div>
</div>
</div><noinclude>
== Usage ==
<pre>
{{Quest_Infobox
|title=Quest Name
|image=questimage.webp
|caption="Quote here"
|location=Star Town
|prerequisite=None
|parts=6
|money=$120,000
|gems=1,000
|xp=13,700
}}
</pre>
</noinclude>

/* Remove table bottom padding/margin */
.wikitable {
    margin-bottom: 0 !important;
}

.wikitable td, .wikitable th {
    padding: 6px 10px !important;
}

/* Tighter section spacing */
.citizen-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.citizen-section-heading {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Reduce paragraph spacing */
.mw-parser-output p {
    margin: 0.3rem 0 !important;
}

/* Tighter heading spacing */
.mw-heading {
    margin-top: 0.8rem !important;
    margin-bottom: 0.2rem !important;
    padding-top: 0 !important;
}

/* Remove gaps around collapsible sections */
.citizen-section-heading + .citizen-section {
    margin-top: 0 !important;
}