Apply global styles for visual consistency
This commit centralizes the styling of key UI elements across the project to ensure: - Consistent look and feel. - Enhanced code reusability. - Simpified maintenance, improving development speed. It establishes a uniform foundation that can be leveraged across different parts of the project, even enabling the styling to be shared across different websites (supporting issue #49). Key changes: - Apply the following shared styles globally: * Styling of code, blockquotes, superscripts, horizontal rules and anchors. * Vertical and horizontal spacing. - Segregate base styling into dedicated SCSS files for clearer structure and increased maintainability. - Remove custom styling from affected components, enabling global style reuse for visual uniformity, reduced redundancy, and enhanced semantics. Other supporting changes: - Rename `globals.scss` to `base.scss` for better clarity. - Add `.editorconfig` for `.scss` files to ensure consistent whitespace usage. - Remove `2` file from the project root, that was included in the source code by mistake. - Remove unused font-face imports
This commit is contained in:
undergroundwires
@@ -1,53 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<p class="privacy-rating">
|
||||
Privacy: <CircleRating :rating="privacyRating" />
|
||||
</p>
|
||||
<hr />
|
||||
<div class="sections">
|
||||
<section>
|
||||
{{ description }}
|
||||
</section>
|
||||
<section class="recommendation">
|
||||
<AppIcon icon="lightbulb" class="icon" />
|
||||
<span class="text">{{ recommendation }}</span>
|
||||
</section>
|
||||
<section
|
||||
v-if="includes?.length > 0"
|
||||
class="includes"
|
||||
>
|
||||
<AppIcon icon="square-check" class="icon" />
|
||||
<span class="text">
|
||||
Includes:
|
||||
<ul>
|
||||
<li
|
||||
v-for="inclusionItem in includes"
|
||||
:key="inclusionItem"
|
||||
>
|
||||
{{ inclusionItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</section>
|
||||
<section
|
||||
v-if="considerations?.length > 0"
|
||||
class="considerations"
|
||||
>
|
||||
<AppIcon icon="triangle-exclamation" class="icon" />
|
||||
<span class="text">
|
||||
Considerations:
|
||||
<ul>
|
||||
<li
|
||||
v-for="considerationItem in considerations"
|
||||
:key="considerationItem"
|
||||
>
|
||||
{{ considerationItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{ description }}
|
||||
</p>
|
||||
<p class="recommendation">
|
||||
<AppIcon icon="lightbulb" class="icon" />
|
||||
<span>{{ recommendation }}</span>
|
||||
</p>
|
||||
<p
|
||||
v-if="includes?.length > 0"
|
||||
class="includes"
|
||||
>
|
||||
<AppIcon icon="square-check" class="icon" />
|
||||
<span>
|
||||
Includes:
|
||||
<ul>
|
||||
<li
|
||||
v-for="inclusionItem in includes"
|
||||
:key="inclusionItem"
|
||||
>
|
||||
{{ inclusionItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
v-if="considerations?.length > 0"
|
||||
class="considerations"
|
||||
>
|
||||
<AppIcon icon="triangle-exclamation" class="icon" />
|
||||
<span>
|
||||
<strong>Considerations:</strong>
|
||||
<ul>
|
||||
<li
|
||||
v-for="considerationItem in considerations"
|
||||
:key="considerationItem"
|
||||
>
|
||||
{{ considerationItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -88,48 +86,32 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
@mixin horizontal-stack {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@mixin apply-icon-color($color) {
|
||||
.icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-rating {
|
||||
margin: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
margin: 1em 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
ul {
|
||||
@include reset-ul;
|
||||
padding-left: 0em;
|
||||
margin-top: 0.25em;
|
||||
list-style: disc;
|
||||
}
|
||||
.sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
.includes {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
color: $color-success;
|
||||
}
|
||||
}
|
||||
|
||||
.considerations {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
font-weight: bold;
|
||||
.icon {
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
.recommendation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
color: $color-caution;
|
||||
}
|
||||
}
|
||||
.includes {
|
||||
@include horizontal-stack;
|
||||
@include apply-icon-color($color-success);
|
||||
}
|
||||
.considerations {
|
||||
@include horizontal-stack;
|
||||
@include apply-icon-color($color-danger);
|
||||
}
|
||||
.recommendation {
|
||||
@include horizontal-stack;
|
||||
@include apply-icon-color($color-caution);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sections">
|
||||
<section class="description">
|
||||
<AppIcon :icon="icon" class="icon" />
|
||||
<span class="text">{{ description }}</span>
|
||||
</section>
|
||||
<section
|
||||
v-if="considerations.length > 0"
|
||||
class="considerations"
|
||||
>
|
||||
<AppIcon icon="triangle-exclamation" class="icon" />
|
||||
<span class="text">
|
||||
Considerations:
|
||||
<ul>
|
||||
<li
|
||||
v-for="considerationItem in considerations"
|
||||
:key="considerationItem"
|
||||
>
|
||||
{{ considerationItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<p class="description">
|
||||
<AppIcon :icon="icon" class="icon" />
|
||||
<span>{{ description }}</span>
|
||||
</p>
|
||||
<p
|
||||
v-if="considerations.length > 0"
|
||||
class="considerations"
|
||||
>
|
||||
<AppIcon icon="triangle-exclamation" class="icon" />
|
||||
<span>
|
||||
Considerations:
|
||||
<ul>
|
||||
<li
|
||||
v-for="considerationItem in considerations"
|
||||
:key="considerationItem"
|
||||
>
|
||||
{{ considerationItem }}
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -55,33 +53,24 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
ul {
|
||||
@include reset-ul;
|
||||
padding-left: 0em;
|
||||
margin-top: 0.25em;
|
||||
list-style: disc;
|
||||
li {
|
||||
line-height: 1.2em;
|
||||
@mixin horizontal-stack {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@mixin apply-icon-color($color) {
|
||||
.icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75em;
|
||||
.considerations {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
color: $color-caution;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
.icon {
|
||||
color: $color-success;
|
||||
}
|
||||
}
|
||||
|
||||
.considerations {
|
||||
@include horizontal-stack;
|
||||
@include apply-icon-color($color-caution);
|
||||
}
|
||||
.description {
|
||||
@include horizontal-stack;
|
||||
@include apply-icon-color($color-success);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<template #tooltip>
|
||||
<RevertStatusDocumentation
|
||||
icon="rotate-left"
|
||||
description="Revert selected scripts back to their default settings where possible, balancing system functionality with privacy."
|
||||
description="Reverts selected scripts back to their default settings where possible, balancing system functionality with privacy."
|
||||
:considerations="createConsiderationsConditionally({
|
||||
warnAlways: ['Reverting changes may reduce the level of privacy protection.'],
|
||||
warnIrreversibleScripts: (irreversibleCount) =>
|
||||
|
||||
@@ -34,13 +34,18 @@ function convertMarkdownToHtml(markdownText: string): string {
|
||||
|
||||
<style lang="scss"> /* Not scoped due to element styling such as "a". */
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@import './markdown-styles.scss';
|
||||
|
||||
$text-color: $color-on-primary;
|
||||
|
||||
.markdown-text {
|
||||
color: $text-color;
|
||||
font-size: $font-size-absolute-normal;
|
||||
@include markdown-text-styles;
|
||||
ul {
|
||||
/*
|
||||
Set list style explicitly, because otherwise it changes based on parent <ul>s.
|
||||
We reset the style from here.
|
||||
*/
|
||||
list-style: square;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
@use 'sass:math';
|
||||
|
||||
@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,
|
||||
) {
|
||||
$font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
|
||||
$border-radius: 2px; // Subtle rounding still maintaining sharp design.
|
||||
|
||||
@include base-code {
|
||||
font-family: $font-family-monospace;
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-code;
|
||||
}
|
||||
|
||||
@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.
|
||||
|
||||
$font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
|
||||
$font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
|
||||
$vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
|
||||
$horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
|
||||
padding: $vertical-padding $horizontal-padding;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
@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 {
|
||||
$base-spacing: 1em;
|
||||
|
||||
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;
|
||||
|
||||
/*
|
||||
Use absolute sizing instead of relative. Relative sizing looks bad and inconsistent if there are external elements
|
||||
inside small text (such as inside `<sup>`) and bigger elements like in bigger text. Making them always have same size
|
||||
make the text read and flow better.
|
||||
*/
|
||||
width: $font-size-absolute-x-small;
|
||||
height: $font-size-absolute-x-small;
|
||||
|
||||
vertical-align: text-top;
|
||||
|
||||
background-color: $text-color;
|
||||
margin-left: math.div(1em, 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,
|
||||
);
|
||||
|
||||
sup {
|
||||
@include reset-sup;
|
||||
|
||||
vertical-align: super;
|
||||
font-size: $font-size-relative-smallest;
|
||||
}
|
||||
}
|
||||
@@ -158,7 +158,7 @@ $gap-between-circle-and-text : 0.25em;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold; // TODO: Babaya sor
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-out, color 0s;
|
||||
&.label-off {
|
||||
@include locateNearCircle('left');
|
||||
|
||||
Reference in New Issue
Block a user