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

Use a consistent color system

Browse Source 
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
   everywhere without using any other color:
     - It changes tooltip background from black to darker primary
     colors.
     - It overrides unset styles from tree component
     - It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
   achieve that:
     - It introduces new "light" variants of main colors
     - It switches to colors with different variants (e.g. in Dialogs it
       uses primary color as button as it has variants that can be
       activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
This commit is contained in:
undergroundwires
2021-10-11 19:33:34 +02:00
parent 37ad26a082
commit b08a6b5cec
21 changed files with 258 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/presentation/components/App.vue
View File

@@ -1,10 +1,10 @@
<template>
<div id="app">
<div class="wrapper">
<TheHeader class="row" />
<TheSearchBar class="row" />
<TheScriptArea class="row" />
<TheCodeButtons class="row code-buttons" />
<div class="app__wrapper">
<TheHeader class="app__row" />
<TheSearchBar class="app__row" />
<TheScriptArea class="app__row" />
<TheCodeButtons class="app__row app__code-buttons" />
<TheFooter />
</div>
</div>
@@ -41,27 +41,36 @@ export default class App extends Vue {
box-sizing: border-box;
}
a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
color: $color-primary;
}
}
body {
background: $light-gray;
background: $color-background;
font-family: $main-font;
color: $slate;
}
#app {
margin-right: auto;
margin-left: auto;
max-width: 1600px;
.wrapper {
.app__wrapper {
margin: 0% 2% 0% 2%;
background-color: white;
background-color: $color-surface;
color: $color-on-surface;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
padding: 2%;
display:flex;
flex-direction: column;
.row {
.app__row {
margin-bottom: 10px;
}
.code-buttons {
.app__code-buttons {
padding-bottom: 10px;
}
}

6
src/presentation/components/Code/CodeButtons/Code.vue
View File

@@ -32,8 +32,8 @@ export default class Code extends Vue {
white-space: nowrap;
justify-content: space-between;
font-family: $normal-font;
background-color: $slate;
color: $light-gray;
background-color: $color-primary-darker;
color: $color-on-primary;
padding-left: 0.3rem;
padding-right: 0.3rem;
.dollar {
@@ -45,7 +45,7 @@ export default class Code extends Vue {
margin-left: 1rem;
cursor: pointer;
&:hover {
opacity: 0.8;
color: $color-primary;
}
}
code {

17
src/presentation/components/Code/CodeButtons/IconButton.vue
View File

@@ -32,25 +32,22 @@ export default class IconButton extends Vue {
flex-direction: column;
align-items: center;
background-color: $accent;
background-color: $color-secondary;
color: $color-on-secondary;
border: none;
color: $white;
padding:20px;
transition-duration: 0.4s;
overflow: hidden;
box-shadow: 0 3px 9px $dark-slate;
box-shadow: 0 3px 9px $color-primary-darkest;
border-radius: 4px;
cursor: pointer;
// border: 0.1em solid $slate;
// border-radius: 80px;
// padding: 0.5em;
width: 10%;
min-width: 90px;
&:hover {
background: $white;
box-shadow: 0px 2px 10px 5px $accent;
color: $black;
background: $color-surface;
box-shadow: 0px 2px 10px 5px $color-secondary;
}
&:hover>&__text {
display: block;
@@ -62,7 +59,7 @@ export default class IconButton extends Vue {
display: none;
font-family: $artistic-font;
font-size: 1.5em;
color: $gray;
color: $color-primary;
font-weight: 500;
line-height: 1.1;
}

3
src/presentation/components/Code/TheCodeArea.vue
View File

@@ -157,8 +157,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
height: 100%;
overflow: auto;
&__highlight {
background-color: $accent;
opacity: 0.2; // having procent fails in production (minified) build
background-color: $color-secondary-light;
position: absolute;
}
}

2
src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
View File

@@ -32,6 +32,6 @@ export default class MenuOptionListItem extends Vue {
}
}
.disabled {
color:$gray;
color: $color-primary-light;
}
</style>

19
src/presentation/components/Scripts/Slider/Handle.vue
View File

@@ -3,12 +3,12 @@
class="handle"
:style="{ cursor: cursorCssValue }"
@mousedown="startResize">
<div class="line"></div>
<div class="line" />
<font-awesome-icon
class="image"
class="icon"
:icon="['fas', 'arrows-alt-h']"
/>
<div class="line"></div>
<div class="line" />
</div>
</template>
@@ -45,6 +45,9 @@ export default class Handle extends Vue {
<style lang="scss" scoped>
@import "@/presentation/styles/colors.scss";
$color : $color-primary-dark;
$color-hover : $color-primary;
.handle {
user-select: none;
display: flex;
@@ -52,19 +55,19 @@ export default class Handle extends Vue {
align-items: center;
&:hover {
.line {
background: $gray;
background: $color-hover;
}
.image {
color: $gray;
color: $color-hover;
}
}
.line {
flex: 1;
background: $dark-gray;
background: $color;
width: 3px;
}
.image {
color: $dark-gray;
.icon {
color: $color;
}
margin-right: 5px;
margin-left: 5px;

27
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -111,8 +111,8 @@ $card-horizontal-gap : $card-gap;
padding: /*top:*/ $card-inner-padding /*right:*/ $card-inner-padding /*bottom:*/ 0 /*left:*/ $card-inner-padding;
position: relative;
cursor: pointer;
background-color: $gray;
color: $light-gray;
background-color: $color-primary;
color: $color-on-primary;
font-size: 1.5em;
height: 100%;
width: 100%;
@@ -125,7 +125,8 @@ $card-horizontal-gap : $card-gap;
justify-content: center;
&:hover {
background-color: $accent;
background-color: $color-secondary;
color: $color-on-secondary;
transform: scale(1.05);
}
&:after {
@@ -149,13 +150,13 @@ $card-horizontal-gap : $card-gap;
&__expander {
transition: all 0.2s ease-in-out;
position: relative;
background-color: $slate;
color: $light-gray;
background-color: $color-primary-darker;
color: $color-on-primary;
display: flex;
align-items: center;
&__content {
flex: 1;flex: 1;
flex: 1;
display: flex;
justify-content: center;
word-break: break-word;
@@ -165,10 +166,11 @@ $card-horizontal-gap : $card-gap;
width: auto;
font-size: 1.5em;
align-self: flex-start;
margin-right:0.25em;
margin-right: 0.25em;
cursor: pointer;
color: $color-primary-light;
&:hover {
opacity: 0.9;
color: $color-primary;
}
}
}
@@ -192,7 +194,8 @@ $card-horizontal-gap : $card-gap;
&.is-expanded {
.card__inner {
height: auto;
background-color: $accent;
background-color: $color-secondary;
color: $color-on-secondary;
&:after { // arrow
content: "";
display: block;
@@ -201,7 +204,7 @@ $card-horizontal-gap : $card-gap;
left: calc(50% - #{$arrow-size});
border-left: #{$arrow-size} solid transparent;
border-right: #{$arrow-size} solid transparent;
border-bottom: #{$arrow-size} solid #333a45;
border-bottom: #{$arrow-size} solid $color-primary-darker;
}
}
@@ -224,13 +227,13 @@ $card-horizontal-gap : $card-gap;
.card__inner {
pointer-events: none;
height: auto;
opacity: 0.5;
background-color: $color-primary-light;
transform: scale(0.95);
}
&:hover {
.card__inner {
background-color: $gray;
background-color: $color-primary;
transform: scale(1);
}
}

4
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
View File

@@ -33,11 +33,11 @@
}
.documentationUrl {
display: flex;
color: $gray;
color: $color-primary;
cursor: pointer;
vertical-align: middle;
&:hover {
color: $slate;
color: $color-primary-darker;
}
&:not(:first-child) {
margin-left: 0.1em;

20
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
View File

@@ -34,15 +34,15 @@
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
#node {
display:flex;
flex-direction: row;
flex-wrap: wrap;
.text {
display: flex;
align-items: center;
}
.item:not(:first-child) {
margin-left: 5px;
}
display:flex;
flex-direction: row;
flex-wrap: wrap;
.text {
display: flex;
align-items: center;
}
.item:not(:first-child) {
margin-left: 5px;
}
}
</style>

189
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
View File

@@ -51,100 +51,109 @@ export default class RevertToggle extends StatefulVue {
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
$width: 85px;
$height: 30px;
// https://www.designlabthemes.com/css-toggle-switch/
.checkbox-switch {
@import "@/presentation/styles/colors.scss";
$color-unchecked-bullet : $color-primary-darker;
$color-unchecked-text : $color-on-primary;
$color-unchecked-bg : $color-primary;
$color-checked-bg : $color-secondary;
$color-checked-text : $color-on-secondary;
$color-checked-bullet : $color-on-secondary;
$size-width : 85px;
$size-height : 30px;
// https://www.designlabthemes.com/css-toggle-switch/
.checkbox-switch {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
width: $size-width;
height: $size-height;
-webkit-border-radius: $size-height;
border-radius: $size-height;
line-height: $size-height;
font-size: $size-height / 2;
display: inline-block;
input.input-checkbox {
position: absolute;
left: 0;
top: 0;
width: $size-width;
height: $size-height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.checkbox-animate {
position: relative;
width: $width;
height: $height;
-webkit-border-radius: $height;
border-radius: $height;
line-height: $height;
font-size: $height / 2;
display: inline-block;
width: $size-width;
height: $size-height;
background-color: $color-unchecked-bg;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
input.input-checkbox {
// Circle
&:before {
$circle-size: $size-height * 0.66;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: $width;
height: $height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
.checkbox-animate {
position: relative;
width: $width;
height: $height;
background-color: $gray;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
// Circle
&:before {
$circle-size: $height * 0.66;
content: "";
display: block;
position: absolute;
width: $circle-size;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $slate;
top: $height * 0.16;
left: $width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
transition: left 0.3s ease-out 0s;
z-index: 10;
}
}
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $accent;
}
+ .checkbox-animate:before {
left: ($width - $width/3.5);
background-color: $light-gray;
}
+ .checkbox-animate .checkbox-off {
display: none;
opacity: 0;
}
+ .checkbox-animate .checkbox-on {
display: block;
opacity: 1;
}
}
.checkbox-off, .checkbox-on {
float: left;
color: $white;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.checkbox-off {
margin-left: $width / 3;
opacity: 1;
}
.checkbox-on {
display: none;
float: right;
margin-right: $width / 3;
opacity: 0;
width: $circle-size;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $color-unchecked-bullet;
top: $size-height * 0.16;
left: $size-width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
transition: left 0.3s ease-out 0s;
z-index: 10;
}
}
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $color-checked-bg;
}
+ .checkbox-animate:before {
left: ($size-width - $size-width/3.5);
background-color: $color-checked-bullet;
}
+ .checkbox-animate .checkbox-off {
display: none;
opacity: 0;
}
+ .checkbox-animate .checkbox-on {
display: block;
opacity: 1;
}
}
.checkbox-off, .checkbox-on {
float: left;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.checkbox-off {
margin-left: $size-width / 3;
opacity: 1;
color: $color-unchecked-text;
}
.checkbox-on {
display: none;
float: right;
margin-right: $size-width / 3;
opacity: 0;
color: $color-checked-text;
}
}
</style>

10
src/presentation/components/Scripts/View/TheScriptsView.vue
View File

@@ -120,20 +120,20 @@ $inner-margin: 4px;
.search {
display: flex;
flex-direction: column;
background-color: $slate;
background-color: $color-primary-darker;
&__query {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
margin-top: 1em;
color: $gray;
color: $color-primary;
&__close-button {
cursor: pointer;
font-size: 1.25em;
margin-left: 0.25rem;
&:hover {
opacity: 0.9;
color: $color-primary-dark;
}
}
}
@@ -142,7 +142,7 @@ $inner-margin: 4px;
flex-direction: column;
word-break:break-word;
text-transform: uppercase;
color: $light-gray;
color: $color-on-primary;
font-size: 1.5em;
padding:10px;
text-align:center;
@@ -150,7 +150,7 @@ $inner-margin: 4px;
padding-bottom:13px;
}
a {
color: $gray;
color: $color-primary;
}
}
}

6
src/presentation/components/Shared/Dialog.vue
View File

@@ -32,26 +32,30 @@ export default class Dialog extends Vue {
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/colors.scss";
.dialog {
color: $color-surface;
font-family: $normal-font;
margin-bottom: 10px;
display: flex;
flex-direction: row;
&__content {
color: $color-on-surface;
width: 100%;
margin: 5%;
}
&__close-button {
color: $color-primary-dark;
width: auto;
font-size: 1.5em;
margin-right: 0.25em;
align-self: flex-start;
cursor: pointer;
&:hover {
opacity: 0.9;
color: $color-primary;
}
}
}

10
src/presentation/components/TheFooter/DownloadUrlList.vue
View File

@@ -1,7 +1,7 @@
<template>
<span
class="container"
v-bind:class="{ 'container_unsupported': !hasCurrentOsDesktopVersion, 'container_supported': hasCurrentOsDesktopVersion }">
v-bind:class="{ 'container-unsupported': !hasCurrentOsDesktopVersion, 'container-supported': hasCurrentOsDesktopVersion }">
<span class="description">
<font-awesome-icon class="description__icon" :icon="['fas', 'desktop']" />
<span class="description__text">For desktop:</span>
@@ -39,15 +39,16 @@ export default class DownloadUrlList extends Vue {
<style scoped lang="scss">
@import "@/presentation/styles/media.scss";
@import "@/presentation/styles/colors.scss";
.container {
display:flex;
flex-wrap: wrap;
justify-content: space-around;
&_unsupported {
opacity: 0.9;
&-unsupported {
opacity: $color-primary-light;
}
&_supported {
&-supported {
font-size: 1em;
}
.description {
@@ -62,7 +63,6 @@ export default class DownloadUrlList extends Vue {
.urls {
&__url {
&:not(:first-child)::before {
opacity: 0.5;
content: "|";
font-size: 0.6rem;
padding: 0 5px;

6
src/presentation/components/TheFooter/DownloadUrlListItem.vue
View File

@@ -71,11 +71,5 @@ function getOperatingSystemName(os: OperatingSystem): string {
&__inactive {
font-size: 0.70em;
}
a {
color:inherit;
&:hover {
opacity: 0.8;
}
}
}
</style>

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

@@ -71,12 +71,5 @@ export default class PrivacyPolicy extends Vue {
margin-top:0.2rem;
}
}
a {
color:inherit;
&:hover {
opacity: 0.8;
}
}
}
</style>

30
src/presentation/components/TheFooter/TheFooter.vue
View File

@@ -78,7 +78,6 @@ export default class TheFooter extends Vue {
this.feedbackUrl = info.feedbackUrl;
}
}
</script>
<style scoped lang="scss">
@@ -108,17 +107,8 @@ export default class TheFooter extends Vue {
}
}
flex-wrap: wrap;
color: $dark-gray;
font-size: 1rem;
font-family: $normal-font;
a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
&__item:not(:first-child) {
&::before {
content: "|";
@@ -134,24 +124,4 @@ export default class TheFooter extends Vue {
}
}
}
.modal {
margin-bottom: 10px;
display: flex;
flex-direction: row;
&__content {
width: 100%;
}
&__close-button {
width: auto;
font-size: 1.5em;
margin-right:0.25em;
align-self: flex-start;
cursor: pointer;
&:hover {
opacity: 0.9;
}
}
}
</style>

3
src/presentation/components/TheHeader.vue
View File

@@ -36,7 +36,6 @@ export default class TheHeader extends Vue {
.title {
margin: 0;
color: $black;
text-transform: uppercase;
font-family: $main-font;
font-size: 2.5em;
@@ -45,7 +44,7 @@ export default class TheHeader extends Vue {
.subtitle {
margin: 0;
font-size: 1.5em;
color: $gray;
color: $color-primary;
font-family: $artistic-font;
font-weight: 500;
line-height: 1.2;

32
src/presentation/components/TheSearchBar.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="search" v-non-collapsing>
<input type="search" class="searchTerm"
<input type="search" class="search-term"
:placeholder="searchPlaceHolder"
v-model="searchQuery" >
<div class="iconWrapper">
<div class="icon-wrapper">
<font-awesome-icon :icon="['fas', 'search']" />
</div>
</div>
@@ -65,34 +65,36 @@ export default class TheSearchBar extends StatefulVue {
width: 100%;
position: relative;
display: flex;
input {
background: inherit;
}
}
.searchTerm {
.search-term {
width: 100%;
min-width: 60px;
border: 1.5px solid $gray;
border: 1.5px solid $color-primary;
border-right: none;
height: 36px;
border-radius: 3px 0 0 3px;
padding-left:10px;
padding-right:10px;
outline: none;
color: $gray;
font-family: $normal-font;
font-size:1em;
color: $color-primary;
font-family: $normal-font;
font-size:1em;
&:focus {
color: $color-primary-darker;
}
}
.searchTerm:focus{
color: $slate;
}
.iconWrapper {
.icon-wrapper {
width: 40px;
height: 36px;
border: 1px solid $gray;
background: $gray;
border: 1px solid $color-primary;
background: $color-primary;
text-align: center;
color: $white;
color: $color-on-primary;
border-radius: 0 5px 5px 0;
font-size: 20px;
padding:5px;

33
src/presentation/styles/colors.scss
View File

@@ -1,8 +1,25 @@
$white: #fff;
$light-gray: #eceef1;
$gray: darken($light-gray, 30%);
$dark-gray: #616f86;
$slate: darken($light-gray, 70%);
$dark-slate: #2f3133;
$accent: #1abc9c;
$black: #000
/*
Colors used throughout the application
Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
*/
// --- Primary | The color displayed most frequently across screens and components
$color-primary : #949fb0;
$color-primary-light : lighten($color-primary, 15%);
$color-primary-dark : darken($color-primary, 18%);
$color-primary-darker : darken($color-primary, 40%);
$color-primary-darkest : darken($color-primary, 44%);
$color-on-primary : lighten($color-primary, 30%); // Text/iconography color that is usable on top of primary color
// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
$color-secondary : #1abc9c;
$color-secondary-light : lighten($color-secondary, 48%);
$color-on-secondary : #fff; // Text/iconography color that is usable on top of secondary color
// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
$color-surface : #fff;
$color-on-surface : #000; // Text/iconography color that is usable on surface
// Background | Appears behind scrollable content.
$color-background : lighten($color-primary, 30);

8
src/presentation/styles/tooltip.scss
View File

@@ -1,12 +1,12 @@
// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
@import "@/presentation/styles/colors.scss";
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: $black;
color: $white;
background: $color-primary-darkest;
color: $color-on-primary;
border-radius: 16px;
padding: 5px 10px 4px;
}
@@ -16,7 +16,7 @@
border-style: solid;
position: absolute;
margin: 5px;
border-color: $black;
border-color: $color-primary-darkest;
z-index: 1;
}
&[x-placement^="top"] {

38
src/presentation/styles/tree.scss
View File

@@ -1,41 +1,57 @@
// Overrides base styling for LiquorTree
@import "@/presentation/styles/colors.scss";
$color-tree-bg : $color-primary-darker;
$color-node-arrow : $color-on-primary;
$color-node-fg : $color-on-primary;
$color-node-hover-bg : $color-primary-dark;
$color-node-keyboard-bg : $color-surface;
$color-node-keyboard-fg : $color-on-surface;
$color-node-checkbox-checked-bg : $color-secondary;
$color-node-checkbox-checked-border : $color-secondary;
$color-node-checkbox-checked-checked-tick : $color-on-secondary;
$color-node-checkbox-unchecked-bg : $color-primary-darkest;
$color-node-checkbox-unchecked-border : $color-on-primary;
.tree {
background: $slate;
background: $color-tree-bg;
&-node {
white-space: normal !important;
> .tree-content {
> .tree-anchor > span {
color: $white;
color: $color-node-fg;
text-transform: uppercase;
font-size: 1.5em;
}
&:hover {
background: $dark-gray !important;
background: $color-node-hover-bg !important;
}
}
&.selected { // When using keyboard navigation it higlights current item and its child items
background: $gray;
&.selected { // When using keyboard navigation it highlights current item and its child items
background: $color-node-keyboard-bg;
.tree-text {
color: $black !important;
color: $color-node-keyboard-fg !important; // $block
}
}
}
&-checkbox {
border-color: $color-node-checkbox-unchecked-border !important;
&.checked {
background: $accent !important;
border-color: $accent !important;
background: $color-node-checkbox-checked-bg !important;
border-color: $color-node-checkbox-checked-border !important;
&:after {
border-color: $color-node-checkbox-checked-checked-tick !important;
}
}
&.indeterminate {
border-color: $gray !important;
border-color: $color-node-checkbox-unchecked-border !important;
}
background: $dark-slate !important;
background: $color-node-checkbox-unchecked-bg !important;
}
&-arrow {
&.has-child {
&.rtl:after, &:after {
border-color: $white !important;
border-color: $color-node-arrow !important;
}
}
}