nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
routes/_components/Nav.html
View File

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

6
routes/settings/add-instance.html
View File

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

34
scss/global.scss
View File

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

34
scss/theme-default.scss
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;
}

1
templates/2xx.html
View File

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