git ssb

16+

Dominic / patchbay



Commit 21be5e60c2dcc1845a9e7d20861c40e6b2ec6922

first pass css-properties restyle

mix irving committed on 6/16/2018, 7:43:47 AM
Parent: 344e29c28aafd900060f6c4a6eda8b01b1c1cd3a

Files changed

app/html/app.mcsschanged
app/styles/mcss/hypertabs.mcsschanged
app/styles/mcss/scrollbar.mcsschanged
app/styles/mcss/app-theme-vars.mcssadded
app/styles/mixins.jschanged
app/html/app.mcssView
@@ -1,11 +1,13 @@
11 App {
2 + background-color: var(--app-border-background)
23 position: absolute
34
45 top: 0
56 bottom: 0
67 left: 0
78 right: 0
9 +
810 overflow: hidden
911 min-height: 0px
1012 }
1113
app/styles/mcss/hypertabs.mcssView
@@ -1,69 +1,87 @@
11 Hypertabs {
22 display: flex
33 flex-direction: column
44
5- height: 100% /* needed to stop scroller blowing out */
5 + top: var(--app-border-width)
6 + bottom: var(--app-border-width)
7 + left: var(--app-border-width)
8 + right: var(--app-border-width)
69
10 + height: initial
11 +
712 nav {
813 display: flex
914
10- background: linear-gradient(to bottom, #efefef, #e5e5e5)
15 + background: none
1116
1217 section.tabs {
13- padding: .5rem 0 0 .5rem
18 + min-width: 0
1419
1520 flex-grow: 1
1621 display: flex
17- min-width: 0
1822
1923 div.tab {
2024 flex-grow: 1
2125
22- display: flex
23- align-items: center
24- justify-content: space-between
25-
2626 min-width: 3.5rem
2727 font-size: .9rem
28- background-color: #efefef
28 + background: rgba(0, 0, 0, 0)
29 +
2930 overflow: hidden
3031
3132 padding: 0
32- margin-left: .3rem
3333 border: none
34 + margin: 0 .3rem 0 0
3435
36 + display: flex
37 + align-items: center
38 + justify-content: space-between
39 +
40 + transition: all .1s ease-in
41 +
3542 :hover {
36- background-color: #f8f8f8
43 + background: var(--app-border-background-mid)
44 +
45 + a.link {
46 + color: var(--app-border-color)
47 + }
48 +
3749 a.close {
3850 visibility: visible
3951 }
4052 }
4153
4254 -selected {
43- color: #222
44- background-color: #fff
55 + color: var(--page-color)
56 + background: var(--page-background)
4557
46- :hover {
47- background-color: #fff
48- }
49-
5058 a.link {
59 + color: var(--page-color)
5160 text-decoration: none
5261 max-width: calc(100% - 2rem)
62 + cursor: default
5363 }
5464 a.close {
5565 visibility: visible
5666 }
67 +
68 + :hover {
69 + background: var(--page-background)
70 +
71 + a.link {
72 + color: var(--page-color)
73 + }
74 + }
75 +
5776 }
5877
5978 -notify {
6079 background-color: orange;
6180 }
6281
63-
6482 a {
65- color: #666
83 + color: var(--app-border-color)
6684
6785 :hover {
6886 text-decoration: none
6987 }
@@ -78,8 +96,9 @@
7896 white-space: nowrap
7997 text-overflow: ellipsis
8098
8199 padding: .45rem 0 .45rem .6rem
100 + /* padding: 0 0 var(--app-border-width) .6rem */
82101 }
83102
84103 a.close {
85104 visibility: hidden
@@ -105,21 +124,23 @@
105124
106125 }
107126
108127 div.navExtra {
109- padding-top: .2rem
128 + padding-bottom: var(--app-border-width)
110129 display: flex
111130 align-items: center
112131 }
113132 }
114133
115134 section.content {
116- // this margin brings the scroll-bar in
117- margin: .5rem .4rem
118- display: flex
135 + background-color: var(--page-background)
136 + // this brings the scroll-bar in
137 + padding: .5rem .4rem
119138
120139 height: 100% /* needed to stop making nav weird */
121140
141 + display: flex
142 +
122143 div.page {
123144 flex-grow: 1
124145
125146 display: flex /*hack to get give Scroller context it needs */
app/styles/mcss/scrollbar.mcssView
@@ -4,12 +4,12 @@
44 width: 8px
55 }
66
77 ::-webkit-scrollbar-thumb {
8- background-color: rgba(65, 3, 82, 0.48)
8 + background-color: var(--scrollbar-color)
99
1010 :hover {
11- background-color: rgba(65, 3, 82, 0.55)
11 + background-color: var(--scrollbar-color-hover)
1212 }
1313 }
1414
1515 ::-webkit-scrollbar-track {
app/styles/mcss/app-theme-vars.mcssView
@@ -1,0 +1,13 @@
1 +App {
2 +
3 + --app-border-background: rgb(0, 0, 0)
4 + --app-border-background-mid: rgba(218, 139, 255, 0.47)
5 + --app-border-width: .3rem
6 + --app-border-color: rgb(255, 255, 255)
7 +
8 + --page-background: rgb(255, 255, 255)
9 + --page-color: #222
10 +
11 + --scrollbar-color: rgba(65, 3, 82, 0.48)
12 + --scrollbar-color-hover: rgba(65, 3, 82, 0.55)
13 +}
app/styles/mixins.jsView
@@ -14,9 +14,9 @@
1414 }
1515
1616 const mainMixins = `
1717 $textPrimary {
18- color: #222
18 + color: var(--page-color)
1919 }
2020
2121 $textSubtle {
2222 color: gray

Built with git-ssb-web