diff --git a/src/theme/book.css b/src/theme/book.css index 04e94ed1..0a129cc4 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -25,6 +25,15 @@ h5 { .header + .header h5 { margin-top: 1em; } +table { + margin: 0 auto; +} +table thead td { + font-weight: 700; +} +table td { + padding: 3px 20px; +} .sidebar { position: absolute; left: 0; @@ -285,35 +294,17 @@ h5 { } } .light { -/* Inline code */ color: #333; background-color: #fff; -} -.light :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - -webkit-border-radius: 3px; - border-radius: 3px; -} -.light pre { - position: relative; -} -.light pre > .buttons { - position: absolute; - right: 5px; - top: 5px; - color: #364149; - cursor: pointer; -} -.light pre > .buttons :hover { - color: #008cff; -} -.light pre > .buttons i { - margin-left: 8px; -} -.light pre > .result { - margin-top: 10px; +/* + table { + thead td { + color: $table-header-fg; + backrgound: $table-header-bg; + } + } + */ +/* Inline code */ } .light .content .header:link, .light .content .header:visited { @@ -372,37 +363,53 @@ h5 { .light .theme-popup .theme:hover { background-color: #e6e6e6; } -.coal { -/* Inline code */ - color: #98a3ad; - background-color: #141617; +.light blockquote { + margin: 20px 0; + padding: 0 20px; + color: #333; + background-color: #f2f7f9; + border-top: 0.1em solid #e1edf1; + border-bottom: 0.1em solid #e1edf1; } -.coal :not(pre) > .hljs { +.light :not(pre) > .hljs { display: inline-block; vertical-align: middle; padding: 0.1em 0.3em; -webkit-border-radius: 3px; border-radius: 3px; } -.coal pre { +.light pre { position: relative; } -.coal pre > .buttons { +.light pre > .buttons { position: absolute; right: 5px; top: 5px; - color: #a1adb8; + color: #364149; cursor: pointer; } -.coal pre > .buttons :hover { - color: #3473ad; +.light pre > .buttons :hover { + color: #008cff; } -.coal pre > .buttons i { +.light pre > .buttons i { margin-left: 8px; } -.coal pre > .result { +.light pre > .result { margin-top: 10px; } +.coal { + color: #98a3ad; + background-color: #141617; +/* + table { + thead td { + color: $table-header-fg; + backrgound: $table-header-bg; + } + } + */ +/* Inline code */ +} .coal .content .header:link, .coal .content .header:visited { color: #98a3ad; @@ -460,37 +467,53 @@ h5 { .coal .theme-popup .theme:hover { background-color: #1f2124; } -.navy { -/* Inline code */ - color: #bcbdd0; - background-color: #161923; +.coal blockquote { + margin: 20px 0; + padding: 0 20px; + color: #98a3ad; + background-color: #242637; + border-top: 0.1em solid #2c2f44; + border-bottom: 0.1em solid #2c2f44; } -.navy :not(pre) > .hljs { +.coal :not(pre) > .hljs { display: inline-block; vertical-align: middle; padding: 0.1em 0.3em; -webkit-border-radius: 3px; border-radius: 3px; } -.navy pre { +.coal pre { position: relative; } -.navy pre > .buttons { +.coal pre > .buttons { position: absolute; right: 5px; top: 5px; - color: #c8c9db; + color: #a1adb8; cursor: pointer; } -.navy pre > .buttons :hover { - color: #2b79a2; +.coal pre > .buttons :hover { + color: #3473ad; } -.navy pre > .buttons i { +.coal pre > .buttons i { margin-left: 8px; } -.navy pre > .result { +.coal pre > .result { margin-top: 10px; } +.navy { + color: #bcbdd0; + background-color: #161923; +/* + table { + thead td { + color: $table-header-fg; + backrgound: $table-header-bg; + } + } + */ +/* Inline code */ +} .navy .content .header:link, .navy .content .header:visited { color: #bcbdd0; @@ -548,37 +571,53 @@ h5 { .navy .theme-popup .theme:hover { background-color: #282e40; } -.rust { -/* Inline code */ - color: #262625; - background-color: #e1e1db; +.navy blockquote { + margin: 20px 0; + padding: 0 20px; + color: #bcbdd0; + background-color: #262933; + border-top: 0.1em solid #2f333f; + border-bottom: 0.1em solid #2f333f; } -.rust :not(pre) > .hljs { +.navy :not(pre) > .hljs { display: inline-block; vertical-align: middle; padding: 0.1em 0.3em; -webkit-border-radius: 3px; border-radius: 3px; } -.rust pre { +.navy pre { position: relative; } -.rust pre > .buttons { +.navy pre > .buttons { position: absolute; right: 5px; top: 5px; color: #c8c9db; cursor: pointer; } -.rust pre > .buttons :hover { - color: #e69f67; +.navy pre > .buttons :hover { + color: #2b79a2; } -.rust pre > .buttons i { +.navy pre > .buttons i { margin-left: 8px; } -.rust pre > .result { +.navy pre > .result { margin-top: 10px; } +.rust { + color: #262625; + background-color: #e1e1db; +/* + table { + thead td { + color: $table-header-fg; + backrgound: $table-header-bg; + } + } + */ +/* Inline code */ +} .rust .content .header:link, .rust .content .header:visited { color: #262625; @@ -636,3 +675,37 @@ h5 { .rust .theme-popup .theme:hover { background-color: #99908a; } +.rust blockquote { + margin: 20px 0; + padding: 0 20px; + color: #262625; + background-color: #c1c1bb; + border-top: 0.1em solid #b8b8b1; + border-bottom: 0.1em solid #b8b8b1; +} +.rust :not(pre) > .hljs { + display: inline-block; + vertical-align: middle; + padding: 0.1em 0.3em; + -webkit-border-radius: 3px; + border-radius: 3px; +} +.rust pre { + position: relative; +} +.rust pre > .buttons { + position: absolute; + right: 5px; + top: 5px; + color: #c8c9db; + cursor: pointer; +} +.rust pre > .buttons :hover { + color: #e69f67; +} +.rust pre > .buttons i { + margin-left: 8px; +} +.rust pre > .result { + margin-top: 10px; +} diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl index c6d3555b..3ff21332 100644 --- a/src/theme/stylus/general.styl +++ b/src/theme/stylus/general.styl @@ -19,3 +19,10 @@ h2, h3 { margin-top: 2.5em } h4, h5 { margin-top: 2em } .header + .header h3, .header + .header h4, .header + .header h5 { margin-top: 1em } + +table { + margin: 0 auto; + + thead td { font-weight: 700; } + td { padding: 3px 20px; } +} diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl index 3fc5a65a..db415d97 100644 --- a/src/theme/stylus/themes/base.styl +++ b/src/theme/stylus/themes/base.styl @@ -1,35 +1,4 @@ .{unquote($theme-name)} { - /* Inline code */ - :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - } - - pre { - position: relative; - } - pre > .buttons { - position: absolute; - right: 5px; - top: 5px; - - color: $sidebar-fg; - cursor: pointer; - - :hover { - color: $sidebar-active; - } - - i { - margin-left: 8px; - } - } - - pre > .result { - margin-top: 10px; - } color: $fg background-color: $bg @@ -97,4 +66,49 @@ .theme:hover { background-color: $theme-hover } } + + blockquote { + margin: 20px 0; + padding: 0 20px; + color: $fg; + background-color: $quote-bg; + border-top: .1em solid $quote-border; + border-bottom: .1em solid $quote-border; + } + + /* + table { + thead td { + color: $table-header-fg; + backrgound: $table-header-bg; + } + } + */ + + /* Inline code */ + :not(pre) > .hljs { + display: inline-block; + vertical-align: middle; + padding: 0.1em 0.3em; + border-radius: 3px; + } + + pre { + position: relative; + + & > .buttons { + position: absolute; + right: 5px; + top: 5px; + + color: $sidebar-fg; + cursor: pointer; + + :hover { color: $sidebar-active; } + i { margin-left: 8px; } + } + + & > .result { margin-top: 10px; } + + } } diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl index 0abb10a0..f66b92f4 100644 --- a/src/theme/stylus/themes/coal.styl +++ b/src/theme/stylus/themes/coal.styl @@ -18,4 +18,7 @@ $theme-popup-bg = #141617 $theme-popup-border = #43484d $theme-hover = #1f2124 +$quote-bg = #242637 +$quote-border = lighten($quote-bg, 5%) + @import 'base' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl index 871b0a8c..71b2b0f0 100644 --- a/src/theme/stylus/themes/light.styl +++ b/src/theme/stylus/themes/light.styl @@ -18,4 +18,7 @@ $theme-popup-bg = #fafafa $theme-popup-border = #cccccc $theme-hover = #e6e6e6 +$quote-bg = #f2f7f9 +$quote-border = darken($quote-bg, 5%) + @import 'base' diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl index 51d5aaf6..e4f3f43c 100644 --- a/src/theme/stylus/themes/navy.styl +++ b/src/theme/stylus/themes/navy.styl @@ -18,4 +18,7 @@ $theme-popup-bg = #161923 $theme-popup-border = #737480 $theme-hover = #282e40 +$quote-bg = #262933 +$quote-border = lighten($quote-bg, 5%) + @import 'base' diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl index 98227960..47c41301 100644 --- a/src/theme/stylus/themes/rust.styl +++ b/src/theme/stylus/themes/rust.styl @@ -18,4 +18,7 @@ $theme-popup-bg = #e1e1db $theme-popup-border = #b38f6b $theme-hover = #99908a +$quote-bg = #c1c1bb +$quote-border = darken($quote-bg, 5%) + @import 'base'