Improve themes. Load highlight.js properly

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

diff --git a/app/assets/javascripts/blob.js.coffee b/app/assets/javascripts/blob.js.coffee
index 99cb1ce..6cdfc18 100644 (file)
--- a/app/assets/javascripts/blob.js.coffee
+++ b/app/assets/javascripts/blob.js.coffee
@@ -17,7 +17,7 @@ class BlobView
 
       setHash(hash)
       e.preventDefault()
- 
+
     # See if there are lines selected
     # "#L12" and "#L34-56" supported
     highlightBlobLines = (e) ->

diff --git a/app/assets/javascripts/main.js.coffee b/app/assets/javascripts/main.js.coffee
index 3f7656d..dd71a4a 100644 (file)
--- a/app/assets/javascripts/main.js.coffee
+++ b/app/assets/javascripts/main.js.coffee
@@ -56,11 +56,12 @@ document.addEventListener("page:fetch", unbindEvents)
 document.addEventListener("page:change", stopSpinner)
 
 $ ->
+  $('pre code').each (i, e) ->
+    hljs.highlightBlock(e)
+
   # Click a .one_click_select field, select the contents
   $(".one_click_select").on 'click', -> $(@).select()
 
-  hljs.initHighlightingOnLoad()
-
   $('.remove-row').bind 'ajax:success', ->
     $(this).closest('li').fadeOut()
 

diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss
index 121bb8c..8dc3932 100644 (file)
--- a/app/assets/stylesheets/generic/files.scss
+++ b/app/assets/stylesheets/generic/files.scss
@@ -158,6 +158,11 @@
           font-size: 12px !important;
           line-height: 16px !important;
           margin: 0;
