aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/auth/AuthLayout.js94
-rw-r--r--src/components/layout/AppLayout.js4
-rw-r--r--src/components/settings/settings/EditSettingsForm.js1
-rw-r--r--src/config.js1
-rw-r--r--src/containers/auth/AuthLayoutContainer.js2
-rw-r--r--src/containers/layout/AppLayoutContainer.js1
-rw-r--r--src/containers/settings/EditSettingsScreen.js10
-rw-r--r--src/electron/Settings.js8
-rw-r--r--src/i18n/locales/en-US.json1
-rw-r--r--src/index.js2
-rw-r--r--src/stores/AppStore.js6
-rw-r--r--src/stores/SettingsStore.js27
-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.scss162
-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.scss351
-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.scss99
-rw-r--r--src/styles/title-bar.scss77
-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
43 files changed, 1133 insertions, 1040 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 4c991797c..4fb0e6a59 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
3import { observer } from 'mobx-react'; 3import { observer } from 'mobx-react';
4import { RouteTransition } from 'react-router-transition'; 4import { RouteTransition } from 'react-router-transition';
5import { intlShape } from 'react-intl'; 5import { intlShape } from 'react-intl';
6import { TitleBar } from 'electron-react-titlebar';
6 7
7import Link from '../ui/Link'; 8import Link from '../ui/Link';
8import InfoBar from '../ui/InfoBar'; 9import InfoBar from '../ui/InfoBar';
@@ -10,6 +11,8 @@ import InfoBar from '../ui/InfoBar';
10import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; 11import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
11import globalMessages from '../../i18n/globalMessages'; 12import globalMessages from '../../i18n/globalMessages';
12 13
14import { isWindows } from '../../environment';
15
13export default @observer class AuthLayout extends Component { 16export default @observer class AuthLayout extends Component {
14 static propTypes = { 17 static propTypes = {
15 children: oneOrManyChildElements.isRequired, 18 children: oneOrManyChildElements.isRequired,
@@ -19,6 +22,8 @@ export default @observer class AuthLayout extends Component {
19 isAPIHealthy: PropTypes.bool.isRequired, 22 isAPIHealthy: PropTypes.bool.isRequired,
20 retryHealthCheck: PropTypes.func.isRequired, 23 retryHealthCheck: PropTypes.func.isRequired,
21 isHealthCheckLoading: PropTypes.bool.isRequired, 24 isHealthCheckLoading: PropTypes.bool.isRequired,
25 isFullScreen: PropTypes.bool.isRequired,
26 darkMode: PropTypes.bool.isRequired,
22 }; 27 };
23 28
24 static contextTypes = { 29 static contextTypes = {
@@ -34,53 +39,58 @@ export default @observer class AuthLayout extends Component {
34 isAPIHealthy, 39 isAPIHealthy,
35 retryHealthCheck, 40 retryHealthCheck,
36 isHealthCheckLoading, 41 isHealthCheckLoading,
42 isFullScreen,
43 darkMode,
37 } = this.props; 44 } = this.props;
38 const { intl } = this.context; 45 const { intl } = this.context;
39 46
40 return ( 47 return (
41 <div className="auth"> 48 <div className={darkMode ? 'theme__dark' : ''}>
42 {!isOnline && ( 49 {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
43 <InfoBar 50 <div className={'auth'}>
44 type="warning" 51 {!isOnline && (
45 > 52 <InfoBar
46 <span className="mdi mdi-flash" /> 53 type="warning"
47 {intl.formatMessage(globalMessages.notConnectedToTheInternet)} 54 >
48 </InfoBar> 55 <span className="mdi mdi-flash" />
49 )} 56 {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
50 {isOnline && !isAPIHealthy && ( 57 </InfoBar>
51 <InfoBar 58 )}
52 type="danger" 59 {isOnline && !isAPIHealthy && (
53 ctaLabel="Try again" 60 <InfoBar
54 ctaLoading={isHealthCheckLoading} 61 type="danger"
55 sticky 62 ctaLabel="Try again"
56 onClick={retryHealthCheck} 63 ctaLoading={isHealthCheckLoading}
57 > 64 sticky
58 <span className="mdi mdi-flash" /> 65 onClick={retryHealthCheck}
59 {intl.formatMessage(globalMessages.APIUnhealthy)} 66 >
60 </InfoBar> 67 <span className="mdi mdi-flash" />
61 )} 68 {intl.formatMessage(globalMessages.APIUnhealthy)}
62 <div className="auth__layout"> 69 </InfoBar>
63 <RouteTransition 70 )}
64 pathname={pathname} 71 <div className="auth__layout">
65 atEnter={{ opacity: 0 }} 72 <RouteTransition
66 atLeave={{ opacity: 0 }} 73 pathname={pathname}
67 atActive={{ opacity: 1 }} 74 atEnter={{ opacity: 0 }}
68 mapStyles={styles => ({ 75 atLeave={{ opacity: 0 }}
69 transform: `translateX(${styles.translateX}%)`, 76 atActive={{ opacity: 1 }}
70 opacity: styles.opacity, 77 mapStyles={styles => ({
71 })} 78 transform: `translateX(${styles.translateX}%)`,
72 component="span" 79 opacity: styles.opacity,
73 > 80 })}
74 {/* Inject globalError into children */} 81 component="span"
75 {React.cloneElement(children, { 82 >
76 error, 83 {/* Inject globalError into children */}
77 })} 84 {React.cloneElement(children, {
78 </RouteTransition> 85 error,
86 })}
87 </RouteTransition>
88 </div>
89 {/* </div> */}
90 <Link to="https://adlk.io" className="auth__adlk" target="_blank">
91 <img src="./assets/images/adlk.svg" alt="" />
92 </Link>
79 </div> 93 </div>
80 {/* </div> */}
81 <Link to="https://adlk.io" className="auth__adlk" target="_blank">
82 <img src="./assets/images/adlk.svg" alt="" />
83 </Link>
84 </div> 94 </div>
85 ); 95 );
86 } 96 }
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index c2e811f3e..a4003ef8e 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -57,6 +57,7 @@ export default @observer class AppLayout extends Component {
57 areRequiredRequestsSuccessful: PropTypes.bool.isRequired, 57 areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
58 retryRequiredRequests: PropTypes.func.isRequired, 58 retryRequiredRequests: PropTypes.func.isRequired,
59 areRequiredRequestsLoading: PropTypes.bool.isRequired, 59 areRequiredRequestsLoading: PropTypes.bool.isRequired,
60 darkMode: PropTypes.bool.isRequired,
60 }; 61 };
61 62
62 static defaultProps = { 63 static defaultProps = {
@@ -84,12 +85,13 @@ export default @observer class AppLayout extends Component {
84 areRequiredRequestsSuccessful, 85 areRequiredRequestsSuccessful,
85 retryRequiredRequests, 86 retryRequiredRequests,
86 areRequiredRequestsLoading, 87 areRequiredRequestsLoading,
88 darkMode,
87 } = this.props; 89 } = this.props;
88 90
89 const { intl } = this.context; 91 const { intl } = this.context;
90 92
91 return ( 93 return (
92 <div> 94 <div className={(darkMode ? 'theme__dark' : '')}>
93 <div className="app"> 95 <div className="app">
94 {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} 96 {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
95 <div className="app__content"> 97 <div className="app__content">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3d265ce31..b5c048ebd 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -160,6 +160,7 @@ export default @observer class EditSettingsForm extends Component {
160 <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2> 160 <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
161 <Toggle field={form.$('showDisabledServices')} /> 161 <Toggle field={form.$('showDisabledServices')} />
162 <Toggle field={form.$('showMessageBadgeWhenMuted')} /> 162 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
163 <Toggle field={form.$('darkMode')} />
163 164
164 {/* Language */} 165 {/* Language */}
165 <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2> 166 <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
diff --git a/src/config.js b/src/config.js
index baa5a0ee5..ce946f00a 100644
--- a/src/config.js
+++ b/src/config.js
@@ -17,6 +17,7 @@ export const DEFAULT_APP_SETTINGS = {
17 showDisabledServices: true, 17 showDisabledServices: true,
18 showMessageBadgeWhenMuted: true, 18 showMessageBadgeWhenMuted: true,
19 enableSpellchecking: true, 19 enableSpellchecking: true,
20 darkMode: false,
20 locale: '', 21 locale: '',
21 fallbackLocale: 'en-US', 22 fallbackLocale: 'en-US',
22 beta: false, 23 beta: false,
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 62b589d2f..e1a780d1e 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -26,6 +26,8 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
26 isAPIHealthy={!stores.app.healthCheckRequest.isError} 26 isAPIHealthy={!stores.app.healthCheckRequest.isError}
27 retryHealthCheck={actions.app.healthCheck} 27 retryHealthCheck={actions.app.healthCheck}
28 isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting} 28 isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting}
29 isFullScreen={stores.app.isFullscreen}
30 darkMode={stores.app.isSystemDarkModeEnabled}
29 > 31 >
30 {children} 32 {children}
31 </AuthLayout> 33 </AuthLayout>
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index f63fe3717..fb3be13c0 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -120,6 +120,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
120 areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful} 120 areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
121 retryRequiredRequests={retryRequiredRequests} 121 retryRequiredRequests={retryRequiredRequests}
122 areRequiredRequestsLoading={requests.areRequiredRequestsLoading} 122 areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
123 darkMode={settings.all.app.darkMode}
123 > 124 >
124 {React.Children.count(children) > 0 ? children : null} 125 {React.Children.count(children) > 0 ? children : null}
125 </AppLayout> 126 </AppLayout>
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 0b3ad0389..df6442eb8 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -39,6 +39,10 @@ const messages = defineMessages({
39 id: 'settings.app.form.language', 39 id: 'settings.app.form.language',
40 defaultMessage: '!!!Language', 40 defaultMessage: '!!!Language',
41 }, 41 },
42 darkMode: {
43 id: 'settings.app.form.darkMode',
44 defaultMessage: '!!!Dark Mode',
45 },
42 showDisabledServices: { 46 showDisabledServices: {
43 id: 'settings.app.form.showDisabledServices', 47 id: 'settings.app.form.showDisabledServices',
44 defaultMessage: '!!!Display disabled services tabs', 48 defaultMessage: '!!!Display disabled services tabs',
@@ -90,6 +94,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
90 minimizeToSystemTray: settingsData.minimizeToSystemTray, 94 minimizeToSystemTray: settingsData.minimizeToSystemTray,
91 enableGPUAcceleration: settingsData.enableGPUAcceleration, 95 enableGPUAcceleration: settingsData.enableGPUAcceleration,
92 showDisabledServices: settingsData.showDisabledServices, 96 showDisabledServices: settingsData.showDisabledServices,
97 darkMode: settingsData.darkMode,
93 showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted, 98 showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
94 enableSpellchecking: settingsData.enableSpellchecking, 99 enableSpellchecking: settingsData.enableSpellchecking,
95 beta: settingsData.beta, // we need this info in the main process as well 100 beta: settingsData.beta, // we need this info in the main process as well
@@ -159,6 +164,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
159 value: settings.all.app.enableSpellchecking, 164 value: settings.all.app.enableSpellchecking,
160 default: DEFAULT_APP_SETTINGS.enableSpellchecking, 165 default: DEFAULT_APP_SETTINGS.enableSpellchecking,
161 }, 166 },
167 darkMode: {
168 label: intl.formatMessage(messages.darkMode),
169 value: settings.all.app.darkMode,
170 default: DEFAULT_APP_SETTINGS.darkMode,
171 },
162 enableGPUAcceleration: { 172 enableGPUAcceleration: {
163 label: intl.formatMessage(messages.enableGPUAcceleration), 173 label: intl.formatMessage(messages.enableGPUAcceleration),
164 value: settings.all.app.enableGPUAcceleration, 174 value: settings.all.app.enableGPUAcceleration,
diff --git a/src/electron/Settings.js b/src/electron/Settings.js
index b3138e948..254180b73 100644
--- a/src/electron/Settings.js
+++ b/src/electron/Settings.js
@@ -17,7 +17,7 @@ export default class Settings {
17 } 17 }
18 18
19 set(settings) { 19 set(settings) {
20 this.store = Object.assign(this.store, settings); 20 this.store = this._merge(settings);
21 21
22 this._writeFile(); 22 this._writeFile();
23 } 23 }
@@ -30,8 +30,12 @@ export default class Settings {
30 return this.store[key]; 30 return this.store[key];
31 } 31 }
32 32
33 _merge(settings) {
34 return Object.assign(DEFAULT_APP_SETTINGS, this.store, settings);
35 }
36
33 _hydrate() { 37 _hydrate() {
34 this.store = readJsonSync(SETTINGS_PATH); 38 this.store = this._merge(readJsonSync(SETTINGS_PATH));
35 debug('Hydrate store', toJS(this.store)); 39 debug('Hydrate store', toJS(this.store));
36 } 40 }
37 41
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 0c62da44a..8b2f763b5 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -158,6 +158,7 @@
158 "settings.app.form.autoLaunchOnStart": "Launch Franz on start", 158 "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
159 "settings.app.form.autoLaunchInBackground": "Open in background", 159 "settings.app.form.autoLaunchInBackground": "Open in background",
160 "settings.app.form.enableSystemTray": "Show Franz in system tray", 160 "settings.app.form.enableSystemTray": "Show Franz in system tray",
161 "settings.app.form.darkMode": "Join the Dark Side",
161 "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray", 162 "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray",
162 "settings.app.form.enableMenuBar": "Show Franz in Menu Bar", 163 "settings.app.form.enableMenuBar": "Show Franz in Menu Bar",
163 "settings.app.form.hideDockIcon": "Hide Franz icon in Dock", 164 "settings.app.form.hideDockIcon": "Hide Franz icon in Dock",
diff --git a/src/index.js b/src/index.js
index cfb7ade28..65f18bb55 100644
--- a/src/index.js
+++ b/src/index.js
@@ -87,7 +87,7 @@ const createWindow = () => {
87 minHeight: 500, 87 minHeight: 500,
88 titleBarStyle: isMac ? 'hidden' : '', 88 titleBarStyle: isMac ? 'hidden' : '',
89 frame: isLinux, 89 frame: isLinux,
90 backgroundColor: '#3498db', 90 backgroundColor: !settings.get('darkMode') ? '#3498db' : '#1E1E1E',
91 }); 91 });
92 92
93 // Initialize System Tray 93 // Initialize System Tray
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 38edff1b4..76d9bfa53 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -17,7 +17,7 @@ import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '..
17 17
18const debug = require('debug')('AppStore'); 18const debug = require('debug')('AppStore');
19 19
20const { app } = remote; 20const { app, systemPreferences } = remote;
21 21
22const mainWindow = remote.getCurrentWindow(); 22const mainWindow = remote.getCurrentWindow();
23 23
@@ -50,6 +50,8 @@ export default class AppStore extends Store {
50 50
51 @observable isSystemMuteOverridden = false; 51 @observable isSystemMuteOverridden = false;
52 52
53 @observable isSystemDarkModeEnabled = false;
54
53 @observable isClearingAllCache = false; 55 @observable isClearingAllCache = false;
54 56
55 @observable isFullScreen = mainWindow.isFullScreen(); 57 @observable isFullScreen = mainWindow.isFullScreen();
@@ -159,6 +161,8 @@ export default class AppStore extends Store {
159 this.locale = this._getDefaultLocale(); 161 this.locale = this._getDefaultLocale();
160 162
161 this._healthCheck(); 163 this._healthCheck();
164
165 this.isSystemDarkModeEnabled = systemPreferences.isDarkMode();
162 } 166 }
163 167
164 @computed get cacheSize() { 168 @computed get cacheSize() {
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 9270a6481..4b5715628 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -1,3 +1,4 @@
1import { remote } from 'electron';
1import { action, computed, observable } from 'mobx'; 2import { action, computed, observable } from 'mobx';
2import localStorage from 'mobx-localstorage'; 3import localStorage from 'mobx-localstorage';
3 4
@@ -6,6 +7,7 @@ import SettingsModel from '../models/Settings';
6import Request from './lib/Request'; 7import Request from './lib/Request';
7import CachedRequest from './lib/CachedRequest'; 8import CachedRequest from './lib/CachedRequest';
8 9
10const { systemPreferences } = remote;
9const debug = require('debug')('SettingsStore'); 11const debug = require('debug')('SettingsStore');
10 12
11export default class SettingsStore extends Store { 13export default class SettingsStore extends Store {
@@ -23,7 +25,7 @@ export default class SettingsStore extends Store {
23 async setup() { 25 async setup() {
24 // We need to wait until `appSettingsRequest` has been executed once, otherwise we can't patch the result. If we don't wait we'd run into an issue with mobx not reacting to changes of previously not existing keys 26 // We need to wait until `appSettingsRequest` has been executed once, otherwise we can't patch the result. If we don't wait we'd run into an issue with mobx not reacting to changes of previously not existing keys
25 await this.appSettingsRequest._promise; 27 await this.appSettingsRequest._promise;
26 this._migrate(); 28 await this._migrate();
27 } 29 }
28 30
29 @computed get all() { 31 @computed get all() {
@@ -67,7 +69,7 @@ export default class SettingsStore extends Store {
67 } 69 }
68 70
69 // Helper 71 // Helper
70 _migrate() { 72 async _migrate() {
71 const legacySettings = localStorage.getItem('app') || {}; 73 const legacySettings = localStorage.getItem('app') || {};
72 74
73 if (!this.all.migration['5.0.0-beta.17-settings']) { 75 if (!this.all.migration['5.0.0-beta.17-settings']) {
@@ -104,5 +106,26 @@ export default class SettingsStore extends Store {
104 106
105 debug('Migrated settings to split stores'); 107 debug('Migrated settings to split stores');
106 } 108 }
109
110 // Enable dark mode once
111 if (!this.all.migration['5.0.0-beta.19-settings']) {
112 this.actions.settings.update({
113 type: 'app',
114 data: {
115 darkMode: systemPreferences.isDarkMode(),
116 },
117 });
118
119 this.actions.settings.update({
120 type: 'migration',
121 data: {
122 '5.0.0-beta.19-settings': true,
123 },
124 });
125
126 localStorage.removeItem('app');
127
128 debug('Set up dark mode');
129 }
107 } 130 }
108} 131}
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 d7dfaf783..913a273df 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..38e487b47 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: darken($dark-theme-gray-lightest, 5%); }
15 &:active { background: lighten($dark-theme-gray-lightest, 5%); }
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..e93884b36 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: absolute;
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 964a9fcea..ebf468cf0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,16 +1,36 @@
1@import './config.scss'; 1@import './config.scss';
2 2
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: column; 31 flex-direction: column;
10 32
11 .app__content { 33 .app__content { display: flex; }
12 display: flex;
13 }
14 34
15 .app__service { 35 .app__service {
16 display: flex; 36 display: flex;
@@ -19,134 +39,100 @@ html {
19 } 39 }
20} 40}
21 41
22.electron-app-title-bar { 42.electron-app-title-bar { z-index: 99999999; }
23 z-index: 99999999;
24}
25 43
26.window-draggable { 44.window-draggable {
27 position: absolute;
28 width: 100%;
29 top: 0px;
30 left: 0px;
31 height: 35px; 45 height: 35px;
46 left: 0;
32 pointer-events: none; 47 pointer-events: none;
33 -webkit-app-region: drag; 48 position: absolute;
49 top: 0;
50 width: 100%;
34 z-index: 9999; 51 z-index: 9999;
52 -webkit-app-region: drag;
35} 53}
36 54
37.darwin { 55.darwin .sidebar { padding-top: 23px; }
38 .sidebar {
39 padding-top: 23px;
40 }
41}
42 56
43.sidebar { 57.sidebar {
44 display: flex;
45 flex-direction: column;
46 align-items: center; 58 align-items: center;
47 width: $theme-sidebar-width;
48 background: $theme-gray-lightest; 59 background: $theme-gray-lightest;
49 box-shadow: 1px 0 10px rgba(0,0,0,0.08); 60 box-shadow: 1px 0 10px rgba(0, 0, 0, .08);
50 z-index: 200;
51 text-align: center;
52 color: $theme-text-color; 61 color: $theme-text-color;
62 display: flex;
63 flex-direction: column;
53 padding-bottom: 10px; 64 padding-bottom: 10px;
65 text-align: center;
66 width: $theme-sidebar-width;
67 z-index: 200;
54 68
55 .sidebar__add-service { 69 .sidebar__add-service {
56 width: 32px; 70 color: $theme-gray-light;
57 height: 32px;
58 background: $theme-gray-lighter; 71 background: $theme-gray-lighter;
59 border-radius: $theme-border-radius-small; 72 border-radius: $theme-border-radius-small;
73 height: 32px;
60 margin: 10px auto; 74 margin: 10px auto;
61 color: $theme-gray-light; 75 width: 32px;
62 } 76 }
63 77
64 .sidebar__button { 78 .sidebar__button {
65 width: $theme-sidebar-width; 79 color: $theme-gray-light;
66 padding: 7px 0;
67 font-size: 24px; 80 font-size: 24px;
81 padding: 7px 0;
68 position: relative; 82 position: relative;
69 color: $theme-gray-light; 83 width: $theme-sidebar-width;
70
71 &:hover {
72 color: darken($theme-gray-light, 10%);
73 }
74
75 &:active {
76 color: lighten($theme-gray-light, 10%);
77 }
78
79 &.is-muted {
80 color: $theme-brand-primary;
81 }
82 84
83 &--new-service { 85 &:hover,
84 padding-bottom: 6px; 86 &:active { color: lighten($theme-gray-light, 10%); }
85 } 87 &.is-muted { color: $theme-brand-primary; }
88 &--new-service { padding-bottom: 6px; }
86 } 89 }
87 90
88 & > div { 91 & > div {
89 display: flex; 92 display: flex;
90 overflow-y: scroll; 93 overflow-y: scroll;
91 94
92 &::-webkit-scrollbar { 95 &::-webkit-scrollbar { display: none; }
93 display: none;
94 }
95 } 96 }
96} 97}
97 98
98.grid { 99.grid .grid__row {
99 .grid__row { 100 display: flex;
100 display: flex; 101 flex-direction: row;
101 flex-direction: row;
102
103 &>* {
104 margin-right: 20px;
105 }
106 102
107 & :last-child { 103 & > * { margin-right: 20px; }
108 margin-right: 0; 104 & :last-child { margin-right: 0; }
109 }
110 }
111} 105}
112 106
113.app-loader { 107.app-loader {
108 align-items: center;
114 display: flex; 109 display: flex;
115 justify-content: center; 110 justify-content: center;
116 align-items: center;
117 111
118 .app-loader__title { 112 .app-loader__title {
119 color: #FFF; 113 color: #FFF;
120 font-size: 40px; 114 font-size: 40px;
121 } 115 }
122 116
123 &>span { 117 & > span { height: auto; }
124 height: auto;
125 }
126}
127
128.dev-warning {
129 display: none;
130} 118}
131 119
132.isDevMode { 120.dev-warning { display: none; }
133 .dev-warning { 121
134 display: block; 122.isDevMode .dev-warning {
135 position: fixed; 123 border-radius: 3px;
136 background: $theme-brand-warning; 124 background: $theme-brand-warning;
137 width: auto; 125 color: #FFF;
138 height: auto; 126 display: block;
139 top: 5px; 127 font-size: 10px;
140 right: 5px; 128 height: auto;
141 padding: 4px; 129 padding: 4px;
142 font-size: 10px; 130 position: fixed;
143 color: #FFF; 131 right: 5px;
144 z-index: 999999999; 132 top: 5px;
145 border-radius: 3px; 133 transition: opacity .5s ease;
146 transition: opacity 0.5s ease; 134 width: auto;
147 135 z-index: 999999999;
148 &:hover { 136
149 opacity: 0; 137 &:hover { opacity: 0; }
150 }
151 }
152} 138}
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..c9703ad01 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,130 +1,212 @@
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 { background: lighten($theme-brand-primary, 40%); }
72 .legal { color: $theme-gray-light; }
73 }
74
75 .settings-navigation {
76 background: $dark-theme-gray-darker;
77 border-right: 1px solid $dark-theme-gray-dark;
78
79 .settings-navigation__link {
80 color: $dark-theme-gray-lightest;
81
82 .badge {
83 background: $dark-theme-gray-lighter;
84 color: $dark-theme-gray-smoke;
85 }
86
87 &:hover {
88 background: darken($dark-theme-gray-darker, 5%);
89
90 .badge {
91 background: $dark-theme-gray-lighter;
92 color: $dark-theme-gray-smoke;
93 }
94 }
95
96 &.is-active {
97 background: $dark-theme-gray;
98 color: $dark-theme-gray-smoke;
99
100 .badge {
101 background: $dark-theme-gray-lighter;
102 color: $dark-theme-gray-smoke;
103 }
104 }
105 }
106
107 .settings-navigation__action-badge { background: $theme-brand-danger; }
11 } 108 }
12} 109}
13 110
14.settings-wrapper { 111.settings-wrapper {
15 background: rgba(black, 0.5); 112 align-items: center;
16 position: absolute; 113 background: rgba(black, .5);
17 width: 100%; 114 display: flex;
18 height: 100%; 115 height: 100%;
19 top: 0;
20 left: 0; 116 left: 0;
21 z-index: 9998;
22 display: flex;
23 justify-content: center; 117 justify-content: center;
24 align-items: center;
25 padding: 25px; 118 padding: 25px;
119 position: absolute;
120 top: 0;
121 width: 100%;
122 z-index: 9998;
26 123
27 .settings-wrapper__action { 124 .settings-wrapper__action {
28 position: absolute;
29 width: 100%;
30 height: 100%; 125 height: 100%;
31 top: 0;
32 left: 0; 126 left: 0;
127 position: absolute;
128 top: 0;
129 width: 100%;
33 } 130 }
34} 131}
35 132
36.settings { 133.settings {
37 position: relative; 134 background: #FFF;
135 border-radius: $theme-border-radius;
136 box-shadow: 0 20px 50px rgba(black, .5);
38 display: flex; 137 display: flex;
39 height: 100%; 138 height: 100%;
40 width: 100%; 139 max-height: 720px;
41 max-width: 900px; 140 max-width: 900px;
42 min-height: 400px; 141 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; 142 overflow: hidden;
49 // margin-top: -10%; 143 position: relative;
144 width: 100%;
145 z-index: 9999;
50 146
51 .settings__main { 147 .settings__main {
52 flex: 1;
53 display: flex; 148 display: flex;
149 flex: 1;
54 flex-direction: column; 150 flex-direction: column;
55 height: auto; 151 height: auto;
56 } 152 }
57 153
58 .settings__header { 154 .settings__header {
59 display: flex;
60 align-items: center; 155 align-items: center;
61 width: calc(100% - 60px); 156 background: $theme-gray-lighter;
157 display: flex;
62 height: 50px; 158 height: 50px;
63 padding: 0 40px; 159 padding: 0 40px;
64 background: $theme-gray-lighter; 160 width: calc(100% - 60px);
65 161
66 h1 { 162 h1 {
67 @extend %headline; 163 @extend %headline;
68 margin: 0; 164 margin: 0;
69 } 165 }
70 166
71 .settings__header-item { 167 .settings__header-item { @extend %headline; }
72 @extend %headline;
73 }
74 168
75 .separator { 169 .separator {
170 border-right: 1px solid darken($theme-gray-lighter, 10%);
76 height: 100%; 171 height: 100%;
77 margin: 0 15px; 172 margin: 0 15px;
78 border-right: 1px solid darken($theme-gray-lighter, 10%);
79 transform: skew(15deg) rotate(2deg); 173 transform: skew(15deg) rotate(2deg);
80 } 174 }
81 175
82 .mdi { 176 .mdi { color: $theme-gray-light; }
83 color: $theme-gray-light;
84 }
85 } 177 }
86 178
87 .settings__body { 179 .settings__body {
88 flex: 1; 180 flex: 1;
89 padding: 25px 15px 15px 25px;
90 margin: 15px; 181 margin: 15px;
91 overflow-y: scroll; 182 overflow-y: scroll;
183 padding: 25px 15px 15px 25px;
92 184
93 &::-webkit-scrollbar { 185 &::-webkit-scrollbar { width: 8px; }
94 width: 8px;
95 }
96 186
97 /* Track */ 187 /* Track */
98 &::-webkit-scrollbar-track { 188 &::-webkit-scrollbar-track {
99 -webkit-border-radius: 10px;
100 border-radius: 10px;
101 background: none; 189 background: none;
190 border-radius: 10px;
191 -webkit-border-radius: 10px;
102 } 192 }
103 193
104 /* Handle */ 194 /* Handle */
105 &::-webkit-scrollbar-thumb { 195 &::-webkit-scrollbar-thumb {
106 -webkit-border-radius: 10px;
107 border-radius: 10px;
108 background: $theme-gray-lighter; 196 background: $theme-gray-lighter;
197 border-radius: 10px;
198 -webkit-border-radius: 10px;
109 } 199 }
110 200
111 &::-webkit-scrollbar-thumb:window-inactive { 201 &::-webkit-scrollbar-thumb:window-inactive { background: none; }
112 background: none; 202 .service-flex-grid { display: flex; }
113 } 203 .service-name { flex: 1px; }
114
115 .service-flex-grid {
116 display: flex;
117 }
118
119 .service-name {
120 flex: 1px;
121 }
122 204
123 .service-icon { 205 .service-icon {
124 width: 140px;
125 float: right; 206 float: right;
126 margin-top: 30px;
127 margin-left: 40px; 207 margin-left: 40px;
208 margin-top: 30px;
209 width: 140px;
128 210
129 label { 211 label {
130 font-weight: bold; 212 font-weight: bold;
@@ -134,51 +216,45 @@
134 } 216 }
135 217
136 .settings__close { 218 .settings__close {
137 position: absolute;
138 right: 0;
139 background: $theme-gray-lighter; 219 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%); 220 border-left: 1px solid darken($theme-gray-lighter, 5%);
144 color: $theme-gray-light; 221 color: $theme-gray-light;
222 font-size: 20px;
223 height: 50px;
224 padding: 0 20px;
225 position: absolute;
226 right: 0;
145 transition: background $theme-transition-time; 227 transition: background $theme-transition-time;
146 228
147 &:hover { 229 &:hover { background: darken($theme-gray-lighter, 5%); }
148 background: darken($theme-gray-lighter, 5%);
149 }
150 } 230 }
151 231
152 .search-input { 232 .search-input { margin-bottom: 30px; }
153 margin-bottom: 30px;
154 }
155 233
156 &__options { 234 &__options {
157 margin-top: 20px;
158 flex: 1; 235 flex: 1;
236 margin-top: 20px;
159 } 237 }
160 238
161 &__settings-group { 239 &__settings-group {
162 margin-top: 10px; 240 margin-top: 10px;
163 241
164 h3 { 242 h3 {
243 color: $theme-gray-light;
165 font-weight: bold; 244 font-weight: bold;
245 letter-spacing: -.1px;
166 margin: 25px 0 15px; 246 margin: 25px 0 15px;
167 color: $theme-gray-light;
168 letter-spacing: -0.1px;
169 247
170 &:first-of-type { 248 &:first-of-type { margin-top: 0; }
171 margin-top: 0;
172 }
173 } 249 }
174 } 250 }
175 251
176 .settings__message { 252 .settings__message {
253 border-top: 1px solid $theme-gray-lighter;
254 color: $theme-gray-light;
177 display: flex; 255 display: flex;
178 margin-top: 40px; 256 margin-top: 40px;
179 padding-top: 15px; 257 padding-top: 15px;
180 border-top: 1px solid $theme-gray-lighter;
181 color: $theme-gray-light;
182 258
183 .mdi { 259 .mdi {
184 color: $theme-gray-light; 260 color: $theme-gray-light;
@@ -188,69 +264,53 @@
188 } 264 }
189 265
190 .settings__help { 266 .settings__help {
191 margin: -10px 0 20px 55px;;
192 font-size: 12px;
193 color: $theme-gray-light; 267 color: $theme-gray-light;
268 font-size: 12px;
269 margin: -10px 0 20px 55px;;
194 } 270 }
195 271
196 .settings__controls { 272 .settings__controls {
273 background: $theme-gray-lighter;
197 display: flex; 274 display: flex;
275 height: auto;
198 justify-content: space-between; 276 justify-content: space-between;
199 padding: 10px 20px; 277 padding: 10px 20px;
200 height: auto;
201 background: $theme-gray-lighter;
202 278
203 .franz-form__button { 279 .franz-form__button {
204 &[type='submit'] { 280 &[type='submit'] { margin-left: auto; }
205 margin-left: auto; 281 &.franz-form__button--secondary { background: $theme-gray-light; }
206 }
207
208 &.franz-form__button--secondary {
209 background: $theme-gray-light;
210 }
211 } 282 }
212 } 283 }
213 284
214 .settings__delete-button { 285 .settings__delete-button { right: 0; }
215 right: 0;
216 }
217 286
218 .settings__empty-state { 287 .settings__empty-state {
219 width: 100%; 288 align-items: center;
289 align-self: center;
220 height: auto; 290 height: auto;
221 min-height: 70%; 291 min-height: 70%;
222 text-align: center; 292 text-align: center;
223 align-self: center; 293 width: 100%;
224 // margin-top: -20px;
225 align-items: center;
226 294
227 a.button { 295 a.button { margin-top: 40px; }
228 margin-top: 40px;
229 }
230 } 296 }
231 297
232 .account { 298 .account {
233 height: auto; 299 height: auto;
234 // padding: 20px;
235 300
236 .account__box { 301 .account__box {
302 align-items: center;
237 background: $theme-gray-lightest; 303 background: $theme-gray-lightest;
238 border-radius: $theme-border-radius; 304 border-radius: $theme-border-radius;
239 padding: 20px;
240 margin-bottom: 40px; 305 margin-bottom: 40px;
241 align-items: center; 306 padding: 20px;
242
243 &.account__box--flex {
244 display: flex;
245 }
246 307
247 &.account__box--last { 308 &.account__box--flex { display: flex; }
248 margin-bottom: 0; 309 &.account__box--last { margin-bottom: 0; }
249 }
250 310
251 .auth__button { 311 .auth__button {
252 width: 100%;
253 margin-top: 10px; 312 margin-top: 10px;
313 width: 100%;
254 } 314 }
255 } 315 }
256 316
@@ -258,57 +318,40 @@
258 margin-right: 20px; 318 margin-right: 20px;
259 position: relative; 319 position: relative;
260 320
261 .emoji img { 321 .emoji img { width: 30px; }
262 width: 30px;
263 }
264 } 322 }
265 323
266 .account__avatar-premium { 324 .account__avatar-premium {
325 font-size: 26px;
267 position: absolute; 326 position: absolute;
268 top: 2px;
269 right: 2px; 327 right: 2px;
270 font-size: 26px; 328 top: 2px;
271 } 329 }
272 330
273 .account__info { 331 .account__info {
274 flex: 1; 332 flex: 1;
275 333
276 h2 { 334 h2 { margin-bottom: 5px; }
277 margin-bottom: 5px; 335 .badge { margin-top: 5px; }
278 }
279
280 .badge {
281 margin-top: 5px;
282 }
283 } 336 }
284 337
285 .account__subscription { 338 .account__subscription {
286 display: flex;
287 align-items: center; 339 align-items: center;
340 display: flex;
288 341
289 .badge { 342 .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 } 343 }
301 344
302 div { 345 .account__subscription-button { margin-left: auto; }
303 height: auto; 346 .franz-form__button { white-space: nowrap; }
304 } 347 div { height: auto; }
305 348
306 .invoices { 349 .invoices {
307 width: 100%; 350 width: 100%;
308 351
309 td { 352 td {
310 padding: 15px 0;
311 border-bottom: 1px solid $theme-gray-lighter; 353 border-bottom: 1px solid $theme-gray-lighter;
354 padding: 15px 0;
312 } 355 }
313 356
314 tr:last-of-type td { 357 tr:last-of-type td {
@@ -319,9 +362,7 @@
319 .invoices__action { 362 .invoices__action {
320 text-align: right; 363 text-align: right;
321 364
322 button { 365 button { color: $theme-brand-primary; }
323 color: $theme-brand-primary;
324 }
325 } 366 }
326 } 367 }
327 } 368 }
@@ -331,15 +372,13 @@
331 font-size: 40px; 372 font-size: 40px;
332 margin-bottom: 20px; 373 margin-bottom: 20px;
333 374
334 img { 375 img { width: 40px; }
335 width: 40px;
336 }
337 } 376 }
338 377
339 .premium-info { 378 .premium-info {
340 background: lighten($theme-brand-primary, 40%); 379 background: lighten($theme-brand-primary, 40%);
341 padding: 20px;
342 border-radius: $theme-border-radius; 380 border-radius: $theme-border-radius;
381 padding: 20px;
343 } 382 }
344 383
345 .content-tabs .premium-info { 384 .content-tabs .premium-info {
@@ -348,35 +387,33 @@
348 } 387 }
349 388
350 .legal { 389 .legal {
351 text-align: center;
352 margin-top: 20px;
353 color: $theme-gray-light; 390 color: $theme-gray-light;
391 margin-top: 20px;
392 text-align: center;
354 } 393 }
355} 394}
356 395
357.settings-navigation { 396.settings-navigation {
358 width: 200px;
359 height: auto;
360 background: $theme-gray-lightest;
361 display: flex; 397 display: flex;
398 background: $theme-gray-lightest;
362 flex-direction: column; 399 flex-direction: column;
400 height: auto;
401 width: 200px;
363 402
364 .settings-navigation__link { 403 .settings-navigation__link {
365 display: flex;
366 align-items: center; 404 align-items: center;
367 height: 50px;
368 flex-shrink: 0;
369 text-decoration: none;
370 color: $theme-text-color; 405 color: $theme-text-color;
406 display: flex;
407 flex-shrink: 0;
408 height: 50px;
371 padding: 0 20px; 409 padding: 0 20px;
410 text-decoration: none;
372 transition: background $theme-transition-time, color $theme-transition-time; 411 transition: background $theme-transition-time, color $theme-transition-time;
373 412
374 &:hover { 413 &:hover {
375 background: darken($theme-gray-lightest, 5%); 414 background: darken($theme-gray-lightest, 5%);
376 415
377 .badge { 416 .badge { background: #FFF; }
378 background: #FFF;
379 }
380 } 417 }
381 418
382 &.is-active { 419 &.is-active {
@@ -390,22 +427,20 @@
390 } 427 }
391 } 428 }
392 429
393 .settings-navigation__expander { 430 .settings-navigation__expander { flex: 1; }
394 flex: 1;
395 }
396 431
397 .badge { 432 .badge {
398 transition: background $theme-transition-time, color $theme-transition-time;
399 display: initial; 433 display: initial;
400 margin-left: 5px; 434 margin-left: 5px;
435 transition: background $theme-transition-time, color $theme-transition-time;
401 } 436 }
402 437
403 .settings-navigation__action-badge { 438 .settings-navigation__action-badge {
404 display: inline-block;
405 width: 7px;
406 height: 7px;
407 background: $theme-brand-danger; 439 background: $theme-brand-danger;
408 border-radius: 100%; 440 border-radius: 100%;
441 display: inline-block;
442 height: 7px;
409 margin-left: 5px; 443 margin-left: 5px;
444 width: 7px;
410 } 445 }
411} 446}
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..384495481 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,104 +1,89 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .tab-item {
4 &.is-active {
5 background: $dark-theme-gray;
6 border-left: 0;
7
8 .tab-item__icon { margin-left: -4px; }
9 }
10
11 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); }
12 .tab-item__icon { width: 34px; }
13}
14
3.tabs { 15.tabs {
4 display: flex; 16 display: flex;
5 // flex: 1;
6 flex-direction: column; 17 flex-direction: column;
7 flex-shrink: 1; 18 flex-shrink: 1;
8 // align-items: center;
9 // height: auto;
10 19
11 .placeholder { 20 .placeholder {
12 width: 100%;
13 height: 40px; 21 height: 40px;
22 width: 100%;
14 } 23 }
15} 24}
16 25
17.tab-item { 26.tab-item {
18 display: flex;
19 justify-content: center;
20 align-items: center; 27 align-items: center;
21 position: relative; 28 display: flex;
22 width: $theme-sidebar-width;
23 height: 65px; 29 height: 65px;
30 justify-content: center;
24 min-height: 50px; 31 min-height: 50px;
32 position: relative;
25 transition: background $theme-transition-time; 33 transition: background $theme-transition-time;
34 width: $theme-sidebar-width;
26 35
27 &.is-active { 36 &.is-active {
28 border-left: 4px solid $theme-brand-primary;
29 background: lighten($theme-brand-primary, 35%); 37 background: lighten($theme-brand-primary, 35%);
38 border-left: 4px solid $theme-brand-primary;
30 39
31 .tab-item__icon { 40 .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 } 41 }
49 42
50 &:active { 43 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
51 .tab-item__icon { 44 &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
52 opacity: 0.7; 45 &:active .tab-item__icon { opacity: .7; }
53 }
54 }
55 46
56 .tab-item__icon { 47 .tab-item__icon {
57 width: 30px;
58 height: auto; 48 height: auto;
49 width: 30px;
59 } 50 }
60 51
61 .tab-item__message-count { 52 .tab-item__message-count {
62 min-width: 17px; 53 align-items: center;
63 min-height: 17px;
64 background: $theme-brand-danger; 54 background: $theme-brand-danger;
65 color: #FFF;
66 border-radius: 20px; 55 border-radius: 20px;
67 padding: 0px 5px;
68 font-size: 11px;
69 position: absolute;
70 right: 8px;
71 bottom: 8px; 56 bottom: 8px;
57 color: #FFF;
72 display: flex; 58 display: flex;
59 font-size: 11px;
73 justify-content: center; 60 justify-content: center;
74 align-items: center; 61 min-height: 17px;
62 min-width: 17px;
63 padding: 0px 5px;
64 position: absolute;
65 right: 8px;
75 66
76 &.is-indirect { 67 &.is-indirect { padding-top: 0; }
77 padding-top: 0px;
78 }
79 } 68 }
80 69
81 .tab-item__info-badge { 70 .tab-item__info-badge {
82 width: 17px; 71 align-items: center;
83 height: 17px;
84 background: $theme-gray-light; 72 background: $theme-gray-light;
85 color: $theme-gray-lighter; 73 bottom: 8px;
86 border-radius: 20px; 74 border-radius: 20px;
87 padding: 0px 5px; 75 color: $theme-gray-lighter;
76 display: flex;
88 font-size: 11px; 77 font-size: 11px;
78 height: 17px;
79 justify-content: center;
80 padding: 0px 5px;
89 position: absolute; 81 position: absolute;
90 right: 8px; 82 right: 8px;
91 bottom: 8px; 83 width: 17px;
92 display: flex;
93 justify-content: center;
94 align-items: center;
95 84
96 &.is-indirect { 85 &.is-indirect { padding-top: 0; }
97 padding-top: 0px;
98 }
99 } 86 }
100 87
101 &.is-reordering { 88 &.is-reordering { z-index: 99999; }
102 z-index: 99999;
103 }
104} 89}
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss
index 5316f35b3..885eb94c4 100644
--- a/src/styles/title-bar.scss
+++ b/src/styles/title-bar.scss
@@ -1,49 +1,80 @@
1#electron-app-title-bar { 1@import './config.scss';
2 background: $theme-gray-lightest;
3 border-bottom: 0;
4 box-shadow: 0px 0 8px rgba(#000, 0.1);
5
6 span {
7 line-height: normal;
8 }
9 2
10 div { 3.theme__dark #electron-app-title-bar {
11 height: auto; 4 background: $dark-theme-gray-darker;
12 }
13 5
14 .toolbar-dropdown { 6 .toolbar-dropdown {
15 &.open { 7 &.open > .toolbar-button > button {
16 box-shadow: 0px 0 8px rgba(#000, 0.1); 8 background: $dark-theme-gray-light;
9 color: $dark-theme-gray-lightest;
17 } 10 }
18 11
19 &:not(.open) { 12 &:not(.open) {
20 .menu-item .menu-label { 13 .menu-item .menu-label { opacity: 1; }
21 opacity: 1; 14 > .toolbar-button > button:hover {
15 background: $dark-theme-gray-darkest;
22 } 16 }
17 }
18 }
23 19
24 &>.toolbar-button > button:hover { 20 #app-menu-bar #foldout-container .foldout {
25 background: $theme-brand-primary; 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;
26 } 34 }
27 } 35 }
28 } 36 }
29 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
30 .list-item { 61 .list-item {
31 .menu-item { 62 .menu-item {
32 margin: 4px;
33 border-radius: $theme-border-radius-small; 63 border-radius: $theme-border-radius-small;
64 margin: 4px;
34 } 65 }
35 &.selected, &.selected:focus { 66
67 &.selected,
68 &.selected:focus {
36 background: none; 69 background: none;
37 70
38 .menu-item { 71 .menu-item { background: $theme-brand-primary; }
39 background: $theme-brand-primary;
40 }
41 } 72 }
42 } 73 }
43 74
44 .menu-pane { 75 .menu-pane {
45 box-shadow: 0px 0 10px rgba(#000, 0.5);
46 border-bottom-left-radius: $theme-border-radius-small; 76 border-bottom-left-radius: $theme-border-radius-small;
47 border-bottom-right-radius: $theme-border-radius-small; 77 border-bottom-right-radius: $theme-border-radius-small;
78 box-shadow: 0 0 10px rgba(black, .5);
48 } 79 }
49} 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-54-g00ecf (git 2.45.2) at 2024-08-03 05:34:22 +0000