diff options
author | 2018-11-19 16:05:00 +0100 | |
---|---|---|
committer | 2018-11-19 16:05:00 +0100 | |
commit | 5551cd9650afb48a1789ed36dffbe4df64e75e5b (patch) | |
tree | 5062736ac1ca89824adde9a82380d715a2030fba /src | |
parent | Merge branch 'develop' of github.com:meetfranz/franz into develop (diff) | |
parent | Bring package-lock in sync (diff) | |
download | ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.tar.gz ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.tar.zst ferdium-app-5551cd9650afb48a1789ed36dffbe4df64e75e5b.zip |
Merge branch 'feature/dark-theme' into develop
Diffstat (limited to 'src')
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'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { RouteTransition } from 'react-router-transition'; | 4 | import { RouteTransition } from 'react-router-transition'; |
5 | import { intlShape } from 'react-intl'; | 5 | import { intlShape } from 'react-intl'; |
6 | import { TitleBar } from 'electron-react-titlebar'; | ||
6 | 7 | ||
7 | import Link from '../ui/Link'; | 8 | import Link from '../ui/Link'; |
8 | import InfoBar from '../ui/InfoBar'; | 9 | import InfoBar from '../ui/InfoBar'; |
@@ -10,6 +11,8 @@ import InfoBar from '../ui/InfoBar'; | |||
10 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; | 11 | import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types'; |
11 | import globalMessages from '../../i18n/globalMessages'; | 12 | import globalMessages from '../../i18n/globalMessages'; |
12 | 13 | ||
14 | import { isWindows } from '../../environment'; | ||
15 | |||
13 | export default @observer class AuthLayout extends Component { | 16 | export 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 | ||
18 | const debug = require('debug')('AppStore'); | 18 | const debug = require('debug')('AppStore'); |
19 | 19 | ||
20 | const { app } = remote; | 20 | const { app, systemPreferences } = remote; |
21 | 21 | ||
22 | const mainWindow = remote.getCurrentWindow(); | 22 | const 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 @@ | |||
1 | import { remote } from 'electron'; | ||
1 | import { action, computed, observable } from 'mobx'; | 2 | import { action, computed, observable } from 'mobx'; |
2 | import localStorage from 'mobx-localstorage'; | 3 | import localStorage from 'mobx-localstorage'; |
3 | 4 | ||
@@ -6,6 +7,7 @@ import SettingsModel from '../models/Settings'; | |||
6 | import Request from './lib/Request'; | 7 | import Request from './lib/Request'; |
7 | import CachedRequest from './lib/CachedRequest'; | 8 | import CachedRequest from './lib/CachedRequest'; |
8 | 9 | ||
10 | const { systemPreferences } = remote; | ||
9 | const debug = require('debug')('SettingsStore'); | 11 | const debug = require('debug')('SettingsStore'); |
10 | 12 | ||
11 | export default class SettingsStore extends Store { | 13 | export 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 | ||
3 | html { | 3 | html { overflow: hidden; } |
4 | overflow: hidden; | 4 | |
5 | .theme__dark .app { | ||
6 | .sidebar { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
9 | color: $theme-text-color; | ||
10 | |||
11 | .sidebar__add-service { | ||
12 | color: $dark-theme-gray-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, | |||
16 | figure, figcaption, footer, header, hgroup, | 16 | figure, figcaption, footer, header, hgroup, |
17 | menu, nav, output, ruby, section, summary, | 17 | menu, nav, output, ruby, section, summary, |
18 | time, mark, audio, video { | 18 | time, 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 | |
26 | article, aside, details, figcaption, figure, | 26 | article, aside, details, figcaption, figure, |
27 | footer, header, hgroup, menu, nav, section { | 27 | footer, header, hgroup, menu, nav, section { display: block; } |
28 | display: block; | 28 | |
29 | } | 29 | ol, |
30 | body { | 30 | ul { list-style: none; } |
31 | line-height: 1; | 31 | |
32 | } | 32 | blockquote, |
33 | ol, ul { | 33 | q { |
34 | list-style: none; | ||
35 | } | ||
36 | blockquote, q { | ||
37 | quotes: none; | 34 | quotes: none; |
35 | |||
36 | &::before, | ||
37 | &::after { | ||
38 | content: ''; | ||
39 | content: none; | ||
40 | } | ||
38 | } | 41 | } |
39 | blockquote:before, blockquote:after, q:before, q:after { | 42 | |
40 | content: ''; | ||
41 | content: none; | ||
42 | } | ||
43 | table { | 43 | table { |
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 */ | ||
49 | button { | 48 | button { |
50 | background: none; | 49 | background: none; |
51 | border: none; | 50 | border: none; |
52 | padding: 0; | 51 | padding: 0; |
53 | } | ||
54 | 52 | ||
55 | button:focus { | 53 | &:focus { outline: 0; } |
56 | outline: 0; | 54 | .theme__dark & { color: $dark-theme-gray-smoke; } |
57 | } | 55 | } |
58 | 56 | ||
59 | html { | 57 | html { |
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 | ||
65 | body { | 62 | body { |
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; | 85 | img { pointer-events: none; } |
87 | } | 86 | a { cursor: default; } |
88 | |||
89 | img { | ||
90 | pointer-events: none; | ||
91 | } | ||
92 | |||
93 | a { | ||
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 | |||
4 | h1 { | 10 | h1 { |
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 | ||
23 | p { | 27 | p { |
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 | ||
32 | strong { | 34 | strong { font-weight: bold; } |
33 | font-weight: bold; | ||
34 | } | ||
35 | 35 | ||
36 | a { | 36 | a { |
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 | } |