git ssb

16+

Dominic / patchbay



Commit 21be5e60c2dcc1845a9e7d20861c40e6b2ec6922

Browse Files

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