selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Configuration/CloudBackupRestore.vue
View File

@ -3,7 +3,7 @@
<div class="section intro">
<h2>Cloud Backup & Restore</h2>
<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.
<br><br>
All data is fully end-to-end encrypted with AES, using your password as the key.

2
src/components/Configuration/ConfigContainer.vue
View File

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

27
src/components/LinkItems/ItemGroup.vue
View File

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

3
src/styles/color-palette.scss
View File

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

34
src/styles/global-styles.scss
View File

@ -1,4 +1,6 @@
@import '@/styles/style-helpers.scss';
@font-face {
font-family: 'Inconsolata';
src: url('./assets/fonts/Inconsolata-Light.ttf');
@ -8,6 +10,8 @@ html {
margin: 0;
padding: 0;
transition: all 1s;
margin-top: -3px;
@extend .scroll-bar;
}
/* Default app font face */
@ -19,33 +23,3 @@ body, div, p, a, span, label, input, button {
h1, h2, h3, h4, h5 {
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;
}

44
src/styles/style-helpers.scss Normal file
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;
}