You are here

Home » API reference » Onomasticon 2.x

onomasticon.theme.css in Onomasticon 2.x

Same filename and directory in other branches
  1. 8 onomasticon.theme.css
.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 
  1. .onomasticon {

  2.     border-bottom: 1px dotted #2C3E50;

  3. }

  4. .onomasticon-cursor-none,

  5. .onomasticon-cursor-none .onomasticon-term-description {

  6.     cursor: none;

  7. }

  8. .onomasticon-cursor-help,

  9. .onomasticon-cursor-help .onomasticon-term-description {

  10.     cursor: help;

  11. }

  12. .onomasticon-extra-element {

  13.     display: inline-block;

  14.     position: relative;

  15.     transition: all 250ms;

  16. }

  17. .onomasticon-extra-element::before {

  18.     content: attr(title);

  19. }

  20. .onomasticon-extra-element .onomasticon-term-description {

  21.     transition: all 250ms;

  22.     display: block;

  23.     position: absolute;

  24.     padding: 0.5em;

  25.     color: #ffffff;

  26.     background: rgba(0, 0, 0, .9);

  27.     border: none;

  28.     border-radius: .5em;

  29.     width: 20em;

  30.     max-height: 0em;

  31.     left: 50%;

  32.     margin-left: -10em;

  33.     text-align: center;

  34.     font-style: normal;

  35.     opacity: 0;

  36.     overflow: hidden;

  37.     visibility: hidden;

  38.     z-index: 1;

  39. }

  40. .onomasticon-extra-element.onomasticon-orientation-above .onomasticon-term-description {

  41.     bottom: calc(1em + 10px);

  42. }

  43. .onomasticon-extra-element.onomasticon-orientation-below .onomasticon-term-description {

  44.     top: calc(1em + 10px);

  45. }

  46. .onomasticon-extra-element:hover,

  47. .onomasticon-extra-element:focus {

  48.     color: #ffffff;

  49.     background: rgba(0, 0, 0, .9);

  50.     box-shadow: 0 0 0 10px rgba(0, 0, 0, .9);

  51.     border-bottom-color: rgba(0, 0, 0, .9)

  52. }

  53. .onomasticon-extra-element.onomasticon-orientation-above:hover,

  54. .onomasticon-extra-element.onomasticon-orientation-above:focus {

  55.     border-radius: 0 0 .5em .5em;

  56. }

  57. .onomasticon-extra-element.onomasticon-orientation-below:hover,

  58. .onomasticon-extra-element.onomasticon-orientation-below:focus {

  59.     border-radius: .5em .5em 0 0;

  60. }

  61. .onomasticon-extra-element:hover .onomasticon-term-description,

  62. .onomasticon-extra-element:focus .onomasticon-term-description {

  63.     max-height: 1000em;

  64.     opacity: 1;

  65.     visibility: visible;

  66. }

  67. .onomasticon-term-description span.p {

  68.     display: block;

  69.     margin-bottom: .5em;

  70. }