Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Light solarized theme for chrome app Motivation (count your age)
/*
* How to change theme:
* Replace the file in .config/chromium/Default/Extensions/[APP_ID]/[APP_VERSION]/css/style.css with this file.
*/
:root {
--base3: #fdf6e3;
--base1: #93a1a1;
--blue: #268bd2;
--green: #859900;
--white: #eee8d5;
--base03: #002b36;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-align-items: center;
-webkit-flex-direction: column;
-webkit-font-smoothing: antialiased;
-webkit-justify-content: center;
}
body, input {
display: -webkit-flex;
font-family: 'Consolas', 'Inconsolata', 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
background-color: var(--base3);
}
.age-label {
color: var(--base1);
font-weight: bold;
font-size: 1.2rem;
line-height: 1;
margin: 0 0 0 2px;
}
.count {
color: var(--blue);
margin: 0;
font-size: 6rem;
line-height: 1;
font-weight: 600;
}
.count sup {
color: var(--green);
font-size: 2.4rem;
margin-left: 7px;
}
label {
display: block;
}
input, button {
padding: 0.375rem 0.75rem;
font-size: 1.5rem;
appearance: none;
-webkit-appearance: none;
}
input {
margin-right: 0.5rem;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
border-color: var(--base1);
background-color: var(--white);
color: var(--base01);
}
button {
outline: none;:root {
--base3: #fdf6e3;
--base1: #93a1a1;
--blue: #268bd2;
--green: #859900;
--white: #eee8d5;
--base03: #002b36;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-align-items: center;
-webkit-flex-direction: column;
-webkit-font-smoothing: antialiased;
-webkit-justify-content: center;
}
body, input {
display: -webkit-flex;
font-family: 'Consolas', 'Inconsolata', 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
background-color: var(--base3);
}
.age-label {
color: var(--base1);
font-weight: bold;
font-size: 1.2rem;
line-height: 1;
margin: 0 0 0 2px;
}
.count {
color: var(--blue);
margin: 0;
font-size: 6rem;
line-height: 1;
font-weight: 600;
}
.count sup {
color: var(--green);
font-size: 2.4rem;
margin-left: 7px;
}
label {
display: block;
}
input, button {
padding: 0.375rem 0.75rem;
font-size: 1.5rem;
appearance: none;
-webkit-appearance: none;
}
input {
margin-right: 0.5rem;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
border-color: var(--base1);
background-color: var(--white);
color: var(--base01);
}
button {
outline: none;
display: block;
cursor: pointer;
color: var(--white);
border: none;
border-radius: 0.25rem;
background-color: var(--green);
}
footer {
padding-top: 0.5rem;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
}
display: block;
cursor: pointer;
color: var(--white);
border: none;
border-radius: 0.25rem;
background-color: var(--green);
}
footer {
padding-top: 0.5rem;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.