writefreely/less/pad-theme.less
Matt Baer f76bfebfde Add dedicated Title field to WYSIWYG editor
This takes styling from the Classic Editor on Write.as.

It adds all application code for auto-saving the title, publishing it
with the post body, and including it in the word count.
2020-03-11 13:28:02 -04:00

217 lines
3.2 KiB
Text

@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;
}
}
}
}