mirror of
https://github.com/Lissy93/dashy.git
synced 2024-10-04 17:57:30 +03:00
🩹 Fixes the UI for tooltip description
This commit is contained in:
parent
76a570cb6a
commit
27dd60a812
@ -131,6 +131,7 @@ export default {
|
|||||||
},
|
},
|
||||||
/* Returns configuration object for the tooltip */
|
/* Returns configuration object for the tooltip */
|
||||||
getTooltipOptions() {
|
getTooltipOptions() {
|
||||||
|
if (!this.description) return {}; // If no description, then skip
|
||||||
const hotkeyText = this.hotkey ? `\nPress '${this.hotkey}' to launch` : '';
|
const hotkeyText = this.hotkey ? `\nPress '${this.hotkey}' to launch` : '';
|
||||||
return {
|
return {
|
||||||
disabled: !this.description,
|
disabled: !this.description,
|
||||||
@ -410,16 +411,18 @@ export default {
|
|||||||
|
|
||||||
<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
|
<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
|
||||||
<style lang="scss">
|
<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;
|
padding: 0.2rem 0.5rem;
|
||||||
background: #0b1021cc;
|
|
||||||
border: 1px solid #0b1021;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #fff;
|
|
||||||
max-width: 250px;
|
max-width: 250px;
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
.tooltip-arrow {
|
.tooltip-arrow {
|
||||||
border-width: 5px 5px 0 5px;
|
border-width: 5px 5px 0 5px;
|
||||||
|
border-color: var(--description-tooltip-color);
|
||||||
border-left-color: transparent!important;
|
border-left-color: transparent!important;
|
||||||
border-right-color: transparent!important;
|
border-right-color: transparent!important;
|
||||||
border-bottom-color: transparent!important;
|
border-bottom-color: transparent!important;
|
||||||
@ -432,7 +435,6 @@ export default {
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
border-color: #0b1021cc;
|
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -108,4 +108,6 @@
|
|||||||
--welcome-popup-text-color: var(--primary);
|
--welcome-popup-text-color: var(--primary);
|
||||||
--toast-background: var(--primary);
|
--toast-background: var(--primary);
|
||||||
--toast-color: var(--background);
|
--toast-color: var(--background);
|
||||||
|
--description-tooltip-background: var(--background-darker);
|
||||||
|
--description-tooltip-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
@ -217,6 +217,8 @@ html[data-theme='material-original'] {
|
|||||||
--heading-text-color: #fff;
|
--heading-text-color: #fff;
|
||||||
--status-check-tooltip-background: #f2f2f2;
|
--status-check-tooltip-background: #f2f2f2;
|
||||||
--status-check-tooltip-color: #01579b;
|
--status-check-tooltip-color: #01579b;
|
||||||
|
--description-tooltip-background: #f2f2f2;
|
||||||
|
--description-tooltip-color: #01579b;
|
||||||
--login-form-background: #fff;
|
--login-form-background: #fff;
|
||||||
--about-page-accent: #000;
|
--about-page-accent: #000;
|
||||||
--about-page-color: var(--background-darker);
|
--about-page-color: var(--background-darker);
|
||||||
@ -262,6 +264,8 @@ html[data-theme='material-dark-original'] {
|
|||||||
--scroll-bar-background: #131a1f;
|
--scroll-bar-background: #131a1f;
|
||||||
--status-check-tooltip-background: #131a1f;
|
--status-check-tooltip-background: #131a1f;
|
||||||
--status-check-tooltip-color: #08B0BB;
|
--status-check-tooltip-color: #08B0BB;
|
||||||
|
--description-tooltip-background: #131a1f;
|
||||||
|
--description-tooltip-color: #08B0BB;
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
border-left: 1px solid #131a1f;
|
border-left: 1px solid #131a1f;
|
||||||
}
|
}
|
||||||
@ -510,6 +514,8 @@ html[data-theme='material'] {
|
|||||||
--context-menu-secondary-color: #f5f5f5;
|
--context-menu-secondary-color: #f5f5f5;
|
||||||
--transparent-white-50: #00000080;
|
--transparent-white-50: #00000080;
|
||||||
--status-check-tooltip-background: #fff;
|
--status-check-tooltip-background: #fff;
|
||||||
|
--description-tooltip-background: #fff;
|
||||||
|
--description-tooltip-color: #473f3f;
|
||||||
--side-bar-background-lighter: #0c4eba;
|
--side-bar-background-lighter: #0c4eba;
|
||||||
--side-bar-item-background: #f5f5f5;
|
--side-bar-item-background: #f5f5f5;
|
||||||
|
|
||||||
@ -602,6 +608,8 @@ html[data-theme='material-dark'] {
|
|||||||
|
|
||||||
--status-check-tooltip-background: #131a1f;
|
--status-check-tooltip-background: #131a1f;
|
||||||
--status-check-tooltip-color: #e0e0e0;
|
--status-check-tooltip-color: #e0e0e0;
|
||||||
|
--description-tooltip-background: #131a1f;
|
||||||
|
--description-tooltip-color: #e0e0e0;
|
||||||
--curve-factor: 2px;
|
--curve-factor: 2px;
|
||||||
--curve-factor-navbar: 0;
|
--curve-factor-navbar: 0;
|
||||||
|
|
||||||
@ -673,6 +681,8 @@ html[data-theme='minimal-light'] {
|
|||||||
--curve-factor-navbar: 8px;
|
--curve-factor-navbar: 8px;
|
||||||
--status-check-tooltip-background: #f2f2f2;
|
--status-check-tooltip-background: #f2f2f2;
|
||||||
--status-check-tooltip-color: #000;
|
--status-check-tooltip-color: #000;
|
||||||
|
--description-tooltip-background: #f2f2f2;
|
||||||
|
--description-tooltip-color: #000;
|
||||||
--login-form-color: #101931;
|
--login-form-color: #101931;
|
||||||
--about-page-background: var(--background);
|
--about-page-background: var(--background);
|
||||||
--about-page-color: var(--background-darker);
|
--about-page-color: var(--background-darker);
|
||||||
@ -749,6 +759,7 @@ html[data-theme='vaporware'] {
|
|||||||
--login-form-color: #09bfe6;
|
--login-form-color: #09bfe6;
|
||||||
--config-settings-background: #100e2c;
|
--config-settings-background: #100e2c;
|
||||||
--status-check-tooltip-background: #100e2c;
|
--status-check-tooltip-background: #100e2c;
|
||||||
|
--description-tooltip-background: #100e2c;
|
||||||
|
|
||||||
.home {
|
.home {
|
||||||
background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
|
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-background: var(--pink);
|
||||||
--welcome-popup-text-color: var(--blue);
|
--welcome-popup-text-color: var(--blue);
|
||||||
--status-check-tooltip-background: var(--blue);
|
--status-check-tooltip-background: var(--blue);
|
||||||
|
--description-tooltip-background: var(--blue);
|
||||||
--font-headings: 'Audiowide', cursive;
|
--font-headings: 'Audiowide', cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user