🔀 Merge pull request #207 from Lissy93/BUG-FIX/tooltip-backround

[BUG-FIX] Tooltip styling and text
Fixes #205
This commit is contained in:
Alicia Sykes 2021-09-06 22:05:08 +01:00 committed by GitHub
commit cbb002f7a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 3 deletions

View File

@ -62,6 +62,7 @@
"css-note-l3": "To remove all custom styles, delete the contents and hit Save Changes"
},
"alternate-views": {
"alternate-view-heading": "Switch View",
"default": "Default",
"workspace": "Workspace",
"minimal": "Minimal"

View File

@ -431,8 +431,6 @@ export default {
border-bottom-color: transparent!important;
bottom: -11px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
width: 0;
height: 0;
border-style: solid;

View File

@ -6,7 +6,7 @@
<IconSpanner @click="showEditor()" tabindex="-2"
v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
<IconViewMode @click="openChangeViewMenu()" tabindex="-2"
v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" />
</div>
<!-- Modal containing all the configuration options -->

View File

@ -12,6 +12,7 @@
<IconPalette
class="color-button"
@click="openThemeConfigurator"
v-tooltip="$t('theme-maker.title')"
/>
<CustomThemeMaker
v-if="themeConfiguratorOpen"

View File

@ -88,4 +88,30 @@ html {
}
}
}
}
/* Overriding styles for tooltip component */
.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;
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;
bottom: -11px;
left: calc(50% - 5px);
margin: 5px;
width: 0;
height: 0;
border-style: solid;
position: absolute;
z-index: 3;
}