|
|
@@ -1,3 +1,43 @@
|
|
|
+:root {
|
|
|
+ /**
|
|
|
+ * Global elements
|
|
|
+ */
|
|
|
+ --global-color: #ffffff;
|
|
|
+ --global-background: #000000;
|
|
|
+ /**
|
|
|
+ * Links.
|
|
|
+ */
|
|
|
+ --ui-color-a: #08fff6;
|
|
|
+ --ui-color-a-hover: #cccccc;
|
|
|
+ --ui-color-a-shadow: #000000;
|
|
|
+ /**
|
|
|
+ * Header and footer.
|
|
|
+ */
|
|
|
+ --header-background: #884444;
|
|
|
+ --header-border: 0.2em solid #f2c920;
|
|
|
+ --header-border-radius: 0;
|
|
|
+ /**
|
|
|
+ * Star filters.
|
|
|
+ */
|
|
|
+ --star-filter-silver: sepia(100%) saturate(500%) grayscale(100%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
|
|
|
+ --star-filter-gold: sepia(100%) saturate(500%) hue-rotate(10deg) saturate(200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ --star-filter-purple: sepia(100%) saturate(500%) hue-rotate(250deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ --star-filter-red: sepia(100%) saturate(500%) hue-rotate(320deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ /**
|
|
|
+ * Elemental colors.
|
|
|
+ */
|
|
|
+ --element-color-water: #0285f7;
|
|
|
+ --element-color-fire: #f72302;
|
|
|
+ --element-color-wind: #fcc923;
|
|
|
+ --element-color-light: #f2f7aa;
|
|
|
+ --element-color-dark: #4a0282;
|
|
|
+ --element-color-magic: #e21af4;
|
|
|
+
|
|
|
+ --main-txt-color: blue;
|
|
|
+ --main-padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
.desktop{ /* Elements to be shown only in large screens. */
|
|
|
display: initial;
|
|
|
}
|
|
|
@@ -33,58 +73,58 @@
|
|
|
border-color: #ffaaaa;
|
|
|
}
|
|
|
.color_Fire{
|
|
|
- color: #f72302;
|
|
|
+ color: var(--element-color-fire);
|
|
|
}
|
|
|
.color_Wind{
|
|
|
- color: #fcc923;
|
|
|
+ color: var(--element-color-wind);
|
|
|
}
|
|
|
.color_Water{
|
|
|
- color: #0285f7;
|
|
|
+ color: var(--element-color-water);
|
|
|
}
|
|
|
.color_Light{
|
|
|
- color: #f2f7aa;
|
|
|
+ color: var(--element-color-light);
|
|
|
}
|
|
|
.color_Dark{
|
|
|
- color: #4a0282;
|
|
|
+ color: var(--element-color-dark);
|
|
|
}
|
|
|
.color_Magic{
|
|
|
- color: #e21af4;
|
|
|
+ color: var(--element-color-magic);
|
|
|
}
|
|
|
.border_Fire{
|
|
|
- border-color: #f72302;
|
|
|
+ border-color: var(--element-color-fire);
|
|
|
}
|
|
|
.border_Wind{
|
|
|
- border-color: #fcc923;
|
|
|
+ border-color: var(--element-color-wind);
|
|
|
}
|
|
|
.border_Water{
|
|
|
- border-color: #0285f7;
|
|
|
+ border-color: var(--element-color-water);
|
|
|
}
|
|
|
.border_Light{
|
|
|
- border-color: #f2f7aa;
|
|
|
+ border-color: var(--element-color-light);
|
|
|
}
|
|
|
.border_Dark{
|
|
|
- border-color: #4a0282;
|
|
|
+ border-color: var(--element-color-dark);
|
|
|
}
|
|
|
.border_Magic{
|
|
|
- border-color: #e21af4;
|
|
|
+ border-color: var(--element-color-magic);
|
|
|
}
|
|
|
.background_Fire{
|
|
|
- background-color: #f72302;
|
|
|
+ background-color: var(--element-color-fire);
|
|
|
}
|
|
|
.background_Wind{
|
|
|
- background-color: #fcc923;
|
|
|
+ background-color: var(--element-color-wind);
|
|
|
}
|
|
|
.background_Water{
|
|
|
- background-color: #0285f7;
|
|
|
+ background-color: var(--element-color-water);
|
|
|
}
|
|
|
.background_Light{
|
|
|
- background-color: #f2f7aa;
|
|
|
+ background-color: var(--element-color-light);
|
|
|
}
|
|
|
.background_Dark{
|
|
|
- background-color: #4a0282;
|
|
|
+ background-color: var(--element-color-dark);
|
|
|
}
|
|
|
.background_Magic{
|
|
|
- background-color: #e21af4;
|
|
|
+ background-color: var(--element-color-magic);
|
|
|
}
|
|
|
|
|
|
/* Star colors. */
|
|
|
@@ -92,71 +132,75 @@ img.star{
|
|
|
|
|
|
}
|
|
|
img.star.star_silver{
|
|
|
- filter: sepia(100%) saturate(500%) grayscale(100%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
|
|
|
+ filter: var(--star-filter-silver);
|
|
|
}
|
|
|
img.star.star_gold{
|
|
|
- filter: sepia(100%) saturate(500%) hue-rotate(10deg) saturate(200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ filter: var(--star-filter-gold);
|
|
|
}
|
|
|
img.star.star_purple{
|
|
|
- filter: sepia(100%) saturate(500%) hue-rotate(250deg) saturate(1500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ filter: var(--star-filter-purple);
|
|
|
}
|
|
|
img.star.star_red{
|
|
|
- filter: sepia(100%) saturate(500%) hue-rotate(320deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
|
|
|
+ filter: var(--star-filter-red);
|
|
|
}
|
|
|
|
|
|
html {
|
|
|
height: 100%;
|
|
|
}
|
|
|
body{
|
|
|
+ background-color: var(--global-background);
|
|
|
+ color: var(--global-color);
|
|
|
height: 100%;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
- background-color: #000000;
|
|
|
text-align: center;
|
|
|
}
|
|
|
a{
|
|
|
- color: #08fff6;
|
|
|
- text-shadow: 0 0 0.5em #000000;
|
|
|
+ color: var(--ui-color-a);
|
|
|
+ text-shadow: 0 0 0.5em var(--ui-color-a-shadow);
|
|
|
text-decoration: none;
|
|
|
transition: all .3s ease-in-out;
|
|
|
}
|
|
|
a:hover{
|
|
|
- color: #cccccc;
|
|
|
- text-shadow: 0 0 0.1em #000000;
|
|
|
+ color: var(--ui-color-a-hover);
|
|
|
+ text-shadow: 0 0 0.1em var(--ui-color-a-shadow);
|
|
|
}
|
|
|
.fake_a{ /* Elements that look and act as links. */
|
|
|
- color: #08fff6;
|
|
|
- text-shadow: 0 0 0.5em #000000;
|
|
|
+ color: var(--ui-color-a);
|
|
|
+ text-shadow: 0 0 0.5em var(--ui-color-a-shadow);
|
|
|
text-decoration: none;
|
|
|
cursor: pointer;
|
|
|
transition: all .3s ease-in-out;
|
|
|
}
|
|
|
.fake_a:hover{
|
|
|
- color: #cccccc;
|
|
|
- text-shadow: 0 0 0.1em #000000;
|
|
|
+ color: var(--ui-color-a-hover);
|
|
|
+ text-shadow: 0 0 0.1em var(--ui-color-a-shadow);
|
|
|
}
|
|
|
header{
|
|
|
- border-bottom: 0.2em solid #f2c920;
|
|
|
- border-left: 0.2em solid #f2c920;
|
|
|
- border-right: 0.2em solid #f2c920;
|
|
|
- border-bottom-right-radius: 1.5em;
|
|
|
- border-bottom-left-radius: 1.5em;
|
|
|
+ border-bottom: var(--header-border);
|
|
|
+ border-left: var(--header-border);
|
|
|
+ border-right: var(--header-border);
|
|
|
+ border-bottom-right-radius: var(--header-border-radius);
|
|
|
+ border-bottom-left-radius: var(--header-border-radius);
|
|
|
margin: 0 0 1em 0;
|
|
|
- background-color: #884444;
|
|
|
+ background-color: var(--header-background);
|
|
|
text-align: left;
|
|
|
}
|
|
|
header div#logo{
|
|
|
+ font-size: 70%;
|
|
|
margin: auto;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
- width: 20em;
|
|
|
+ width: 14em;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+header div#logo img#logo_img{
|
|
|
+ max-width: 14em;
|
|
|
+}
|
|
|
header div#logo h1#logo_text{
|
|
|
font-style: italic;
|
|
|
margin: -2em auto -0.7em auto;
|
|
|
- color: #ffffff;
|
|
|
- text-shadow: 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 1em #000000, 0 0 1em #000000;
|
|
|
+ text-shadow: 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 1em var(--ui-color-a-shadow), 0 0 1em var(--ui-color-a-shadow);
|
|
|
}
|
|
|
header div#logo h1#logo_text span.large{
|
|
|
font-size: 150%;
|
|
|
@@ -168,13 +212,13 @@ header div#logo h1#logo_text span.small{
|
|
|
header nav{
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
- font-size: 80%;
|
|
|
+ font-size: 110%;
|
|
|
}
|
|
|
header nav a{
|
|
|
- font-size: 2em;
|
|
|
font-weight: bold;
|
|
|
+ text-transform: capitalize;
|
|
|
+ font-variant: small-caps;
|
|
|
margin: 0.5em;
|
|
|
- color: #ffffff;
|
|
|
text-decoration: none;
|
|
|
position: relative;
|
|
|
transition: all .4s ease-in-out;
|
|
|
@@ -190,21 +234,19 @@ header nav a:hover{
|
|
|
display: block;
|
|
|
}
|
|
|
header nav a:hover{
|
|
|
- color: #ffffff;
|
|
|
text-shadow: 0 0 0 #000000;
|
|
|
}
|
|
|
}
|
|
|
footer{
|
|
|
- color: #ffffff;
|
|
|
font-size: 80%;
|
|
|
text-align: center;
|
|
|
- border-top: 0.2em solid #f2c920;
|
|
|
- border-left: 0.2em solid #f2c920;
|
|
|
- border-right: 0.2em solid #f2c920;
|
|
|
- border-top-right-radius: 1.5em;
|
|
|
- border-top-left-radius: 1.5em;
|
|
|
+ border-top: var(--header-border);
|
|
|
+ border-left: var(--header-border);
|
|
|
+ border-right: var(--header-border);
|
|
|
+ border-top-right-radius: var(--header-border-radius);
|
|
|
+ border-top-left-radius: var(--header-border-radius);
|
|
|
margin: 2em 0 0 0;
|
|
|
- background-color: #884444;
|
|
|
+ background-color: var(--header-background);
|
|
|
padding: 1em 2em 1em 2em;
|
|
|
}
|
|
|
footer table#footer_table{
|
|
|
@@ -228,7 +270,6 @@ footer table#footer_table td{
|
|
|
input[type=button], input[type=submit]{
|
|
|
font-size: 100%;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
padding: 0.3em 1em 0.3em 1em;
|
|
|
background-color: #351e0b;
|
|
|
border: 0.2em solid #f2c920;
|
|
|
@@ -240,7 +281,6 @@ input[type=button], input[type=submit]{
|
|
|
input[type=text], input[type=number]{
|
|
|
font-size: 80%;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
padding: 0 0.3em;
|
|
|
background-color: #351e0b;
|
|
|
border: 0.2em solid #f2c920;
|
|
|
@@ -252,7 +292,6 @@ input[type=number]{
|
|
|
}
|
|
|
input[type=checkbox]{
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
background-color: #351e0b;
|
|
|
border: 0.2em solid #f2c920;
|
|
|
border-radius: 0.5em;
|
|
|
@@ -263,7 +302,6 @@ input[type=checkbox]{
|
|
|
select{
|
|
|
font-size: 80%;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
padding: 0 0.1em;
|
|
|
background-color: #351e0b;
|
|
|
border: 0.2em solid #f2c920;
|
|
|
@@ -275,7 +313,6 @@ select{
|
|
|
a.a_button{ /* Links that look like buttons. */
|
|
|
font-size: 100%;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
padding: 0.3em 1em 0.3em 1em;
|
|
|
background-color: #351e0b;
|
|
|
border: 0.2em solid #f2c920;;
|
|
|
@@ -301,7 +338,6 @@ section h2{
|
|
|
margin: -0.25em -0.25em 0.5em -0.25em;
|
|
|
border-bottom: 0.1em solid #f2c920;
|
|
|
background-color: #000000bb;
|
|
|
- color: #ffffff;
|
|
|
text-align: left;
|
|
|
border-top-left-radius: 0.25em;
|
|
|
border-top-right-radius: 0.25em;
|
|
|
@@ -448,7 +484,6 @@ div.rune_panel.rune_level_15 span.rune_stars img.star{
|
|
|
div.rune_panel span.rune_level{
|
|
|
font-size: 130%;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
|
|
|
position: relative;
|
|
|
top: 4.7em;
|
|
|
@@ -586,7 +621,6 @@ table.rune td.icon div.rune_panel{
|
|
|
font-size: 70%;
|
|
|
}
|
|
|
table.rune td.stats{
|
|
|
- color: #ffffff;
|
|
|
border-bottom: 0.2em solid #777777;
|
|
|
border-top: 0.2em solid #777777;
|
|
|
background-color: #655c59;
|
|
|
@@ -594,7 +628,6 @@ table.rune td.stats{
|
|
|
}
|
|
|
|
|
|
table.rune td.stats table{
|
|
|
- color: #ffffff;
|
|
|
font-size: 90%;
|
|
|
}
|
|
|
|
|
|
@@ -634,7 +667,6 @@ table.rune td.stats table td.value img{
|
|
|
}
|
|
|
|
|
|
table.rune td.details{
|
|
|
- color: #ffffff;
|
|
|
padding-left: 0.5em;
|
|
|
border-bottom: 0.2em solid #777777;
|
|
|
border-right: 0.2em solid #777777;
|
|
|
@@ -659,7 +691,6 @@ table.rune td.details table.table_details span.quality{
|
|
|
border: 0.1em solid #000000;
|
|
|
border-radius: 0.2em;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
text-shadow: 0 0 0.1em #000000;
|
|
|
padding: 0 0.3em;
|
|
|
width: 5em;
|
|
|
@@ -755,7 +786,6 @@ div.craft_panel span.craft_stat{
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
font-size: 60%;
|
|
|
- color: #ffffff;
|
|
|
text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
|
|
|
position: absolute;
|
|
|
top: 2.7em;
|