github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify the style of note

Browse Source
This commit is contained in:
Mimi 2020-05-29 16:39:32 +08:00
parent 74fa9ecc05
commit 2b7a638c8d
2 changed files with 82 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
source/css/_common/scaffolding/tags/note.styl
View File

@ -1,6 +1,7 @@
.post-body .note {
$note-icons = hexo-config('note.icons');
$note-style = hexo-config('note.style');
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger';
border-radius: $note-border-radius;
margin-bottom: 20px;
@ -51,7 +52,7 @@
&::before {
font-size: 1.5em;
left: .4em;
left: .3em;
position: absolute;
top: calc(50% - 1em);
font-family-icons();
@ -59,255 +60,47 @@
}
}
&.default {
if ($note-style == 'flat') {
background: $note-default-bg;
}
for $type in $note-types {
&.{$type} {
if ($note-style == 'flat') {
background: lookup('$note-bg-' + $type);
}
if ($note-style == 'modern') {
background: $note-modern-default-bg;
border-color: $note-modern-default-border;
color: $note-modern-default-text;
if ($note-style == 'modern') {
background: lookup('$note-modern-bg-' + $type);
border-color: lookup('$note-modern-border-' + $type);
color: lookup('$note-modern-text-' + $type);
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-default-text;
color: $note-modern-default-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid lookup('$note-modern-text-' + $type);
color: lookup('$note-modern-text-' + $type);
&:hover {
border-bottom: 1px solid $note-modern-default-hover;
color: $note-modern-default-hover;
&:hover {
border-bottom: 1px solid lookup('$note-modern-hover-' + $type);
color: lookup('$note-modern-hover-' + $type);
}
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-default-border;
if ($note-style != 'modern') {
border-left-color: lookup('$note-border-' + $type);
h2, h3, h4, h5, h6 {
color: $note-default-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-default-icon;
if ($note-style != 'modern') {
color: $note-default-text;
h2, h3, h4, h5, h6 {
color: lookup('$note-text-' + $type);
}
}
}
}
&.primary {
if ($note-style == 'flat') {
background: $note-primary-bg;
}
if ($note-icons) {
&:not(.no-icon)::before {
content: lookup('$note-icon-' + $type);
if ($note-style == 'modern') {
background: $note-modern-primary-bg;
border-color: $note-modern-primary-border;
color: $note-modern-primary-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-primary-text;
color: $note-modern-primary-text;
&:hover {
border-bottom: 1px solid $note-modern-primary-hover;
color: $note-modern-primary-hover;
if ($note-style != 'modern') {
color: lookup('$note-text-' + $type);
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-primary-border;
h2, h3, h4, h5, h6 {
color: $note-primary-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-primary-icon;
if ($note-style != 'modern') {
color: $note-primary-text;
}
}
}
}
&.info {
if ($note-style == 'flat') {
background: $note-info-bg;
}
if ($note-style == 'modern') {
background: $note-modern-info-bg;
border-color: $note-modern-info-border;
color: $note-modern-info-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-info-text;
color: $note-modern-info-text;
&:hover {
border-bottom: 1px solid $note-modern-info-hover;
color: $note-modern-info-hover;
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-info-border;
h2, h3, h4, h5, h6 {
color: $note-info-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-info-icon;
if ($note-style != 'modern') {
color: $note-info-text;
}
}
}
}
&.success {
if ($note-style == 'flat') {
background: $note-success-bg;
}
if ($note-style == 'modern') {
background: $note-modern-success-bg;
border-color: $note-modern-success-border;
color: $note-modern-success-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-success-text;
color: $note-modern-success-text;
&:hover {
border-bottom: 1px solid $note-modern-success-hover;
color: $note-modern-success-hover;
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-success-border;
h2, h3, h4, h5, h6 {
color: $note-success-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-success-icon;
if ($note-style != 'modern') {
color: $note-success-text;
}
}
}
}
&.warning {
if ($note-style == 'flat') {
background: $note-warning-bg;
}
if ($note-style == 'modern') {
background: $note-modern-warning-bg;
border-color: $note-modern-warning-border;
color: $note-modern-warning-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-warning-text;
color: $note-modern-warning-text;
&:hover {
border-bottom: 1px solid $note-modern-warning-hover;
color: $note-modern-warning-hover;
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-warning-border;
h2, h3, h4, h5, h6 {
color: $note-warning-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-warning-icon;
if ($note-style != 'modern') {
color: $note-warning-text;
}
}
}
}
&.danger {
if ($note-style == 'flat') {
background: $note-danger-bg;
}
if ($note-style == 'modern') {
background: $note-modern-danger-bg;
border-color: $note-modern-danger-border;
color: $note-modern-danger-text;
a, span.exturl {
&:not(.btn) {
border-bottom: 1px solid $note-modern-danger-text;
color: $note-modern-danger-text;
&:hover {
border-bottom: 1px solid $note-modern-danger-hover;
color: $note-modern-danger-hover;
}
}
}
}
if ($note-style != 'modern') {
border-left-color: $note-danger-border;
h2, h3, h4, h5, h6 {
color: $note-danger-text;
}
}
if ($note-icons) {
&:not(.no-icon)::before {
content: $note-danger-icon;
if ($note-style != 'modern') {
color: $note-danger-text;
}
}
}
}
}

108
source/css/_variables/base.styl
View File

@ -284,70 +284,70 @@ $lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.
// Default
$note-border-radius = 3px;
$note-default-border = #777;
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg);
$note-default-text = $note-default-border;
$note-default-icon = "\f0a9";
$note-border-default = #777;
$note-bg-default = lighten(spin($note-border-default, 0), 94% + $lbg);
$note-text-default = $note-border-default;
$note-icon-default = "\f0a9";
$note-modern-default-border = #e1e1e1;
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
$note-modern-default-text = $grey-dim;
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%);
$note-modern-border-default = #e1e1e1;
$note-modern-bg-default = lighten(spin($note-modern-border-default, 10), 60% + ($lbg * 4));
$note-modern-text-default = $grey-dim;
$note-modern-hover-default = darken(spin($note-modern-text-default, -10), 32%);
// Primary
$note-primary-border = #6f42c1;
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg);
$note-primary-text = $note-primary-border;
$note-primary-icon = "\f055";
$note-border-primary = #6f42c1;
$note-bg-primary = lighten(spin($note-border-primary, 10), 92% + $lbg);
$note-text-primary = $note-border-primary;
$note-icon-primary = "\f055";
$note-modern-primary-border = #e1c2ff;
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
$note-modern-primary-text = #6f42c1;
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%);
$note-modern-border-primary = #e1c2ff;
$note-modern-bg-primary = lighten(spin($note-modern-border-primary, 10), 40% + ($lbg * 4));
$note-modern-text-primary = #6f42c1;
$note-modern-hover-primary = darken(spin($note-modern-text-primary, -10), 22%);
// Info
$note-info-border = #428bca;
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg);
$note-info-text = $note-info-border;
$note-info-icon = "\f05a";
$note-border-info = #428bca;
$note-bg-info = lighten(spin($note-border-info, -10), 91% + $lbg);
$note-text-info = $note-border-info;
$note-icon-info = "\f05a";
$note-modern-info-border = #b3e5ef;
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
$note-modern-info-text = #31708f;
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%);
$note-modern-border-info = #b3e5ef;
$note-modern-bg-info = lighten(spin($note-modern-border-info, 10), 50% + ($lbg * 4));
$note-modern-text-info = #31708f;
$note-modern-hover-info = darken(spin($note-modern-text-info, -10), 32%);
// Success
$note-success-border = #5cb85c;
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg);
$note-success-text = $note-success-border;
$note-success-icon = "\f058";
$note-border-success = #5cb85c;
$note-bg-success = lighten(spin($note-border-success, 10), 90% + $lbg);
$note-text-success = $note-border-success;
$note-icon-success = "\f058";
$note-modern-success-border = #d0e6be;
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
$note-modern-success-text = #3c763d;
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%);
$note-modern-border-success = #d0e6be;
$note-modern-bg-success = lighten(spin($note-modern-border-success, 10), 40% + ($lbg * 4));
$note-modern-text-success = #3c763d;
$note-modern-hover-success = darken(spin($note-modern-text-success, -10), 27%);
// Warning
$note-warning-border = #f0ad4e;
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg);
$note-warning-text = $note-warning-border;
$note-warning-icon = "\f06a";
$note-border-warning = #f0ad4e;
$note-bg-warning = lighten(spin($note-border-warning, 10), 88% + $lbg);
$note-text-warning = $note-border-warning;
$note-icon-warning = "\f06a";
$note-modern-warning-border = #fae4cd;
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
$note-modern-warning-text = #8a6d3b;
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%);
$note-modern-border-warning = #fae4cd;
$note-modern-bg-warning = lighten(spin($note-modern-border-warning, 10), 43% + ($lbg * 4));
$note-modern-text-warning = #8a6d3b;
$note-modern-hover-warning = darken(spin($note-modern-text-warning, -10), 18%);
// Danger
$note-danger-border = #d9534f;
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg);
$note-danger-text = $note-danger-border;
$note-danger-icon = "\f056";
$note-border-danger = #d9534f;
$note-bg-danger = lighten(spin($note-border-danger, -10), 92% + $lbg);
$note-text-danger = $note-border-danger;
$note-icon-danger = "\f056";
$note-modern-danger-border = #ebcdd2;
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
$note-modern-danger-text = #a94442;
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%);
$note-modern-border-danger = #ebcdd2;
$note-modern-bg-danger = lighten(spin($note-modern-border-danger, 10), 35% + ($lbg * 4));
$note-modern-text-danger = #a94442;
$note-modern-hover-danger = darken(spin($note-modern-text-danger, -10), 22%);
// Tabs border radius
// --------------------------------------------------
@ -355,9 +355,9 @@ $tbr = 0;
// Label colors
// --------------------------------------------------
$label-default = lighten(spin($note-default-border, 0), 89% + $lbg);
$label-primary = lighten(spin($note-primary-border, 10), 87% + $lbg);
$label-info = lighten(spin($note-info-border, -10), 86% + $lbg);
$label-success = lighten(spin($note-success-border, 10), 85% + $lbg);
$label-warning = lighten(spin($note-warning-border, 10), 83% + $lbg);
$label-danger = lighten(spin($note-danger-border, -10), 87% + $lbg);
$label-default = lighten(spin($note-border-default, 0), 89% + $lbg);
$label-primary = lighten(spin($note-border-primary, 10), 87% + $lbg);
$label-info = lighten(spin($note-border-info, -10), 86% + $lbg);
$label-success = lighten(spin($note-border-success, 10), 85% + $lbg);
$label-warning = lighten(spin($note-border-warning, 10), 83% + $lbg);
$label-danger = lighten(spin($note-border-danger, -10), 87% + $lbg);