diff options
author | 2021-05-12 18:48:40 +0200 | |
---|---|---|
committer | 2021-05-12 18:48:40 +0200 | |
commit | 2a2f6fe945b87f50c95a31efb7c47c664e58a8bf (patch) | |
tree | f38165789e3a68b83a91b6882d75885c47579371 /src/styles/layout.scss | |
parent | Updated the documentation (#1394) (diff) | |
download | ferdium-app-2a2f6fe945b87f50c95a31efb7c47c664e58a8bf.tar.gz ferdium-app-2a2f6fe945b87f50c95a31efb7c47c664e58a8bf.tar.zst ferdium-app-2a2f6fe945b87f50c95a31efb7c47c664e58a8bf.zip |
Fix some appearance issues (#1398)
* Fix property spelling in Sidebar component
* Fix typo in todos partition name
* Use the FerdiDev setting.json in dev mode
The app.setPath calls are still a mess and need to be fixed, but this at
least allows me to experiment locally.
* Make @meetfranz/theme follow the accent color
We inject the value of the accent color into the themes, so the buttons
show the appropriate color. This allows removing some existing css
hacks.
In order to do this, the themes had to be turned into functions that
take the brand color (accent color) as an argument instead of
hard-coding it.
The css-based accent color for legacy components is left unchanged.
* Remove superfluous scrollbars
While overflow: scroll doesn't look ugly on macs, because the system
hides scrollbars by default (except on hower), on Linux and Windows, the
disabled scrollbars appearing by default look ugly.
We set overflow-y: auto instead to display a scrollbar only when needed.
* Simplify theme generation in @meetfranz/themes
* Remove default accent color code duplication
* Apply accent color to styles not in themeInfo.json
Some colors are darkened/lightened versions of the primary brand color,
so they are not caught by build-theme-info. We create these styles with
`color` manually.
* Inset shadow on sidebar
This creates a more flat look that projecting a shadow over the service,
and avoid compositing a shadow over the webview.
* Apply accent color to vertical style tab bar
* Workspace drawer styling in vertical mode
* Fix sidebar layout
In vertical mode, the top of the service was clipped by the sidebar
Also removes unnecessary whitespace in sidebar
* Fix 1px wide line on right when todos are hidden
* Fix window menu
When building the menu bar, the File / app menu is added later, so we
must be careful about indexing the menu bar.
* Update locale files
* Report the default accent color accurately
* Fix inverted button with dark theme
* Fix crash with invalid accent color
Fall back to the default accent color instead
* Darker secondary buttons in dark mode
* Vertical workspace drawer style outside debug mode
In order to reliably apply the style, we need to add a class name to the
drawer manually, as component names only appear in class names in debug
mode.
Diffstat (limited to 'src/styles/layout.scss')
-rw-r--r-- | src/styles/layout.scss | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index ecc305193..acbd65ad1 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -17,9 +17,13 @@ html { overflow: hidden; } | |||
17 | .theme__dark .app { | 17 | .theme__dark .app { |
18 | .sidebar { | 18 | .sidebar { |
19 | background: $dark-theme-gray-darker; | 19 | background: $dark-theme-gray-darker; |
20 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
21 | color: $theme-text-color; | 20 | color: $theme-text-color; |
22 | 21 | ||
22 | &::after { | ||
23 | box-shadow: inset 0 0 5px 0 $dark-theme-black, | ||
24 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | ||
25 | } | ||
26 | |||
23 | .sidebar__add-service { | 27 | .sidebar__add-service { |
24 | color: $dark-theme-gray-lighter; | 28 | color: $dark-theme-gray-lighter; |
25 | background: $dark-theme-gray; | 29 | background: $dark-theme-gray; |
@@ -108,9 +112,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
108 | .darwin .sidebar { padding-top: 23px; } | 112 | .darwin .sidebar { padding-top: 23px; } |
109 | 113 | ||
110 | .sidebar { | 114 | .sidebar { |
115 | position: relative; | ||
111 | align-items: center; | 116 | align-items: center; |
112 | background: $theme-gray-lightest; | 117 | background: $theme-gray-lightest; |
113 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); | ||
114 | color: $theme-text-color; | 118 | color: $theme-text-color; |
115 | display: flex; | 119 | display: flex; |
116 | flex-direction: column; | 120 | flex-direction: column; |
@@ -119,6 +123,20 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
119 | width: $theme-sidebar-width; | 123 | width: $theme-sidebar-width; |
120 | z-index: 200; | 124 | z-index: 200; |
121 | 125 | ||
126 | &::after { | ||
127 | content: ' '; | ||
128 | position: absolute; | ||
129 | top: -10px; | ||
130 | right: 0; | ||
131 | bottom: -10px; | ||
132 | left: -10px; | ||
133 | z-index: 1000; | ||
134 | pointer-events: none; | ||
135 | clip-path: inset(10px 0 10px 10px); | ||
136 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12), | ||
137 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); | ||
138 | } | ||
139 | |||
122 | .sidebar__add-service { | 140 | .sidebar__add-service { |
123 | color: $theme-gray-light; | 141 | color: $theme-gray-light; |
124 | background: $theme-gray-lighter; | 142 | background: $theme-gray-lighter; |
@@ -191,4 +209,4 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
191 | 209 | ||
192 | a, button { | 210 | a, button { |
193 | cursor: pointer; | 211 | cursor: pointer; |
194 | } \ No newline at end of file | 212 | } |