Adds fancy scrollbar

This commit is contained in:
Alicia Sykes 2021-05-31 14:25:25 +01:00
parent 10ec99d742
commit a75db93e8e
6 changed files with 63 additions and 49 deletions

View File

@ -3,7 +3,7 @@
<div class="section intro"> <div class="section intro">
<h2>Cloud Backup & Restore</h2> <h2>Cloud Backup & Restore</h2>
<p class="intro"> <p class="intro">
Cloud backup and restore is an optional feature, that enabled you to upload your Cloud backup and restore is an optional feature, that enables you to upload your
config to the internet, and then restore it on any other device or instance of Dashy. config to the internet, and then restore it on any other device or instance of Dashy.
<br><br> <br><br>
All data is fully end-to-end encrypted with AES, using your password as the key. All data is fully end-to-end encrypted with AES, using your password as the key.

View File

@ -126,6 +126,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/style-helpers.scss';
pre { pre {
color: var(--config-code-color); color: var(--config-code-color);
@ -204,6 +205,7 @@ div.code-container {
.tab-item { .tab-item {
overflow-y: auto; overflow-y: auto;
@extend .scroll-bar;
background: var(--config-settings-background); background: var(--config-settings-background);
&.main-tab { &.main-tab {
min-height: 500px; min-height: 500px;

View File

@ -96,6 +96,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/media-queries.scss'; @import '@/styles/media-queries.scss';
@import '@/styles/style-helpers.scss';
.no-items { .no-items {
width: 100px; width: 100px;
@ -115,24 +116,14 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
&.item-group-grid { &.item-group-grid {
display: grid; display: grid;
@include phone { overflow: auto;
grid-template-columns: repeat(1, 1fr); @extend .scroll-bar;
} @include phone { grid-template-columns: repeat(1, 1fr); }
@include tablet { @include tablet { grid-template-columns: repeat(2, 1fr); }
grid-template-columns: repeat(2, 1fr); @include laptop { grid-template-columns: repeat(2, 1fr); }
} @include monitor { grid-template-columns: repeat(3, 1fr); }
@include laptop { @include big-screen { grid-template-columns: repeat(4, 1fr); }
grid-template-columns: repeat(2, 1fr); @include big-screen-up { grid-template-columns: repeat(5, 1fr); }
}
@include monitor {
grid-template-columns: repeat(3, 1fr);
}
@include big-screen {
grid-template-columns: repeat(4, 1fr);
}
@include big-screen-up {
grid-template-columns: repeat(5, 1fr);
}
} }
} }

View File

@ -38,6 +38,7 @@
--dimming-factor: 0.7; // Opacity for semi-transparent components --dimming-factor: 0.7; // Opacity for semi-transparent components
/* Settings for specific components */ /* Settings for specific components */
--scroll-bar-width: 8px;
--item-group-padding: 5px; // Determines width of item-group outline --item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23; --item-shadow: 1px 1px 2px #130f23;
--item-hover-shadow: 1px 2px 4px #373737; --item-hover-shadow: 1px 2px 4px #373737;
@ -74,4 +75,6 @@
--config-settings-background: var(--background-darker); --config-settings-background: var(--background-darker);
--toast-background: var(--primary); --toast-background: var(--primary);
--toast-color: var(--background); --toast-color: var(--background);
--scroll-bar-color: var(--primary);
--scroll-bar-background: var(--background-darker);
} }

View File

@ -1,4 +1,6 @@
@import '@/styles/style-helpers.scss';
@font-face { @font-face {
font-family: 'Inconsolata'; font-family: 'Inconsolata';
src: url('./assets/fonts/Inconsolata-Light.ttf'); src: url('./assets/fonts/Inconsolata-Light.ttf');
@ -8,6 +10,8 @@ html {
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: all 1s; transition: all 1s;
margin-top: -3px;
@extend .scroll-bar;
} }
/* Default app font face */ /* Default app font face */
@ -19,33 +23,3 @@ body, div, p, a, span, label, input, button {
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: 'Inconsolata', sans-serif; font-family: 'Inconsolata', sans-serif;
} }
.bold { font-weight: bold; }
.light { font-weight: lighter; }
.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}
.horizontal-center { margin: 0 auto; }
.border-box { box-sizing: border-box; }
/* Overiding styles for the global toast component */
.toast-message {
background: var(--toast-background) !important;
color: var(--toast-color) !important;
border: 1px solid var(--toast-color) !important;
border-radius: var(--curve-factor) !important;
font-size: 1.25rem !important;
}
.toast-error {
background: var(--danger) !important;
color: var(--white) !important;
font-size: 1.25rem !important;
}
.toast-success {
background: var(--success) !important;
color: var(--white) !important;
font-size: 1.25rem !important;
}

View File

@ -0,0 +1,44 @@
/* Fancy scrollbar */
.scroll-bar {
&::-webkit-scrollbar {
width: var(--scroll-bar-width);
height: var(--scroll-bar-width);
}
&::-webkit-scrollbar-track {
border-radius: var(--curve-factor);
background-color: var(--scroll-bar-background);
}
&::-webkit-scrollbar-thumb {
background: var(--scroll-bar-color);
border-radius: var(--curve-factor);
}
}
/* Single-style helpers */
.bold { font-weight: bold; }
.light { font-weight: lighter; }
.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}
.horizontal-center { margin: 0 auto; }
.border-box { box-sizing: border-box; }
/* Overiding styles for the global toast component */
.toast-message {
background: var(--toast-background) !important;
color: var(--toast-color) !important;
border: 1px solid var(--toast-color) !important;
border-radius: var(--curve-factor) !important;
font-size: 1.25rem !important;
}
.toast-error {
background: var(--danger) !important;
color: var(--white) !important;
font-size: 1.25rem !important;
}
.toast-success {
background: var(--success) !important;
color: var(--white) !important;
font-size: 1.25rem !important;
}