diff options
author | Mahadevan Sreenivasan <mahadevan_sv@yahoo.com> | 2020-04-14 14:56:16 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-14 10:26:16 +0100 |
commit | 100016e38098ff389b2d6899dee76413da26f2ae (patch) | |
tree | bcb0f69ef87b4fb91905da2a58538d3e8cc828e5 /src/styles/slider.scss | |
parent | New Crowdin translations (#495) (diff) | |
download | ferdium-app-100016e38098ff389b2d6899dee76413da26f2ae.tar.gz ferdium-app-100016e38098ff389b2d6899dee76413da26f2ae.tar.zst ferdium-app-100016e38098ff389b2d6899dee76413da26f2ae.zip |
Expose Dark Reader settings (#568)
* feat: Expose DarkReader settings to users
- In the service model, expose an object darkReaderSetting which contains brightness, contrast and sepia values.
- In EditServiceScreen, provide 3 form options for brightness, contrast and Sepia. Additionally onSubmit() form, capture the darkreader settings data onto formdata.darkReaderSettings to update in the service
- In EditServiceForm, if darkModeEnabled is checked, show 3 sliders for controlling darkreader settings
- Create a new Slider control and customize it according to the application's theme and dark theme.
- In Webview Recipe, load the darkReader settings from service settings and pass it to the darkReader library.
* feat: Darkreader settings
- Lint fixes
* feat: DarkReader settings
- refactor code in editservicescreen.js
Co-Authored-By: Sampath Kumar Krishnan <sampath3493@gmail.com>
* feat: Darkreader settings
- Fix a crash where service.darkReaderSettings is null while creating a new service
- Remove isDarkModeEnabled prop to EditServiceForm as it is no longer required.
* fix: Update EditServiceScreen
- Set the default value of darkReader Brightness, Contrast and Sepia to undefined as per @vantezzen 's suggestion.
- Updated the check provided by @mahadevans87
Co-authored-by: Sampath Kumar Krishnan <sampath3493@gmail.com>
Co-authored-by: Sampath Kumar Krishnan <sampathBlam@users.noreply.github.com>
Diffstat (limited to 'src/styles/slider.scss')
-rw-r--r-- | src/styles/slider.scss | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/styles/slider.scss b/src/styles/slider.scss new file mode 100644 index 000000000..36e0638c4 --- /dev/null +++ b/src/styles/slider.scss | |||
@@ -0,0 +1,54 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .theme__dark .franz-form .franz-form__slider-wrapper .slider { | ||
4 | border: 1px solid $dark-theme-gray; | ||
5 | background: $dark-theme-gray; | ||
6 | |||
7 | } | ||
8 | |||
9 | |||
10 | .franz-form { | ||
11 | .franz-form__slider-wrapper { | ||
12 | display: flex; | ||
13 | flex-direction: row; | ||
14 | |||
15 | .franz-form__label { margin-left: 20px; } | ||
16 | |||
17 | .slider-container { | ||
18 | width: 100%; /* Width of the outside container */ | ||
19 | } | ||
20 | |||
21 | /* The slider itself */ | ||
22 | .slider { | ||
23 | -webkit-appearance: none; | ||
24 | width: 100%; | ||
25 | height: 14px; | ||
26 | border-radius: $theme-border-radius; | ||
27 | background: $theme-gray-lighter; | ||
28 | outline: none; | ||
29 | opacity: 1.0; | ||
30 | -webkit-transition: .2s; | ||
31 | transition: opacity .2s; | ||
32 | } | ||
33 | |||
34 | .slider::-webkit-slider-thumb { | ||
35 | -webkit-appearance: none; | ||
36 | appearance: none; | ||
37 | width: 14px; | ||
38 | height: 14px; | ||
39 | border-radius: 50%; | ||
40 | background: $theme-brand-primary; | ||
41 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | ||
42 | cursor: pointer; | ||
43 | } | ||
44 | |||
45 | .slider::-moz-range-thumb { | ||
46 | width: 14px; | ||
47 | height: 14px; | ||
48 | border-radius: 50%; | ||
49 | background: $theme-brand-primary; | ||
50 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | ||
51 | cursor: pointer; | ||
52 | } | ||
53 | } | ||
54 | } | ||