44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply global styles for visual consistency

Browse Source 
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
2024-02-17 23:09:58 +01:00
parent d5bbc321f9
commit faa7a38a7d
27 changed files with 484 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/presentation/assets/styles/_fonts.scss
View File

@@ -6,7 +6,7 @@
/* slabo-27px-regular - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Slabo 27px';
font-style: normal;
font-weight: 400;
@@ -24,16 +24,6 @@
url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-slab-regular - latin */
@font-face {
font-display: swap;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
src: url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-slab-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
@@ -62,13 +52,3 @@
src: url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

29
src/presentation/assets/styles/_globals.scss
View File

@@ -1,29 +0,0 @@
/*
Defines global styles that applies to globally defined tags by default (body, main, article, div etc.)
*/
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
* {
box-sizing: border-box;
}
a {
color: inherit;
cursor: pointer;
@include flat-button($disabled: false);
}
body {
background: $color-background;
font-family: $font-family-main;
font-size: $font-size-absolute-normal;
}
input {
font-family: unset; // Reset browser default
}

10
src/presentation/assets/styles/_mixins.scss
View File

@@ -118,3 +118,13 @@
}
}
}
@mixin set-property-ch-value-with-fallback($property, $value-in-ch) {
@supports (width: 1ch) {
#{$property}: #{$value-in-ch}ch;
}
// For browsers that does not support `ch` unit (e.g., Opera Mini):
$estimated-width-per-character-in-em: calc(1em / 2); // 1 character is approximately half the font size
$calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
#{$property}: $calculated-width-in-em;
}

8
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss → src/presentation/assets/styles/base/_code-styling.scss
View File

@@ -1,4 +1,7 @@
@use "@/presentation/assets/styles/main" as *;
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
@use 'sass:math';
@mixin code-block() {
@@ -23,13 +26,14 @@
$color-background,
$code-block-padding,
) {
$font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
$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;
color: $color-on-primary;
}
@include inline-code {

53
src/presentation/assets/styles/base/_index.scss Normal file
View File

@@ -0,0 +1,53 @@
/*
Defines global styles that applies to globally defined tags by default (body, main, article, div etc.).
Styles Fundamental HTML elements.
Contains foundational CSS rules that have a broad impact on the project's styling.
CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers
*/
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
@use "_code-styling" as *;
@use "_margin-padding" as *;
@use "_link-styling" as *;
$base-spacing: 1em;
* {
box-sizing: border-box;
}
body {
background: $color-background;
font-family: $font-family-main;
font-size: $font-size-absolute-normal;
@include apply-uniform-spacing($base-spacing: $base-spacing)
}
input {
font-family: unset; // Reset browser default
}
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,
);
hr {
opacity: 0.6;
}
sup {
@include reset-sup;
vertical-align: super;
font-size: $font-size-relative-smallest;
}

42
src/presentation/assets/styles/base/_link-styling.scss Normal file
View File

