Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add styling for tooltips

Browse source
This commit is contained in:
Tyler-A 2020-08-05 22:39:41 -06:00
parent fe801a47ec
commit 8619f09727
3 changed files with 109 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -73,6 +73,7 @@ export default {
<style> <style>
@import "./css/dark_theme.css"; @import "./css/dark_theme.css";
@import "./css/tooltips.css";
@import "./css/inputs.css"; @import "./css/inputs.css";
html, body, .maximize_size { html, body, .maximize_size {

3
src/css/dark_theme.css
View file

@ -35,4 +35,7 @@
--missing-picture-background: var(--background); --missing-picture-background: var(--background);
--missing-picture-foreground: var(--accent2); --missing-picture-foreground: var(--accent2);
--tooltip-colour: #000000;
--tooltip-text: var(--spotify-green);
} }

105
src/css/tooltips.css Normal file
View file

@ -0,0 +1,105 @@
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: var(--tooltip-colour);
color: var(--tooltip-text);
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: var(--tooltip-colour);
z-index: 1;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip.popover .popover-inner {
background: var(--tooltip-colour);
color: var(--tooltip-text);
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.tooltip.popover .popover-arrow {
border-color: var(--tooltip-colour);
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}