onomasticon.theme.css in Onomasticon 8
.onomasticon {
border-bottom: 1px dotted #2C3E50;
}
.onomasticon-cursor-none,
.onomasticon-cursor-none .onomasticon-term-description {
cursor: none;
}
.onomasticon-cursor-help,
.onomasticon-cursor-help .onomasticon-term-description {
cursor: help;
}
.onomasticon-extra-element {
display: inline-block;
position: relative;
transition: all 250ms;
}
.onomasticon-extra-element::before {
content: attr(title);
}
.onomasticon-extra-element .onomasticon-term-description {
transition: all 250ms;
display: block;
position: absolute;
padding: 0.5em;
color: #ffffff;
background: rgba(0, 0, 0, .9);
border: none;
border-radius: .5em;
width: 20em;
max-height: 0em;
left: 50%;
margin-left: -10em;
text-align: center;
font-style: normal;
opacity: 0;
overflow: hidden;
visibility: hidden;
z-index: 1;
}
.onomasticon-extra-element.onomasticon-orientation-above .onomasticon-term-description {
bottom: calc(1em + 10px);
}
.onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {
top: calc(1em + 10px);
}
.onomasticon-extra-element:hover,
.onomasticon-extra-element:focus {
color: #ffffff;
background: rgba(0, 0, 0, .9);
box-shadow: 0 0 0 10px rgba(0, 0, 0, .9);
border-bottom-color: rgba(0, 0, 0, .9)
}
.onomasticon-extra-element.onomasticon-orientation-above:hover,
.onomasticon-extra-element.onomasticon-orientation-above:focus {
border-radius: 0 0 .5em .5em;
}
.onomasticon-extra-element.onomasticon-orientation-below:hover,
.onomasticon-extra-element.onomasticon-orientation-below:focus {
border-radius: .5em .5em 0 0;
}
.onomasticon-extra-element:hover .onomasticon-term-description,
.onomasticon-extra-element:focus .onomasticon-term-description {
max-height: 1000em;
opacity: 1;
visibility: visible;
}
.onomasticon-term-description span.p {
display: block;
margin-bottom: .5em;
}
File
onomasticon.theme.css
View source
- .onomasticon {
- border-bottom: 1px dotted #2C3E50;
- }
- .onomasticon-cursor-none,
- .onomasticon-cursor-none .onomasticon-term-description {
- cursor: none;
- }
- .onomasticon-cursor-help,
- .onomasticon-cursor-help .onomasticon-term-description {
- cursor: help;
- }
- .onomasticon-extra-element {
- display: inline-block;
- position: relative;
- transition: all 250ms;
- }
- .onomasticon-extra-element::before {
- content: attr(title);
- }
- .onomasticon-extra-element .onomasticon-term-description {
- transition: all 250ms;
- display: block;
- position: absolute;
- padding: 0.5em;
- color: #ffffff;
- background: rgba(0, 0, 0, .9);
- border: none;
- border-radius: .5em;
- width: 20em;
- max-height: 0em;
- left: 50%;
- margin-left: -10em;
- text-align: center;
- font-style: normal;
- opacity: 0;
- overflow: hidden;
- visibility: hidden;
- z-index: 1;
- }
- .onomasticon-extra-element.onomasticon-orientation-above .onomasticon-term-description {
- bottom: calc(1em + 10px);
- }
- .onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {
- top: calc(1em + 10px);
- }
- .onomasticon-extra-element:hover,
- .onomasticon-extra-element:focus {
- color: #ffffff;
- background: rgba(0, 0, 0, .9);
- box-shadow: 0 0 0 10px rgba(0, 0, 0, .9);
- border-bottom-color: rgba(0, 0, 0, .9)
- }
- .onomasticon-extra-element.onomasticon-orientation-above:hover,
- .onomasticon-extra-element.onomasticon-orientation-above:focus {
- border-radius: 0 0 .5em .5em;
- }
- .onomasticon-extra-element.onomasticon-orientation-below:hover,
- .onomasticon-extra-element.onomasticon-orientation-below:focus {
- border-radius: .5em .5em 0 0;
- }
- .onomasticon-extra-element:hover .onomasticon-term-description,
- .onomasticon-extra-element:focus .onomasticon-term-description {
- max-height: 1000em;
- opacity: 1;
- visibility: visible;
- }
- .onomasticon-term-description span.p {
- display: block;
- margin-bottom: .5em;
- }