mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-24 09:22:53 +03:00
Removed hard-coded color codes, reference SCSS variables
This commit is contained in:
parent
95b3b84b04
commit
f9bac8ceb0
15198
package-lock.json
generated
15198
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('../src/global-styles.scss');
|
||||
@import '../src/styles/global-styles.scss';
|
||||
@import '../src/styles/color-pallet.scss';
|
||||
|
||||
#app {
|
||||
.footer {
|
||||
|
@ -68,17 +68,18 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.collapsable {
|
||||
// width: 310px;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
background: #1CA8DD;
|
||||
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
background: $ascent;
|
||||
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
box-shadow: 1px 1px 2px #130f23;
|
||||
width: auto;
|
||||
// &.col-1 { width: 155px; }
|
||||
@ -106,7 +107,7 @@ export default {
|
||||
border-radius: 7px;
|
||||
transition: all 0.25s ease-out;
|
||||
text-align: left;
|
||||
color: #2f323ae6;
|
||||
color:$bg-with-opacity;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
@ -116,7 +117,7 @@ export default {
|
||||
}
|
||||
|
||||
.lbl-toggle:hover {
|
||||
color: #2f323a;
|
||||
color: $background;
|
||||
}
|
||||
|
||||
.lbl-toggle::before {
|
||||
@ -140,7 +141,7 @@ export default {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height .25s ease-in-out;
|
||||
background: #2f323ae6;
|
||||
background: $bg-with-opacity;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
|
@ -60,23 +60,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, rgba(47,50,58,1) 0%, rgba(40,42,50,1) 100%);
|
||||
background: linear-gradient(0deg, $background 0%, $header-color 100%);
|
||||
}
|
||||
form {
|
||||
border-radius: 0 0 20px 0;
|
||||
padding: 0 0.2rem 0.2rem 0;
|
||||
background: #282a32;
|
||||
background: $header-color;
|
||||
label {
|
||||
display: inline;
|
||||
background: -webkit-gradient(
|
||||
linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
|
||||
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: $ascent;
|
||||
margin: 0.5rem;
|
||||
display: inline;
|
||||
}
|
||||
@ -88,30 +87,29 @@ export default {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #607d8b33;
|
||||
box-shadow: 1px 1px 2px #232323;
|
||||
color: #1CA8DD;
|
||||
background: $background;
|
||||
color: $ascent;
|
||||
&:focus {
|
||||
background: #607d8b4a;
|
||||
background: $bg-with-opacity;
|
||||
}
|
||||
}
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
margin: 1em 0 0 -2em;
|
||||
color: #1CA8DD;
|
||||
color: $ascent;
|
||||
opacity: 0.5;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: #282a32;
|
||||
background: $header-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.space-filler {
|
||||
flex: 1;
|
||||
border-radius: 20px 0 0;
|
||||
background: #2f323a;
|
||||
background: $background;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
form {
|
||||
|
@ -19,12 +19,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #282a32;
|
||||
background: $header-color;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
@media screen and (max-width: 600px) {
|
||||
|
@ -59,11 +59,12 @@ export default {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.item {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
color: #1CA8DD;
|
||||
color: $ascent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px;
|
||||
@ -79,7 +80,7 @@ export default {
|
||||
background: #607d8b4d;
|
||||
}
|
||||
&:focus {
|
||||
border: 2px solid #1CA8DD;
|
||||
border: 2px solid $ascent;
|
||||
outline: none;
|
||||
}
|
||||
&.short {
|
||||
@ -120,7 +121,7 @@ export default {
|
||||
.overflow-dots {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
background: #354857;
|
||||
background: #1b3550;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
|
@ -39,6 +39,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.no-items {
|
||||
width: 100px;
|
||||
@ -48,7 +49,7 @@ export default {
|
||||
cursor: default;
|
||||
border-radius: 10px;
|
||||
background: #607d8b33;
|
||||
color: #1CA8DD;
|
||||
color: $ascent;
|
||||
box-shadow: 1px 1px 2px #373737;
|
||||
}
|
||||
|
||||
|
@ -59,61 +59,64 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kb-sc-info {
|
||||
position: fixed;
|
||||
width: 30em;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
margin: 0.5em;
|
||||
padding: 0.1em 0.3em;
|
||||
z-index: 10;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #282a32;
|
||||
-webkit-box-shadow: 2px 1px 5px #130f23;
|
||||
box-shadow: 2px 1px 5px #130f23;
|
||||
border: 1px solid #39a1e5;
|
||||
color: #39a1e5;
|
||||
background: #282a32;
|
||||
cursor: default;
|
||||
opacity: 0.94;
|
||||
@media screen and (max-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
h5 { /* The dialog title */
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: 20px;
|
||||
border: 1px solid #39a1e5;
|
||||
color: #39a1e5;
|
||||
background: #282a32;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.close { /* The little exit icon, in top-right */
|
||||
float: right;
|
||||
border-radius: 20px;
|
||||
width: 1em;
|
||||
padding: 0 0 6px 6px;
|
||||
height: 1em;
|
||||
background: #0000008a;
|
||||
margin-top: 3px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border: 1px solid #39a1e5;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Animations, animations everywhere */
|
||||
.slide-fade-enter-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .8s cubic-bezier(.93,.01,.89,.5);
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
transform: translateY(35em);
|
||||
opacity: 0;
|
||||
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.kb-sc-info {
|
||||
position: fixed;
|
||||
width: 30em;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
margin: 0.5em;
|
||||
padding: 0.1em 0.3em;
|
||||
z-index: 10;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $header-color;
|
||||
-webkit-box-shadow: 2px 1px 5px #130f23;
|
||||
box-shadow: 2px 1px 5px #130f23;
|
||||
border: 1px solid $ascent;
|
||||
color: $ascent;
|
||||
background: $header-color;
|
||||
cursor: default;
|
||||
opacity: 0.94;
|
||||
@media screen and (max-width: 600px) {
|
||||
display: none;
|
||||
}
|
||||
h5 { /* The dialog title */
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: 20px;
|
||||
border: 1px solid $ascent;
|
||||
color: $ascent;
|
||||
background: $header-color;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.close { /* The little exit icon, in top-right */
|
||||
float: right;
|
||||
border-radius: 20px;
|
||||
width: 1em;
|
||||
padding: 0 0 6px 6px;
|
||||
height: 1em;
|
||||
background: $transparent-black;
|
||||
margin-top: 3px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border: 1px solid $ascent;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Animations, animations everywhere */
|
||||
.slide-fade-enter-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .8s cubic-bezier(.93,.01,.89,.5);
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
transform: translateY(35em);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
@ -13,6 +13,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -26,7 +29,7 @@ nav {
|
||||
background: #607d8b33;
|
||||
-webkit-box-shadow: 1px 1px 2px #232323;
|
||||
box-shadow: 1px 1px 2px #232323;
|
||||
color: #1CA8DD;
|
||||
color: $ascent;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background: #607d8b1c;
|
||||
@ -34,7 +37,7 @@ nav {
|
||||
}
|
||||
}
|
||||
.router-link-active {
|
||||
border: 1px solid #1CA8DD;
|
||||
border: 1px solid $ascent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -12,19 +12,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.page-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h1 {
|
||||
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: $ascent;
|
||||
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
span.subtitle {
|
||||
color: #9F86FF;
|
||||
color: $ascent-with-opacity;
|
||||
font-style: italic;
|
||||
text-shadow: 1px 1px 2px #130f23;
|
||||
}
|
||||
|
14
src/styles/color-pallet.scss
Normal file
14
src/styles/color-pallet.scss
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
|
||||
/* Core Pallet */
|
||||
$background: #0b1021;
|
||||
$ascent: #0875c3;
|
||||
|
||||
/* Action Colors */
|
||||
$transparent-black: #0000008a;
|
||||
|
||||
/* Modified Colors */
|
||||
$bg-with-opacity: rgba($background, 0.8);
|
||||
$header-color: darken($background, 5%);
|
||||
$dark-ascent: darken($ascent, 50%);
|
||||
$ascent-with-opacity: rgba($ascent, 0.8);
|
@ -70,8 +70,10 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '../../src/styles/color-pallet.scss';
|
||||
|
||||
.home {
|
||||
background: #2F323A;
|
||||
background: $background;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user