diff options
author | 2018-07-05 02:37:43 -0300 | |
---|---|---|
committer | 2018-07-05 02:37:43 -0300 | |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/layout.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/layout.scss')
-rw-r--r-- | src/styles/layout.scss | 162 |
1 files changed, 74 insertions, 88 deletions
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 964a9fcea..373b29e7d 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,16 +1,36 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { | 3 | html { overflow: hidden; } |
4 | overflow: hidden; | 4 | |
5 | .theme__dark .app { | ||
6 | .sidebar { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
9 | color: $theme-text-color; | ||
10 | |||
11 | .sidebar__add-service { | ||
12 | color: $dark-theme-gray-lightest; | ||
13 | background: $dark-theme-gray; | ||
14 | } | ||
15 | |||
16 | .sidebar__button { | ||
17 | color: $dark-theme-gray-lightest; | ||
18 | font-size: 22px; | ||
19 | |||
20 | &:hover, | ||
21 | &:active { color: $dark-theme-gray-smoke; } | ||
22 | &.is-muted { color: $dark-theme-gray; } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | ||
5 | } | 27 | } |
6 | 28 | ||
7 | .app { | 29 | .app { |
8 | display: flex; | 30 | display: flex; |
9 | flex-direction: column; | 31 | flex-direction: column; |
10 | 32 | ||
11 | .app__content { | 33 | .app__content { display: flex; } |
12 | display: flex; | ||
13 | } | ||
14 | 34 | ||
15 | .app__service { | 35 | .app__service { |
16 | display: flex; | 36 | display: flex; |
@@ -19,134 +39,100 @@ html { | |||
19 | } | 39 | } |
20 | } | 40 | } |
21 | 41 | ||
22 | .electron-app-title-bar { | 42 | .electron-app-title-bar { z-index: 99999999; } |
23 | z-index: 99999999; | ||
24 | } | ||
25 | 43 | ||
26 | .window-draggable { | 44 | .window-draggable { |
27 | position: absolute; | ||
28 | width: 100%; | ||
29 | top: 0px; | ||
30 | left: 0px; | ||
31 | height: 35px; | 45 | height: 35px; |
46 | left: 0; | ||
32 | pointer-events: none; | 47 | pointer-events: none; |
33 | -webkit-app-region: drag; | 48 | position: absolute; |
49 | top: 0; | ||
50 | width: 100%; | ||
34 | z-index: 9999; | 51 | z-index: 9999; |
52 | -webkit-app-region: drag; | ||
35 | } | 53 | } |
36 | 54 | ||
37 | .darwin { | 55 | .darwin .sidebar { padding-top: 23px; } |
38 | .sidebar { | ||
39 | padding-top: 23px; | ||
40 | } | ||
41 | } | ||
42 | 56 | ||
43 | .sidebar { | 57 | .sidebar { |
44 | display: flex; | ||
45 | flex-direction: column; | ||
46 | align-items: center; | 58 | align-items: center; |
47 | width: $theme-sidebar-width; | ||
48 | background: $theme-gray-lightest; | 59 | background: $theme-gray-lightest; |
49 | box-shadow: 1px 0 10px rgba(0,0,0,0.08); | 60 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); |
50 | z-index: 200; | ||
51 | text-align: center; | ||
52 | color: $theme-text-color; | 61 | color: $theme-text-color; |
62 | display: flex; | ||
63 | flex-direction: column; | ||
53 | padding-bottom: 10px; | 64 | padding-bottom: 10px; |
65 | text-align: center; | ||
66 | width: $theme-sidebar-width; | ||
67 | z-index: 200; | ||
54 | 68 | ||
55 | .sidebar__add-service { | 69 | .sidebar__add-service { |
56 | width: 32px; | 70 | color: $theme-gray-light; |
57 | height: 32px; | ||
58 | background: $theme-gray-lighter; | 71 | background: $theme-gray-lighter; |
59 | border-radius: $theme-border-radius-small; | 72 | border-radius: $theme-border-radius-small; |
73 | height: 32px; | ||
60 | margin: 10px auto; | 74 | margin: 10px auto; |
61 | color: $theme-gray-light; | 75 | width: 32px; |
62 | } | 76 | } |
63 | 77 | ||
64 | .sidebar__button { | 78 | .sidebar__button { |
65 | width: $theme-sidebar-width; | 79 | color: $theme-gray-light; |
66 | padding: 7px 0; | ||
67 | font-size: 24px; | 80 | font-size: 24px; |
81 | padding: 7px 0; | ||
68 | position: relative; | 82 | position: relative; |
69 | color: $theme-gray-light; | 83 | width: $theme-sidebar-width; |
70 | |||
71 | &:hover { | ||
72 | color: darken($theme-gray-light, 10%); | ||
73 | } | ||
74 | |||
75 | &:active { | ||
76 | color: lighten($theme-gray-light, 10%); | ||
77 | } | ||
78 | |||
79 | &.is-muted { | ||
80 | color: $theme-brand-primary; | ||
81 | } | ||
82 | 84 | ||
83 | &--new-service { | 85 | &:hover, |
84 | padding-bottom: 6px; | 86 | &:active { color: lighten($theme-gray-light, 10%); } |
85 | } | 87 | &.is-muted { color: $theme-brand-primary; } |
88 | &--new-service { padding-bottom: 6px; } | ||
86 | } | 89 | } |
87 | 90 | ||
88 | & > div { | 91 | & > div { |
89 | display: flex; | 92 | display: flex; |
90 | overflow-y: scroll; | 93 | overflow-y: scroll; |
91 | 94 | ||
92 | &::-webkit-scrollbar { | 95 | &::-webkit-scrollbar { display: none; } |
93 | display: none; | ||
94 | } | ||
95 | } | 96 | } |
96 | } | 97 | } |
97 | 98 | ||
98 | .grid { | 99 | .grid .grid__row { |
99 | .grid__row { | 100 | display: flex; |
100 | display: flex; | 101 | flex-direction: row; |
101 | flex-direction: row; | ||
102 | |||
103 | &>* { | ||
104 | margin-right: 20px; | ||
105 | } | ||
106 | 102 | ||
107 | & :last-child { | 103 | & > * { margin-right: 20px; } |
108 | margin-right: 0; | 104 | & :last-child { margin-right: 0; } |
109 | } | ||
110 | } | ||
111 | } | 105 | } |
112 | 106 | ||
113 | .app-loader { | 107 | .app-loader { |
108 | align-items: center; | ||
114 | display: flex; | 109 | display: flex; |
115 | justify-content: center; | 110 | justify-content: center; |
116 | align-items: center; | ||
117 | 111 | ||
118 | .app-loader__title { | 112 | .app-loader__title { |
119 | color: #FFF; | 113 | color: #FFF; |
120 | font-size: 40px; | 114 | font-size: 40px; |
121 | } | 115 | } |
122 | 116 | ||
123 | &>span { | 117 | & > span { height: auto; } |
124 | height: auto; | ||
125 | } | ||
126 | } | ||
127 | |||
128 | .dev-warning { | ||
129 | display: none; | ||
130 | } | 118 | } |
131 | 119 | ||
132 | .isDevMode { | 120 | .dev-warning { display: none; } |
133 | .dev-warning { | 121 | |
134 | display: block; | 122 | .isDevMode .dev-warning { |
135 | position: fixed; | 123 | border-radius: 3px; |
136 | background: $theme-brand-warning; | 124 | background: $theme-brand-warning; |
137 | width: auto; | 125 | color: #FFF; |
138 | height: auto; | 126 | display: block; |
139 | top: 5px; | 127 | font-size: 10px; |
140 | right: 5px; | 128 | height: auto; |
141 | padding: 4px; | 129 | padding: 4px; |
142 | font-size: 10px; | 130 | position: fixed; |
143 | color: #FFF; | 131 | right: 5px; |
144 | z-index: 999999999; | 132 | top: 5px; |
145 | border-radius: 3px; | 133 | transition: opacity .5s ease; |
146 | transition: opacity 0.5s ease; | 134 | width: auto; |
147 | 135 | z-index: 999999999; | |
148 | &:hover { | 136 | |
149 | opacity: 0; | 137 | &:hover { opacity: 0; } |
150 | } | ||
151 | } | ||
152 | } | 138 | } |