@@ -0,0 +1,42 @@
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/typography" as *;
@use 'sass:math';
a {
color: inherit;
cursor: pointer;
@include flat-button($disabled: false);
&[href] {
word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
}
&[href^="http"]{
&:after {
display: inline-block;
content: '';
/*
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;
background-color: currentColor;
/*
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;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.25,
)
}
}
}

64
src/presentation/assets/styles/base/_margin-padding.scss Normal file
View File

@@ -0,0 +1,64 @@
@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');
@include no-margin('hr');
@include no-margin('ul, ol');
/* 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('li > p', $small-vertical-spacing); // Reduce margin for paragraphs directly within list items to visually group related content.
@include bottom-margin('h1, h2, h3, h4, h5, h6', $small-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);
@include bottom-margin('article', $base-vertical-spacing);
@include bottom-margin('hr', $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 apply-uniform-spacing($base-spacing) {
@include apply-uniform-vertical-spacing($base-spacing);
@include apply-uniform-horizontal-spacing($base-spacing);
}

2
src/presentation/assets/styles/main.scss
View File

@@ -4,7 +4,7 @@
@forward "./typography";
@forward "./media";
@forward "./colors";
@forward "./globals";
@forward "./base";
@forward "./mixins";
@forward "./components/card";

24
src/presentation/components/Code/CodeButtons/Save/RunInstructions/InfoTooltip.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="info-container">
<span class="info-container">
<TooltipWrapper>
<AppIcon icon="circle-info" />
<template #tooltip>
<slot />
</template>
</TooltipWrapper>
</div>
</span>
</template>
<script lang="ts">
@@ -23,9 +23,23 @@ export default defineComponent({
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
@mixin apply-style-when-placed-after-non-text {
* + & {
@content;
}
}
.info-container {
display: inline-block;
margin-left: 0.15em; // Do not style icon itself to ensure correct tooltip alignment
vertical-align: middle;
vertical-align: text-top;
* + & { // If it's followed by any other element
vertical-align: middle;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.5,
)
}
}
</style>

59
src/presentation/components/Code/CodeButtons/Save/RunInstructions/RunInstructions.vue
View File

@@ -1,32 +1,37 @@
<template>
<div class="instructions">
<section>
<p>
You have two alternatives to apply your selection.
</p>
<hr />
<p>
<strong>1. The easy alternative</strong>. Run your script without any manual steps by
<a :href="downloadUrl">downloading desktop version</a> of {{ appName }} on the
{{ osName }} system you wish to configure, and then click on the Run button. This is
recommended for most users.
</p>
<hr />
<p>
<strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
icons near the steps, or follow the easy alternative described above.
</p>
<p>
<PlatformInstructionSteps :filename="filename" />
</p>
</div>
<article>
<h3>1. The Easy Alternative</h3>
<p>
Run your script without any manual steps by
<a :href="downloadUrl">downloading desktop version</a> of {{ appName }} on the
{{ osName }} system you wish to configure, and then click on the Run button. This is
recommended for most users.
</p>
</article>
<article>
<h3>2. The Hard (Manual) Alternative</h3>
<p>
This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
icons near the steps, or follow the easy alternative described above.
</p>
<p>
<PlatformInstructionSteps :filename="filename" />
</p>
</article>
</section>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { injectKey } from '@/presentation/injectionSymbols';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
import InfoTooltip from './InfoTooltip.vue';
import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue';
@@ -55,7 +60,7 @@ export default defineComponent({
);
const osName = computed<string>(
() => renderOsName(operatingSystem.value),
() => getOperatingSystemDisplayName(operatingSystem.value),
);
return {
@@ -65,21 +70,7 @@ export default defineComponent({
};
},
});
function renderOsName(os: OperatingSystem): string {
switch (os) {
case OperatingSystem.Windows: return 'Windows';
case OperatingSystem.macOS: return 'macOS';
case OperatingSystem.Linux: return 'Linux';
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
}
}
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
.step {
margin: 10px 0;
}
</style>

31
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
View File

@@ -1,16 +1,16 @@
<template>
<span class="code-wrapper">
<code class="copyable-command">
<span class="dollar">$</span>
<code ref="codeElement"><slot /></code>
<div class="copy-action-container">
<span ref="copyableTextHolder"><slot /></span>
<span class="copy-action-container">
<TooltipWrapper>
<FlatButton icon="copy" @click="copyCode" />
<template #tooltip>
Copy
</template>
</TooltipWrapper>
</div>
</span>
</span>
</code>
</template>
<script lang="ts">
@@ -27,10 +27,10 @@ export default defineComponent({
setup() {
const { copyText } = injectKey((keys) => keys.useClipboard);
const codeElementRef = shallowRef<HTMLElement | undefined>();
const copyableTextHolderRef = shallowRef<HTMLElement | undefined>();
async function copyCode() {
const element = codeElementRef.value;
const element = copyableTextHolderRef.value;
if (!element) {
throw new Error('Code element could not be found.');
}
@@ -43,7 +43,7 @@ export default defineComponent({
return {
copyCode,
codeElement: codeElementRef,
copyableTextHolder: copyableTextHolderRef,
};
},
});
@@ -52,25 +52,16 @@ export default defineComponent({
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
.code-wrapper {
.copyable-command {
display: inline-flex;
white-space: nowrap;
justify-content: space-between;
font-family: $font-family-monospace;
background-color: $color-primary-darker;
color: $color-on-primary;
align-items: center;
padding: 0.2rem;
padding: 0.25em;
font-size: $font-size-absolute-small;
.dollar {
margin-right: 0.5rem;
font-size: $font-size-absolute-x-small;
user-select: none;
}
.copy-action-container {
margin-left: 1rem;
}
code {
font-size: $font-size-absolute-small;
}
}
</style>

3
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue
View File

@@ -13,7 +13,4 @@ export default defineComponent({
</script>
<style scoped lang="scss">
.step {
margin: 10px 0;
}
</style>

16
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue
View File

@@ -46,9 +46,7 @@
Navigate to the folder where you downloaded the file e.g.:
</p>
<p>
<CopyableCommand>
cd ~/Downloads
</CopyableCommand>
<CopyableCommand>cd ~/Downloads</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -72,9 +70,7 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>
chmod +x {{ filename }}
</CopyableCommand>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -101,11 +97,11 @@
Execute the file:
</p>
<p>
<CopyableCommand>
./{{ filename }}
</CopyableCommand>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
If you have desktop environment, instead of running this command you can alternatively:
<p>
If you have desktop environment, instead of running this command you can alternatively:
</p>
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Run as program".</li>

8
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/MacOsInstructions.vue
View File

@@ -49,9 +49,7 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>
chmod +x {{ filename }}
</CopyableCommand>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -67,9 +65,7 @@
Execute the file:
</p>
<p>
<CopyableCommand>
./{{ filename }}
</CopyableCommand>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
Alternatively you can locate the file in <strong>Finder</strong> and double click on it.
</InfoTooltip>

43
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/WindowsInstructions.vue
View File

@@ -23,12 +23,12 @@
</p>
<p>
In <strong>Edge</strong>:
<ol>
<li>Select <strong>Keep</strong> from the downloads section.</li>
<li>Click <strong>Show more</strong> on the next warning.</li>
<li>Select <strong>Keep anyway</strong>.</li>
</ol>
</p>
<ol>
<li>Select <strong>Keep</strong> from the downloads section.</li>
<li>Click <strong>Show more</strong> on the next warning.</li>
<li>Select <strong>Keep anyway</strong>.</li>
</ol>
<p>
For <strong>Firefox</strong> and <strong>Chrome</strong>, typically no additional
action is needed.
@@ -53,25 +53,26 @@
</p>
<p>
To handle false warnings in Microsoft Defender:
<ol>
<li>
Open <strong>Virus & threat protection</strong> from
the <strong>Start</strong> menu.
</li>
<li>
Locate the event in <strong>Protection history</strong>
that pertains to the script.
</li>
<li>In the event details, select <strong>Actions</strong> > <strong>Allow</strong>.</li>
<li>If the script was deleted, please re-download it.</li>
</ol>
</p>
<ol>
<li>
Open <strong>Virus & threat protection</strong> from
the <strong>Start</strong> menu.
</li>
<li>
Locate the event in <strong>Protection history</strong>
that pertains to the script.
</li>
<li>In the event details, select <strong>Actions</strong> > <strong>Allow</strong>.</li>
<li>If the script was deleted, please re-download it.</li>
</ol>
<blockquote>
<strong>Caution:</strong> For your security, remember to:
<strong>Caution:</strong>
<p>For your security, remember to</p>
<ul>
<li>Only allow scripts from trusted sources.</li>
<li>Avoid broad exclusions in your antivirus settings.</li>
<li>Keep real-time protection enabled whenever possible.</li>
<li>only allow scripts from trusted sources,</li>
<li>avoid broad exclusions in your antivirus settings,</li>
<li>and keep real-time protection enabled whenever possible.</li>
</ul>
</blockquote>
</InfoTooltip>

37
src/presentation/components/DevToolkit/DevToolkit.vue
View File

@@ -1,24 +1,27 @@
<template>
<div v-if="isOpen" class="dev-toolkit-container">
<div class="dev-toolkit">
<div class="toolkit-header">
<div class="title">
<h3 class="toolkit-header">
<span class="title">
Tools
</div>
</span>
<FlatButton icon="xmark" class="close-button" @click="close" />
</div>
</h3>
<hr />
<div class="action-buttons">
<button
<ul class="action-buttons">
<li
v-for="action in devActions"
:key="action.name"
type="button"
class="action-button"
@click="action.handler"
>
{{ action.name }}
</button>
</div>
<button
type="button"
class="action-button"
@click="action.handler"
>
{{ action.name }}
</button>
</li>
</ul>
</div>
</div>
</template>
@@ -91,10 +94,6 @@ interface DevAction {
display:flex;
flex-direction: column;
hr {
width: 100%;
}
.toolkit-header {
display:flex;
flex-direction: row;
@@ -108,7 +107,6 @@ interface DevAction {
}
.title {
font-weight: bold;
text-align: center;
}
@@ -116,8 +114,11 @@ interface DevAction {
display: flex;
flex-direction: column;
gap: 10px;
@include reset-ul;
.action-button {
@include reset-button;
button {
display: block;
padding: 5px 10px;
background-color: $color-primary;

150
src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
View File

@@ -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>

91
src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
View File

@@ -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>

2
src/presentation/components/Scripts/Menu/Revert/TheRevertSelector.vue
View File

@@ -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) =>

9
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
View File

@@ -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>

131
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss
View File

@@ -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;
}
}

2
src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
View File

@@ -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');

20
src/presentation/components/Shared/TooltipWrapper.vue
View File

@@ -129,7 +129,6 @@ function getCounterpartBoxOffsetProperty(placement: Placement): keyof CSSPropert
</script>
<style scoped lang="scss">
@use 'sass:math';
@use "@/presentation/assets/styles/main" as *;
$color-tooltip-background: $color-primary-darkest;
@@ -210,21 +209,11 @@ $color-tooltip-background: $color-primary-darkest;
}
}
@mixin set-max-width($total-characters) {
@supports (width: 1ch) {
max-width: #{$total-characters}ch;
}
// For browsers that does not support `ch` unit (e.g., Opera Mini):
$estimated-character-size: calc(1em / 2); // 1 character is approximately half the font size
$estimated-width: calc(#{$estimated-character-size} * #{$total-characters});
max-width: $estimated-width;
}
.tooltip__content {
background: $color-tooltip-background;
color: $color-on-primary;
border-radius: 16px;
padding: 5px 10px 4px;
padding: 12px 10px;
font-size: $font-size-absolute-normal;
/*
@@ -237,13 +226,14 @@ $color-tooltip-background: $color-primary-darkest;
margin-right: 2px;
// Setting max-width increases readability and consistency reducing overlap and clutter.
@include set-max-width(
@include set-property-ch-value-with-fallback(
$property: max-width,
/*
Research in typography suggests that an optimal line length for text readability is between 50-75 characters per line.
Tooltips should be brief, so aiming for the for the lower end of this range (around 50 characters).
*/
$total-characters: 50
);
$value-in-ch: 50,
)
}
.tooltip__arrow {

107
src/presentation/components/TheFooter/PrivacyPolicy.vue
View File

@@ -1,56 +1,46 @@
<template>
<div class="privacy-policy">
<div v-if="!isRunningAsDesktopApplication" class="line">
<div class="line__emoji">
🚫🍪
</div>
<div>No cookies!</div>
</div>
<div v-if="isRunningAsDesktopApplication" class="line">
<div class="line__emoji">
🚫🌐
</div>
<div>
Everything is offline, except single request GitHub
to check for updates on application start.
</div>
</div>
<div class="line">
<div class="line__emoji">
🚫👀
</div>
<div>No user behavior / IP address collection!</div>
</div>
<div class="line">
<div class="line__emoji">
🤖
</div>
<div>
All transparent: Deployed automatically from the master branch
of the <a :href="repositoryUrl" target="_blank" rel="noopener noreferrer">source code</a> with no changes.
</div>
</div>
<div v-if="!isRunningAsDesktopApplication" class="line">
<div class="line__emoji">
📈
</div>
<div>
Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank" rel="noopener noreferrer">CDN statistics</a>
are collected by AWS but they cannot be traced to you or your behavior.
You can download the offline version if you don't want any CDN data collection.
</div>
</div>
<div class="line">
<div class="line__emoji">
🎉
</div>
<div>
As almost no data is collected, the application gets better
only with your active feedback.
Feel free to <a :href="feedbackUrl" target="_blank" rel="noopener noreferrer">create an issue</a> 😊
</div>
</div>
</div>
<section class="privacy-policy">
<ul>
<li v-if="!isRunningAsDesktopApplication">
<span class="emoji">🚫🍪</span>
<span>No cookies!</span>
</li>
<li v-if="isRunningAsDesktopApplication">
<span class="emoji">🚫🌐</span>
<span>
Everything is offline, except single request GitHub
to check for updates on application start.
</span>
</li>
<li>
<span class="emoji">🚫👀</span>
<span>No user behavior / IP address collection!</span>
</li>
<li>
<span class="emoji">🤖</span>
<span>
All transparent: Deployed automatically from the master branch
of the <a :href="repositoryUrl" target="_blank" rel="noopener noreferrer">source code</a> with no changes.
</span>
</li>
<li v-if="!isRunningAsDesktopApplication">
<span class="emoji">📈</span>
<span>
Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank" rel="noopener noreferrer">CDN statistics</a>
are collected by AWS but they cannot be traced to you or your behavior.
You can download the offline version if you don't want any CDN data collection.
</span>
</li>
<li>
<span class="emoji">🎉</span>
<span>
As almost no data is collected, the application gets better
only with your active feedback.
Feel free to <a :href="feedbackUrl" target="_blank" rel="noopener noreferrer">create an issue</a> 😊
</span>
</li>
</ul>
</section>
</template>
<script lang="ts">
@@ -81,14 +71,13 @@ export default defineComponent({
display: flex;
flex-direction: column;
text-align:center;
}
.line {
display: flex;
flex-direction: column;
ul {
@include reset-ul;
}
&:not(:first-child) {
margin-top:0.2rem;
}
}
.emoji {
display: block;
}
</style>