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

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