311fcb1813
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.
117 lines
3.4 KiB
SCSS
117 lines
3.4 KiB
SCSS
@use "@/presentation/assets/styles/main" as *;
|
|
@use "_code-styling" as *;
|
|
@use 'sass:math';
|
|
|
|
@mixin no-margin($selectors) {
|
|
#{$selectors} {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@mixin no-padding($selectors) {
|
|
#{$selectors} {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@mixin left-padding($selectors, $horizontal-spacing) {
|
|
#{$selectors} {
|
|
padding-inline-start: $horizontal-spacing;
|
|
}
|
|
}
|
|
|
|
@mixin bottom-margin($selectors, $vertical-spacing) {
|
|
#{$selectors} {
|
|
&:not(:last-child) {
|
|
margin-bottom: $vertical-spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
|
|
/* Reset default top/bottom margins added by browser. */
|
|
@include no-margin('p');
|
|
@include no-margin('h1, h2, h3, h4, h5, h6');
|
|
@include no-margin('blockquote');
|
|
@include no-margin('pre');
|
|
|
|
/* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
|
|
$small-vertical-spacing: math.div($base-vertical-spacing, 2);
|
|
@include bottom-margin('p', $base-vertical-spacing);
|
|
@include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);
|
|
@include bottom-margin('ul, ol', $base-vertical-spacing);
|
|
@include bottom-margin('li', $small-vertical-spacing);
|
|
@include bottom-margin('table', $base-vertical-spacing);
|
|
@include bottom-margin('blockquote', $base-vertical-spacing);
|
|
@include bottom-margin('pre', $base-vertical-spacing);
|
|
}
|
|
|
|
@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
|
|
/* Reset default left/right paddings added by browser. */
|
|
@include no-padding('ul, ol');
|
|
|
|
/* Add spacing for list items. */
|
|
$large-horizontal-spacing: $base-horizontal-spacing * 2;
|
|
@include left-padding('ul, ol', $large-horizontal-spacing);
|
|
}
|
|
|
|
@mixin markdown-text-styles($text-size) {
|
|
$base-spacing: $text-size;
|
|
|
|
a {
|
|
&[href] {
|
|
word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
|
|
}
|
|
&[href^="http"]{
|
|
&:after {
|
|
/*
|
|
Use mask element instead of content/background-image etc.
|
|
This way we can apply current font color to it to match the theme
|
|
*/
|
|
mask: url(@/presentation/assets/icons/external-link.svg) no-repeat 50% 50%;
|
|
mask-size: cover;
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
width: $text-size;
|
|
height: $text-size;
|
|
|
|
background-color: $text-color;
|
|
margin-left: math.div($text-size, 4);
|
|
}
|
|
/*
|
|
Match color of global hover behavior. We need to do it manually because global hover sets
|
|
`color` property but here we need to modify `background-color` property because color only
|
|
works if SVG is embedded as HTML element (as `<svg/>`) not as `url(..)` as we do. Then the
|
|
only option is to use `mask` and `background-color` properties.
|
|
*/
|
|
@include hover-or-touch {
|
|
&::after{
|
|
background-color: $color-highlight;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include apply-uniform-vertical-spacing($base-spacing);
|
|
@include apply-uniform-horizontal-spacing($base-spacing);
|
|
|
|
ul {
|
|
/*
|
|
Set list style explicitly, because otherwise it changes based on parent <ul>s in tree view.
|
|
We reset the style from here.
|
|
*/
|
|
list-style: square;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 0 $base-spacing;
|
|
border-left: .25em solid $color-primary;
|
|
}
|
|
|
|
@include style-code-elements(
|
|
$code-block-padding: $base-spacing,
|
|
$color-background: $color-primary-darker,
|
|
);
|
|
}
|