Brighter Shores:Theme: Difference between revisions

From Brighter Shores Wiki
Jump to navigation Jump to search
Content added Content deleted
m (Merds moved page User:Merds/Sandbox to Brighter Shores:Theme without leaving a redirect)
No edit summary
Line 2: Line 2:


==Colours==
==Colours==
===Brand===
<div class="color-container">
<div class="color-container">


Line 98: Line 99:
<p class="hexcode">#3f3f3f</p>
<p class="hexcode">#3f3f3f</p>
</div>
</div>
</div>

</div>

===Status===
<div class="color-container">

<div class="color-column">
<div class="color-group dark" style="background: #801c13;">
<p class="variable">@mocaccino</p>
<p class="hexcode">#801c13</p>
</div>
<div class="color-group dark" style="background: #9f261e;">
<p class="variable">@old-brick</p>
<p class="hexcode">#9f261e</p>
</div>
<div class="color-group dark" style="background: #ee4231;">
<p class="variable">@flamingo</p>
<p class="hexcode">#ee4231</p>
</div>
<div class="color-group" style="background: #fbc0ba;">
<p class="variable">@apricot-peach</p>
<p class="hexcode">#fbc0ba</p>
</div>
<div class="color-group" style="background: #feecea;">
<p class="variable">@bridesmaid</p>
<p class="hexcode">#feecea</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #7a3f08;">
<p class="variable">@antique-bronze</p>
<p class="hexcode">#7a3f08</p>
</div>
<div class="color-group dark" style="background: #b55e0c;">
<p class="variable">@korma</p>
<p class="hexcode">#b55e0c</p>
</div>
<div class="color-group dark" style="background: #f7861b;">
<p class="variable">@ecstasy</p>
<p class="hexcode">#f7861b</p>
</div>
<div class="color-group" style="background: #fbcfa6;">
<p class="variable">@corvette</p>
<p class="hexcode">#fbcfa6</p>
</div>
<div class="color-group" style="background: #fef0e4;">
<p class="variable">@lace</p>
<p class="hexcode">#fef0e4</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #786300;">
<p class="variable">@cinnamon</p>
<p class="hexcode">#786300</p>
</div>
<div class="color-group dark" style="background: #a48900;">
<p class="variable">@olive</p>
<p class="hexcode">#a48900</p>
</div>
<div class="color-group" style="background: #f9d000;">
<p class="variable">@supernova</p>
<p class="hexcode">#f9d000</p>
</div>
<div class="color-group" style="background: #fcea94;">
<p class="variable">@golden</p>
<p class="hexcode">#fcea94</p>
</div>
<div class="color-group" style="background: #fef9de;">
<p class="variable">@half-dutch</p>
<p class="hexcode">#fef9de</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #2e5e05;">
<p class="variable">@san-felix</p>
<p class="hexcode">#2e5e05</p>
</div>
<div class="color-group dark" style="background: #3c780a;">
<p class="variable">@la-palma</p>
<p class="hexcode">#3c780a</p>
</div>
<div class="color-group dark" style="background: #6bc71f;">
<p class="variable">@lima</p>
<p class="hexcode">#6bc71f</p>
</div>
<div class="color-group" style="background: #c3e8a3;">
<p class="variable">@caper</p>
<p class="hexcode">#c3e8a3</p>
</div>
<div class="color-group" style="background: #ecf8e3;">
<p class="variable">@frost</p>
<p class="hexcode">#ecf8e3</p>
</div>
</div>

</div>
<div class="color-container">

