aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2018-11-22 14:14:25 +0100
committerLibravatar Stefan Malzner <stefan@adlk.io>2018-11-22 14:14:25 +0100
commit46b8c8c4b3a5b80e0187b284abc84566a7e784db (patch)
tree7fd378bcdd18e78c42dfeb61a15f89fd10106046 /src/styles
parentADD features loading spinner (diff)
parentfeat(App): Add option to enable dark mode for supported services (diff)
downloadferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.tar.gz
ferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.tar.zst
ferdium-app-46b8c8c4b3a5b80e0187b284abc84566a7e784db.zip
Merge branch 'develop' into feature/features-api
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/animations.scss54
-rw-r--r--src/styles/auth.scss121
-rw-r--r--src/styles/badge.scss19
-rw-r--r--src/styles/button.scss97
-rw-r--r--src/styles/colors.scss48
-rw-r--r--src/styles/content-tabs.scss34
-rw-r--r--src/styles/image-upload.scss93
-rw-r--r--src/styles/info-bar.scss49
-rw-r--r--src/styles/infobox.scss34
-rw-r--r--src/styles/input.scss95
-rw-r--r--src/styles/invite.scss11
-rw-r--r--src/styles/layout.scss160
-rw-r--r--src/styles/main.scss2
-rw-r--r--src/styles/mixins.scss2
-rw-r--r--src/styles/radio.scss35
-rw-r--r--src/styles/recipes.scss56
-rw-r--r--src/styles/reset.scss67
-rw-r--r--src/styles/searchInput.scss30
-rw-r--r--src/styles/select.scss30
-rw-r--r--src/styles/service-table.scss39
-rw-r--r--src/styles/services.scss60
-rw-r--r--src/styles/settings.scss354
-rw-r--r--src/styles/status-bar-target-url.scss14
-rw-r--r--src/styles/subscription-popup.scss13
-rw-r--r--src/styles/subscription.scss56
-rw-r--r--src/styles/tabs.scss98
-rw-r--r--src/styles/title-bar.scss80
-rw-r--r--src/styles/toggle.scss72
-rw-r--r--src/styles/tooltip.scss2
-rw-r--r--src/styles/type.scss48
-rw-r--r--src/styles/util.scss10
-rw-r--r--src/styles/welcome.scss138
32 files changed, 1058 insertions, 963 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 1e49af207..b121af7d2 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,49 +1,41 @@
1// FadeIn 1// FadeIn
2.fadeIn-appear { 2.fadeIn-appear { opacity: .01; }
3 opacity: 0.01;
4}
5 3
6.fadeIn-appear.fadeIn-appear-active { 4.fadeIn-appear.fadeIn-appear-active {
7 opacity: 1; 5 opacity: 1;
8 transition: opacity 0.5s ease-out; 6 transition: opacity .5s ease-out;
9} 7}
10 8
11.fadeIn-enter { 9.fadeIn-enter {
12 opacity: 0.01; 10 opacity: .01;
13 transition: opacity 0.5s ease-out; 11 transition: opacity .5s ease-out;
14} 12}
15 13
16.fadeIn-leave { 14.fadeIn-leave { opacity: 1; }
17 opacity: 1;
18}
19 15
20.fadeIn-leave.fadeIn-leave-active { 16.fadeIn-leave.fadeIn-leave-active {
21 opacity: 0.01; 17 opacity: .01;
22 transition: opacity 300ms ease-in; 18 transition: opacity 300ms ease-in;
23} 19}
24 20
25// FadeIn Fast 21// FadeIn Fast
26.fadeIn-fast-appear { 22.fadeIn-fast-appear { opacity: .01; }
27 opacity: 0.01;
28}
29 23
30.fadeIn-fast-appear.fadeIn-fast-appear-active { 24.fadeIn-fast-appear.fadeIn-fast-appear-active {
31 opacity: 1; 25 opacity: 1;
32 transition: opacity 0.25s ease-out; 26 transition: opacity .25s ease-out;
33} 27}
34 28
35.fadeIn-fast-enter { 29.fadeIn-fast-enter {
36 opacity: 0.01; 30 opacity: .01;
37 transition: opacity 0.25s ease-out; 31 transition: opacity .25s ease-out;
38} 32}
39 33
40.fadeIn-fast-leave { 34.fadeIn-fast-leave { opacity: 1; }
41 opacity: 1;
42}
43 35
44.fadeIn-fast-leave.fadeIn-fast-leave-active { 36.fadeIn-fast-leave.fadeIn-fast-leave-active {
45 opacity: 0.01; 37 opacity: .01;
46 transition: opacity 0.25s ease-in; 38 transition: opacity .25s ease-in;
47} 39}
48 40
49// Slide down 41// Slide down
@@ -54,37 +46,35 @@
54 46
55.slideDown-appear.slideDown-appear-active { 47.slideDown-appear.slideDown-appear-active {
56 max-height: 500px; 48 max-height: 500px;
57 transition: max-height 0.5s ease-out; 49 transition: max-height .5s ease-out;
58} 50}
59 51
60.slideDown-enter { 52.slideDown-enter {
61 max-height: 0; 53 max-height: 0;
62 transition: max-height 0.5s ease-out; 54 transition: max-height .5s ease-out;
63} 55}
64 56
65// Slide up 57// Slide up
66.slideUp-appear { 58.slideUp-appear {
67 transform: translateY(20px);
68 opacity: 0; 59 opacity: 0;
60 transform: translateY(20px);
69} 61}
70 62
71.slideUp-appear.slideUp-appear-active { 63.slideUp-appear.slideUp-appear-active {
72 transform: translateY(0px);
73 opacity: 1; 64 opacity: 1;
74 transition: all 0.3s ease-out; 65 transform: translateY(0px);
66 transition: all .3s ease-out;
75} 67}
76 68
77.slideUp-enter { 69.slideUp-enter {
78 transform: translateY(20px);
79 opacity: 0; 70 opacity: 0;
80 transition: all 0.3s ease-out; 71 transform: translateY(20px);
72 transition: all .3s ease-out;
81} 73}
82 74
83.slideUp-leave { 75.slideUp-leave { opacity: 1; }
84 opacity: 1;
85}
86 76
87.slideUp-leave.slideUp-leave-active { 77.slideUp-leave.slideUp-leave-active {
88 opacity: 0.01; 78 opacity: .01;
89 transition: opacity 300ms ease-in; 79 transition: opacity 300ms ease-in;
90} 80}
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 9ad71867c..54e264dc6 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -1,144 +1,135 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .auth {
4 background: $dark-theme-gray-darkest;
5
6 .auth__container {
7 background: $dark-theme-gray-darker;
8 box-shadow: 0 0 50px rgba($dark-theme-black, .2);
9 }
10
11 .auth__logo.auth__logo--sm {
12 border: 4px solid $dark-theme-black;
13 box-shadow: 0 0 6px rgba($dark-theme-black, .5);
14 }
15
16 .auth__links {
17 background: $dark-theme-gray-dark;
18
19 a { color: $dark-theme-text-color; }
20 }
21
22 .legal {
23 color: $dark-theme-text-color;
24
25 a { color: $dark-theme-gray-lightest; }
26 }
27}
28
3.auth { 29.auth {
30 background: $theme-brand-primary;
4 display: flex; 31 display: flex;
5 justify-content: center; 32 justify-content: center;
6 background: $theme-brand-primary;
7 33
8 .auth__layout { 34 .auth__layout {
9 width: 100%; 35 width: 100%;
10 &>div>span {
11 width: 100%;
12 }
13 // display: flex;
14 // align-items: center;
15 // justify-content: center;
16 // flex-direction: column;
17
18 // @media only screen and (max-height : 700px) {
19 // margin: 100px 0;
20 // }
21 36
22 &>div { 37 & > div {
38 align-items: center;
23 display: flex; 39 display: flex;
24 justify-content: center; 40 justify-content: center;
25 align-items: center;
26 41
27 &>span { 42 & > span {
28 position: absolute; 43 position: absolute;
44 width: 100%;
29 } 45 }
30 } 46 }
31 } 47 }
32 48
33 .auth__container { 49 .auth__container {
34 position: relative;
35 width: 350px;
36 height: auto;
37 margin: 40px auto 0 auto;
38 background: #FFF; 50 background: #FFF;
39 // padding: 20px;
40 border-radius: $theme-border-radius; 51 border-radius: $theme-border-radius;
41 box-shadow: 0 0 50px rgba(black, 0.2); 52 box-shadow: 0 0 50px rgba(black, .2);
53 height: auto;
54 margin: 40px auto 0;
55 position: relative;
56 width: 350px;
42 57
43 &.auth__container--signup { 58 &.auth__container--signup { width: 450px; }
44 width: 450px;
45 // margin-left: auto;
46 // margin-right: auto;
47 }
48 } 59 }
49 60
50 .auth__logo { 61 .auth__logo {
62 border-radius: $theme-border-radius;
51 display: block; 63 display: block;
52 width: 150px;
53 height: auto; 64 height: auto;
54 margin: -105px auto 20px auto; 65 margin: -105px auto 20px auto;
55 border-radius: $theme-border-radius; 66 width: 150px;
56 67
57 &.auth__logo--sm { 68 &.auth__logo--sm {
58 border: 4px solid #FFF; 69 border: 4px solid #FFF;
59 box-shadow: 0 0 6px rgba(black, 0.5);
60 border-radius: 100%; 70 border-radius: 100%;
71 box-shadow: 0 0 6px rgba(black, .5);
61 } 72 }
62 } 73 }
63 74
64 .auth__form { 75 .auth__form {
65 padding: 20px; 76 padding: 20px;
66 77
67 h1 { 78 h1 { text-align: center; }
68 text-align: center;
69 }
70 } 79 }
71 80
72 .auth__button { 81 .auth__button {
73 width: 100%; 82 width: 100%;
74 83
75 &.auth__button--skip { 84 &.auth__button--skip { margin: 10px auto 0; }
76 margin: 10px auto 0;
77 }
78 } 85 }
79 86
80 .auth__links { 87 .auth__links {
81 padding: 20px;
82 background: $theme-gray-lighter; 88 background: $theme-gray-lighter;
83 border-bottom-left-radius: $theme-border-radius; 89 border-bottom-left-radius: $theme-border-radius;
84 border-bottom-right-radius: $theme-border-radius; 90 border-bottom-right-radius: $theme-border-radius;
91 padding: 20px;
85 92
86 a { 93 a {
87 display: block; 94 display: block;
88 text-align: center;
89 color: $theme-gray; 95 color: $theme-gray;
90 margin-bottom: 8px; 96 margin-bottom: 8px;
97 text-align: center;
91 98
92 &:last-of-type { 99 &:last-of-type { margin-bottom: 0; }
93 margin-bottom: 0;
94 }
95 } 100 }
96 } 101 }
97 102
98 .auth__adlk { 103 .auth__adlk {
104 bottom: 15px;
99 position: absolute; 105 position: absolute;
100 right: 25px; 106 right: 25px;
101 bottom: 15px;
102 107
103 img { 108 img { width: 65px; }
104 width: 65px;
105 }
106 } 109 }
107 110
108 .auth__letter { 111 .auth__letter { margin-bottom: 30px; }
109 margin-bottom: 30px; 112 .scroll-container { z-index: 10; }
110 } 113 .info-bar { position: absolute; }
111
112 .scroll-container {
113 z-index: 10;
114 }
115
116 .info-bar {
117 position: absolute;
118 }
119 114
120 &__scroll-container { 115 &__scroll-container {
121 overflow: scroll;
122 width: 100%;
123 max-height: 100vh; 116 max-height: 100vh;
124 padding: 80px 0; 117 padding: 80px 0;
118 overflow: scroll;
119 width: 100%;
125 } 120 }
126 121
127 .available-services { 122 .available-services { margin-bottom: 15px; }
128 margin-bottom: 15px;
129 }
130 123
131 .unavailable-services { 124 .unavailable-services {
132 margin: 15px 0; 125 margin: 15px 0;
133 126
134 p { 127 p { text-transform: capitalize; }
135 text-transform: capitalize;
136 }
137 } 128 }
138 129
139 .legal { 130 .legal {
140 text-align: center;
141 margin-top: 20px;
142 color: $theme-gray-light; 131 color: $theme-gray-light;
132 margin-top: 20px;
133 text-align: center;
143 } 134 }
144} 135}
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 18a653118..f9fac039a 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -1,11 +1,24 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .badge {
4 background: $dark-theme-gray;
5 border-radius: $theme-border-radius-small;
6 color: $dark-theme-gray-lightest;
7
8 &.badge--primary,
9 &.badge--premium {
10 background: $theme-brand-primary;
11 color: $dark-theme-gray-smoke;
12 }
13}
14
15
3.badge { 16.badge {
4 font-size: 14px; 17 background: $theme-gray-lighter;
18 border-radius: $theme-border-radius;
5 display: inline-block; 19 display: inline-block;
20 font-size: 14px;
6 padding: 5px 10px; 21 padding: 5px 10px;
7 border-radius: $theme-border-radius;
8 background: $theme-gray-lighter;
9 22
10 &.badge--primary, 23 &.badge--primary,
11 &.badge--premium { 24 &.badge--premium {
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 8d2adbbcc..a66345114 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,71 +1,94 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .franz-form__button {
4 background: $theme-brand-primary;
5 color: $dark-theme-text-color;
6
7 &:hover { background: darken($theme-brand-primary, 5%); }
8 &:active { background: lighten($theme-brand-primary, 5%); }
9
10 &.franz-form__button--secondary {
11 background: $dark-theme-gray-lighter;
12 color: $dark-theme-text-color;
13
14 &:hover { background: lighten($dark-theme-gray-lighter, 10%); }
15 &:active { background: lighten($dark-theme-gray-lighter, 20%); }
16 }
17
18 &.franz-form__button--danger {
19 background: $theme-brand-danger;
20
21 &:hover { background: darken($theme-brand-danger, 5%); }
22 &:active { background: lighten($theme-brand-danger, 5%); }
23 }
24
25 &.franz-form__button--warning {
26 background: $theme-brand-warning;
27
28 &:hover { background: darken($theme-brand-warning, 5%); }
29 &:active { background: lighten($theme-brand-warning, 5%); }
30 }
31
32 &.franz-form__button--inverted {
33 border: 2px solid $theme-brand-primary;
34 color: $theme-brand-primary;
35
36 &:hover {
37 background: darken($theme-brand-primary, 5%);
38 color: $dark-theme-text-color;
39 }
40 }
41
42 &:disabled { opacity: .5; }
43}
44
3.franz-form__button { 45.franz-form__button {
4 position: relative;
5 background: $theme-brand-primary; 46 background: $theme-brand-primary;
47 border-radius: 3px;
6 display: block; 48 display: block;
7 padding: 10px 20px;
8 color: #FFF; 49 color: #FFF;
9 border-radius: 3px; 50 padding: 10px 20px;
10 transition: background 0.5s; 51 position: relative;
52 transition: background .5s;
11 text-align: center; 53 text-align: center;
12 54
13 &:hover { 55 &:hover { background: darken($theme-brand-primary, 5%) }
14 background: darken($theme-brand-primary, 5%);
15 }
16 56
17 &:active { 57 &:active {
18 transition: none;
19 background: lighten($theme-brand-primary, 5%); 58 background: lighten($theme-brand-primary, 5%);
59 transition: none;
20 } 60 }
21 61
22 &:disabled { 62 &:disabled { opacity: .2; }
23 opacity: 0.2;
24 }
25 63
26 &.franz-form__button--secondary { 64 &.franz-form__button--secondary {
27 background: $theme-gray-lighter; 65 background: $theme-gray-lighter;
28 color: $theme-gray; 66 color: $theme-gray;
29 67
30 &:hover { 68 &:hover { background: darken($theme-gray-lighter, 5%); }
31 background: darken($theme-gray-lighter, 5%); 69 &:active { background: lighten($theme-gray-lighter, 5%); }
32 }
33
34 &:active {
35 background: lighten($theme-gray-lighter, 5%);
36 }
37 } 70 }
38 71
39 &.franz-form__button--danger { 72 &.franz-form__button--danger {
40 background: $theme-brand-danger; 73 background: $theme-brand-danger;
41 74
42 &:hover { 75 &:hover { background: darken($theme-brand-danger, 5%); }
43 background: darken($theme-brand-danger, 5%); 76 &:active { background: lighten($theme-brand-danger, 5%); }
44 }
45
46 &:active {
47 background: lighten($theme-brand-danger, 5%);
48 }
49 } 77 }
50 78
51 &.franz-form__button--warning { 79 &.franz-form__button--warning {
52 background: $theme-brand-warning; 80 background: $theme-brand-warning;
53 81
54 &:hover { 82 &:hover { background: darken($theme-brand-warning, 5%); }
55 background: darken($theme-brand-warning, 5%); 83 &:active { background: lighten($theme-brand-warning, 5%); }
56 }
57
58 &:active {
59 background: lighten($theme-brand-warning, 5%);
60 }
61 } 84 }
62 85
63 &.franz-form__button--inverted { 86 &.franz-form__button--inverted {
64 background: none; 87 background: none;
65 padding: 10px 20px;
66 border: 2px solid $theme-brand-primary; 88 border: 2px solid $theme-brand-primary;
67 color: $theme-brand-primary; 89 color: $theme-brand-primary;
68 transition: background 0.5s, color 0.5s; 90 padding: 10px 20px;
91 transition: background .5s, color .5s;
69 92
70 &:hover { 93 &:hover {
71 background: darken($theme-brand-primary, 5%); 94 background: darken($theme-brand-primary, 5%);
@@ -74,11 +97,11 @@
74 } 97 }
75 98
76 .loader { 99 .loader {
100 display: inline-block;
101 height: 12px;
102 margin-right: 5px;
77 position: relative; 103 position: relative;
78 width: 20px; 104 width: 20px;
79 height: 12px;
80 z-index: 9999; 105 z-index: 9999;
81 display: inline-block;
82 margin-right: 5px;
83 } 106 }
84} 107}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 5d8302c28..4411a0e81 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,22 +1,38 @@
1$theme-brand-primary: #3498db; 1$theme-brand-primary: #3498db;
2$theme-brand-success: #5cb85c; 2$theme-brand-success: #5cb85c;
3$theme-brand-info: #5bc0de; 3$theme-brand-info: #5bc0de;
4$theme-brand-warning: #FF9F00; 4$theme-brand-warning: #FF9F00;
5$theme-brand-danger: #d9534f; 5$theme-brand-danger: #d9534f;
6 6
7$theme-gray-dark: #373a3c; 7$theme-gray-dark: #373a3c;
8$theme-gray: #55595c; 8$theme-gray: #55595c;
9$theme-gray-light: #818a91; 9$theme-gray-light: #818a91;
10$theme-gray-lighter: #eceeef; 10$theme-gray-lighter: #eceeef;
11$theme-gray-lightest: #f7f7f9; 11$theme-gray-lightest: #f7f7f9;
12 12
13$theme-border-radius: 6px; 13$theme-border-radius: 6px;
14$theme-border-radius-small: 3px; 14$theme-border-radius-small: 3px;
15 15
16$theme-sidebar-width: 68px; 16$theme-sidebar-width: 68px;
17 17
18$theme-text-color: $theme-gray-dark; 18$theme-text-color: $theme-gray-dark;
19 19
20$theme-transition-time: 0.5s; 20$theme-transition-time: .5s;
21 21
22$theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03); 22$theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03);
23
24// Dark Theme
25$dark-theme-black: #1A1A1A;
26
27$dark-theme-gray-darkest: #1E1E1E;
28$dark-theme-gray-darker: #2D2F31;
29$dark-theme-gray-dark: #383A3B;
30
31$dark-theme-gray: #47494B;
32
33$dark-theme-gray-light: #515355;
34$dark-theme-gray-lighter: #8a8b8b;
35$dark-theme-gray-lightest: #FFF;
36
37$dark-theme-gray-smoke: #CED0D1;
38$dark-theme-text-color: #FFF;
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index 47dfea2c4..ca3820fb4 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -2,53 +2,43 @@
2 2
3.content-tabs { 3.content-tabs {
4 .content-tabs__tabs { 4 .content-tabs__tabs {
5 display: flex;
6 border-top-left-radius: $theme-border-radius-small; 5 border-top-left-radius: $theme-border-radius-small;
7 border-top-right-radius: $theme-border-radius-small; 6 border-top-right-radius: $theme-border-radius-small;
7 display: flex;
8 overflow: hidden; 8 overflow: hidden;
9 9
10 .content-tabs__item { 10 .content-tabs__item {
11 padding: 10px;
12 flex: 1;
13 // border: 1px solid $theme-gray-lightest;
14 color: $theme-gray-dark;
15 background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); 11 background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
16 border-right: 1px solid $theme-gray-lighter; 12 border-right: 1px solid $theme-gray-lighter;
13 color: $theme-gray-dark;
14 flex: 1;
15 padding: 10px;
17 transition: background $theme-transition-time; 16 transition: background $theme-transition-time;
18 17
19 &:last-of-type { 18 &:last-of-type { border-right: 0; }
20 border-right: 0;
21 }
22 19
23 &.is-active { 20 &.is-active {
24 background: $theme-brand-primary; 21 background: $theme-brand-primary;
25 color: #FFF;
26 box-shadow: none; 22 box-shadow: none;
23 color: #FFF;
27 } 24 }
28 } 25 }
29 } 26 }
30 27
31 .content-tabs__content { 28 .content-tabs__content {
32 padding: 20px 20px; 29 background: $theme-gray-lightest;
33 border-bottom-left-radius: $theme-border-radius-small; 30 border-bottom-left-radius: $theme-border-radius-small;
34 border-bottom-right-radius: $theme-border-radius-small; 31 border-bottom-right-radius: $theme-border-radius-small;
35 background: $theme-gray-lightest; 32 padding: 20px 20px;
36 33
37 .content-tabs__item { 34 .content-tabs__item {
38 top: 0;
39 display: none; 35 display: none;
36 top: 0;
40 37
41 &.is-active { 38 &.is-active { display: block; }
42 display: block;
43 }
44 }
45
46 .franz-form__input-wrapper {
47 background: #FFF;
48 } 39 }
49 40
50 .franz-form__field:last-of-type { 41 .franz-form__input-wrapper { background: #FFF; }
51 margin-bottom: 0; 42 .franz-form__field:last-of-type { margin-bottom: 0; }
52 }
53 } 43 }
54} 44}
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
index 06176a7af..31300c227 100644
--- a/src/styles/image-upload.scss
+++ b/src/styles/image-upload.scss
@@ -1,74 +1,89 @@
1.theme__dark {
2 .image-upload {
3 background: $dark-theme-gray-darker;
4 border: 1px solid $dark-theme-gray-light;
5 color: $dark-theme-gray-lighter;
6
7 &__action {
8 &-background { background: rgba($dark-theme-black, .7); }
9
10 button {
11 color: $dark-theme-gray-lightest;
12
13 .mdi { color: $dark-theme-gray-lightest; }
14 }
15 }
16 }
17
18 .image-upload-wrapper .mdi { color: $dark-theme-gray-light; }
19}
20
1.image-upload { 21.image-upload {
2 position: absolute; 22 background: $theme-gray-lightest;
3 width: 140px;
4 height: 140px;
5 border: 1px solid $theme-gray-lighter; 23 border: 1px solid $theme-gray-lighter;
6 border-radius: $theme-border-radius-small; 24 border-radius: $theme-border-radius-small;
7 background: $theme-gray-lightest; 25 height: 140px;
8 overflow: hidden;
9 margin-top: 5px; 26 margin-top: 5px;
27 overflow: hidden;
28 position: relative;
29 width: 140px;
10 30
11 &__preview, 31 &__preview,
12 &__action { 32 &__action {
13 position: absolute;
14 top: 0;
15 left: 0; 33 left: 0;
34 position: absolute;
16 right: 0; 35 right: 0;
36 top: 0;
17 } 37 }
18 38
19 &__preview { 39 &__preview {
20 z-index: 1;
21 background-size: cover;
22 background-size: 100%;
23 background-repeat: no-repeat;
24 background-position: center center; 40 background-position: center center;
41 background-repeat: no-repeat;
42 background-size: cover;
25 border-radius: 3px; 43 border-radius: 3px;
44 z-index: 1;
26 } 45 }
27 46
28 &__action { 47 &__action {
29 position: relative;
30 z-index: 10;
31 opacity: 0;
32 transition: opacity 0.5s;
33 display: flex; 48 display: flex;
34 justify-content: center; 49 justify-content: center;
50 opacity: 0;
51 position: relative;
52 transition: opacity .5s;
53 z-index: 10;
35 54
36 &-background { 55 &-background {
37 position: absolute; 56 background: rgba($theme-gray, .7);
38 top: 0; 57 bottom: 0;
39 left: 0; 58 left: 0;
59 position: absolute;
40 right: 0; 60 right: 0;
41 bottom: 0; 61 top: 0;
42 background: rgba($theme-gray, 0.7);
43 z-index: 10; 62 z-index: 10;
44 } 63 }
45 64
46 button { 65 button {
66 color: #FFF;
47 position: relative; 67 position: relative;
48 z-index: 100; 68 z-index: 100;
49 color: #FFF;
50 69
51 .mdi { 70 .mdi { color: #FFF; }
52 color: #FFF;
53 }
54 } 71 }
55 } 72 }
56 73
57 &__dropzone { 74 &__dropzone {
58 text-align: center; 75 align-items: center;
59 border-radius: 5px; 76 border-radius: 5px;
60 padding: 10px;
61 display: flex; 77 display: flex;
62 align-items: center;
63 justify-content: center;
64 flex-direction: column; 78 flex-direction: column;
79 justify-content: center;
80 padding: 10px;
81 text-align: center;
65 } 82 }
66 83
67 &__dropzone, 84 &__dropzone,
68 button { 85 button {
69 .mdi { 86 .mdi { margin-bottom: 5px; }
70 margin-bottom: 5px;
71 }
72 87
73 p { 88 p {
74 font-size: 10px; 89 font-size: 10px;
@@ -76,16 +91,10 @@
76 } 91 }
77 } 92 }
78 93
79 &:hover { 94 &:hover .image-upload__action { opacity: 1; }
80 .image-upload__action {
81 opacity: 1;
82 }
83 }
84} 95}
85 96
86.image-upload-wrapper { 97.image-upload-wrapper .mdi {
87 .mdi { 98 color: $theme-gray-light;
88 font-size: 40px; 99 font-size: 40px;
89 color: $theme-gray-light; 100}
90 }
91} \ No newline at end of file
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
index b6d1e84e2..fb4917358 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -1,83 +1,68 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.info-bar { 3.info-bar {
4 width: 100%; 4 align-items: center;
5 height: 50px;
6 background: $theme-brand-primary; 5 background: $theme-brand-primary;
6 box-shadow: 0 0 8px rgba(black, .2);
7 display: flex; 7 display: flex;
8 align-items: center; 8 height: 50px;
9 justify-content: center; 9 justify-content: center;
10 padding: 0 20px; 10 padding: 0 20px;
11 position: relative; 11 position: relative;
12 // bottom: 0; 12 width: 100%;
13 z-index: 100; 13 z-index: 100;
14 box-shadow: 0 0 8px rgba(black, 0.2);
15 14
16 .info-bar__content { 15 .info-bar__content {
17 height: auto; 16 height: auto;
18 17
19 .mdi { 18 .mdi { margin-right: 5px; }
20 margin-right: 5px;
21 }
22 } 19 }
23 20
24 .info-bar__close { 21 .info-bar__close {
22 color: #FFF;
25 position: absolute; 23 position: absolute;
26 right: 10px; 24 right: 10px;
27 color: #FFF;
28 } 25 }
29 26
30 .info-bar__cta { 27 .info-bar__cta {
31 color: #FFF;
32 padding: 3px 8px;
33 border-radius: $theme-border-radius-small;
34 border-color: #FFF; 28 border-color: #FFF;
35 border-width: 2px; 29 border-radius: $theme-border-radius-small;
36 border-style: solid; 30 border-style: solid;
31 border-width: 2px;
32 color: #FFF;
37 margin-left: 15px; 33 margin-left: 15px;
34 padding: 3px 8px;
38 35
39 .loader { 36 .loader {
37 display: inline-block;
38 height: 12px;
39 margin-right: 5px;
40 position: relative; 40 position: relative;
41 width: 20px; 41 width: 20px;
42 height: 12px;
43 z-index: 9999; 42 z-index: 9999;
44 display: inline-block;
45 margin-right: 5px;
46 } 43 }
47 } 44 }
48 45
49 a { 46 &.info-bar--bottom { order: 10; }
50 // text-decoration: underline;
51 }
52
53 &.info-bar--bottom {
54 order: 10;
55 }
56 47
57 &.info-bar--primary { 48 &.info-bar--primary {
58 background: $theme-brand-primary; 49 background: $theme-brand-primary;
59 color: #FFF; 50 color: #FFF;
60 51
61 a { 52 a { color: #FFF; }
62 color: #FFF;
63 }
64 } 53 }
65 54
66 &.info-bar--warning { 55 &.info-bar--warning {
67 background: $theme-brand-warning; 56 background: $theme-brand-warning;
68 color: #FFF; 57 color: #FFF;
69 58
70 a { 59 a { color: #FFF; }
71 color: #FFF;
72 }
73 } 60 }
74 61
75 &.info-bar--danger { 62 &.info-bar--danger {
76 background: $theme-brand-danger; 63 background: $theme-brand-danger;
77 color: #FFF; 64 color: #FFF;
78 65
79 a { 66 a { color: #FFF; }
80 color: #FFF;
81 }
82 } 67 }
83} 68}
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss
index 7ab094058..e287e5be7 100644
--- a/src/styles/infobox.scss
+++ b/src/styles/infobox.scss
@@ -1,20 +1,16 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.infobox { 3.infobox {
4 height: auto; 4 align-items: center;
5 padding: 15px 20px;
6 margin-bottom: 30px;
7 border-radius: $theme-border-radius-small; 5 border-radius: $theme-border-radius-small;
8 display: flex; 6 display: flex;
9 align-items: center; 7 height: auto;
8 margin-bottom: 30px;
9 padding: 15px 20px;
10 10
11 a { 11 a { color: #FFF; }
12 color: #FFF;
13 }
14 12
15 .infobox__content { 13 .infobox__content { flex: 1; }
16 flex: 1;
17 }
18 14
19 &.infobox--success { 15 &.infobox--success {
20 background: $theme-brand-success; 16 background: $theme-brand-success;
@@ -36,26 +32,24 @@
36 color: #FFF; 32 color: #FFF;
37 } 33 }
38 34
39 .mdi { 35 .mdi { margin-right: 10px; }
40 margin-right: 10px;
41 }
42 36
43 .infobox__cta { 37 .infobox__cta {
44 color: #FFF;
45 padding: 3px 8px;
46 border-radius: $theme-border-radius-small;
47 border-color: #FFF; 38 border-color: #FFF;
48 border-width: 2px; 39 border-radius: $theme-border-radius-small;
49 border-style: solid; 40 border-style: solid;
41 border-width: 2px;
42 color: #FFF;
50 margin-left: 15px; 43 margin-left: 15px;
44 padding: 3px 8px;
51 45
52 .loader { 46 .loader {
47 display: inline-block;
48 height: 12px;
49 margin-right: 5px;
53 position: relative; 50 position: relative;
54 width: 20px; 51 width: 20px;
55 height: 12px;
56 z-index: 9999; 52 z-index: 9999;
57 display: inline-block;
58 margin-right: 5px;
59 } 53 }
60 } 54 }
61 55
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 7042f56e8..687bcac64 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,6 +1,34 @@
1@import './config.scss'; 1@import './config.scss';
2@import './mixins.scss'; 2@import './mixins.scss';
3 3
4.theme__dark .franz-form {
5 .franz-form__label { color: $dark-theme-text-color; }
6
7 .franz-form__input-wrapper {
8 background: $dark-theme-gray-dark;
9 border: 1px solid $dark-theme-gray-light;
10 }
11
12 .franz-form__input {
13 color: $dark-theme-gray-lightest;
14
15 &::placeholder { color: $dark-theme-gray-lighter; }
16 }
17
18 .franz-form__input-prefix,
19 .franz-form__input-suffix {
20 background: $dark-theme-gray;
21 color: $dark-theme-gray-lighter;
22 }
23
24 .franz-form__input-modifier {
25 border-left: 1px solid $dark-theme-gray-light;
26 color: $dark-theme-gray-lighter;
27 }
28
29 .franz-form__password-score { background: $dark-theme-gray-dark; }
30}
31
4.franz-form { 32.franz-form {
5 .franz-form__field { 33 .franz-form__field {
6 display: flex; 34 display: flex;
@@ -9,19 +37,12 @@
9 margin-bottom: 20px; 37 margin-bottom: 20px;
10 38
11 &.has-error { 39 &.has-error {
12 .franz-form__input-wrapper { 40 .franz-form__input-wrapper,
13 border-color: $theme-brand-danger; 41 .franz-form__input-modifier { border-color: $theme-brand-danger; }
14 }
15
16 .franz-form__input-modifier {
17 border-color: $theme-brand-danger;
18 }
19 } 42 }
20 } 43 }
21 44
22 .franz-form__label { 45 .franz-form__label { @include formLabel(); }
23 @include formLabel();
24 }
25 46
26 .franz-form__error { 47 .franz-form__error {
27 color: $theme-brand-danger; 48 color: $theme-brand-danger;
@@ -30,74 +51,60 @@
30 } 51 }
31 52
32 .franz-form__input-wrapper { 53 .franz-form__input-wrapper {
33 display: flex;
34 width: 100%;
35 order: 1;
36 border-radius: $theme-border-radius-small;
37 background: $theme-gray-lightest; 54 background: $theme-gray-lightest;
38 border: 1px solid $theme-gray-lighter; 55 border: 1px solid $theme-gray-lighter;
56 border-radius: $theme-border-radius-small;
57 display: flex;
39 flex-wrap: wrap; 58 flex-wrap: wrap;
59 order: 1;
60 width: 100%;
40 } 61 }
41 62
42 .franz-form__input { 63 .franz-form__input {
43 flex: 1;
44 border: 0;
45 background: none; 64 background: none;
46 width: 100%; 65 border: 0;
47 padding: 8px;
48 // font-size: 18px;
49 color: $theme-gray; 66 color: $theme-gray;
67 flex: 1;
68 padding: 8px;
69 width: 100%;
50 70
51 &::placeholder { 71 &::placeholder { color: lighten($theme-gray-light, 10%); }
52 color: lighten($theme-gray-light, 10%);
53 }
54 } 72 }
55 73
56 .franz-form__input-prefix, 74 .franz-form__input-prefix,
57 .franz-form__input-suffix { 75 .franz-form__input-suffix {
58 padding: 0 10px;
59 background: $theme-gray-lighter; 76 background: $theme-gray-lighter;
60 color: $theme-gray-light; 77 color: $theme-gray-light;
61 line-height: 35px; 78 line-height: 35px;
79 padding: 0 10px;
62 } 80 }
63 81
64 .franz-form__input-modifier { 82 .franz-form__input-modifier {
65 padding: 0 20px;
66 border-left: 1px solid $theme-gray-lighter; 83 border-left: 1px solid $theme-gray-lighter;
67 color: $theme-gray-light; 84 color: $theme-gray-light;
68 font-size: 20px; 85 font-size: 20px;
86 padding: 0 20px;
69 } 87 }
70 88
71 .franz-form__password-score { 89 .franz-form__password-score {
72 background: $theme-gray-lighter; 90 background: $theme-gray-lighter;
73 height: 5px;
74 flex-basis: 100%;
75 border-bottom-left-radius: 3px; 91 border-bottom-left-radius: 3px;
76 border-bottom-right-radius: 3px; 92 border-bottom-right-radius: 3px;
93 flex-basis: 100%;
94 height: 5px;
77 95
78 meter { 96 meter {
79 width: 100%;
80 height: 100%;
81 display: block;
82 border-bottom-left-radius: 3px; 97 border-bottom-left-radius: 3px;
83 border-bottom-right-radius: 3px; 98 border-bottom-right-radius: 3px;
99 display: block;
100 height: 100%;
84 overflow: hidden; 101 overflow: hidden;
102 width: 100%;
85 103
86 &::-webkit-meter-bar { 104 &::-webkit-meter-bar { background: none; }
87 background: none; 105 &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; }
88 } 106 &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; }
89 107 &::-webkit-meter-optimum-value { background: $theme-brand-success; }
90 &::-webkit-meter-even-less-good-value {
91 background: $theme-brand-danger;
92 }
93
94 &::-webkit-meter-suboptimum-value {
95 background: $theme-brand-warning;
96 }
97
98 &::-webkit-meter-optimum-value {
99 background: $theme-brand-success;
100 }
101 } 108 }
102 } 109 }
103} 110}
diff --git a/src/styles/invite.scss b/src/styles/invite.scss
index bfb1a4b6b..594224f62 100644
--- a/src/styles/invite.scss
+++ b/src/styles/invite.scss
@@ -1,15 +1,8 @@
1.invite__form { 1.invite__form {
2 /* play with values to see different layouts */
3 // display: flex;
4 align-items: center; 2 align-items: center;
5 align-self: center; 3 align-self: center;
6 justify-content: center; 4 justify-content: center;
7} 5}
8 6
9.invite__embed { 7.invite__embed { text-align: center; }
10 text-align: center; 8.invite__embed--button { width: 100%; }
11}
12
13.invite__embed--button {
14 width: 100%;
15} \ No newline at end of file
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index afdd7dec7..ebf468cf0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,12 +1,36 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3html { 3html { 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-lighter;
13 background: $dark-theme-gray;
14 }
15
16 .sidebar__button {
17 color: $dark-theme-gray-lighter;
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: row; 31 flex-direction: column;
32
33 .app__content { display: flex; }
10 34
11 .app__service { 35 .app__service {
12 display: flex; 36 display: flex;
@@ -15,130 +39,100 @@ html {
15 } 39 }
16} 40}
17 41
42.electron-app-title-bar { z-index: 99999999; }
43
18.window-draggable { 44.window-draggable {
19 position: absolute;
20 width: 100%;
21 top: 0px;
22 left: 0px;
23 height: 35px; 45 height: 35px;
46 left: 0;
24 pointer-events: none; 47 pointer-events: none;
25 -webkit-app-region: drag; 48 position: absolute;
49 top: 0;
50 width: 100%;
26 z-index: 9999; 51 z-index: 9999;
52 -webkit-app-region: drag;
27} 53}
28 54
29.darwin { 55.darwin .sidebar { padding-top: 23px; }
30 .sidebar {
31 padding-top: 23px;
32 }
33}
34 56
35.sidebar { 57.sidebar {
36 display: flex;
37 flex-direction: column;
38 align-items: center; 58 align-items: center;
39 width: $theme-sidebar-width;
40 background: $theme-gray-lightest; 59 background: $theme-gray-lightest;
41 box-shadow: 1px 0 10px rgba(0,0,0,0.08); 60 box-shadow: 1px 0 10px rgba(0, 0, 0, .08);
42 z-index: 200;
43 text-align: center;
44 color: $theme-text-color; 61 color: $theme-text-color;
62 display: flex;
63 flex-direction: column;
45 padding-bottom: 10px; 64 padding-bottom: 10px;
65 text-align: center;
66 width: $theme-sidebar-width;
67 z-index: 200;
46 68
47 .sidebar__add-service { 69 .sidebar__add-service {
48 width: 32px; 70 color: $theme-gray-light;
49 height: 32px;
50 background: $theme-gray-lighter; 71 background: $theme-gray-lighter;
51 border-radius: $theme-border-radius-small; 72 border-radius: $theme-border-radius-small;
73 height: 32px;
52 margin: 10px auto; 74 margin: 10px auto;
53 color: $theme-gray-light; 75 width: 32px;
54 } 76 }
55 77
56 .sidebar__button { 78 .sidebar__button {
57 width: $theme-sidebar-width; 79 color: $theme-gray-light;
58 padding: 7px 0;
59 font-size: 24px; 80 font-size: 24px;
81 padding: 7px 0;
60 position: relative; 82 position: relative;
61 color: $theme-gray-light; 83 width: $theme-sidebar-width;
62
63 &:hover {
64 color: darken($theme-gray-light, 10%);
65 }
66
67 &:active {
68 color: lighten($theme-gray-light, 10%);
69 }
70
71 &.is-muted {
72 color: $theme-brand-primary;
73 }
74 84
75 &--new-service { 85 &:hover,
76 padding-bottom: 6px; 86 &:active { color: lighten($theme-gray-light, 10%); }
77 } 87 &.is-muted { color: $theme-brand-primary; }
88 &--new-service { padding-bottom: 6px; }
78 } 89 }
79 90
80 & > div { 91 & > div {
81 display: flex; 92 display: flex;
82 overflow-y: scroll; 93 overflow-y: scroll;
83 94
84 &::-webkit-scrollbar { 95 &::-webkit-scrollbar { display: none; }
85 display: none;
86 }
87 } 96 }
88} 97}
89 98
90.grid { 99.grid .grid__row {
91 .grid__row { 100 display: flex;
92 display: flex; 101 flex-direction: row;
93 flex-direction: row;
94
95 &>* {
96 margin-right: 20px;
97 }
98 102
99 & :last-child { 103 & > * { margin-right: 20px; }
100 margin-right: 0; 104 & :last-child { margin-right: 0; }
101 }
102 }
103} 105}
104 106
105.app-loader { 107.app-loader {
108 align-items: center;
106 display: flex; 109 display: flex;
107 justify-content: center; 110 justify-content: center;
108 align-items: center;
109 111
110 .app-loader__title { 112 .app-loader__title {
111 color: #FFF; 113 color: #FFF;
112 font-size: 40px; 114 font-size: 40px;
113 } 115 }
114 116
115 &>span { 117 & > span { height: auto; }
116 height: auto;
117 }
118}
119
120.dev-warning {
121 display: none;
122} 118}
123 119
124.isDevMode { 120.dev-warning { display: none; }
125 .dev-warning { 121
126 display: block; 122.isDevMode .dev-warning {
127 position: fixed; 123 border-radius: 3px;
128 background: $theme-brand-warning; 124 background: $theme-brand-warning;
129 width: auto; 125 color: #FFF;
130 height: auto; 126 display: block;
131 top: 5px; 127 font-size: 10px;
132 right: 5px; 128 height: auto;
133 padding: 4px; 129 padding: 4px;
134 font-size: 10px; 130 position: fixed;
135 color: #FFF; 131 right: 5px;
136 z-index: 999999999; 132 top: 5px;
137 border-radius: 3px; 133 transition: opacity .5s ease;
138 transition: opacity 0.5s ease; 134 width: auto;
139 135 z-index: 999999999;
140 &:hover { 136
141 opacity: 0; 137 &:hover { opacity: 0; }
142 }
143 }
144} 138}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 446bdca14..784a04d3d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -4,6 +4,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
4} 4}
5 5
6@import './node_modules/mdi/scss/materialdesignicons.scss'; 6@import './node_modules/mdi/scss/materialdesignicons.scss';
7@import './node_modules/electron-react-titlebar/assets/style';
7 8
8// modules 9// modules
9@import './reset.scss'; 10@import './reset.scss';
@@ -28,6 +29,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
28@import './subscription-popup.scss'; 29@import './subscription-popup.scss';
29@import './content-tabs.scss'; 30@import './content-tabs.scss';
30@import './invite.scss'; 31@import './invite.scss';
32@import './title-bar.scss';
31 33
32// form 34// form
33@import './input.scss'; 35@import './input.scss';
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index c9b1bc988..06efb475a 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -1,9 +1,9 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3@mixin formLabel { 3@mixin formLabel {
4 width: 100%;
5 color: $theme-gray-light; 4 color: $theme-gray-light;
6 display: block; 5 display: block;
7 margin-bottom: 5px; 6 margin-bottom: 5px;
8 order: 0; 7 order: 0;
8 width: 100%;
9} 9}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 644478cd6..87d401215 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,34 +1,39 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.franz-form { 3.theme__dark .franz-form .franz-form__radio {
4 .franz-form__radio-wrapper { 4 border: 1px solid $dark-theme-gray-lighter;
5 display: flex; 5 color: $dark-theme-gray-lightest;
6
7 &.is-selected {
8 background: $dark-theme-gray-lighter;
9 border: 1px solid $dark-theme-gray-lighter;
10 color: $dark-theme-gray-smoke;
6 } 11 }
12}
13
14
15.franz-form {
16 .franz-form__radio-wrapper { display: flex; }
7 17
8 .franz-form__radio { 18 .franz-form__radio {
9 // background: $theme-gray-lightest;
10 border: 2px solid $theme-gray-lighter; 19 border: 2px solid $theme-gray-lighter;
20 border-radius: $theme-border-radius-small;
21 box-shadow: $theme-inset-shadow;
11 color: $theme-gray; 22 color: $theme-gray;
12 padding: 11px; 23 flex: 1;
13 margin-right: 20px; 24 margin-right: 20px;
25 padding: 11px;
14 text-align: center; 26 text-align: center;
15 border-radius: $theme-border-radius-small;
16 flex: 1;
17 box-shadow: $theme-inset-shadow;
18 transition: background $theme-transition-time; 27 transition: background $theme-transition-time;
19 28
20 &:last-of-type { 29 &:last-of-type { margin-right: 0; }
21 margin-right: 0;
22 }
23 30
24 &.is-selected { 31 &.is-selected {
25 border: 2px solid $theme-brand-primary;
26 background: #FFF; 32 background: #FFF;
33 border: 2px solid $theme-brand-primary;
27 color: $theme-brand-primary; 34 color: $theme-brand-primary;
28 } 35 }
29 36
30 input { 37 input { display: none; }
31 display: none;
32 }
33 } 38 }
34} 39}
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 1b519a5e5..84222e1fe 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -1,16 +1,22 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .recipe-teaser {
4 background-color: $dark-theme-gray-dark;
5
6 &:hover { background-color: $dark-theme-gray; }
7}
8
3.recipes { 9.recipes {
4 .recipes__list { 10 .recipes__list {
11 align-content: flex-start;
5 display: flex; 12 display: flex;
6 flex-flow: row wrap; 13 flex-flow: row wrap;
7 align-content: flex-start;
8 min-height: 70%;
9 height: auto; 14 height: auto;
15 min-height: 70%;
10 16
11 &.recipes__list--disabled { 17 &.recipes__list--disabled {
12 opacity: 0.3;
13 filter: grayscale(100%); 18 filter: grayscale(100%);
19 opacity: .3;
14 pointer-events: none; 20 pointer-events: none;
15 } 21 }
16 } 22 }
@@ -19,58 +25,48 @@
19 height: auto; 25 height: auto;
20 margin-bottom: 35px; 26 margin-bottom: 35px;
21 27
22 .badge { 28 .badge { margin-right: 10px; }
23 margin-right: 10px;
24 }
25 29
26 &.recipes__navigation--disabled { 30 &.recipes__navigation--disabled {
27 opacity: 0.3;
28 filter: grayscale(100%); 31 filter: grayscale(100%);
32 opacity: .3;
29 pointer-events: none; 33 pointer-events: none;
30 } 34 }
31 } 35 }
32 36
33 &__service-request { 37 &__service-request { float: right; }
34 float: right;
35 }
36} 38}
37 39
38.recipe-teaser { 40.recipe-teaser {
39 position: relative; 41 background-color: $theme-gray-lightest;
40 width: calc(25% - 20px); 42 border-radius: $theme-border-radius;
41 height: 120px; 43 height: 120px;
42 margin: 0 20px 20px 0; 44 margin: 0 20px 20px 0;
43 border-radius: $theme-border-radius;
44 background-color: $theme-gray-lightest;
45 transition: background $theme-transition-time;
46 overflow: hidden; 45 overflow: hidden;
46 position: relative;
47 transition: background $theme-transition-time;
48 width: calc(25% - 20px);
47 49
48 &:hover { 50 &:hover { background-color: $theme-gray-lighter; }
49 background-color: $theme-gray-lighter;
50 }
51 51
52 .recipe-teaser__icon { 52 .recipe-teaser__icon {
53 width: 50px;
54 margin-bottom: 10px; 53 margin-bottom: 10px;
54 width: 50px;
55 } 55 }
56 56
57 .recipe-teaser__label { 57 .recipe-teaser__label { display: block; }
58 display: block;
59 }
60 58
61 h2 { 59 h2 { z-index: 10; }
62 z-index: 10;
63 }
64 60
65 &__dev-badge { 61 &__dev-badge {
66 position: absolute;
67 top: 5px;
68 right: -13px;
69 width: 50px;
70 background: $theme-brand-warning; 62 background: $theme-brand-warning;
63 box-shadow: 0 0 4px rgba(black, .2);
71 color: #FFF; 64 color: #FFF;
72 font-size: 10px; 65 font-size: 10px;
66 position: absolute;
67 right: -13px;
68 top: 5px;
73 transform: rotateZ(45deg); 69 transform: rotateZ(45deg);
74 box-shadow: 0 0 4px rgba(black, 0.2); 70 width: 50px;
75 } 71 }
76} 72}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 21763f44f..80328dcef 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -16,63 +16,62 @@ article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup, 16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary, 17menu, nav, output, ruby, section, summary,
18time, mark, audio, video { 18time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0; 19 border: 0;
22 font-size: 100%;
23 font: inherit; 20 font: inherit;
21 font-size: 100%;
22 margin: 0;
23 padding: 0;
24} 24}
25/* HTML5 display-role reset for older browsers */ 25
26article, aside, details, figcaption, figure, 26article, aside, details, figcaption, figure,
27footer, header, hgroup, menu, nav, section { 27footer, header, hgroup, menu, nav, section { display: block; }
28 display: block; 28
29} 29ol,
30body { 30ul { list-style: none; }
31 line-height: 1; 31
32} 32blockquote,
33ol, ul { 33q {
34 list-style: none;
35}
36blockquote, q {
37 quotes: none; 34 quotes: none;
35
36 &::before,
37 &::after {
38 content: '';
39 content: none;
40 }
38} 41}
39blockquote:before, blockquote:after, q:before, q:after { 42
40 content: '';
41 content: none;
42}
43table { 43table {
44 border-collapse: collapse; 44 border-collapse: collapse;
45 border-spacing: 0; 45 border-spacing: 0;
46} 46}
47 47
48/* Buttons should not have any special style applied by default */
49button { 48button {
50 background: none; 49 background: none;
51 border: none; 50 border: none;
52 padding: 0; 51 padding: 0;
53}
54 52
55button:focus { 53 &:focus { outline: 0; }
56 outline: 0; 54 .theme__dark & { color: $dark-theme-gray-smoke; }
57} 55}
58 56
59html { 57html {
60 /* base for rem / 1rem = 10px */
61 font-size: 62.5%; 58 font-size: 62.5%;
62 font-family: 'Open Sans'; 59 font-family: 'Open Sans';
63} 60}
64 61
65body { 62body {
66 /* default font size = 14px */
67 font-size: 1.4rem;
68 color: $theme-gray-dark; 63 color: $theme-gray-dark;
64 font-size: 1.4rem;
65 line-height: 1;
66
67 .theme__dark { color: $dark-theme-gray-smoke; }
69} 68}
70 69
71* { 70* {
72 -webkit-font-smoothing: antialiased;
73 box-sizing: border-box; 71 box-sizing: border-box;
74 font-size: 1.4rem;
75 font-family: 'Open Sans'; 72 font-family: 'Open Sans';
73 font-size: 1.4rem;
74 -webkit-font-smoothing: antialiased;
76 -webkit-user-select: none; 75 -webkit-user-select: none;
77} 76}
78 77
@@ -82,14 +81,6 @@ html, body, div {
82 box-sizing: border-box; 81 box-sizing: border-box;
83} 82}
84 83
85*:focus { 84*:focus { outline: none; }
86 outline: none; 85img { pointer-events: none; }
87} 86a { cursor: default; }
88
89img {
90 pointer-events: none;
91}
92
93a {
94 cursor: default;
95}
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss
index 633a31e09..32b9da065 100644
--- a/src/styles/searchInput.scss
+++ b/src/styles/searchInput.scss
@@ -1,20 +1,32 @@
1@import './config.scss';
2@import './mixins.scss';
3
4.theme__dark .search-input {
5 @extend %headline__dark;
6 background: $dark-theme-gray-dark;
7 border: 1px solid $dark-theme-gray-light;
8 border-radius: $theme-border-radius;
9 color: $dark-theme-gray-lightest;
10
11 input { color: $dark-theme-gray-lightest; }
12}
13
1.search-input { 14.search-input {
2 width: 100%; 15 @extend %headline;
3 height: auto;
4 display: flex;
5 align-items: center; 16 align-items: center;
6 padding: 0 10px;
7 border-radius: 30px;
8 background: $theme-gray-lightest; 17 background: $theme-gray-lightest;
9 padding: 5px 10px; 18 border-radius: 30px;
10 @extend %headline;
11 color: $theme-gray-light; 19 color: $theme-gray-light;
20 display: flex;
21 height: auto;
22 padding: 5px 10px;
23 width: 100%;
12 24
13 input { 25 input {
14 padding-left: 10px;
15 background: none; 26 background: none;
16 border: 0; 27 border: 0;
17 flex: 1;
18 color: $theme-gray-light; 28 color: $theme-gray-light;
29 flex: 1;
30 padding-left: 10px;
19 } 31 }
20} 32}
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 965b4321a..ed0fc0fc2 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -3,17 +3,21 @@
3 3
4$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; 4$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=";
5 5
6.franz-form { 6.theme__dark .franz-form .franz-form__select {
7 .franz-form__select { 7 background-color: $dark-theme-gray-dark;
8 -webkit-appearance: none; 8 border: 1px solid $dark-theme-gray-light;
9 min-width: 200px; 9 color: $dark-theme-gray-lightest;
10 padding: 10px; 10}
11 background-color: $theme-gray-lightest; 11
12 background-position: right center; 12.franz-form .franz-form__select {
13 background-repeat: no-repeat; 13 background-color: $theme-gray-lightest;
14 background-size: 1ex; 14 background-image: url(data:image/svg+xml;base64,#{$toggle});
15 background-origin: content-box; 15 background-origin: content-box;
16 background-image: url(data:image/svg+xml;base64,#{$toggle}); 16 background-position: right center;
17 border: 1px solid $theme-gray-lighter; 17 background-repeat: no-repeat;
18 } 18 background-size: 1ex;
19 border: 1px solid $theme-gray-lighter;
20 min-width: 200px;
21 padding: 10px;
22 -webkit-appearance: none;
19} 23}
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss
index 66d5ac941..f2090685b 100644
--- a/src/styles/service-table.scss
+++ b/src/styles/service-table.scss
@@ -1,62 +1,63 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .service-table {
4 .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; }
5 .service-table__column-info .mdi { color: $dark-theme-gray-lightest; }
6
7 .service-table__row {
8 border-bottom: 1px solid $dark-theme-gray-darker;
9
10 &:hover { background: $dark-theme-gray-darker; }
11 &.service-table__row--disabled { color: $dark-theme-gray; }
12 }
13}
14
3.service-table { 15.service-table {
4 width: 100%; 16 width: 100%;
5 17
6 .service-table__toggle { 18 .service-table__toggle {
7 width: 60px; 19 width: 60px;
8 20
9 .franz-form__field { 21 .franz-form__field { margin-bottom: 0; }
10 margin-bottom: 0;
11 }
12 } 22 }
13 23
14 .service-table__icon { 24 .service-table__icon {
15 width: 35px; 25 width: 35px;
16 26
17 &.has-custom-icon { 27 &.has-custom-icon {
18 border-radius: $theme-border-radius;
19 border: 1px solid $theme-gray-lighter; 28 border: 1px solid $theme-gray-lighter;
29 border-radius: $theme-border-radius;
20 width: 37px; 30 width: 37px;
21 } 31 }
22 } 32 }
23 33
24 .service-table__column-icon { 34 .service-table__column-icon,
25 width: 40px; 35 .service-table__column-action { width: 40px }
26 }
27
28 .service-table__column-action {
29 width: 40px
30 }
31 36
32 .service-table__column-info { 37 .service-table__column-info {
33 width: 40px; 38 width: 40px;
34 39
35 .mdi { 40 .mdi {
41 color: $theme-gray-light;
36 display: block; 42 display: block;
37 font-size: 18px; 43 font-size: 18px;
38 color: $theme-gray-light;
39 } 44 }
40 } 45 }
41 46
42 .service-table__row { 47 .service-table__row {
43 border-bottom: 1px solid $theme-gray-lightest; 48 border-bottom: 1px solid $theme-gray-lightest;
44 49
45 &:hover { 50 &:hover { background: $theme-gray-lightest; }
46 background: $theme-gray-lightest;
47 }
48 51
49 &.service-table__row--disabled { 52 &.service-table__row--disabled {
50 color: $theme-gray-light; 53 color: $theme-gray-light;
51 54
52 .service-table__column-icon { 55 .service-table__column-icon {
53 filter: grayscale(100%); 56 filter: grayscale(100%);
54 opacity: 0.5; 57 opacity: .5;
55 } 58 }
56 } 59 }
57 } 60 }
58 61
59 td { 62 td { padding: 10px; }
60 padding: 10px;
61 }
62} 63}
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 9f6cfc772..0e559501c 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -1,30 +1,46 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .services {
4 background: $dark-theme-gray-darkest;
5
6 .services__webview-wrapper { background: $dark-theme-gray-darkest; }
7
8 .services__webview,
9 .services__info-layer {
10 webview { background: $dark-theme-gray-darkest; }
11 }
12
13 .services__no-service,
14 .services__info-layer {
15 background: $dark-theme-gray-darkest;
16
17 h1 { color: $dark-theme-gray-lightest; }
18 }
19}
20
3.services { 21.services {
22 background: #FFF;
4 flex: 1; 23 flex: 1;
5 height: 100%; 24 height: 100%;
6 position: relative;
7 overflow: hidden;
8 background: #FFF;
9 order: 5; 25 order: 5;
26 overflow: hidden;
27 position: relative;
10 28
11 .services__webview-wrapper { 29 .services__webview-wrapper { background: $theme-gray-lighter; }
12 background: $theme-gray-lighter;
13 }
14 30
15 .services__webview, 31 .services__webview,
16 .services__info-layer { 32 .services__info-layer {
33 left: 0;
17 position: absolute; 34 position: absolute;
18 width: 100%;
19 top: 0; 35 top: 0;
20 left: 0; 36 width: 100%;
21 z-index: 0; 37 z-index: 0;
22 38
23 webview { 39 webview {
24 display: inline-flex;
25 width: 0px;
26 height: 0px;
27 background: $theme-gray-lighter; 40 background: $theme-gray-lighter;
41 display: inline-flex;
42 height: 0;
43 width: 0;
28 } 44 }
29 45
30 &.is-active { 46 &.is-active {
@@ -32,36 +48,30 @@
32 48
33 webview { 49 webview {
34 flex: 0 1; 50 flex: 0 1;
35 width: 100%;
36 height: 100%; 51 height: 100%;
52 width: 100%;
37 } 53 }
38 } 54 }
39 55
40 &--force-repaint { 56 &--force-repaint webview { z-index: 5; }
41 webview {
42 z-index: 5;
43 }
44 }
45 } 57 }
46 58
47 .services__no-service, 59 .services__no-service,
48 .services__info-layer { 60 .services__info-layer {
61 align-items: center;
62 background: $theme-gray-lighter;
49 display: flex; 63 display: flex;
50 flex-direction: column; 64 flex-direction: column;
51 justify-content: center; 65 justify-content: center;
52 align-items: center;
53 text-align: center; 66 text-align: center;
54 background: $theme-gray-lighter;
55 67
56 h1 { 68 h1 {
57 margin: 25px 0 40px;
58 color: $theme-gray-dark; 69 color: $theme-gray-dark;
70 margin: 25px 0 40px;
59 } 71 }
60 72
61 a.button, 73 a.button,
62 button { 74 button { margin: 40px 0 20px; }
63 margin: 40px 0 20px;
64 }
65 } 75 }
66 76
67 .services__info-layer { 77 .services__info-layer {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 2182c9b5f..5e7e35fd8 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,130 +1,215 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3%headline { 3%headline {
4 color: $theme-gray-light;
4 font-size: 20px; 5 font-size: 20px;
5 font-weight: 400; 6 font-weight: 400;
6 letter-spacing: -1px; 7 letter-spacing: -1px;
7 color: $theme-gray-light;
8 8
9 a { 9 a { color: $theme-gray-light; }
10 color: $theme-gray-light; 10}
11
12%headline__dark {
13 color: $dark-theme-gray-lightest;
14
15 a { color: $dark-theme-gray-lightest; }
16}
17
18.theme__dark {
19 .settings-wrapper { background: rgba($dark-theme-black, .8); }
20
21 .settings {
22 background: $dark-theme-gray-darkest;
23 box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
24
25 .settings__header {
26 background: $dark-theme-gray-darker;
27
28 h1,
29 .settings__header-item { @extend %headline__dark; }
30
31 .separator { border-right: 1px solid $dark-theme-gray-dark; }
32 .mdi { color: $dark-theme-gray-lightest; }
33 }
34
35 .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; }
36
37 .settings__close {
38 background: $dark-theme-gray-darker;
39 border-left: none;
40 color: $dark-theme-gray-lightest;
41
42 &:hover { background: darken($dark-theme-gray-darker, 5%); }
43 }
44
45 &__settings-group h3 { color: $dark-theme-gray-lightest; }
46
47 .settings__message {
48 border-top: 1px solid $theme-gray-lighter;
49 color: $dark-theme-gray-lightest;
50
51 .mdi { color: $dark-theme-gray-lightest; }
52 }
53
54 .settings__help { color: $dark-theme-gray-lightest; }
55
56 .settings__controls {
57 background: $dark-theme-gray-darker;
58
59 .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; }
60 }
61
62 .account {
63 .account__box { background: $dark-theme-gray-darker; }
64
65 .invoices {
66 td { border-bottom: 1px solid $dark-theme-gray-darker; }
67 .invoices__action button { color: $theme-brand-primary; }
68 }
69 }
70
71 .premium-info {
72 background: $dark-theme-gray-darker;
73 border: 2px solid $theme-brand-primary;
74 }
75 .legal { color: $theme-gray-light; }
76 }
77
78 .settings-navigation {
79 background: $dark-theme-gray-darker;
80 border-right: 1px solid $dark-theme-gray-dark;
81
82 .settings-navigation__link {
83 color: $dark-theme-gray-lightest;
84
85 .badge {
86 background: $dark-theme-gray-lighter;
87 color: $dark-theme-gray-smoke;
88 }
89
90 &:hover {
91 background: darken($dark-theme-gray-darker, 5%);
92
93 .badge {
94 background: $dark-theme-gray-lighter;
95 color: $dark-theme-gray-smoke;
96 }
97 }
98
99 &.is-active {
100 background: $dark-theme-gray;
101 color: $dark-theme-gray-smoke;
102
103 .badge {
104 background: $dark-theme-gray-lighter;
105 color: $dark-theme-gray-smoke;
106 }
107 }
108 }
109
110 .settings-navigation__action-badge { background: $theme-brand-danger; }
11 } 111 }
12} 112}
13 113
14.settings-wrapper { 114.settings-wrapper {
15 background: rgba(black, 0.5); 115 align-items: center;
16 position: absolute; 116 background: rgba(black, .5);
17 width: 100%; 117 display: flex;
18 height: 100%; 118 height: 100%;
19 top: 0;
20 left: 0; 119 left: 0;
21 z-index: 9998;
22 display: flex;
23 justify-content: center; 120 justify-content: center;
24 align-items: center;
25 padding: 25px; 121 padding: 25px;
122 position: absolute;
123 top: 0;
124 width: 100%;
125 z-index: 9998;
26 126
27 .settings-wrapper__action { 127 .settings-wrapper__action {
28 position: absolute;
29 width: 100%;
30 height: 100%; 128 height: 100%;
31 top: 0;
32 left: 0; 129 left: 0;
130 position: absolute;
131 top: 0;
132 width: 100%;
33 } 133 }
34} 134}
35 135
36.settings { 136.settings {
37 position: relative; 137 background: #FFF;
138 border-radius: $theme-border-radius;
139 box-shadow: 0 20px 50px rgba(black, .5);
38 display: flex; 140 display: flex;
39 height: 100%; 141 height: 100%;
40 width: 100%; 142 max-height: 720px;
41 max-width: 900px; 143 max-width: 900px;
42 min-height: 400px; 144 min-height: 400px;
43 max-height: 720px;
44 z-index: 9999;
45 background: #FFF;
46 border-radius: $theme-border-radius;
47 box-shadow: 0 20px 50px rgba(black, 0.5);
48 overflow: hidden; 145 overflow: hidden;
49 // margin-top: -10%; 146 position: relative;
147 width: 100%;
148 z-index: 9999;
50 149
51 .settings__main { 150 .settings__main {
52 flex: 1;
53 display: flex; 151 display: flex;
152 flex: 1;
54 flex-direction: column; 153 flex-direction: column;
55 height: auto; 154 height: auto;
56 } 155 }
57 156
58 .settings__header { 157 .settings__header {
59 display: flex;
60 align-items: center; 158 align-items: center;
61 width: calc(100% - 60px); 159 background: $theme-gray-lighter;
160 display: flex;
62 height: 50px; 161 height: 50px;
63 padding: 0 40px; 162 padding: 0 40px;
64 background: $theme-gray-lighter; 163 width: calc(100% - 60px);
65 164
66 h1 { 165 h1 {
67 @extend %headline; 166 @extend %headline;
68 margin: 0; 167 margin: 0;
69 } 168 }
70 169
71 .settings__header-item { 170 .settings__header-item { @extend %headline; }
72 @extend %headline;
73 }
74 171
75 .separator { 172 .separator {
173 border-right: 1px solid darken($theme-gray-lighter, 10%);
76 height: 100%; 174 height: 100%;
77 margin: 0 15px; 175 margin: 0 15px;
78 border-right: 1px solid darken($theme-gray-lighter, 10%);
79 transform: skew(15deg) rotate(2deg); 176 transform: skew(15deg) rotate(2deg);
80 } 177 }
81 178
82 .mdi { 179 .mdi { color: $theme-gray-light; }
83 color: $theme-gray-light;
84 }
85 } 180 }
86 181
87 .settings__body { 182 .settings__body {
88 flex: 1; 183 flex: 1;
89 padding: 25px 15px 15px 25px;
90 margin: 15px; 184 margin: 15px;
91 overflow-y: scroll; 185 overflow-y: scroll;
186 padding: 25px 15px 15px 25px;
92 187
93 &::-webkit-scrollbar { 188 &::-webkit-scrollbar { width: 8px; }
94 width: 8px;
95 }
96 189
97 /* Track */ 190 /* Track */
98 &::-webkit-scrollbar-track { 191 &::-webkit-scrollbar-track {
99 -webkit-border-radius: 10px;
100 border-radius: 10px;
101 background: none; 192 background: none;
193 border-radius: 10px;
194 -webkit-border-radius: 10px;
102 } 195 }
103 196
104 /* Handle */ 197 /* Handle */
105 &::-webkit-scrollbar-thumb { 198 &::-webkit-scrollbar-thumb {
106 -webkit-border-radius: 10px;
107 border-radius: 10px;
108 background: $theme-gray-lighter; 199 background: $theme-gray-lighter;
200 border-radius: 10px;
201 -webkit-border-radius: 10px;
109 } 202 }
110 203
111 &::-webkit-scrollbar-thumb:window-inactive { 204 &::-webkit-scrollbar-thumb:window-inactive { background: none; }
112 background: none; 205 .service-flex-grid { display: flex; }
113 } 206 .service-name { flex: 1px; }
114
115 .service-flex-grid {
116 display: flex;
117 }
118
119 .service-name {
120 flex: 1px;
121 }
122 207
123 .service-icon { 208 .service-icon {
124 width: 140px;
125 float: right; 209 float: right;
126 margin-top: 30px;
127 margin-left: 40px; 210 margin-left: 40px;
211 margin-top: 30px;
212 width: 140px;
128 213
129 label { 214 label {
130 font-weight: bold; 215 font-weight: bold;
@@ -134,51 +219,45 @@
134 } 219 }
135 220
136 .settings__close { 221 .settings__close {
137 position: absolute;
138 right: 0;
139 background: $theme-gray-lighter; 222 background: $theme-gray-lighter;
140 height: 50px;
141 padding: 0 20px;
142 font-size: 20px;
143 border-left: 1px solid darken($theme-gray-lighter, 5%); 223 border-left: 1px solid darken($theme-gray-lighter, 5%);
144 color: $theme-gray-light; 224 color: $theme-gray-light;
225 font-size: 20px;
226 height: 50px;
227 padding: 0 20px;
228 position: absolute;
229 right: 0;
145 transition: background $theme-transition-time; 230 transition: background $theme-transition-time;
146 231
147 &:hover { 232 &:hover { background: darken($theme-gray-lighter, 5%); }
148 background: darken($theme-gray-lighter, 5%);
149 }
150 } 233 }
151 234
152 .search-input { 235 .search-input { margin-bottom: 30px; }
153 margin-bottom: 30px;
154 }
155 236
156 &__options { 237 &__options {
157 margin-top: 20px;
158 flex: 1; 238 flex: 1;
239 margin-top: 20px;
159 } 240 }
160 241
161 &__settings-group { 242 &__settings-group {
162 margin-top: 10px; 243 margin-top: 10px;
163 244
164 h3 { 245 h3 {
246 color: $theme-gray-light;
165 font-weight: bold; 247 font-weight: bold;
248 letter-spacing: -.1px;
166 margin: 25px 0 15px; 249 margin: 25px 0 15px;
167 color: $theme-gray-light;
168 letter-spacing: -0.1px;
169 250
170 &:first-of-type { 251 &:first-of-type { margin-top: 0; }
171 margin-top: 0;
172 }
173 } 252 }
174 } 253 }
175 254
176 .settings__message { 255 .settings__message {
256 border-top: 1px solid $theme-gray-lighter;
257 color: $theme-gray-light;
177 display: flex; 258 display: flex;
178 margin-top: 40px; 259 margin-top: 40px;
179 padding-top: 15px; 260 padding-top: 15px;
180 border-top: 1px solid $theme-gray-lighter;
181 color: $theme-gray-light;
182 261
183 .mdi { 262 .mdi {
184 color: $theme-gray-light; 263 color: $theme-gray-light;
@@ -188,69 +267,53 @@
188 } 267 }
189 268
190 .settings__help { 269 .settings__help {
191 margin: -10px 0 20px 55px;;
192 font-size: 12px;
193 color: $theme-gray-light; 270 color: $theme-gray-light;
271 font-size: 12px;
272 margin: -10px 0 20px 55px;;
194 } 273 }
195 274
196 .settings__controls { 275 .settings__controls {
276 background: $theme-gray-lighter;
197 display: flex; 277 display: flex;
278 height: auto;
198 justify-content: space-between; 279 justify-content: space-between;
199 padding: 10px 20px; 280 padding: 10px 20px;
200 height: auto;
201 background: $theme-gray-lighter;
202 281
203 .franz-form__button { 282 .franz-form__button {
204 &[type='submit'] { 283 &[type='submit'] { margin-left: auto; }
205 margin-left: auto; 284 &.franz-form__button--secondary { background: $theme-gray-light; }
206 }
207
208 &.franz-form__button--secondary {
209 background: $theme-gray-light;
210 }
211 } 285 }
212 } 286 }
213 287
214 .settings__delete-button { 288 .settings__delete-button { right: 0; }
215 right: 0;
216 }
217 289
218 .settings__empty-state { 290 .settings__empty-state {
219 width: 100%; 291 align-items: center;
292 align-self: center;
220 height: auto; 293 height: auto;
221 min-height: 70%; 294 min-height: 70%;
222 text-align: center; 295 text-align: center;
223 align-self: center; 296 width: 100%;
224 // margin-top: -20px;
225 align-items: center;
226 297
227 a.button { 298 a.button { margin-top: 40px; }
228 margin-top: 40px;
229 }
230 } 299 }
231 300
232 .account { 301 .account {
233 height: auto; 302 height: auto;
234 // padding: 20px;
235 303
236 .account__box { 304 .account__box {
305 align-items: center;
237 background: $theme-gray-lightest; 306 background: $theme-gray-lightest;
238 border-radius: $theme-border-radius; 307 border-radius: $theme-border-radius;
239 padding: 20px;
240 margin-bottom: 40px; 308 margin-bottom: 40px;
241 align-items: center; 309 padding: 20px;
242
243 &.account__box--flex {
244 display: flex;
245 }
246 310
247 &.account__box--last { 311 &.account__box--flex { display: flex; }
248 margin-bottom: 0; 312 &.account__box--last { margin-bottom: 0; }
249 }
250 313
251 .auth__button { 314 .auth__button {
252 width: 100%;
253 margin-top: 10px; 315 margin-top: 10px;
316 width: 100%;
254 } 317 }
255 } 318 }
256 319
@@ -258,57 +321,40 @@
258 margin-right: 20px; 321 margin-right: 20px;
259 position: relative; 322 position: relative;
260 323
261 .emoji img { 324 .emoji img { width: 30px; }
262 width: 30px;
263 }
264 } 325 }
265 326
266 .account__avatar-premium { 327 .account__avatar-premium {
328 font-size: 26px;
267 position: absolute; 329 position: absolute;
268 top: 2px;
269 right: 2px; 330 right: 2px;
270 font-size: 26px; 331 top: 2px;
271 } 332 }
272 333
273 .account__info { 334 .account__info {
274 flex: 1; 335 flex: 1;
275 336
276 h2 { 337 h2 { margin-bottom: 5px; }
277 margin-bottom: 5px; 338 .badge { margin-top: 5px; }
278 }
279
280 .badge {
281 margin-top: 5px;
282 }
283 } 339 }
284 340
285 .account__subscription { 341 .account__subscription {
286 display: flex;
287 align-items: center; 342 align-items: center;
343 display: flex;
288 344
289 .badge { 345 .badge { margin-left: 10px; }
290 margin-left: 10px;
291 }
292 }
293
294 .account__subscription-button {
295 margin-left: auto;
296 }
297
298 .franz-form__button {
299 white-space: nowrap;
300 } 346 }
301 347
302 div { 348 .account__subscription-button { margin-left: auto; }
303 height: auto; 349 .franz-form__button { white-space: nowrap; }
304 } 350 div { height: auto; }
305 351
306 .invoices { 352 .invoices {
307 width: 100%; 353 width: 100%;
308 354
309 td { 355 td {
310 padding: 15px 0;
311 border-bottom: 1px solid $theme-gray-lighter; 356 border-bottom: 1px solid $theme-gray-lighter;
357 padding: 15px 0;
312 } 358 }
313 359
314 tr:last-of-type td { 360 tr:last-of-type td {
@@ -319,9 +365,7 @@
319 .invoices__action { 365 .invoices__action {
320 text-align: right; 366 text-align: right;
321 367
322 button { 368 button { color: $theme-brand-primary; }
323 color: $theme-brand-primary;
324 }
325 } 369 }
326 } 370 }
327 } 371 }
@@ -331,15 +375,13 @@
331 font-size: 40px; 375 font-size: 40px;
332 margin-bottom: 20px; 376 margin-bottom: 20px;
333 377
334 img { 378 img { width: 40px; }
335 width: 40px;
336 }
337 } 379 }
338 380
339 .premium-info { 381 .premium-info {
340 background: lighten($theme-brand-primary, 40%); 382 background: lighten($theme-brand-primary, 40%);
341 padding: 20px;
342 border-radius: $theme-border-radius; 383 border-radius: $theme-border-radius;
384 padding: 20px;
343 } 385 }
344 386
345 .content-tabs .premium-info { 387 .content-tabs .premium-info {
@@ -348,35 +390,33 @@
348 } 390 }
349 391
350 .legal { 392 .legal {
351 text-align: center;
352 margin-top: 20px;
353 color: $theme-gray-light; 393 color: $theme-gray-light;
394 margin-top: 20px;
395 text-align: center;
354 } 396 }
355} 397}
356 398
357.settings-navigation { 399.settings-navigation {
358 width: 200px;
359 height: auto;
360 background: $theme-gray-lightest;
361 display: flex; 400 display: flex;
401 background: $theme-gray-lightest;
362 flex-direction: column; 402 flex-direction: column;
403 height: auto;
404 width: 200px;
363 405
364 .settings-navigation__link { 406 .settings-navigation__link {
365 display: flex;
366 align-items: center; 407 align-items: center;
367 height: 50px;
368 flex-shrink: 0;
369 text-decoration: none;
370 color: $theme-text-color; 408 color: $theme-text-color;
409 display: flex;
410 flex-shrink: 0;
411 height: 50px;
371 padding: 0 20px; 412 padding: 0 20px;
413 text-decoration: none;
372 transition: background $theme-transition-time, color $theme-transition-time; 414 transition: background $theme-transition-time, color $theme-transition-time;
373 415
374 &:hover { 416 &:hover {
375 background: darken($theme-gray-lightest, 5%); 417 background: darken($theme-gray-lightest, 5%);
376 418
377 .badge { 419 .badge { background: #FFF; }
378 background: #FFF;
379 }
380 } 420 }
381 421
382 &.is-active { 422 &.is-active {
@@ -390,22 +430,20 @@
390 } 430 }
391 } 431 }
392 432
393 .settings-navigation__expander { 433 .settings-navigation__expander { flex: 1; }
394 flex: 1;
395 }
396 434
397 .badge { 435 .badge {
398 transition: background $theme-transition-time, color $theme-transition-time;
399 display: initial; 436 display: initial;
400 margin-left: 5px; 437 margin-left: 5px;
438 transition: background $theme-transition-time, color $theme-transition-time;
401 } 439 }
402 440
403 .settings-navigation__action-badge { 441 .settings-navigation__action-badge {
404 display: inline-block;
405 width: 7px;
406 height: 7px;
407 background: $theme-brand-danger; 442 background: $theme-brand-danger;
408 border-radius: 100%; 443 border-radius: 100%;
444 display: inline-block;
445 height: 7px;
409 margin-left: 5px; 446 margin-left: 5px;
447 width: 7px;
410 } 448 }
411} 449}
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss
index bc7438be9..36f69df28 100644
--- a/src/styles/status-bar-target-url.scss
+++ b/src/styles/status-bar-target-url.scss
@@ -1,14 +1,14 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.status-bar-target-url { 3.status-bar-target-url {
4 height: auto;
5 background: $theme-gray-lighter; 4 background: $theme-gray-lighter;
6 padding: 4px; 5 border-top-left-radius: 5px;
7 position: absolute;
8 box-shadow: 0 0 8px rgba(black, 0.2);
9 font-size: 12px;
10 color: $theme-gray-dark;
11 bottom: 0; 6 bottom: 0;
7 box-shadow: 0 0 8px rgba(black, .2);
8 color: $theme-gray-dark;
9 font-size: 12px;
10 height: auto;
12 right: 0; 11 right: 0;
13 border-top-left-radius: 5px; 12 padding: 4px;
13 position: absolute;
14} 14}
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
index b6f232fcb..fb4795d6c 100644
--- a/src/styles/subscription-popup.scss
+++ b/src/styles/subscription-popup.scss
@@ -1,20 +1,15 @@
1.subscription-popup { 1.subscription-popup {
2 height: 100%; 2 height: 100%;
3 3
4 &__content { 4 &__content { height: calc(100% - 60px); }
5 height: calc(100% - 60px); 5 &__webview { height: 100%; }
6 }
7
8 &__webview {
9 height: 100%;
10 }
11 6
12 &__toolbar { 7 &__toolbar {
13 height: 60px;
14 background: $theme-gray-lightest; 8 background: $theme-gray-lightest;
9 border-top: 1px solid $theme-gray-lighter;
15 display: flex; 10 display: flex;
11 height: 60px;
16 justify-content: space-between; 12 justify-content: space-between;
17 padding: 10px; 13 padding: 10px;
18 border-top: 1px solid $theme-gray-lighter;
19 } 14 }
20} 15}
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
index 8bfb68d23..70fb41cde 100644
--- a/src/styles/subscription.scss
+++ b/src/styles/subscription.scss
@@ -3,63 +3,47 @@
3 margin: 10px 0; 3 margin: 10px 0;
4 4
5 li { 5 li {
6 height: 30px;
7 align-items: center; 6 align-items: center;
8 display: flex; 7 display: flex;
8 height: 30px;
9 9
10 &:before { 10 &:before {
11 content: "👍"; 11 content: "👍";
12 margin-right: 10px; 12 margin-right: 10px;
13 } 13 }
14 14
15 .badge { 15 .badge { margin-left: 10px; }
16 margin-left: 10px;
17 }
18 } 16 }
19 } 17 }
20 18
21 .subscription__premium-info { 19 .subscription__premium-info { margin: 15px 0 25px; }
22 margin: 15px 0 25px;
23 }
24} 20}
25 21
26.paymentTiers { 22.paymentTiers .franz-form__radio-wrapper {
27 .franz-form__radio-wrapper { 23 flex-flow: wrap;
28 flex-flow: wrap;
29 24
30 .franz-form__radio { 25 .franz-form__radio {
31 width: 32%; 26 flex: initial;
32 flex: initial; 27 margin-right: 2%;
33 margin-right: 2%; 28 width: 32%;
34 29
35 &:nth-child(3) { 30 &:nth-child(3) { margin-right: 0; }
36 margin-right: 0;
37 }
38 31
39 &:nth-child(4) { 32 &:nth-child(4) {
40 margin-right: 0; 33 margin-right: 0;
41 margin-top: 2%; 34 margin-top: 2%;
42 width: 100%; 35 width: 100%;
43 }
44 } 36 }
45 } 37 }
46} 38}
47 39
48.settings { 40.settings .paymentTiers .franz-form__radio-wrapper .franz-form__radio {
49 .paymentTiers { 41 width: 49%;
50 .franz-form__radio-wrapper {
51 .franz-form__radio {
52 width: 49%;
53 42
54 &:nth-child(2) { 43 &:nth-child(2) { margin-right: 0; }
55 margin-right: 0;
56 }
57 44
58 &:nth-child(3) { 45 &:nth-child(3) {
59 margin-top: 2%; 46 margin-top: 2%;
60 width: 100%; 47 width: 100%;
61 }
62 }
63 }
64 } 48 }
65} 49}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index ac48aabd6..cbd833f04 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,104 +1,88 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .tab-item {
4 &.is-active {
5 background: $dark-theme-gray;
6
7 .tab-item__icon { margin-left: -4px; }
8 }
9
10 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); }
11 .tab-item__icon { width: 34px; }
12}
13
3.tabs { 14.tabs {
4 display: flex; 15 display: flex;
5 // flex: 1;
6 flex-direction: column; 16 flex-direction: column;
7 flex-shrink: 1; 17 flex-shrink: 1;
8 // align-items: center;
9 // height: auto;
10 18
11 .placeholder { 19 .placeholder {
12 width: 100%;
13 height: 40px; 20 height: 40px;
21 width: 100%;
14 } 22 }
15} 23}
16 24
17.tab-item { 25.tab-item {
18 display: flex;
19 justify-content: center;
20 align-items: center; 26 align-items: center;
21 position: relative; 27 display: flex;
22 width: $theme-sidebar-width;
23 height: 65px; 28 height: 65px;
29 justify-content: center;
24 min-height: 50px; 30 min-height: 50px;
31 position: relative;
25 transition: background $theme-transition-time; 32 transition: background $theme-transition-time;
33 width: $theme-sidebar-width;
26 34
27 &.is-active { 35 &.is-active {
28 border-left: 4px solid $theme-brand-primary;
29 background: lighten($theme-brand-primary, 35%); 36 background: lighten($theme-brand-primary, 35%);
37 border-left: 4px solid $theme-brand-primary;
30 38
31 .tab-item__icon { 39 .tab-item__icon { margin-left: -4px; }
32 margin-left: -4px;
33 }
34 }
35
36 &.is-disabled {
37 .tab-item__icon {
38 filter: grayscale(100%) opacity(0.2);
39 }
40 }
41
42 &.has-custom-icon {
43 .tab-item__icon {
44 border-radius: $theme-border-radius;
45 // border: 1px solid $theme-gray-lighter;
46 // width: 32px;
47 }
48 } 40 }
49 41
50 &:active { 42 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
51 .tab-item__icon { 43 &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
52 opacity: 0.7; 44 &:active .tab-item__icon { opacity: .7; }
53 }
54 }
55 45
56 .tab-item__icon { 46 .tab-item__icon {
57 width: 30px;
58 height: auto; 47 height: auto;
48 width: 30px;
59 } 49 }
60 50
61 .tab-item__message-count { 51 .tab-item__message-count {
62 min-width: 17px; 52 align-items: center;
63 min-height: 17px;
64 background: $theme-brand-danger; 53 background: $theme-brand-danger;
65 color: #FFF;
66 border-radius: 20px; 54 border-radius: 20px;
67 padding: 0px 5px;
68 font-size: 11px;
69 position: absolute;
70 right: 8px;
71 bottom: 8px; 55 bottom: 8px;
56 color: #FFF;
72 display: flex; 57 display: flex;
58 font-size: 11px;
73 justify-content: center; 59 justify-content: center;
74 align-items: center; 60 min-height: 17px;
61 min-width: 17px;
62 padding: 0px 5px;
63 position: absolute;
64 right: 8px;
75 65
76 &.is-indirect { 66 &.is-indirect { padding-top: 0; }
77 padding-top: 0px;
78 }
79 } 67 }
80 68
81 .tab-item__info-badge { 69 .tab-item__info-badge {
82 width: 17px; 70 align-items: center;
83 height: 17px;
84 background: $theme-gray-light; 71 background: $theme-gray-light;
85 color: $theme-gray-lighter; 72 bottom: 8px;
86 border-radius: 20px; 73 border-radius: 20px;
87 padding: 0px 5px; 74 color: $theme-gray-lighter;
75 display: flex;
88 font-size: 11px; 76 font-size: 11px;
77 height: 17px;
78 justify-content: center;
79 padding: 0px 5px;
89 position: absolute; 80 position: absolute;
90 right: 8px; 81 right: 8px;
91 bottom: 8px; 82 width: 17px;
92 display: flex;
93 justify-content: center;
94 align-items: center;
95 83
96 &.is-indirect { 84 &.is-indirect { padding-top: 0; }
97 padding-top: 0px;
98 }
99 } 85 }
100 86
101 &.is-reordering { 87 &.is-reordering { z-index: 99999; }
102 z-index: 99999;
103 }
104} 88}
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss
new file mode 100644
index 000000000..885eb94c4
--- /dev/null
+++ b/src/styles/title-bar.scss
@@ -0,0 +1,80 @@
1@import './config.scss';
2
3.theme__dark #electron-app-title-bar {
4 background: $dark-theme-gray-darker;
5
6 .toolbar-dropdown {
7 &.open > .toolbar-button > button {
8 background: $dark-theme-gray-light;
9 color: $dark-theme-gray-lightest;
10 }
11
12 &:not(.open) {
13 .menu-item .menu-label { opacity: 1; }
14 > .toolbar-button > button:hover {
15 background: $dark-theme-gray-darkest;
16 }
17 }
18 }
19
20 #app-menu-bar #foldout-container .foldout {
21 color: $dark-theme-gray-lightest;
22
23 .menu-pane {
24 background: $dark-theme-gray-light;
25
26 .menu-item {
27 .accelerator {
28 color: lighten($dark-theme-gray-light, 20%);
29 }
30 }
31
32 hr {
33 border-color: $dark-theme-gray-lighter;
34 }
35 }
36 }
37
38 .list .ReactVirtualized__Grid {
39 background: $dark-theme-gray-light;
40 }
41}
42
43#electron-app-title-bar {
44 background: $theme-gray-lightest;
45 border-bottom: 0;
46 box-shadow: 0 0 8px rgba(black, .1);
47
48 span { line-height: normal; }
49
50 div { height: auto; }
51
52 .toolbar-dropdown {
53 &.open { box-shadow: 0 0 8px rgba(black, 0.1); }
54
55 &:not(.open) {
56 .menu-item .menu-label { opacity: 1; }
57 > .toolbar-button > button:hover { background: $theme-brand-primary; }
58 }
59 }
60
61 .list-item {
62 .menu-item {
63 border-radius: $theme-border-radius-small;
64 margin: 4px;
65 }
66
67 &.selected,
68 &.selected:focus {
69 background: none;
70
71 .menu-item { background: $theme-brand-primary; }
72 }
73 }
74
75 .menu-pane {
76 border-bottom-left-radius: $theme-border-radius-small;
77 border-bottom-right-radius: $theme-border-radius-small;
78 box-shadow: 0 0 10px rgba(black, .5);
79 }
80}
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 5b47e6495..0ce0c3379 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -4,44 +4,46 @@ $toggle-size: 14px;
4$toggle-width: 40px; 4$toggle-width: 40px;
5$toggle-button-size: 22px; 5$toggle-button-size: 22px;
6 6
7.franz-form { 7.theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle {
8 .franz-form__toggle-wrapper { 8 background: $dark-theme-gray;
9 display: flex; 9 border-radius: $toggle-size / 2;
10 flex-direction: row;
11 10
12 .franz-form__label { 11 .franz-form__toggle-button {
13 margin-left: 20px; 12 background: $dark-theme-gray-lighter;
13 box-shadow: 0 1px 4px rgba($dark-theme-black, .3);
14 }
15}
16
17.franz-form .franz-form__toggle-wrapper {
18 display: flex;
19 flex-direction: row;
20
21 .franz-form__label { margin-left: 20px; }
22
23 .franz-form__toggle {
24 background: $theme-gray-lighter;
25 border-radius: $theme-border-radius;
26 height: $toggle-size;
27 position: relative;
28 width: $toggle-width;
29
30 .franz-form__toggle-button {
31 background: $theme-gray-light;
32 border-radius: 100%;
33 box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
34 height: $toggle-size - 2;
35 left: 1px;
36 top: 1px;
37 position: absolute;
38 transition: all .5s;
39 width: $toggle-size - 2;
14 } 40 }
15 41
16 .franz-form__toggle { 42 &.is-active .franz-form__toggle-button {
17 width: $toggle-width; 43 background: $theme-brand-primary;
18 height: $toggle-size; 44 left: $toggle-width - $toggle-size - 3;;
19 position: relative;
20 background: $theme-gray-lighter;
21 border-radius: $theme-border-radius;
22
23 .franz-form__toggle-button {
24 position: absolute;
25 left: 0;
26 top: -($toggle-button-size - $toggle-size) / 2;
27 width: $toggle-button-size;
28 height: $toggle-button-size;
29 background: $theme-gray-light;
30 border-radius: 100%;
31 transition: all 0.5s;
32 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
33 }
34
35 &.is-active {
36 .franz-form__toggle-button {
37 left: $toggle-width - $toggle-button-size;
38 background: $theme-brand-primary;
39 }
40 }
41
42 input {
43 display: none;
44 }
45 } 45 }
46
47 input { display: none; }
46 } 48 }
47} 49}
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
index 1194e7fbb..5700e994c 100644
--- a/src/styles/tooltip.scss
+++ b/src/styles/tooltip.scss
@@ -1,4 +1,4 @@
1.__react_component_tooltip { 1.__react_component_tooltip {
2 padding: 10px !important;
3 height: auto; 2 height: auto;
3 padding: 10px !important;
4} 4}
diff --git a/src/styles/type.scss b/src/styles/type.scss
index cacbec482..135d32da0 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -1,6 +1,12 @@
1@import './config.scss'; 1@import './config.scss';
2@import './mixins.scss'; 2@import './mixins.scss';
3 3
4.theme__dark {
5 a { color: $dark-theme-gray-smoke; }
6 .label { color: $dark-theme-gray-lightest; }
7 .footnote { color: $dark-theme-gray-lightest; }
8}
9
4h1 { 10h1 {
5 font-size: 30px; 11 font-size: 30px;
6 font-weight: 300; 12 font-weight: 300;
@@ -15,38 +21,32 @@ h2 {
15 margin-bottom: 25px; 21 margin-bottom: 25px;
16 margin-top: 55px; 22 margin-top: 55px;
17 23
18 &:first-of-type { 24 &:first-of-type { margin-top: 0; }
19 margin-top: 0;
20 }
21} 25}
22 26
23p { 27p {
24 margin-bottom: 10px; 28 margin-bottom: 10px;
25 line-height: 1.7rem; 29 line-height: 1.7rem;
26 30
27 &:last-of-type { 31 &:last-of-type { margin-bottom: 0; }
28 margin-bottom: 0;
29 }
30} 32}
31 33
32strong { 34strong { font-weight: bold; }
33 font-weight: bold;
34}
35 35
36a { 36a {
37 text-decoration: none;
38 color: $theme-text-color; 37 color: $theme-text-color;
38 text-decoration: none;
39 39
40 &.button { 40 &.button {
41 position: relative;
42 background: none; 41 background: none;
43 display: inline-block;
44 padding: 10px 20px;
45 border: 2px solid $theme-brand-primary; 42 border: 2px solid $theme-brand-primary;
46 color: $theme-brand-primary;
47 border-radius: 3px; 43 border-radius: 3px;
48 transition: background 0.5s, color 0.5s; 44 color: $theme-brand-primary;
45 display: inline-block;
46 padding: 10px 20px;
47 position: relative;
49 text-align: center; 48 text-align: center;
49 transition: background .5s, color .5s;
50 50
51 &:hover { 51 &:hover {
52 background: darken($theme-brand-primary, 5%); 52 background: darken($theme-brand-primary, 5%);
@@ -54,25 +54,19 @@ a {
54 } 54 }
55 } 55 }
56 56
57 &.link { 57 &.link { color: $theme-brand-primary; }
58 color: $theme-brand-primary;
59 }
60} 58}
61 59
62.error-message, .error-message:last-of-type { 60.error-message, .error-message:last-of-type {
63 margin: 10px 0;
64 color: $theme-brand-danger; 61 color: $theme-brand-danger;
62 margin: 10px 0;
65} 63}
66 64
67.center { 65.center { text-align: center; }
68 text-align: center;
69}
70 66
71.label { 67.label { @include formLabel(); }
72 @include formLabel();
73}
74 68
75.footnote { 69.footnote {
76 font-size: 12px;
77 color: $theme-gray-light; 70 color: $theme-gray-light;
78} \ No newline at end of file 71 font-size: 12px;
72}
diff --git a/src/styles/util.scss b/src/styles/util.scss
index 3faad8db3..cc93f79ab 100644
--- a/src/styles/util.scss
+++ b/src/styles/util.scss
@@ -1,16 +1,16 @@
1.scroll-container { 1.scroll-container {
2 height: 100%;
3 flex: 1; 2 flex: 1;
4 overflow-y: scroll; 3 height: 100%;
5 overflow-x: hidden; 4 overflow-x: hidden;
5 overflow-y: scroll;
6} 6}
7 7
8.loader { 8.loader {
9 position: relative;
10 z-index: 9999;
11 display: block; 9 display: block;
12 width: 100%;
13 height: 40px; 10 height: 40px;
11 position: relative;
12 width: 100%;
13 z-index: 9999;
14} 14}
15 15
16.align-middle { 16.align-middle {
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index a12069ba4..b3d6515b1 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -1,92 +1,84 @@
1.auth { 1.auth .welcome {
2 .welcome { 2 &__content {
3 3 align-items: center;
4 &__content { 4 color: #FFF;
5 display: flex; 5 display: flex;
6 align-items: center; 6 justify-content: center;
7 justify-content: center; 7 }
8 color: #FFF;
9 }
10
11 &__logo {
12 width: 100px;
13 }
14 8
15 &__text { 9 &__logo { width: 100px; }
16 margin-left: 40px;
17 padding-left: 40px;
18 border-left: 1px solid #FFF;
19 10
20 h1 { 11 &__text {
21 font-size: 60px; 12 border-left: 1px solid #FFF;
22 letter-spacing: -0.4rem; 13 margin-left: 40px;
23 margin-bottom: 5px; 14 padding-left: 40px;
24 }
25 15
26 h2 { 16 h1 {
27 margin-left: 2px; 17 font-size: 60px;
28 margin-bottom: 0; 18 letter-spacing: -.4rem;
29 } 19 margin-bottom: 5px;
30 } 20 }
31 21
32 &__services { 22 h2 {
33 width: 100%; 23 margin-bottom: 0;
34 max-width: 800px; 24 margin-left: 2px;
35 height: 100%;
36 max-height: 600px;
37 margin-left: -450px;
38 } 25 }
26 }
39 27
40 &__buttons { 28 &__services {
41 display: block; 29 height: 100%;
42 margin-top: 100px; 30 margin-left: -450px;
43 text-align: center; 31 max-height: 600px;
32 max-width: 800px;
33 width: 100%;
34 }
44 35
45 .button:first-of-type { 36 &__buttons {
46 margin-right: 25px; 37 display: block;
47 } 38 margin-top: 100px;
48 } 39 text-align: center;
49 40
50 .button { 41 .button:first-of-type { margin-right: 25px; }
51 border-color: #FFF; 42 }
52 color: #FFF;
53 43
54 &:hover { 44 .button {
55 background: #FFF; 45 border-color: #FFF;
56 color: $theme-brand-primary; 46 color: #FFF;
57 }
58 47
59 &__inverted { 48 &:hover {
60 background: #FFF; 49 background: #FFF;
61 color: $theme-brand-primary; 50 color: $theme-brand-primary;
62 }
63 &__inverted:hover {
64 background: none;
65 color: #FFF;
66 }
67 } 51 }
68 52
69 &__featured-services { 53 &__inverted {
70 text-align: center;
71 width: 480px;
72 margin: 80px auto 0 auto;
73 display: flex;
74 align-items: center;
75 flex-wrap: wrap;
76 background: #FFF; 54 background: #FFF;
77 border-radius: 6px; 55 color: $theme-brand-primary;
78 padding: 20px 20px 5px;
79 } 56 }
80 57
81 &__featured-service { 58 &__inverted:hover {
82 width: 35px; 59 background: none;
83 height: 35px; 60 color: #FFF;
84 margin: 0 10px 15px;
85 transition: 0.5s filter, 0.5s opacity;
86
87 img {
88 width: 35px;
89 }
90 } 61 }
91 } 62 }
63
64 &__featured-services {
65 align-items: center;
66 background: #FFF;
67 border-radius: 6px;
68 display: flex;
69 flex-wrap: wrap;
70 margin: 80px auto 0 auto;
71 padding: 20px 20px 5px;
72 text-align: center;
73 width: 480px;
74 }
75
76 &__featured-service {
77 margin: 0 10px 15px;
78 height: 35px;
79 transition: .5s filter, .5s opacity;
80 width: 35px;
81
82 img { width: 35px; }
83 }
92} 84}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-10 20:53:12 +0000