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