218 lines
3.2 KiB
Plaintext
218 lines
3.2 KiB
Plaintext
@lightBG: #ffffff;
|
|
@lightTextColor: #000;
|
|
@lightLinkColor: #444;
|
|
@lightNavBG: #fff;
|
|
@lightNavHoverBG: #f6f6f6;
|
|
@lightNavBorder: #ccc;
|
|
|
|
@darkBG: #222222;
|
|
@darkTextColor: #ffffff;
|
|
@darkLinkColor: #ccc;
|
|
@darkNavBG: #393939;
|
|
@darkNavHoverBG: #555;
|
|
@darkNavBorder: #333;
|
|
|
|
.pad-theme-transition {
|
|
-moz-transition-property: background-color, color;
|
|
-webkit-transition-property: background-color, color;
|
|
-o-transition-property: background-color, color;
|
|
transition-property: background-color, color;
|
|
.transition-duration(0.25s);
|
|
}
|
|
|
|
body#pad-sub #posts, .atoms {
|
|
h3 {
|
|
a {
|
|
color: @lightTextColor;
|
|
&:hover {
|
|
color: darken(@lightTextColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
h3, h4 {
|
|
a {
|
|
color: @lightTextColor;
|
|
&:hover {
|
|
color: darken(@lightTextColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
date, .electron {
|
|
color: #999;
|
|
}
|
|
a.action, a {
|
|
color: @lightLinkColor;
|
|
&:hover {
|
|
color: darken(@lightLinkColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
body#pad, body#pad-sub {
|
|
.pad-theme-transition;
|
|
|
|
&.light {
|
|
background-color: @lightBG;
|
|
color: @lightTextColor;
|
|
#tools {
|
|
.pad-theme-transition;
|
|
background-color: transparent;
|
|
h1 {
|
|
a {
|
|
color: @headerTextColor;
|
|
}
|
|
}
|
|
#belt {
|
|
a, button {
|
|
color: #000;
|
|
}
|
|
}
|
|
.tool {
|
|
&#status {
|
|
color: #999;
|
|
}
|
|
}
|
|
.hidden {
|
|
&#wc {
|
|
color: #777;
|
|
}
|
|
}
|
|
a:hover, a:active {
|
|
background-color: transparent;
|
|
color: @lightLinkColor;
|
|
}
|
|
}
|
|
.modal {
|
|
border-color: @lightNavBorder;
|
|
background: @lightNavBG;
|
|
}
|
|
}
|
|
|
|
&.dark {
|
|
background-color: @darkBG;
|
|
color: @darkTextColor;
|
|
#tools {
|
|
.pad-theme-transition;
|
|
background-color: #262626;
|
|
h1 {
|
|
a {
|
|
color: @darkTextColor;
|
|
}
|
|
}
|
|
#belt {
|
|
a, button {
|
|
color: white;
|
|
}
|
|
}
|
|
.tool {
|
|
&#status {
|
|
color: #666;
|
|
}
|
|
}
|
|
.hidden {
|
|
&#wc {
|
|
color: #ececec;
|
|
}
|
|
}
|
|
a:hover, a:active {
|
|
background-color: transparent;
|
|
color: @darkLinkColor;
|
|
}
|
|
nav {
|
|
&> ul > li a {
|
|
color: @darkTextColor;
|
|
}
|
|
ul {
|
|
ul {
|
|
background: @darkNavBG;
|
|
border-color: @darkNavBorder;
|
|
}
|
|
li {
|
|
&.current-user {
|
|
color: #fff;
|
|
}
|
|
&.selected {
|
|
a {
|
|
color: #777;
|
|
}
|
|
}
|
|
}
|
|
li:hover {
|
|
background: @darkNavHoverBG;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#posts {
|
|
h3 {
|
|
a {
|
|
color: @darkTextColor;
|
|
&:hover {
|
|
color: darken(@darkTextColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
h3, h4 {
|
|
a {
|
|
color: @darkTextColor;
|
|
&:hover {
|
|
color: darken(@darkTextColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
a.action, a {
|
|
color: @darkLinkColor;
|
|
&:hover {
|
|
color: darken(@darkLinkColor, 10%);
|
|
}
|
|
}
|
|
}
|
|
.modal {
|
|
border-color: @darkNavBorder;
|
|
background: @darkNavBG;
|
|
input {
|
|
color: #fff;
|
|
}
|
|
|
|
.form-hint {
|
|
color: #ccc;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: lighten(@primary, 8%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body#pad {
|
|
.pad-theme-transition;
|
|
|
|
textarea, #title {
|
|
.pad-theme-transition;
|
|
}
|
|
|
|
&.dark {
|
|
textarea, #title, #editor {
|
|
background-color: @darkBG;
|
|
color: @darkTextColor;
|
|
}
|
|
}
|
|
&.light {
|
|
textarea, #title, #editor {
|
|
background-color: @lightBG;
|
|
color: @lightTextColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
&.dark {
|
|
nav#top-nav {
|
|
a {
|
|
color: @darkLinkColor;
|
|
}
|
|
}
|
|
}
|
|
}
|