danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: integrated base variables into Taiwlind

This commit is contained in:
Roberto Tonino 2020-10-10 17:35:04 +02:00
parent d9435d019b
commit 685c637d3d
10 changed files with 116 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
rollup.config.js
View File

@ -46,8 +46,8 @@ export default {
resolve(), // Tells Rollup how to find imported modules in node_modules
commonjs(), // Converts imported modules to ES modules, if necessary
svg(),
postcss(),
vue(),
postcss(),
production && terser(), // Minify, but only in production
production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
]

12
src/components/TheContent.vue
View File

@ -43,21 +43,21 @@ main {
height: calc(100vh - 93px);
overflow-y: scroll;
overflow-x: hidden;
}
&::-webkit-scrollbar {
main::-webkit-scrollbar {
width: 10px;
}
}
&::-webkit-scrollbar-track {
main::-webkit-scrollbar-track {
background: var(--main-background);
}
}
&::-webkit-scrollbar-thumb {
main::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>

2
src/styles/scss/_sidebar.scss
View File

@ -119,7 +119,7 @@ $sidebar-delay: 75ms;
width: 25px;
height: 25px;
border-radius: 1000px;
border: 1px solid var(--separator);
border: 1px solid theme('colors.grayscale.500');
cursor: pointer;
transition: border 200ms ease-in-out;

81
src/styles/scss/base/_base.scss
View File

@ -1,66 +1,65 @@
html {
--main-scroll: hsl(0, 0%, 33%);
:root {
--main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%);
--tag-background: hsl(210, 100%, 38%);
--tag-text: hsl(0, 0%, 100%);
--toast-background: hsla(0, 0%, 0%, 0.867);
--toast-secondary: hsla(0, 0%, 100%, 0.133);
--toast-text: hsla(0, 0%, 100%, 0.871);
--separator: hsl(0, 0%, 50%);
--tag-text: theme('colors.white');
--toast-background: hsla(0, 0%, 0%, 0.85);
--toast-secondary: hsla(0, 0%, 100%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);
}
html[data-theme='light'] {
--main-background: hsl(0, 0%, 100%);
--secondary-background: hsl(0, 0%, 93%);
--foreground: hsl(0, 0%, 20%);
--foreground-inverted: hsl(0, 0%, 93%);
:root[data-theme='light'] {
--main-background: theme('colors.white');
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--foreground-inverted: theme('colors.grayscale.930');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(210, 3%, 14%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 0%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.black');
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 100%);
--table-zebra: hsl(0, 0%, 90%);
--table-highlight: hsl(0, 0%, 84%);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
--table-highlight: theme('colors.grayscale.840');
}
html[data-theme='dark'] {
--main-background: hsl(0, 0%, 8%);
--secondary-background: hsl(0, 0%, 14%);
--foreground: hsl(0, 0%, 93%);
--foreground-inverted: hsl(0, 0%, 20%);
:root[data-theme='dark'] {
--main-background: theme('colors.grayscale.80');
--secondary-background: theme('colors.grayscale.140');
--foreground: theme('colors.grayscale.930');
--foreground-inverted: theme('colors.grayscale.200');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(0, 0%, 10%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--panels-background: theme('colors.grayscale.100');
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%);
--table-bg: theme('colors.grayscale.80');
--table-zebra: theme('colors.grayscale.140');
--table-highlight: theme('colors.grayscale.200');
}
html[data-theme='purple'] {
:root[data-theme='purple'] {
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--foreground: hsl(0, 0%, 93%);
--foreground: theme('colors.grayscale.930');
--foreground-inverted: hsl(258, 62%, 8%);
--accent-color: hsl(261, 85%, 37%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(257, 70%, 9%);
--panels-text: hsl(0, 0%, 100%);
--accent-text: hsl(0, 0%, 87%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
@ -71,17 +70,3 @@ html[data-theme='purple'] {
--table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%);
}
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}

18
src/styles/scss/style.scss
View File

@ -1,11 +1,25 @@
@import './base/base';
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';
// SASS only
@import './base/variables';
@import './base/base';
html {
height: 100vh;
}
body {
margin: 0px;
width: 100%;
height: 100%;
font-family: 'Open Sans', 'sans-serif';
overflow: hidden;
background: var(--main-background);
color: var(--foreground);
}
@import './base/normalize';
@import './base/mixins';
@import './base/animations';

2
src/styles/scss/tabs/_home-tab.scss
View File

@ -3,7 +3,7 @@
}
.home_section {
border-top: 1px solid var(--separator);
border-top: 1px solid theme('colors.grayscale.500');
padding-top: 25px;
padding-bottom: 25px;
}

2
src/styles/scss/tabs/_search-tab.scss
View File

@ -5,7 +5,7 @@
padding-bottom: 20px;
&:not(:first-child) {
border-top: 1px solid var(--separator);
border-top: 1px solid theme('colors.grayscale.500');
}
}

2
src/styles/scss/tabs/_settings-tab.scss
View File

@ -29,7 +29,7 @@
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid var(--separator); /* Need less opacity */
border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
padding-top: 20px;
padding-bottom: 20px;

50
tailwind.config.js
View File

@ -3,9 +3,55 @@ module.exports = {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true
},
purge: ['./src/**/*.html', './src/**/*.vue'],
purge: {
// https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475
content: [`./public/**/*.html`, `./src/**/*.vue`],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
},
whitelist: [],
whitelistPatterns: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/
]
},
theme: {
extend: {}
extend: {
colors: {
grayscale: {
80: 'hsl(0, 0%, 8%)', // Remove maybe
100: 'hsl(0, 0%, 10%)',
140: 'hsl(0, 0%, 14%)', // Remove maybe
200: 'hsl(0, 0%, 20%)',
240: 'hsl(0, 0%, 24%)', // Remove maybe
300: 'hsl(0, 0%, 30%)',
400: 'hsl(0, 0%, 40%)',
500: 'hsl(0, 0%, 50%)',
600: 'hsl(0, 0%, 60%)',
700: 'hsl(0, 0%, 70%)',
800: 'hsl(0, 0%, 80%)',
840: 'hsl(0, 0%, 84%)', // Remove maybe
870: 'hsl(0, 0%, 87%)', // Remove maybe
900: 'hsl(0, 0%, 90%)',
930: 'hsl(0, 0%, 93%)' // Remove maybe
},
accent: 'var(--accent-color)',
background: {
main: 'var(--main-background)',
secondary: 'var(--secondary-background)'
},
foreground: {
default: 'var(--foreground)',
inverted: 'var(--foreground-inverted)'
},
panels: {
bg: 'var(--panels-background)',
text: 'var(--panels-text)'
}
}
}
},
variants: {},
corePlugins: {