Parcourir la source

Update options page styles

simov il y a 6 ans
Parent
commit
abc7781388
4 fichiers modifiés avec 44 ajouts et 28 suppressions
  1. 0 4
      build/mdc/mdc.scss
  2. 1 0
      build/mdc/mdc.sh
  3. 5 11
      content/options.html
  4. 38 13
      css/options.css

+ 0 - 4
build/mdc/mdc.scss

@@ -4,11 +4,7 @@ $mdc-theme-secondary: #607d8b;
 $mdc-theme-background: #fff;
 
 @import "@material/button/mdc-button";
-@import "@material/elevation/mdc-elevation";
 @import "@material/ripple/mdc-ripple";
 @import "@material/switch/mdc-switch";
 @import "@material/tabs/mdc-tabs";
 @import "@material/textfield/mdc-text-field";
-@import "@material/theme/mdc-theme";
-@import "@material/toolbar/mdc-toolbar";
-@import "@material/typography/mdc-typography";

+ 1 - 0
build/mdc/mdc.sh

@@ -1,3 +1,4 @@
+#!/bin/bash
 
 # before
 cd build/mdc/

+ 5 - 11
content/options.html

@@ -12,18 +12,12 @@
 </head>
 <body class="mdc-typography">
   <div id="wrapper">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z2">
-      <div class="mdc-toolbar__row">
-        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <span class="mdc-toolbar__title">Markdown Viewer</span>
-        </section>
-        <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
-          <nav class="mdc-tab-bar">
-            <a class="mdc-tab" href="https://github.com/simov/markdown-viewer#advanced-options">Help</a>
-          </nav>
-        </section>
+    <div id="header" class="mdc-elevation--z2">
+      <div class="holder">
+        <span>Markdown Viewer</span>
+        <a href="https://github.com/simov/markdown-viewer#advanced-options">Help</a>
       </div>
-    </header>
+    </div>
     <main></main>
     <div id="footer-push">&nbsp;</div>
   </div>

+ 38 - 13
css/options.css

@@ -9,16 +9,15 @@ html, body {
   min-height: 100%;
   height: auto !important;
   height: 100%;
-  margin: 0 auto -52px;
+  margin: 0 auto -40px;
 }
 footer, #footer-push {
-  height: 20px;
+  height: 40px;
   text-align: center;
 }
 
 
 /*center content on large screens*/
-.mdc-toolbar__row,
 main {
   max-width: 1200px;
   margin: 0 auto;
@@ -26,14 +25,10 @@ main {
 
 /*font family*/
 body,
-body #wrapper,
-body #wrapper header.mdc-toolbar .mdc-toolbar__title,
-body #wrapper header.mdc-toolbar nav.mdc-tab-bar a,
 body label,
 body input,
 body select,
-body button,
-body h4 {
+body button {
   font-family: 'Monospace', monospace !important;
 }
 
@@ -42,22 +37,43 @@ body h4 {
 main {
   padding: 90px 0 30px 0;
 }
+a { text-decoration: none; }
+a:hover { text-decoration: none; }
 
 
 /*header*/
-header .mdc-toolbar__title { margin: 0; }
-header nav { float: right; margin: 0 !important; }
-header nav a { color: #fff !important; min-width: auto !important; }
+#header {
+  background: #607d8b;
+  position: fixed;
+  z-index: 100;
+  width: 100%;
+  height: 60px;
+  font-size: 20px;
+  line-height: 60px;
+  color: #fff;
+}
+#header .holder {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+#header span {
+}
+#header a {
+  font-size: 16px;
+  color: #fff;
+}
 
 
 /*footer*/
 footer {
   font-size: 14px;
-  line-height: 20px;
+  line-height: 40px;
   color: #9e9e9e;
   text-align: center;
   background: #424242;
-  padding: 16px 40px;
 }
 footer a {
   color: #9e9e9e;
@@ -112,10 +128,19 @@ footer .icon-hidden {
   margin: 0 0 30px 0;
 }
 .bs-callout h4 {
+  font-size: 24px;
   line-height: 36px;
+  font-weight: normal;
   margin: 0 !important;
 }
 
+.mdc-elevation--z2 {
+  box-shadow:
+    0 3px 1px -2px rgba(0,0,0,.2),
+    0 2px 2px 0 rgba(0,0,0,.14),
+    0 1px 5px 0 rgba(0,0,0,.12);
+}
+
 
 /*button*/
 .m-button {