change theme

it4i_theme/assets/stylesheets/application.css

@@ -55,9 +55,8 @@ a {
     color: inherit;
 }
 a, button, input, label {
-    -webkit-tap-highlight-color: rgba(0, 0, 255, 0);
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     -webkit-tap-highlight-color: transparent;
-    color: rgba(0, 0, 0, .54);
 }
 h1, h2, h3, h4, h5, h6 {
     font-weight: inherit;
@@ -153,7 +152,7 @@ body {
 }
 @supports (-webkit-appearance:none) {
     body {
-    background: #fff0e6;
+    background: #e84e40;
 }
 }.ios body {
     background: #fff;
@@ -178,7 +177,7 @@ hr {
 }
 .header {
     box-shadow: 0 1.5px 3px rgba(0, 0, 0, .24), 0 3px 8px rgba(0, 0, 0, .05);
-    background: #fff0e6;
+    background: #e84e40;
     color: #fff;
 }
 .ios.standalone .header:before {
@@ -236,6 +235,9 @@ hr {
     z-index: -1;
 }
 .backdrop-paper {
+    max-width: 1200px;
+    height: 100%;
+    margin-left: auto;
     margin-right: auto;
 }
 .backdrop-paper:after {
@@ -269,6 +271,9 @@ hr {
 }
 .bar {
     display: table;
+    max-width: 1184px;
+    margin-left: auto;
+    margin-right: auto;
 }
 .bar a {
     display: block;
@@ -281,6 +286,7 @@ hr {
 }
 .button {
     display: table-cell;
+    vertical-align: top;
     width: 1%}
 .button button {
     margin: 0;
@@ -294,6 +300,7 @@ hr {
 .button .icon {
     display: inline-block;
     font-size: 24px;
+    padding: 8px;
     margin: 4px;
 }
 .stretch {
@@ -315,6 +322,7 @@ hr {
 }
 .main {
     max-width: 1200px;
+    margin-left: auto;
     margin-right: auto;
 }
 body, input {
@@ -348,14 +356,20 @@ body, input {
     transition: box-shadow .4s, opacity .4s;
 }
 .drawer .toc a.current, .drawer .toc a:focus, .drawer .toc a:hover {
-    color: #fff0e6;
+    color: #e84e40;
 }
 .drawer .anchor a {
-    border-left: 2px solid #fff0e6;
+    border-left: 2px solid #e84e40;
+}
+.drawer .section {
+    color: rgba(0, 0, 0, .54);
 }
 .ios.standalone .project:before {
     background: rgba(0, 0, 0, .12);
 }
+.project .logo img {
+    background: #fff;
+    border-radius: 100%}
 .project:focus .logo img, .project:hover .logo img {
     box-shadow: 0 4px 7px rgba(0, 0, 0, .23), 0 8px 25px rgba(0, 0, 0, .05);
 }
@@ -380,7 +394,7 @@ body, input {
 }
 .drawer {
     width: 262px;
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1em;
 }
 .ios .drawer {
@@ -438,6 +452,7 @@ body, input {
 }
 .project .logo img {
     display: block;
+    width: 64px;
     height: 64px;
 }
 .project .name {
@@ -448,11 +463,11 @@ body, input {
     vertical-align: middle;
 }
 .project .logo+.name {
-    font-size: 20px;
+    font-size: 12px;
 }
 .repo {
     margin: 24px 0;
-    text-align: left;
+    text-align: center;
 }
 .repo li {
     display: inline-block;
@@ -490,12 +505,14 @@ body, input {
 .no-js .repo a .count {
     display: none;
 }
+.drawer .toc li a {
+    font-weight: 700;
+}
 .drawer .toc li.anchor a {
     font-weight: 400;
 }
 .drawer .section, .repo a {
-    font-weight: 500;
-    background-color: #ddd;
+    font-weight: 700;
 }
 .repo a {
     text-transform: uppercase;
@@ -513,15 +530,18 @@ pre span {
     transition: color .25s;
 }
 .ios.standalone .article {
-    background: -webkit-linear-gradient(top, #fff 50%, #fff0e6 0);
-    background: linear-gradient(180deg, #fff 50%, #fff0e6 0);
+    background: -webkit-linear-gradient(top, #fff 50%, #e84e40 0);
+    background: linear-gradient(180deg, #fff 50%, #e84e40 0);
 }
 .ios.standalone .article .wrapper {
     background: -webkit-linear-gradient(top, #fff 50%, #fff 0);
     background: linear-gradient(180deg, #fff 50%, #fff 0);
 }
 .article a, .article h1, .article h2 {
-    color: #fff0e6;
+    color: #e84e40;
+}
+.article code {
+    background: #eee;
 }
 .article kbd {
     color: #555;
@@ -560,7 +580,7 @@ pre span {
     color: rgba(0, 0, 0, .54);
 }
 .footer {
-    background: #fff0e6;
+    background: #e84e40;
     color: #fff;
 }
 .footer a {
@@ -576,13 +596,14 @@ pre span {
     color: hsla(0, 0%, 100%, .7);
 }
 .admonition {
-    background: #e6f2ff;
+    background: #29b6f6;
+    color: #fff;
 }
 .admonition pre {
     background: hsla(0, 0%, 100%, .3);
 }
 .admonition.warning {
-    background: #fff0e6;
+    background: #e84e40;
 }
 .admonition a, .admonition a:hover {
     color: #fff;
@@ -717,7 +738,7 @@ h1 .article .headerlink {
     padding: 1.5em 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    text-align: left;
+    text-align: center;
 }
 .article .data table {
     display: inline-block;
@@ -768,7 +789,7 @@ h1 .article .headerlink {
     position: absolute;
     bottom: 40px;
     width: 100%;
-    font-size: 14px;
+    font-size: 15px;
     line-height: 20px;
     padding: 0 52px;
 }
@@ -891,7 +912,7 @@ h1 .article .headerlink {
     opacity: 1;
 }
 .results .meta {
-    background: #fff0e6;
+    background: #e84e40;
     color: #fff;
 }
 .results .list a {
@@ -1006,8 +1027,6 @@ h1 .article .headerlink {
     height: auto;
     margin-bottom: 96px;
     padding-top: 80px;
-    max-height: 1000px;
-    overflow:  auto;
 }
 .drawer, .drawer .scrollable {
     position: static;
@@ -1049,7 +1068,7 @@ h1 .article .headerlink {
 }
 .project {
     box-shadow: 0 1.5px 3px rgba(0, 0, 0, .24), 0 3px 8px rgba(0, 0, 0, .05);
-    background: #fff0e6;
+    background: #e84e40;
     color: #fff;
 }
 .drawer {
@@ -1058,6 +1077,11 @@ h1 .article .headerlink {
 }
 #toggle-search:checked~.main .results, .drawer, .toggle-search .results {
     height: 100%}
+}@media only screen and (min-width:720px) {
+    .header {
+    height: 64px;
+    padding: 8px;
+}
 .header .stretch {
     padding: 0 16px;
 }
@@ -1220,21 +1244,5 @@ h1 .article .headerlink {
     box-shadow: none;
 }
 .article table th {
-    color: #fff0e6;
-}
-a:not([href*="//"]) {
-    /* CSS for internal links */
-}
-
-a[href*="//"] {
-    /*CSS for external links */
-    background: transparent url("/img/external.png") no-repeat right 0px top 1px;
-    background-size: 12px;
-    padding: 1px 16px 1px 0px;    
-}
-
-#page-wrap {
-     width: 800px;
-     margin: 0 auto;
+    color: #e84e40;
 }
-