+
+          code {
+            white-space: pre;
+            word-wrap: normal;
+          }
         }
 
         .hljs {
@@ -171,6 +176,7 @@
           width: 60px;
 
           a {
+            font-family: $monospace_font;
             display: block;
             font-size: 12px !important;
             line-height: 16px !important;

diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 129d33d..1d544b3 100644 (file)
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -1,71 +1,192 @@
-.dark .highlight {
+.dark {
+  background-color: #232323;
 
-  background-color: #333;
+  .highlight{
+    border-left: 1px solid #444;
+  }
+
+  .line-numbers a {
+    color: #666;
+  }
 
   pre {
-    background-color: #333;
-    color: #eee;
-  }
-
-  .hll { display: block; background-color: darken($hover, 65%) }
-  .c { color: #888888; font-style: italic } /* Comment */
-  .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-  .k { color: #CDA869; font-weight: bold } /* Keyword */
-  .kp { color: #CDA869; font-weight: bold } /* Keyword */
-  .cm { color: #888888 } /* Comment.Multiline */
-  .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
-  .c1 { color: #888888 } /* Comment.Single */
-  .cs { color: #cc0000; font-weight: bold; background-color: transparent } /* Comment.Special */
-  .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gr { color: #aa0000 } /* Generic.Error */
-  .gh { color: #303030 } /* Generic.Heading */
-  .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-  .go { color: #888888 } /* Generic.Output */
-  .gp { color: #555555 } /* Generic.Prompt */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #606060 } /* Generic.Subheading */
-  .gt { color: #aa0000 } /* Generic.Traceback */
-  .kc{font-weight: bold;} /* Keyword.Constant */
-  .kd{font-weight: bold;} /* Keyword.Declaration */
-  .kn{font-weight: bold;} /* Keyword.Namespace */
-  .kp{font-weight: bold;} /* Keyword.Pseudo */
-  .kr{font-weight: bold;} /* Keyword.Reserved */
-  .kt{color: #458;font-weight: bold;} /* Keyword.Type */
-  .m { color: #0000DD; font-weight: bold } /* Literal.Number */
-  .p { color: #eee;  }
-  .s { color: #0AD; background-color: transparent } /* Literal.String */
-  .na{color: #008080;} /* Name.Attribute */
-  .nb{color: #0086B3;} /* Name.Builtin */
-  .nc{color: #ccc;font-weight: bold;} /* Name.Class */
-  .no{color: turquoise;} /* Name.Constant */
-  .ni{color: #800080;}
-  .ne{color: #900;font-weight: bold;} /* Name.Exception */
-  .nf{color: #ccc;font-weight: bold;} /* Name.Function */
-  .nn{color: #79C3E0;font-weight: bold;} /* Name.Namespace */
-  .nt{color: #fc5;} /* Name.Tag */
-  .nv{color: #FA4;} /* Name.Variable */
-  .py { color: #336699; font-weight: bold } /* Name.Property */
-  .ow { color: #008800 } /* Operator.Word */
-  .w { color: #bbbbbb } /* Text.Whitespace */
-  .mf { color: #7AC; font-weight: bold } /* Literal.Number.Float */
-  .mh { color: #7AC; font-weight: bold } /* Literal.Number.Hex */
-  .mi {color: #099;} /* Literal.Number.Integer */
-  .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
-  .sb { color: #dd2200; background-color: transparent; } /* Literal.String.Backtick */
-  .sc{color: #d14;} /* Literal.String.Char */
-  .sd { color: #dd2200; background-color: transparent; } /* Literal.String.Doc */
-  .s2{color: orange;} /* Literal.String.Double */
-  .se{color: orange;} /* Literal.String.Escape */
-  .sh{color: orange;} /* Literal.String.Heredoc */
-  .si{color: orange;} /* Literal.String.Interpol */
-  .sx{color: orange;} /* Literal.String.Other */
-  .sr{color: orange;} /* Literal.String.Regex */
-  .s1{color: orange;} /* Literal.String.Single */
-  .ss{color: orange;} /* Literal.String.Symbol */
-  .bp { color: #D58 } /* Name.Builtin.Pseudo */
-  .vc { color: #336699 } /* Name.Variable.Class */
-  .vg { color: #dd7700 } /* Name.Variable.Global */
-  .vi { color: cyan }
-}
+    background-color: #232323;
+  }
+
+  .hljs {
+    display: block;
+    padding: 0.5em;
+    background: #232323;
+    color: #E6E1DC;
+  }
+
+  .hljs-comment,
+  .hljs-template_comment,
+  .hljs-javadoc,
+  .hljs-shebang {
+    color: #BC9458;
+    font-style: italic;
+  }
+
+  .hljs-keyword,
+  .ruby .hljs-function .hljs-keyword,
+  .hljs-request,
+  .hljs-status,
+  .nginx .hljs-title,
+  .method,
+  .hljs-list .hljs-title {
+    color: #C26230;
+  }
+
+  .hljs-string,
+  .hljs-number,
+  .hljs-regexp,
+  .hljs-tag .hljs-value,
+  .hljs-cdata,
+  .hljs-filter .hljs-argument,
+  .hljs-attr_selector,
+  .apache .hljs-cbracket,
+  .hljs-date,
+  .tex .hljs-command,
+  .markdown .hljs-link_label {
+    color: #A5C261;
+  }
+
+  .hljs-subst {
+    color: #519F50;
+  }
+
+  .hljs-tag,
+  .hljs-tag .hljs-keyword,
+  .hljs-tag .hljs-title,
+  .hljs-doctype,
+  .hljs-sub .hljs-identifier,
+  .hljs-pi,
+  .input_number {
+    color: #E8BF6A;
+  }
+
+  .hljs-identifier {
+    color: #D0D0FF;
+  }
+
+  .hljs-class .hljs-title,
+  .haskell .hljs-type,
+  .smalltalk .hljs-class,
+  .hljs-javadoctag,
+  .hljs-yardoctag,
+  .hljs-phpdoc {
+    text-decoration: none;
+  }
+
+  .hljs-constant {
+    color: #DA4939;
+  }
+
+
+  .hljs-symbol,
+  .hljs-built_in,
+  .ruby .hljs-symbol .hljs-string,
+  .ruby .hljs-symbol .hljs-identifier,
+  .markdown .hljs-link_url,
+  .hljs-attribute {
+    color: #6D9CBE;
+  }
+
+  .markdown .hljs-link_url {
+    text-decoration: underline;
+  }
+
+
 
+  .hljs-params,
+  .hljs-variable,
+  .clojure .hljs-attribute {
+    color: #D0D0FF;
+  }
+
+  .css .hljs-tag,
+  .hljs-rules .hljs-property,
+  .hljs-pseudo,
+  .tex .hljs-special {
+    color: #CDA869;
+  }
+
+  .css .hljs-class {
+    color: #9B703F;
+  }
+
+  .hljs-rules .hljs-keyword {
+    color: #C5AF75;
+  }
+
+  .hljs-rules .hljs-value {
+    color: #CF6A4C;
+  }
+
+  .css .hljs-id {
+    color: #8B98AB;
+  }
+
+  .hljs-annotation,
+  .apache .hljs-sqbracket,
+  .nginx .hljs-built_in {
+    color: #9B859D;
+  }
+
+  .hljs-preprocessor,
+  .hljs-preprocessor *,
+  .hljs-pragma {
+    color: #8996A8 !important;
+  }
+
+  .hljs-hexcolor,
+  .css .hljs-value .hljs-number {
+    color: #A5C261;
+  }
+
+  .hljs-title,
+  .hljs-decorator,
+  .css .hljs-function {
+    color: #FFC66D;
+  }
+
+  .diff .hljs-header,
+  .hljs-chunk {
+    background-color: #2F33AB;
+    color: #E6E1DC;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .diff .hljs-change {
+    background-color: #4A410D;
+    color: #F8F8F8;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .hljs-addition {
+    background-color: #144212;
+    color: #E6E1DC;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .hljs-deletion {
+    background-color: #600;
+    color: #E6E1DC;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .coffeescript .javascript,
+  .javascript .xml,
+  .tex .hljs-formula,
+  .xml .javascript,
+  .xml .vbscript,
+  .xml .css,
+  .xml .hljs-cdata {
+    opacity: 0.7;
+  }
+}

diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index c9709fa..fb0da7c 100644 (file)
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -1,89 +1,140 @@
-$monokai-fg: #f8f8f2;
-$monokai-comment: #75715e;
-$monokai-pink: #f92672;
-$monokai-blue: #66d9ef;
-$monokai-green: #a6e22e;
-$monokai-gold: #e6db74;
-$monokai-dark: #3b3a32;
-$monokai-purple: #ae81ff;
+.monokai {
+  background-color: #272822;
 
-.monokai .highlight {
+  .highlight{
+    border-left: 1px solid #444;
+  }
 
-  background-color: #272822;
+  .line-numbers a {
+    color: #666;
+  }
 
   pre {
     background-color: #272822;
-    color: $monokai-fg;
+    color: #f8f8f2;
   }
 
-  .hll { background-color: darken($hover, 65%) }
-  .c  { color: $monokai-comment } /* Comment */
-  .err { color: $monokai-fg } /* Error */
-  .g  { color: $monokai-fg } /* Generic */
-  .k  { color: $monokai-pink } /* Keyword */
-  .l  { color: $monokai-fg } /* Literal */
-  .n  { color: $monokai-blue } /* Name */
-  .o  { color: $monokai-fg } /* Operator */
-  .x  { color: $monokai-fg } /* Other */
-  .p  { color: $monokai-fg } /* Punctuation */
-  .cm { color: $monokai-comment } /* Comment.Multiline */
-  .cp { color: $monokai-comment } /* Comment.Preproc */
-  .c1 { color: $monokai-comment } /* Comment.Single */
-  .cs { color: $monokai-comment } /* Comment.Special */
-  .gd { color: #8b0807 } /* Generic.Deleted */
-  .ge { color: $monokai-fg; text-decoration: underline } /* Generic.Emph */
-  .gr { color: $monokai-fg } /* Generic.Error */
-  .gh { color: $monokai-fg; font-weight: bold } /* Generic.Heading */
-  .gi { color: $monokai-fg; font-weight: bold; background-color: #46830c } /* Generic.Inserted */
-  .go { color: $monokai-dark; background-color: #31322c } /* Generic.Output */
-  .gp { color: $monokai-fg } /* Generic.Prompt */
-  .gs { color: $monokai-fg } /* Generic.Strong */
-  .gu { color: $monokai-fg; font-weight: bold } /* Generic.Subheading */
-  .gt { color: #f8f8f0; background-color: $monokai-pink } /* Generic.Traceback */
-  .kc { color: $monokai-purple } /* Keyword.Constant */
-  .kd { color: $monokai-pink } /* Keyword.Declaration */
-  .kn { color: $monokai-pink } /* Keyword.Namespace */
-  .kp { color: $monokai-pink } /* Keyword.Pseudo */
-  .kr { color: $monokai-pink } /* Keyword.Reserved */
-  .kt { color: $monokai-fg } /* Keyword.Type */
-  .ld { color: $monokai-fg } /* Literal.Date */
-  .m  { color: $monokai-purple } /* Literal.Number */
-  .s  { color: $monokai-gold } /* Literal.String */
-  .na { color: $monokai-purple } /* Name.Attribute */
-  .nb { color: $monokai-blue } /* Name.Builtin */
-  .nc { color: $monokai-fg } /* Name.Class */
-  .no { color: $monokai-fg } /* Name.Constant */
-  .nd { color: $monokai-fg } /* Name.Decorator */
-  .ni { color: $monokai-fg } /* Name.Entity */
-  .ne { color: $monokai-fg } /* Name.Exception */
-  .nf { color: $monokai-green } /* Name.Function */
-  .nl { color: $monokai-gold } /* Name.Label */
-  .nn { color: $monokai-fg } /* Name.Namespace */
-  .nx { color: $monokai-fg } /* Name.Other */
-  .nt { color: $monokai-pink } /* Name.Tag */
-  .nv { color: $monokai-blue; font-style: italic } /* Name.Variable */
-  .py { color: $monokai-fg } /* Name.Property */
-  .ow { color: $monokai-pink } /* Operator.Word */
-  .w  { color: $monokai-fg } /* Text.Whitespace */
-  .mf { color: $monokai-purple } /* Literal.Number.Float */
-  .mh { color: $monokai-purple } /* Literal.Number.Hex */
-  .mi { color: $monokai-purple } /* Literal.Number.Integer */
-  .mo { color: $monokai-purple } /* Literal.Number.Oct */
-  .sb { color: $monokai-gold } /* Literal.String.Backtick */
-  .sc { color: $monokai-gold } /* Literal.String.Char */
-  .sd { color: $monokai-gold } /* Literal.String.Doc */
-  .s2 { color: $monokai-gold } /* Literal.String.Double */
-  .se { color: $monokai-gold } /* Literal.String.Escape */
-  .sh { color: $monokai-gold } /* Literal.String.Heredoc */
-  .si { color: $monokai-gold } /* Literal.String.Interpol */
-  .sx { color: $monokai-gold } /* Literal.String.Other */
-  .sr { color: $monokai-gold } /* Literal.String.Regex */
-  .s1 { color: $monokai-gold } /* Literal.String.Single */
-  .ss { color: $monokai-gold } /* Literal.String.Symbol */
-  .bp { color: $monokai-fg } /* Name.Builtin.Pseudo */
-  .vc { color: $monokai-blue; font-style: italic } /* Name.Variable.Class */
-  .vg { color: $monokai-blue; font-style: italic } /* Name.Variable.Global */
-  .vi { color: $monokai-blue; font-style: italic } /* Name.Variable.Instance */
-  .il { color: $monokai-purple } /* Literal.Number.Integer.Long */
-}
+  .hljs {
+    display: block; padding: 0.5em;
+    background: #272822;
+  }
+
+  .hljs-tag,
+  .hljs-tag .hljs-title,
+  .hljs-keyword,
+  .hljs-literal,
+  .hljs-strong,
+  .hljs-change,
+  .hljs-winutils,
+  .hljs-flow,
+  .lisp .hljs-title,
+  .clojure .hljs-built_in,
+  .nginx .hljs-title,
+  .tex .hljs-special {
+    color: #F92672;
+  }
+
+  .hljs {
+    color: #DDD;
+  }
+
+  .hljs .hljs-constant,
+  .asciidoc .hljs-code {
+    color: #66D9EF;
+  }
 
+  .hljs-code,
+  .hljs-class .hljs-title,
+  .hljs-header {
+    color: white;
+  }
+
+  .hljs-link_label,
+  .hljs-attribute,
+  .hljs-symbol,
+  .hljs-symbol .hljs-string,
+  .hljs-value,
+  .hljs-regexp {
+    color: #BF79DB;
+  }
+
+  .hljs-link_url,
+  .hljs-tag .hljs-value,
+  .hljs-string,
+  .hljs-bullet,
+  .hljs-subst,
+  .hljs-title,
+  .hljs-emphasis,
+  .haskell .hljs-type,
+  .hljs-preprocessor,
+  .hljs-pragma,
+  .ruby .hljs-class .hljs-parent,
+  .hljs-built_in,
+  .sql .hljs-aggregate,
+  .django .hljs-template_tag,
+  .django .hljs-variable,
+  .smalltalk .hljs-class,
+  .hljs-javadoc,
+  .django .hljs-filter .hljs-argument,
+  .smalltalk .hljs-localvars,
+  .smalltalk .hljs-array,
+  .hljs-attr_selector,
+  .hljs-pseudo,
+  .hljs-addition,
+  .hljs-stream,
+  .hljs-envvar,
+  .apache .hljs-tag,
+  .apache .hljs-cbracket,
+  .tex .hljs-command,
+  .hljs-prompt {
+    color: #A6E22E;
+  }
+
+  .hljs-comment,
+  .java .hljs-annotation,
+  .smartquote,
+  .hljs-blockquote,
+  .hljs-horizontal_rule,
+  .python .hljs-decorator,
+  .hljs-template_comment,
+  .hljs-pi,
+  .hljs-doctype,
+  .hljs-deletion,
+  .hljs-shebang,
+  .apache .hljs-sqbracket,
+  .tex .hljs-formula {
+    color: #75715E;
+  }
+
+  .hljs-keyword,
+  .hljs-literal,
+  .css .hljs-id,
+  .hljs-phpdoc,
+  .hljs-title,
+  .hljs-header,
+  .haskell .hljs-type,
+  .vbscript .hljs-built_in,
+  .sql .hljs-aggregate,
+  .rsl .hljs-built_in,
+  .smalltalk .hljs-class,
+  .diff .hljs-header,
+  .hljs-chunk,
+  .hljs-winutils,
+  .bash .hljs-variable,
+  .apache .hljs-tag,
+  .tex .hljs-special,
+  .hljs-request,
+  .hljs-status {
+    font-weight: bold;
+  }
+
+  .coffeescript .javascript,
+  .javascript .xml,
+  .tex .hljs-formula,
+  .xml .javascript,
+  .xml .vbscript,
+  .xml .css,
+  .xml .hljs-cdata {
+    opacity: 0.5;
+  }
+}

diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 1a35d1e..694f359 100644 (file)
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -10,6 +10,10 @@
     color: #eee;
   }
 
+  .line-numbers a {
+    color: #666;
+  }
+
   .hljs {
     display: block;
     padding: 0.5em;

diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 855e6ca..7eec3da 100644 (file)
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -2,7 +2,7 @@
   background-color: #fff;
 
   .highlight{
-    border-left: 1px solid #ddd;
+    border-left: 1px solid #eee;
   }
 
   pre {
@@ -17,6 +17,158 @@
   .line-numbers a {
     color: #999;
   }
+
+  .hljs {
+    display: block; padding: 0.5em;
+    background: #fff; color: black;
+  }
+
+  .hljs-comment,
+  .hljs-template_comment,
+  .hljs-javadoc,
+  .hljs-comment * {
+    color: #006a00;
+  }
+
+  .hljs-keyword,
+  .hljs-literal,
+  .nginx .hljs-title {
+    color: #aa0d91;
+  }
+  .method,
+  .hljs-list .hljs-title,
+  .hljs-tag .hljs-title,
+  .setting .hljs-value,
+  .hljs-winutils,
+  .tex .hljs-command,
+  .http .hljs-title,
+  .hljs-request,
+  .hljs-status {
+    color: #008;
+  }
+
+  .hljs-envvar,
+  .tex .hljs-special {
+    color: #660;
+  }
+
+  .hljs-string {
+    color: #c41a16;
+  }
+  .hljs-tag .hljs-value,
+  .hljs-cdata,
+  .hljs-filter .hljs-argument,
+  .hljs-attr_selector,
+  .apache .hljs-cbracket,
+  .hljs-date,
+  .hljs-regexp {
+    color: #080;
+  }
+
+  .hljs-sub .hljs-identifier,
+  .hljs-pi,
+  .hljs-tag,
+  .hljs-tag .hljs-keyword,
+  .hljs-decorator,
+  .ini .hljs-title,
+  .hljs-shebang,
+  .hljs-prompt,
+  .hljs-hexcolor,
+  .hljs-rules .hljs-value,
+  .hljs-symbol,
+  .hljs-symbol .hljs-string,
+  .hljs-number,
+  .css .hljs-function,
+  .clojure .hljs-title,
+  .clojure .hljs-built_in,
+  .hljs-function .hljs-title,
+  .coffeescript .hljs-attribute {
+    color: #1c00cf;
+  }
+
+  .hljs-class .hljs-title,
+  .haskell .hljs-type,
+  .smalltalk .hljs-class,
+  .hljs-javadoctag,
+  .hljs-yardoctag,
+  .hljs-phpdoc,
+  .hljs-typename,
+  .hljs-tag .hljs-attribute,
+  .hljs-doctype,
+  .hljs-class .hljs-id,
+  .hljs-built_in,
+  .setting,
+  .hljs-params,
+  .clojure .hljs-attribute {
+    color: #5c2699;
+  }
+
+  .hljs-variable {
+   color: #3f6e74;
+  }
+  .css .hljs-tag,
+  .hljs-rules .hljs-property,
+  .hljs-pseudo,
+  .hljs-subst {
+    color: #000;
+  }
+
+  .css .hljs-class,
+  .css .hljs-id {
+    color: #9B703F;
+  }
+
+  .hljs-value .hljs-important {
+    color: #ff7700;
+    font-weight: bold;
+  }
+
+  .hljs-rules .hljs-keyword {
+    color: #C5AF75;
+  }
+
+  .hljs-annotation,
+  .apache .hljs-sqbracket,
+  .nginx .hljs-built_in {
+    color: #9B859D;
+  }
+
+  .hljs-preprocessor,
+  .hljs-preprocessor *,
+  .hljs-pragma {
+    color: #643820;
+  }
+
+  .tex .hljs-formula {
+    background-color: #EEE;
+    font-style: italic;
+  }
+
+  .diff .hljs-header,
+  .hljs-chunk {
+    color: #808080;
+    font-weight: bold;
+  }
+
+  .diff .hljs-change {
+    background-color: #BCCFF9;
+  }
+
+  .hljs-addition {
+    background-color: #BAEEBA;
+  }
+
+  .hljs-deletion {
+    background-color: #FFC8BD;
+  }
+
+  .hljs-comment .hljs-yardoctag {
+    font-weight: bold;
+  }
+
+  .method .hljs-id {
+    color: #000;
+  }
 }
 
 .shadow {