diff options
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/auth.scss | 2 | ||||
-rw-r--r-- | src/styles/button.scss | 5 | ||||
-rw-r--r-- | src/styles/colors.scss | 1 | ||||
-rw-r--r-- | src/styles/layout.scss | 33 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/quick-switch.scss | 13 | ||||
-rw-r--r-- | src/styles/radio.scss | 4 | ||||
-rw-r--r-- | src/styles/services.scss | 2 | ||||
-rw-r--r-- | src/styles/settings.scss | 13 | ||||
-rw-r--r-- | src/styles/tabs.scss | 11 | ||||
-rw-r--r-- | src/styles/type.scss | 7 | ||||
-rw-r--r-- | src/styles/welcome.scss | 1 |
12 files changed, 84 insertions, 9 deletions
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 154a71a36..44c752677 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -27,7 +27,7 @@ | |||
27 | } | 27 | } |
28 | 28 | ||
29 | .auth { | 29 | .auth { |
30 | background: $theme-brand-primary; | 30 | background: $theme-brand-gradient; |
31 | display: flex; | 31 | display: flex; |
32 | justify-content: center; | 32 | justify-content: center; |
33 | 33 | ||
diff --git a/src/styles/button.scss b/src/styles/button.scss index a66345114..38f8fd26d 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -61,6 +61,11 @@ | |||
61 | 61 | ||
62 | &:disabled { opacity: .2; } | 62 | &:disabled { opacity: .2; } |
63 | 63 | ||
64 | &.franz-form__button--large { | ||
65 | width: 100%; | ||
66 | margin-bottom: 20px; | ||
67 | } | ||
68 | |||
64 | &.franz-form__button--secondary { | 69 | &.franz-form__button--secondary { |
65 | background: $theme-gray-lighter; | 70 | background: $theme-gray-lighter; |
66 | color: $theme-gray; | 71 | color: $theme-gray; |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 80c2fb633..d89d42b9e 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | @import "./type-helper"; | 1 | @import "./type-helper"; |
2 | 2 | ||
3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); | 3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); |
4 | $theme-brand-gradient: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%); | ||
4 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); | 5 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); |
5 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); | 6 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); |
6 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); | 7 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index b18bd6dcf..c09d69f6c 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -2,6 +2,18 @@ | |||
2 | 2 | ||
3 | html { overflow: hidden; } | 3 | html { overflow: hidden; } |
4 | 4 | ||
5 | @keyframes pulse-danger { | ||
6 | 0% { | ||
7 | background: darken($theme-brand-danger, 10%); | ||
8 | } | ||
9 | 50% { | ||
10 | background: lighten($theme-brand-danger, 10%); | ||
11 | } | ||
12 | 100% { | ||
13 | background: darken($theme-brand-danger, 10%); | ||
14 | } | ||
15 | } | ||
16 | |||
5 | .theme__dark .app { | 17 | .theme__dark .app { |
6 | .sidebar { | 18 | .sidebar { |
7 | background: $dark-theme-gray-darker; | 19 | background: $dark-theme-gray-darker; |
@@ -26,6 +38,27 @@ html { overflow: hidden; } | |||
26 | &.is-active { | 38 | &.is-active { |
27 | color: $theme-brand-primary; | 39 | color: $theme-brand-primary; |
28 | } | 40 | } |
41 | |||
42 | .update-available { | ||
43 | align-items: center; | ||
44 | background: $theme-brand-danger; | ||
45 | border-radius: 20px; | ||
46 | bottom: 5px; | ||
47 | color: #FFF; | ||
48 | display: flex; | ||
49 | justify-content: center; | ||
50 | padding: 0px 5px; | ||
51 | position: absolute; | ||
52 | right: 16px; | ||
53 | padding-top: 0; | ||
54 | font-size: 0px; | ||
55 | min-height: 15px; | ||
56 | min-width: 15px; | ||
57 | |||
58 | animation-name: pulse-danger; | ||
59 | animation-duration: 0.75s; | ||
60 | animation-iteration-count: 6; | ||
61 | } | ||
29 | } | 62 | } |
30 | } | 63 | } |
31 | 64 | ||
diff --git a/src/styles/main.scss b/src/styles/main.scss index 784a04d3d..1e9ed5714 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -30,6 +30,7 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
30 | @import './content-tabs.scss'; | 30 | @import './content-tabs.scss'; |
31 | @import './invite.scss'; | 31 | @import './invite.scss'; |
32 | @import './title-bar.scss'; | 32 | @import './title-bar.scss'; |
33 | @import './quick-switch.scss'; | ||
33 | 34 | ||
34 | // form | 35 | // form |
35 | @import './input.scss'; | 36 | @import './input.scss'; |
diff --git a/src/styles/quick-switch.scss b/src/styles/quick-switch.scss new file mode 100644 index 000000000..356123c4c --- /dev/null +++ b/src/styles/quick-switch.scss | |||
@@ -0,0 +1,13 @@ | |||
1 | .theme__dark .quick-switch { | ||
2 | background: $dark-theme-gray-darkest; | ||
3 | |||
4 | .service { | ||
5 | background: $dark-theme-gray-dark; | ||
6 | color: $dark-theme-gray-lightest; | ||
7 | border: inherit; | ||
8 | } | ||
9 | |||
10 | .active { | ||
11 | background: $theme-brand-primary; | ||
12 | } | ||
13 | } \ No newline at end of file | ||
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 87d401215..b1e148ca0 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss | |||
@@ -30,7 +30,9 @@ | |||
30 | 30 | ||
31 | &.is-selected { | 31 | &.is-selected { |
32 | background: #FFF; | 32 | background: #FFF; |
33 | border: 2px solid $theme-brand-primary; | 33 | border-width: 2px; |
34 | border-style: solid; | ||
35 | border-color: $theme-brand-primary; | ||
34 | color: $theme-brand-primary; | 36 | color: $theme-brand-primary; |
35 | } | 37 | } |
36 | 38 | ||
diff --git a/src/styles/services.scss b/src/styles/services.scss index 5acf92d2c..ef1097791 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -64,7 +64,7 @@ | |||
64 | margin: 25px 0 40px; | 64 | margin: 25px 0 40px; |
65 | } | 65 | } |
66 | 66 | ||
67 | a.button, | 67 | .button, |
68 | button { margin: 40px 0 20px; } | 68 | button { margin: 40px 0 20px; } |
69 | } | 69 | } |
70 | 70 | ||
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 150d58e76..324175d0b 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -59,7 +59,9 @@ | |||
59 | 59 | ||
60 | .premium-info { | 60 | .premium-info { |
61 | background: $dark-theme-gray-darker; | 61 | background: $dark-theme-gray-darker; |
62 | border: 2px solid $theme-brand-primary; | 62 | border-width: 2px; |
63 | border-style: solid; | ||
64 | border-color: $theme-brand-primary; | ||
63 | } | 65 | } |
64 | .legal { color: $theme-gray-light; } | 66 | .legal { color: $theme-gray-light; } |
65 | } | 67 | } |
@@ -170,7 +172,9 @@ | |||
170 | } | 172 | } |
171 | 173 | ||
172 | .separator { | 174 | .separator { |
173 | border-right: 1px solid darken($theme-brand-primary, 8%); | 175 | border-right-width: 1px; |
176 | border-right-style: solid; | ||
177 | border-right-color: $theme-brand-primary; | ||
174 | height: 100%; | 178 | height: 100%; |
175 | margin: 0 15px; | 179 | margin: 0 15px; |
176 | transform: skew(15deg) rotate(2deg); | 180 | transform: skew(15deg) rotate(2deg); |
@@ -224,7 +228,7 @@ | |||
224 | 228 | ||
225 | .settings__close { | 229 | .settings__close { |
226 | background: $theme-brand-primary; | 230 | background: $theme-brand-primary; |
227 | border-left: 1px solid darken($theme-brand-primary, 8%); | 231 | // border-left: 1px solid darken($theme-brand-primary, 8%); |
228 | color: #FFF; | 232 | color: #FFF; |
229 | font-size: 20px; | 233 | font-size: 20px; |
230 | height: 50px; | 234 | height: 50px; |
@@ -233,7 +237,9 @@ | |||
233 | right: 0; | 237 | right: 0; |
234 | transition: background $theme-transition-time; | 238 | transition: background $theme-transition-time; |
235 | border-top-right-radius: $theme-border-radius; | 239 | border-top-right-radius: $theme-border-radius; |
240 | cursor: pointer; | ||
236 | 241 | ||
242 | &::before { cursor: pointer; } | ||
237 | &:hover { background: darken($theme-brand-primary, 5%); } | 243 | &:hover { background: darken($theme-brand-primary, 5%); } |
238 | } | 244 | } |
239 | 245 | ||
@@ -296,6 +302,7 @@ | |||
296 | } | 302 | } |
297 | 303 | ||
298 | .settings__delete-button { right: 0; } | 304 | .settings__delete-button { right: 0; } |
305 | .settings__open-dark-mode-button { right: 0; cursor:pointer; } | ||
299 | 306 | ||
300 | .settings__empty-state { | 307 | .settings__empty-state { |
301 | align-items: center; | 308 | align-items: center; |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index cbd833f04..e500830ed 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -34,7 +34,9 @@ | |||
34 | 34 | ||
35 | &.is-active { | 35 | &.is-active { |
36 | background: lighten($theme-brand-primary, 35%); | 36 | background: lighten($theme-brand-primary, 35%); |
37 | border-left: 4px solid $theme-brand-primary; | 37 | border-left-width: 4px; |
38 | border-left-style: solid; | ||
39 | border-left-color: $theme-brand-primary; | ||
38 | 40 | ||
39 | .tab-item__icon { margin-left: -4px; } | 41 | .tab-item__icon { margin-left: -4px; } |
40 | } | 42 | } |
@@ -64,6 +66,13 @@ | |||
64 | right: 8px; | 66 | right: 8px; |
65 | 67 | ||
66 | &.is-indirect { padding-top: 0; } | 68 | &.is-indirect { padding-top: 0; } |
69 | &.hibernating { | ||
70 | padding-top: 0; | ||
71 | background: $theme-gray; | ||
72 | font-size: 0px; | ||
73 | min-height: 10px; | ||
74 | min-width: 10px; | ||
75 | } | ||
67 | } | 76 | } |
68 | 77 | ||
69 | .tab-item__info-badge { | 78 | .tab-item__info-badge { |
diff --git a/src/styles/type.scss b/src/styles/type.scss index 135d32da0..636b8fd36 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -33,13 +33,15 @@ p { | |||
33 | 33 | ||
34 | strong { font-weight: bold; } | 34 | strong { font-weight: bold; } |
35 | 35 | ||
36 | a { | 36 | a, button { |
37 | color: $theme-text-color; | 37 | color: $theme-text-color; |
38 | text-decoration: none; | 38 | text-decoration: none; |
39 | 39 | ||
40 | &.button { | 40 | &.button { |
41 | background: none; | 41 | background: none; |
42 | border: 2px solid $theme-brand-primary; | 42 | border-width: 2px; |
43 | border-style: solid; | ||
44 | border-color: $theme-brand-primary; | ||
43 | border-radius: 3px; | 45 | border-radius: 3px; |
44 | color: $theme-brand-primary; | 46 | color: $theme-brand-primary; |
45 | display: inline-block; | 47 | display: inline-block; |
@@ -47,6 +49,7 @@ a { | |||
47 | position: relative; | 49 | position: relative; |
48 | text-align: center; | 50 | text-align: center; |
49 | transition: background .5s, color .5s; | 51 | transition: background .5s, color .5s; |
52 | cursor: pointer; | ||
50 | 53 | ||
51 | &:hover { | 54 | &:hover { |
52 | background: darken($theme-brand-primary, 5%); | 55 | background: darken($theme-brand-primary, 5%); |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index b517431f0..c1f85391e 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -48,6 +48,7 @@ | |||
48 | .button { | 48 | .button { |
49 | border-color: #FFF; | 49 | border-color: #FFF; |
50 | color: #FFF; | 50 | color: #FFF; |
51 | cursor: pointer; | ||
51 | 52 | ||
52 | &:hover { | 53 | &:hover { |
53 | background: #FFF; | 54 | background: #FFF; |