-
-
Notifications
You must be signed in to change notification settings - Fork 172
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve UI code styling for all platforms
This commit standardizes the visual styling of inline code and code blocks, ensuring consistency across macOS, Android, Linux and Windows platforms. The discrepancies observed in font rendering on macOS, which caused the inline code font to appear larger, have been addressed. This behavior was only observed on macOS using different browsers such as Firefox, Safari, Chromium-based browsers including Electron. Key changes: - Standardize font size relative to the parent element. - Remove font-weight for uniformity, especially when the specific weight is not included with the application. - Add a consistent background color to inline codes, aligning their look with code blocks. - Refactor code styling into a separate SCSS file for improved modularity and maintainability. - Update the documentation to reflect these visual design choices for privacy.sexy's UI. These changes enhance the overall user experience by providing a consistent look and feel for code elements within the UI, regardless of the user's platform or browser.
- Loading branch information
1 parent
aa4205f
commit 311fcb1
Showing
4 changed files
with
59 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
@use "@/presentation/assets/styles/main" as *; | ||
|
||
@mixin code-block() { | ||
pre { | ||
@content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has | ||
} | ||
} | ||
|
||
@mixin inline-code() { | ||
:not(pre)>code { | ||
@content; | ||
} | ||
} | ||
|
||
@mixin base-code() { | ||
code { | ||
@content; | ||
} | ||
} | ||
|
||
@mixin style-code-elements( | ||
$color-background, | ||
$code-block-padding, | ||
) { | ||
$border-radius: 2px; // Subtle rounding still maintaining sharp design. | ||
|
||
@include base-code { | ||
font-family: $font-normal; | ||
border-radius: $border-radius; | ||
font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around. | ||
} | ||
|
||
@include inline-code { | ||
background: $color-background; | ||
word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow. | ||
padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size. | ||
} | ||
|
||
@include code-block { | ||
background: $color-background; | ||
border-radius: $border-radius; | ||
overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) | ||
padding: $code-block-padding; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters