Commit ee0fc935174888cf68ff8a13b1c4a1d591e99223
style tuning
mix irving committed on 6/16/2018, 10:36:19 AMParent: 21be5e60c2dcc1845a9e7d20861c40e6b2ec6922
Files changed
| app/html/app.mcss | changed |
| app/page/settings.js | changed |
| app/styles/mcss/app-theme-vars.mcss | changed |
| app/styles/mcss/hypertabs.mcss | changed |
| app/html/app.mcss | ||
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| 1 | 1 … | App { |
| 2 | - background-color: var(--app-border-background) | |
| 2 … | + background: var(--app-border-background) | |
| 3 | 3 … | position: absolute |
| 4 | 4 … | |
| 5 | 5 … | top: 0 |
| 6 | 6 … | bottom: 0 |
| app/page/settings.js | ||
|---|---|---|
| @@ -24,9 +24,8 @@ | ||
| 24 | 24 … | 'ev-click': () => api.app.sync.goTo({ page: 'settings' }) |
| 25 | 25 … | }, '/settings') |
| 26 | 26 … | } |
| 27 | 27 … | |
| 28 | - | |
| 29 | 28 … | function settingsPage (location) { |
| 30 | 29 … | var page = h('SettingsPage', { title: '/settings' }, [ |
| 31 | 30 … | h('div.container', [ |
| 32 | 31 … | h('h1', 'Settings'), |
| @@ -40,9 +39,9 @@ | ||
| 40 | 39 … | }) |
| 41 | 40 … | ]) |
| 42 | 41 … | ]) |
| 43 | 42 … | |
| 44 | - var { container, content } = api.app.html.scroller({ prepend: page }) | |
| 45 | - container.title = 'Settings' | |
| 43 … | + var { container } = api.app.html.scroller({ prepend: page }) | |
| 44 … | + container.title = '/settings' | |
| 46 | 45 … | return container |
| 47 | 46 … | } |
| 48 | 47 … | } |
| app/styles/mcss/app-theme-vars.mcss | ||
|---|---|---|
| @@ -1,6 +1,5 @@ | ||
| 1 | 1 … | App { |
| 2 | - | |
| 3 | 2 … | --app-border-background: rgb(0, 0, 0) |
| 4 | 3 … | --app-border-background-mid: rgba(218, 139, 255, 0.47) |
| 5 | 4 … | --app-border-width: .3rem |
| 6 | 5 … | --app-border-color: rgb(255, 255, 255) |
| app/styles/mcss/hypertabs.mcss | |||
|---|---|---|---|
| @@ -36,56 +36,12 @@ | |||
| 36 | 36 … | display: flex | |
| 37 | 37 … | align-items: center | |
| 38 | 38 … | justify-content: space-between | |
| 39 | 39 … | ||
| 40 | - transition: all .1s ease-in | ||
| 41 | - | ||
| 42 | - :hover { | ||
| 43 | - background: var(--app-border-background-mid) | ||
| 44 | - | ||
| 45 | - a.link { | ||
| 46 | - color: var(--app-border-color) | ||
| 47 | - } | ||
| 48 | - | ||
| 49 | - a.close { | ||
| 50 | - visibility: visible | ||
| 51 | - } | ||
| 52 | - } | ||
| 53 | - | ||
| 54 | - -selected { | ||
| 55 | - color: var(--page-color) | ||
| 56 | - background: var(--page-background) | ||
| 57 | - | ||
| 58 | - a.link { | ||
| 59 | - color: var(--page-color) | ||
| 60 | - text-decoration: none | ||
| 61 | - max-width: calc(100% - 2rem) | ||
| 62 | - cursor: default | ||
| 63 | - } | ||
| 64 | - a.close { | ||
| 65 | - visibility: visible | ||
| 66 | - } | ||
| 67 | - | ||
| 68 | - :hover { | ||
| 69 | - background: var(--page-background) | ||
| 70 | - | ||
| 71 | - a.link { | ||
| 72 | - color: var(--page-color) | ||
| 73 | - } | ||
| 74 | - } | ||
| 75 | - | ||
| 76 | - } | ||
| 77 | - | ||
| 78 | - -notify { | ||
| 79 | - background-color: orange; | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | 40 … | a { | |
| 83 | 41 … | color: var(--app-border-color) | |
| 84 | - | ||
| 85 | - :hover { | ||
| 86 | - text-decoration: none | ||
| 87 | - } | ||
| 42 … | + outline: none | ||
| 43 … | + :hover { text-decoration: none } | ||
| 88 | 44 … | } | |
| 89 | 45 … | ||
| 90 | 46 … | a.link { | |
| 91 | 47 … | flex-grow: 1 | |
| @@ -102,9 +58,11 @@ | |||
| 102 | 58 … | ||
| 103 | 59 … | a.close { | |
| 104 | 60 … | visibility: hidden | |
| 105 | 61 … | font-family: monospace | |
| 62 … | + font-weight: 600 | ||
| 106 | 63 … | line-height: 1rem | |
| 64 … | + | ||
| 107 | 65 … | width: .9rem | |
| 108 | 66 … | height: .9rem | |
| 109 | 67 … | /* border-radius: 1rem */ | |
| 110 | 68 … | ||
| @@ -113,14 +71,49 @@ | |||
| 113 | 71 … | display: flex | |
| 114 | 72 … | justify-content: center | |
| 115 | 73 … | ||
| 116 | 74 … | :hover { | |
| 117 | - background: #aaaaaa | ||
| 118 | - color: #fff | ||
| 119 | - font-weight: 600 | ||
| 75 … | + background: var(--page-background) | ||
| 76 … | + color: var(--page-color) | ||
| 120 | 77 … | } | |
| 121 | 78 … | } | |
| 122 | 79 … | ||
| 80 … | + :hover { | ||
| 81 … | + background: var(--app-border-background-mid) | ||
| 82 … | + a.link { color: var(--app-border-color) } | ||
| 83 … | + a.close { visibility: visible } | ||
| 84 … | + transition: all .2s ease-in | ||
| 85 … | + } | ||
| 86 … | + | ||
| 87 … | + -selected { | ||
| 88 … | + color: var(--page-color) | ||
| 89 … | + background: var(--page-background) | ||
| 90 … | + | ||
| 91 … | + a.link { | ||
| 92 … | + color: var(--page-color) | ||
| 93 … | + text-decoration: none | ||
| 94 … | + max-width: calc(100% - 2rem) | ||
| 95 … | + cursor: default | ||
| 96 … | + } | ||
| 97 … | + a.close { | ||
| 98 … | + visibility: visible | ||
| 99 … | + color: var(--page-color) | ||
| 100 … | + | ||
| 101 … | + :hover { | ||
| 102 … | + } | ||
| 103 … | + } | ||
| 104 … | + | ||
| 105 … | + :hover { | ||
| 106 … | + background: var(--page-background) | ||
| 107 … | + a.link { color: var(--page-color) } | ||
| 108 … | + transition: none | ||
| 109 … | + } | ||
| 110 … | + } | ||
| 111 … | + | ||
| 112 … | + -notify { | ||
| 113 … | + background-color: orange; | ||
| 114 … | + } | ||
| 115 … | + | ||
| 123 | 116 … | } | |
| 124 | 117 … | ||
| 125 | 118 … | } | |
| 126 | 119 … | ||
Built with git-ssb-web