aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/button.scss108
-rw-r--r--src/styles/info-bar.scss4
-rw-r--r--src/styles/layout.scss33
-rw-r--r--src/styles/recipes.scss4
-rw-r--r--src/styles/services.scss23
-rw-r--r--src/styles/settings.scss15
-rw-r--r--src/styles/subscription.scss5
-rw-r--r--src/styles/tabs.scss18
-rw-r--r--src/styles/type.scss5
9 files changed, 130 insertions, 85 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss
index c2dd91293..75d2cb1d4 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,74 +1,72 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.franz-form { 3.franz-form__button {
4 .franz-form__button { 4 position: relative;
5 position: relative; 5 background: $theme-brand-primary;
6 background: $theme-brand-primary; 6 display: block;
7 display: block; 7 padding: 10px 20px;
8 padding: 10px 20px; 8 color: #FFF;
9 color: #FFF; 9 border-radius: 3px;
10 border-radius: 3px; 10 transition: background 0.5s;
11 transition: background 0.5s; 11 text-align: center;
12 text-align: center;
13 12
14 &:hover { 13 &:hover {
15 background: darken($theme-brand-primary, 5%); 14 background: darken($theme-brand-primary, 5%);
16 } 15 }
17 16
18 &:active { 17 &:active {
19 transition: none; 18 transition: none;
20 background: lighten($theme-brand-primary, 5%); 19 background: lighten($theme-brand-primary, 5%);
21 } 20 }
22 21
23 &:disabled { 22 &:disabled {
24 opacity: 0.2; 23 opacity: 0.2;
25 } 24 }
26 25
27 &.franz-form__button--secondary { 26 &.franz-form__button--secondary {
28 background: $theme-gray-lighter; 27 background: $theme-gray-lighter;
29 color: $theme-gray; 28 color: $theme-gray;
30 29
31 &:hover { 30 &:hover {
32 background: darken($theme-gray-lighter, 5%); 31 background: darken($theme-gray-lighter, 5%);
33 } 32 }
34 33
35 &:active { 34 &:active {
36 background: lighten($theme-gray-lighter, 5%); 35 background: lighten($theme-gray-lighter, 5%);
37 }
38 } 36 }
37 }
39 38
40 &.franz-form__button--danger { 39 &.franz-form__button--danger {
41 background: $theme-brand-danger; 40 background: $theme-brand-danger;
42 41
43 &:hover { 42 &:hover {
44 background: darken($theme-brand-danger, 5%); 43 background: darken($theme-brand-danger, 5%);
45 } 44 }
46 45
47 &:active { 46 &:active {
48 background: lighten($theme-brand-danger, 5%); 47 background: lighten($theme-brand-danger, 5%);
49 }
50 } 48 }
49 }
51 50
52 &.franz-form__button--inverted { 51 &.franz-form__button--inverted {
53 background: none; 52 background: none;
54 padding: 10px 20px; 53 padding: 10px 20px;
55 border: 2px solid $theme-brand-primary; 54 border: 2px solid $theme-brand-primary;
56 color: $theme-brand-primary; 55 color: $theme-brand-primary;
57 transition: background 0.5s, color 0.5s; 56 transition: background 0.5s, color 0.5s;
58 57
59 &:hover { 58 &:hover {
60 background: darken($theme-brand-primary, 5%); 59 background: darken($theme-brand-primary, 5%);
61 color: #FFF; 60 color: #FFF;
62 }
63 } 61 }
62 }
64 63
65 .loader { 64 .loader {
66 position: relative; 65 position: relative;
67 width: 20px; 66 width: 20px;
68 height: 12px; 67 height: 12px;
69 z-index: 9999; 68 z-index: 9999;
70 display: inline-block; 69 display: inline-block;
71 margin-right: 5px; 70 margin-right: 5px;
72 }
73 } 71 }
74} 72}
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
index c30c951ee..b6d1e84e2 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -46,6 +46,10 @@
46 } 46 }
47 } 47 }
48 48
49 a {
50 // text-decoration: underline;
51 }
52
49 &.info-bar--bottom { 53 &.info-bar--bottom {
50 order: 10; 54 order: 10;
51 } 55 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index d87df2684..afdd7dec7 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -42,6 +42,7 @@ html {
42 z-index: 200; 42 z-index: 200;
43 text-align: center; 43 text-align: center;
44 color: $theme-text-color; 44 color: $theme-text-color;
45 padding-bottom: 10px;
45 46
46 .sidebar__add-service { 47 .sidebar__add-service {
47 width: 32px; 48 width: 32px;
@@ -52,26 +53,28 @@ html {
52 color: $theme-gray-light; 53 color: $theme-gray-light;
53 } 54 }
54 55
55 .sidebar__settings-button { 56 .sidebar__button {
56 height: auto; 57 width: $theme-sidebar-width;
57 padding: 20px 0; 58 padding: 7px 0;
58 font-size: 12px; 59 font-size: 24px;
59 position: relative; 60 position: relative;
61 color: $theme-gray-light;
60 62
61 .emoji { 63 &:hover {
62 position: absolute; 64 color: darken($theme-gray-light, 10%);
63 top: 18px; 65 }
64 right: 12px;
65 66
66 img { 67 &:active {
67 width: 18px; 68 color: lighten($theme-gray-light, 10%);
68 }
69 } 69 }
70 }
71 70
72 .sidebar__logo { 71 &.is-muted {
73 width: 40px; 72 color: $theme-brand-primary;
74 height: auto; 73 }
74
75 &--new-service {
76 padding-bottom: 6px;
77 }
75 } 78 }
76 79
77 & > div { 80 & > div {
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 017aa4fe2..1b519a5e5 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -29,6 +29,10 @@
29 pointer-events: none; 29 pointer-events: none;
30 } 30 }
31 } 31 }
32
33 &__service-request {
34 float: right;
35 }
32} 36}
33 37
34.recipe-teaser { 38.recipe-teaser {
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 3347ea9d7..282c15121 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -8,7 +8,12 @@
8 background: #FFF; 8 background: #FFF;
9 order: 5; 9 order: 5;
10 10
11 .services__webview { 11 .services__webview-wrapper {
12 background: $theme-gray-lighter;
13 }
14
15 .services__webview,
16 .services__info-layer {
12 position: absolute; 17 position: absolute;
13 width: 100%; 18 width: 100%;
14 top: 0; 19 top: 0;
@@ -38,7 +43,8 @@
38 } 43 }
39 } 44 }
40 45
41 .services__no-service { 46 .services__no-service,
47 .services__info-layer {
42 display: flex; 48 display: flex;
43 flex-direction: column; 49 flex-direction: column;
44 justify-content: center; 50 justify-content: center;
@@ -51,10 +57,15 @@
51 color: $theme-gray-dark; 57 color: $theme-gray-dark;
52 } 58 }
53 59
54 a.button { 60 a.button,
55 margin-top: 40px; 61 button {
56 // color: #FFF; 62 margin: 40px 0 20px;
57 // border-color: #FFF;
58 } 63 }
59 } 64 }
65
66 .services__info-layer {
67 position: absolut;
68 z-index: 110;
69 }
70
60} 71}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 9b19deb4e..6e93094b4 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -40,7 +40,7 @@
40 width: 100%; 40 width: 100%;
41 max-width: 900px; 41 max-width: 900px;
42 min-height: 400px; 42 min-height: 400px;
43 max-height: 600px; 43 max-height: 720px;
44 z-index: 9999; 44 z-index: 9999;
45 background: #FFF; 45 background: #FFF;
46 border-radius: $theme-border-radius; 46 border-radius: $theme-border-radius;
@@ -169,7 +169,7 @@
169 } 169 }
170 } 170 }
171 171
172 .settings__indirect-message-help { 172 .settings__help {
173 margin: -10px 0 20px 55px;; 173 margin: -10px 0 20px 55px;;
174 font-size: 12px; 174 font-size: 12px;
175 color: $theme-gray-light; 175 color: $theme-gray-light;
@@ -334,6 +334,12 @@
334 background: none; 334 background: none;
335 padding: 0; 335 padding: 0;
336 } 336 }
337
338 .legal {
339 text-align: center;
340 margin-top: 20px;
341 color: $theme-gray-light;
342 }
337} 343}
338 344
339.settings-navigation { 345.settings-navigation {
@@ -344,9 +350,10 @@
344 flex-direction: column; 350 flex-direction: column;
345 351
346 .settings-navigation__link { 352 .settings-navigation__link {
347 display: block; 353 display: flex;
354 align-items: center;
348 height: 50px; 355 height: 50px;
349 line-height: 50px; 356 flex-shrink: 0;
350 text-decoration: none; 357 text-decoration: none;
351 color: $theme-text-color; 358 color: $theme-text-color;
352 padding: 0 20px; 359 padding: 0 20px;
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
index 63183f085..01d8f4ecb 100644
--- a/src/styles/subscription.scss
+++ b/src/styles/subscription.scss
@@ -36,7 +36,7 @@
36 margin-right: 0; 36 margin-right: 0;
37 } 37 }
38 38
39 &:last-of-type { 39 &:nth-child(4) {
40 margin-right: 0; 40 margin-right: 0;
41 margin-top: 2%; 41 margin-top: 2%;
42 width: 100%; 42 width: 100%;
@@ -55,7 +55,8 @@
55 margin-right: 0; 55 margin-right: 0;
56 } 56 }
57 57
58 &:last-of-type { 58 &:nth-child(3) {
59 margin-top: 2%;
59 width: 100%; 60 width: 100%;
60 } 61 }
61 } 62 }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 75568898b..3ffc53558 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -20,7 +20,7 @@
20 align-items: center; 20 align-items: center;
21 position: relative; 21 position: relative;
22 width: $theme-sidebar-width; 22 width: $theme-sidebar-width;
23 height: $theme-sidebar-width; 23 height: 65px;
24 min-height: 50px; 24 min-height: 50px;
25 transition: background $theme-transition-time; 25 transition: background $theme-transition-time;
26 26
@@ -33,6 +33,12 @@
33 } 33 }
34 } 34 }
35 35
36 &.is-disabled {
37 .tab-item__icon {
38 filter: grayscale(100%) opacity(0.2);
39 }
40 }
41
36 &.has-custom-icon { 42 &.has-custom-icon {
37 .tab-item__icon { 43 .tab-item__icon {
38 border-radius: $theme-border-radius; 44 border-radius: $theme-border-radius;
@@ -41,6 +47,12 @@
41 } 47 }
42 } 48 }
43 49
50 &:active {
51 .tab-item__icon {
52 opacity: 0.7;
53 }
54 }
55
44 .tab-item__icon { 56 .tab-item__icon {
45 width: 30px; 57 width: 30px;
46 height: auto; 58 height: auto;
@@ -55,8 +67,8 @@
55 padding: 0px 5px; 67 padding: 0px 5px;
56 font-size: 11px; 68 font-size: 11px;
57 position: absolute; 69 position: absolute;
58 right: 5px; 70 right: 8px;
59 bottom: 5px; 71 bottom: 8px;
60 display: flex; 72 display: flex;
61 justify-content: center; 73 justify-content: center;
62 align-items: center; 74 align-items: center;
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 935a36f4b..cacbec482 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -71,3 +71,8 @@ a {
71.label { 71.label {
72 @include formLabel(); 72 @include formLabel();
73} 73}
74
75.footnote {
76 font-size: 12px;
77 color: $theme-gray-light;
78} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-21 20:16:48 +0000