Commit 97eb7a8fb592282786cdf7a1591db859bf7e6cc8
New back button icon and minor header style tweaks
Oli Evans committed on 4/22/2017, 8:12:48 PMParent: e0a3d8fc98c17511ce174fb697bb8c117b8de5e1
Files changed
| main-window.js | changed |
| styles/base.mcss | changed |
| styles/main-window.mcss | changed |
| main-window.js | ||
|---|---|---|
| @@ -58,13 +58,13 @@ | ||
| 58 | 58 … | h('span.history', [ |
| 59 | 59 … | h('a', { |
| 60 | 60 … | 'ev-click': views.goBack, |
| 61 | 61 … | classList: [ when(views.canGoBack, '-active') ] |
| 62 | - }, '<'), | |
| 62 … | + }), | |
| 63 | 63 … | h('a', { |
| 64 | 64 … | 'ev-click': views.goForward, |
| 65 | 65 … | classList: [ when(views.canGoForward, '-active') ] |
| 66 | - }, '>') | |
| 66 … | + }) | |
| 67 | 67 … | ]), |
| 68 | 68 … | h('span.nav', [ |
| 69 | 69 … | tab('Public', '/public'), |
| 70 | 70 … | tab('Private', '/private') |
| styles/base.mcss | ||
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| 1 | 1 … | html, body { |
| 2 | 2 … | background: #f5f5f5 |
| 3 | 3 … | margin: 0 |
| 4 | - font-family: caption, sans-serif | |
| 4 … | + font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif | |
| 5 | 5 … | overflow: hidden |
| 6 | 6 … | height: 100% |
| 7 | 7 … | font-size: 12px |
| 8 | 8 … | -webkit-user-select: none |
| @@ -66,8 +66,22 @@ | ||
| 66 | 66 … | color: #FFF |
| 67 | 67 … | padding-right: 12px |
| 68 | 68 … | border-radius: 0 |
| 69 | 69 … | } |
| 70 … | + [type='search'] { | |
| 71 … | + padding: 4px 8px; | |
| 72 … | + border-radius: 3px; | |
| 73 … | + border: 0 none; | |
| 74 … | + background: #ffffff; | |
| 75 … | + color: #656565; | |
| 76 … | + font-size: 120%; | |
| 77 … | + width: 180px; | |
| 78 … | + box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1) | |
| 79 … | + :focus { | |
| 80 … | + outline: 0; | |
| 81 … | + box-shadow: inset 0 0 0px 1px #286bc3 | |
| 82 … | + } | |
| 83 … | + } | |
| 70 | 84 … | } |
| 71 | 85 … | |
| 72 | 86 … | ::-webkit-file-upload-button { |
| 73 | 87 … | font-family: inherit |
| styles/main-window.mcss | ||
|---|---|---|
| @@ -10,48 +10,82 @@ | ||
| 10 | 10 … | } |
| 11 | 11 … | |
| 12 | 12 … | div.top { |
| 13 | 13 … | display: flex; |
| 14 … | + align-items: center; | |
| 14 | 15 … | background: #fff; |
| 15 | - padding: 10px; | |
| 16 … | + padding: 6px; | |
| 16 | 17 … | border-bottom: 2px solid #e4edff; |
| 17 | 18 … | box-shadow: 0 0 3px #7f7f7f; |
| 18 | 19 … | position: relative; |
| 19 | 20 … | z-index: 100 |
| 20 | 21 … | |
| 21 | - span { | |
| 22 … | + span.history { | |
| 23 … | + padding-left: 6px | |
| 24 … | + height: 26px; | |
| 25 … | + display: inline-block | |
| 26 … | + a { | |
| 27 … | + cursor: pointer; | |
| 28 … | + text-decoration: none !important | |
| 29 … | + display: inline-block | |
| 30 … | + width: 28px | |
| 31 … | + height: 100% | |
| 32 … | + border-radius: 2px | |
| 33 … | + background: svg(backArrow) no-repeat center | |
| 34 … | + opacity: 0.4 | |
| 35 … | + -active { | |
| 36 … | + opacity: 1 | |
| 37 … | + } | |
| 38 … | + :hover { | |
| 39 … | + background-color: #E8E8E8 | |
| 40 … | + } | |
| 41 … | + } | |
| 22 | 42 … | |
| 23 | - input.search { | |
| 24 | - padding: 2px 4px; | |
| 25 | - border: 01px solid #c7c6c6; | |
| 26 | - border-radius: 4px; | |
| 27 | - background: #ffffff; | |
| 28 | - color: #656565; | |
| 29 | - font-size: 120%; | |
| 30 | - margin-top: -3px; | |
| 31 | - width: 180px; | |
| 43 … | + a + a { | |
| 44 … | + transform: rotate(180deg) | |
| 32 | 45 … | } |
| 33 | 46 … | |
| 47 … | + @svg backArrow { | |
| 48 … | + width: 14px | |
| 49 … | + height: 14px | |
| 50 … | + content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>' | |
| 51 … | + | |
| 52 … | + path { | |
| 53 … | + stroke: #979797 | |
| 54 … | + } | |
| 55 … | + | |
| 56 … | + -active { | |
| 57 … | + path { | |
| 58 … | + fill: #DDD | |
| 59 … | + } | |
| 60 … | + } | |
| 61 … | + } | |
| 62 … | + } | |
| 63 … | + | |
| 64 … | + span.nav { | |
| 65 … | + display: inline-block | |
| 34 | 66 … | a { |
| 35 | - padding: 2px 8px; | |
| 36 | - border: 2px solid #c7c6c6; | |
| 37 | - border-radius: 4px; | |
| 38 | - background: #dedede; | |
| 67 … | + padding: 4px 10px; | |
| 68 … | + border-radius: 3px; | |
| 69 … | + background: #f3f3f3; | |
| 39 | 70 … | color: #656565; |
| 40 | 71 … | font-size: 120%; |
| 72 … | + font-weight: 200; | |
| 41 | 73 … | cursor: pointer; |
| 42 | - margin-left: 5px; | |
| 74 … | + margin-left: 8px; | |
| 43 | 75 … | text-decoration: none !important |
| 44 | 76 … | |
| 45 | 77 … | :hover { |
| 46 | 78 … | color: black |
| 47 | - border-color: #888 | |
| 79 … | + background: #E8E8E8 | |
| 48 | 80 … | } |
| 49 | 81 … | |
| 50 | 82 … | -selected { |
| 51 | - border-color: #444 | |
| 52 | - background: #CCC | |
| 83 … | + background: #d2d2d2 | |
| 53 | 84 … | color: black |
| 85 … | + :hover { | |
| 86 … | + background: #d2d2d2 | |
| 87 … | + } | |
| 54 | 88 … | } |
| 55 | 89 … | |
| 56 | 90 … | -add { |
| 57 | 91 … | border-color: #498849 |
| @@ -70,30 +104,15 @@ | ||
| 70 | 104 … | } |
| 71 | 105 … | } |
| 72 | 106 … | } |
| 73 | 107 … | |
| 74 | - span.history { | |
| 75 | - a { | |
| 76 | - opacity: 0.3 | |
| 77 | - | |
| 78 | - -active { | |
| 79 | - opacity: 1 | |
| 80 | - } | |
| 81 | - } | |
| 82 | - | |
| 83 | - a + a { | |
| 84 | - margin-left: 0 | |
| 85 | - } | |
| 86 | - } | |
| 87 | - | |
| 88 | 108 … | span.appTitle { |
| 89 | 109 … | flex: 1; |
| 90 | 110 … | text-align: center; |
| 91 | - font-size: 130%; | |
| 111 … | + font-size: 20px; | |
| 92 | 112 … | color: #757575; |
| 93 | - letter-spacing: 0.1em; | |
| 94 | - font-weight: bold; | |
| 95 | - font-weight: normal; | |
| 113 … | + letter-spacing: 1px; | |
| 114 … | + font-weight: 200; | |
| 96 | 115 … | -webkit-app-region: drag; |
| 97 | 116 … | } |
| 98 | 117 … | } |
| 99 | 118 … | |
Built with git-ssb-web