move all theme colors to single file

This commit is contained in:
Nolan Lawson 2018-01-12 09:01:46 -08:00
parent f78be6a032
commit 9f8c589821
5 changed files with 65 additions and 32 deletions

View file

@ -39,8 +39,8 @@
<style>
nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: royalblue;
border-bottom: 1px solid var(--nav-border);
background: var(--nav-bg);
position: fixed;
left: 0;
right: 0;
@ -58,12 +58,12 @@
}
a {
border-bottom: 1px solid royalblue;
border-bottom: 1px solid var(--nav-a-border);
}
a.selected {
border-bottom: 1px solid white;
background: #7e93e9;
border-bottom: 1px solid var(--nav-a-selected-border);
background: var(--nav-a-selected-bg);
}
a {
@ -75,27 +75,27 @@
}
a:hover {
background-color: #a3b1f0;
border-bottom: 1px solid #a3b1f0;
background-color: var(--nav-a-bg-hover);
border-bottom: 1px solid var(--nav-a-border-hover);
}
a:hover span {
color: #f6f7fd;
color: var(--nav-text-color-hover);
}
a:hover svg {
fill: #f6f7fd;
fill: var(--nav-svg-fill-hover);
}
svg {
width: 20px;
height: 20px;
display: inline-block;
fill: white;
fill: var(--nav-svg-fill);
}
span {
font-size: 16px;
color: white;
color: var(--nav-text-color);
padding-left: 10px;
}

View file

@ -29,10 +29,10 @@
}
form {
background: #fafafa;
background: var(--form-bg);
padding: 5px 10px 15px;
border: 1px solid #ccc;
margin: 0 auto;
margin: 20px auto;
border: 1px solid var(--form-border);
}
form label, form input, form button {

View file

@ -4,7 +4,7 @@ body {
font-size: 14px;
line-height: 1.2;
color: #333;
background: #ebeffb;
background: var(--body-bg);
}
#svelte {
@ -21,8 +21,8 @@ main {
padding: 15px 15px;
box-sizing: border-box;
margin: 85px auto;
background: white;
border: 1px solid #ededed;
background: var(--main-bg);
border: 1px solid var(--main-border);
border-radius: 1px;
}
@ -37,12 +37,12 @@ h1 {
}
a {
color: royalblue;
color: var(--anchor-text);
text-decoration: none;
}
a:visited {
color: royalblue;
color: var(--anchor-text);
}
a:hover {
@ -50,42 +50,40 @@ a:hover {
}
input {
border: 1px solid #dadada;
border: 1px solid var(--input-border);
padding: 5px;
}
button {
font-size: 1.2em;
background: #ededed;
background: var(--button-bg);
border-radius: 2px;
padding: 10px 15px;
border: 1px solid #ededed;
}
button {
border: 1px solid var(--button-border);
cursor: pointer;
color: var(--button-text);
}
button:hover {
background: #ddd;
background: var(--button-bg-hover);
}
button:active {
background: #fafafa;
background: var(--button-bg-active);
}
button.primary {
border: 1px solid #1e3066;
background: #668cff;
color: white;
border: 1px solid var(--button-primary-border);
background: var(--button-primary-bg);
color: var(--button-primary-text);
}
button.primary:hover {
background: #446add;
background: var(--button-primary-bg-hover);
}
button.primary:active {
background: #99b3ff;
background: var(--button-primary-bg-active);
}
p, label, input {

View file

@ -0,0 +1,34 @@
:root {
--button-primary-bg: #668cff;
--button-primary-text: white;
--button-primary-border: #1e3066;
--button-primary-bg-active: #99b3ff;
--button-primary-bg-hover: #446add;
--button-bg: #ededed;
--button-text: #333;
--button-border: #ededed;
--button-bg-active: #fafafa;
--button-bg-hover: #ddd;
--input-border: #dadada;
--anchor-text: royalblue;
--main-bg: white;
--body-bg: #ebeffb;
--main-border: #ededed;
--form-bg: #fafafa;
--form-border: #ccc;
--nav-bg: royalblue;
--nav-border: #3a5eca;
--nav-a-border: royalblue;
--nav-a-selected-border: white;
--nav-a-selected-bg: #7e93e9;
--nav-a-bg-hover: #a3b1f0;
--nav-a-border-hover: #a3b1f0;
--nav-text-color-hover: #f6f7fd;
--nav-svg-fill-hover: #f6f7fd;
--nav-svg-fill: white;
--nav-text-color: white;
}

View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='theme-color' content='#4169e1'>
<link rel='stylesheet' href='/theme-default.css'>
<link rel='stylesheet' href='/global.css'>
<link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'>