Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-10-04 17:57:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

🩹 Fixes the UI for tooltip description

Browse Source
This commit is contained in:
Alicia Sykes 2021-09-05 17:02:47 +01:00
parent 76a570cb6a
commit 27dd60a812
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/LinkItems/Item.vue
View File

@ -131,6 +131,7 @@ export default {
},
/* Returns configuration object for the tooltip */
getTooltipOptions() {
if (!this.description) return {}; // If no description, then skip
const hotkeyText = this.hotkey ? `\nPress '${this.hotkey}' to launch` : '';
return {
disabled: !this.description,
@ -410,16 +411,18 @@ export default {
<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
<style lang="scss">
.tooltip {
.tooltip.item-description-tooltip {
background: var(--description-tooltip-background);
border: 1px solid var(--description-tooltip-color);
border-radius: var(--curve-factor-small);
color: var(--description-tooltip-color);
padding: 0.2rem 0.5rem;
background: #0b1021cc;
border: 1px solid #0b1021;
border-radius: 3px;
color: #fff;
max-width: 250px;
z-index: 5;
}
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-color: var(--description-tooltip-color);
border-left-color: transparent!important;
border-right-color: transparent!important;
border-bottom-color: transparent!important;
@ -432,7 +435,6 @@ export default {
border-style: solid;
position: absolute;
margin: 5px;
border-color: #0b1021cc;
z-index: 3;
}

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

@ -108,4 +108,6 @@
--welcome-popup-text-color: var(--primary);
--toast-background: var(--primary);
--toast-color: var(--background);
--description-tooltip-background: var(--background-darker);
--description-tooltip-color: var(--primary);
}

12
src/styles/color-themes.scss
View File

@ -217,6 +217,8 @@ html[data-theme='material-original'] {
--heading-text-color: #fff;
--status-check-tooltip-background: #f2f2f2;
--status-check-tooltip-color: #01579b;
--description-tooltip-background: #f2f2f2;
--description-tooltip-color: #01579b;
--login-form-background: #fff;
--about-page-accent: #000;
--about-page-color: var(--background-darker);
@ -262,6 +264,8 @@ html[data-theme='material-dark-original'] {
--scroll-bar-background: #131a1f;
--status-check-tooltip-background: #131a1f;
--status-check-tooltip-color: #08B0BB;
--description-tooltip-background: #131a1f;
--description-tooltip-color: #08B0BB;
&::-webkit-scrollbar-thumb {
border-left: 1px solid #131a1f;
}
@ -510,6 +514,8 @@ html[data-theme='material'] {
--context-menu-secondary-color: #f5f5f5;
--transparent-white-50: #00000080;
--status-check-tooltip-background: #fff;
--description-tooltip-background: #fff;
--description-tooltip-color: #473f3f;
--side-bar-background-lighter: #0c4eba;
--side-bar-item-background: #f5f5f5;
@ -602,6 +608,8 @@ html[data-theme='material-dark'] {
--status-check-tooltip-background: #131a1f;
--status-check-tooltip-color: #e0e0e0;
--description-tooltip-background: #131a1f;
--description-tooltip-color: #e0e0e0;
--curve-factor: 2px;
--curve-factor-navbar: 0;
@ -673,6 +681,8 @@ html[data-theme='minimal-light'] {
--curve-factor-navbar: 8px;
--status-check-tooltip-background: #f2f2f2;
--status-check-tooltip-color: #000;
--description-tooltip-background: #f2f2f2;
--description-tooltip-color: #000;
--login-form-color: #101931;
--about-page-background: var(--background);
--about-page-color: var(--background-darker);
@ -749,6 +759,7 @@ html[data-theme='vaporware'] {
--login-form-color: #09bfe6;
--config-settings-background: #100e2c;
--status-check-tooltip-background: #100e2c;
--description-tooltip-background: #100e2c;
.home {
background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
@ -832,6 +843,7 @@ html[data-theme='cyberpunk'] {
--welcome-popup-background: var(--pink);
--welcome-popup-text-color: var(--blue);
--status-check-tooltip-background: var(--blue);
--description-tooltip-background: var(--blue);
--font-headings: 'Audiowide', cursive;
}