<div class="color-column">
<div class="color-group dark" style="background: #03436b;">
<p class="variable">@regal-blue</p>
<p class="hexcode">#03436b</p>
</div>
<div class="color-group dark" style="background: #0b5884;">
<p class="variable">@venice-blue</p>
<p class="hexcode">#0b5884</p>
</div>
<div class="color-group dark" style="background: #3ea6e6;">
<p class="variable">@curious-blue</p>
<p class="hexcode">#3ea6e6</p>
</div>
<div class="color-group" style="background: #aad9f5;">
<p class="variable">@jordy-blue</p>
<p class="hexcode">#aad9f5</p>
</div>
<div class="color-group" style="background: #e5f3fc;">
<p class="variable">@tropical-blue</p>
<p class="hexcode">#e5f3fc</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #3d276b;">
<p class="variable">@honey-flower</p>
<p class="hexcode">#3d276b</p>
</div>
<div class="color-group dark" style="background: #4f348b;">
<p class="variable">@seance</p>
<p class="hexcode">#4f348b</p>
</div>
<div class="color-group dark" style="background: #855cd8;">
<p class="variable">@medium-purple</p>
<p class="hexcode">#855cd8</p>
</div>
<div class="color-group" style="background: #cebbf7;">
<p class="variable">@perfume</p>
<p class="hexcode">#cfc0f0</p>
</div>
<div class="color-group" style="background: #f0ecfa;">
<p class="variable">@heliotrope</p>
<p class="hexcode">#f0ecfa</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #6d3662;">
<p class="variable">@cosmic</p>
<p class="hexcode">#6d3662</p>
</div>
<div class="color-group dark" style="background: #984c89;">
<p class="variable">@cannon-pink</p>
<p class="hexcode">#984c89</p>
</div>
<div class="color-group dark" style="background: #e874cf;">
<p class="variable">@lavender</p>
<p class="hexcode">#e874cf</p>
</div>
<div class="color-group" style="background: #f5c8ec;">
<p class="variable">@cherub</p>
<p class="hexcode">#f5c8ec</p>
</div>
<div class="color-group" style="background: #fceef9;">
<p class="variable">@french-lilac</p>
<p class="hexcode">#fceef9</p>
</div>
</div>

<div class="color-column">
<div class="color-group dark" style="background: #444e5a;">
<p class="variable">@river-bed</p>
<p class="hexcode">#444e5a</p>
</div>
<div class="color-group dark" style="background: #5d6773;">
<p class="variable">@shuttle-gray</p>
<p class="hexcode">#5d6773</p>
</div>
<div class="color-group dark" style="background: #949eaa;">
<p class="variable">@gray-chateau</p>
<p class="hexcode">#949eaa</p>
</div>
<div class="color-group" style="background: #e4eaee;">
<p class="variable">@mystic</p>
<p class="hexcode">#e4eaee</p>
</div>
<div class="color-group" style="background: #f9fafa;">
<p class="variable">@black-haze</p>
<p class="hexcode">#f9fafa</p>
</div>
</div>

</div>
</div>

Revision as of 07:08, 30 October 2024

This page contains information about the look of the Brighter Shores Wiki.

Colours

Brand

Body

--body-main

#fdfcfc

--body-light

#e7e5e4

--body-mid

#ad9e9a

--body-border

#bdb2ae

--body-dark

#6d5b54

--body-darker

#47403d

--body-background-color

#173a4d

Buttons and links

--button-border

#3c352a

--button-dark

#18140c

--button-light

#3a301d

--link-color

#8b694f

--background-link-color

#e2bd8a

@infobox-link

#a5918a

Game class colors

@hopeport

#FFE233

@hopeport-dark

#3b382f

@mantuban

#68ABF1

@mantuban-dark

#26323d

@hopeforest

#72D757

@hopeforest-dark

#2e3930

@crenopolis

#979797

@crenopolis-dark

#3f3f3f

Status

@mocaccino

#801c13

@old-brick

#9f261e

@flamingo

#ee4231

@apricot-peach

#fbc0ba

@bridesmaid

#feecea

@antique-bronze

#7a3f08

@korma

#b55e0c

@ecstasy

#f7861b

@corvette

#fbcfa6

@lace

#fef0e4

@cinnamon

#786300

@olive

#a48900

@supernova

#f9d000

@golden

#fcea94

@half-dutch

#fef9de

@san-felix

#2e5e05

@la-palma

#3c780a

@lima

#6bc71f

@caper

#c3e8a3

@frost

#ecf8e3

@regal-blue

#03436b

@venice-blue

#0b5884

@curious-blue

#3ea6e6

@jordy-blue

#aad9f5

@tropical-blue

#e5f3fc

@honey-flower

#3d276b

@seance

#4f348b

@medium-purple

#855cd8

@perfume

#cfc0f0

@heliotrope

#f0ecfa

@cosmic

#6d3662

@cannon-pink

#984c89

@lavender

#e874cf

@cherub

#f5c8ec

@french-lilac

#fceef9

@river-bed

#444e5a

@shuttle-gray

#5d6773

@gray-chateau

#949eaa

@mystic

#e4eaee

@black-haze

#f9fafa