Revision cd670dfa
Von Hans Peter Schlaepfer vor etwa 5 Jahren hinzugefügt
- ID cd670dfafdb3560614634765e2a377946ff1809b
- Vorgänger ff33b093
| css/less/jquery.tooltipster.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* JQUERY TOOLTIPSTER (jquery.tooltipster.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// |
|
| 7 |
// Tooltipster |
|
| 8 |
// |
|
| 9 |
// ---------------------------------------------------------------------------- |
|
| 10 |
// DESCRIPTION: |
|
| 11 |
// Contains: |
|
| 12 |
// - tooltipster |
|
| 13 |
// - tooltipster-light |
|
| 14 |
// |
|
| 15 |
// |
|
| 16 |
// CONTENTS: |
|
| 17 |
// - Tooltipster |
|
| 18 |
// - Tooltipster Light |
|
| 19 |
// - |
|
| 20 |
// - |
|
| 21 |
// ---------------------------------------------------------------------------- |
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
// ---------------------------------------------------------------------------- |
|
| 27 |
// |
|
| 28 |
// Tooltipster |
|
| 29 |
// |
|
| 30 |
// ---------------------------------------------------------------------------- |
|
| 31 |
// |
|
| 32 |
|
|
| 33 |
|
|
| 1 | 34 |
/* This is the default Tooltipster theme */ |
| 2 | 35 |
/* (feel free to modify or duplicate and create multiple themes!): */ |
| 3 | 36 |
.tooltipster-default {
|
| 4 |
border-radius: 5px;
|
|
| 37 |
border-radius: @controlpanel-radius;
|
|
| 5 | 38 |
border: 2px solid #000; |
| 6 |
background: #4c4c4c;
|
|
| 39 |
background-color: @jquery_ui_tooltipster-bg-color;
|
|
| 7 | 40 |
color: #fff; |
| 8 |
} |
|
| 41 |
max-width: 400px ; |
|
| 42 |
|
|
| 43 |
/* Use this next selector to style things like font-size and line-height: */ |
|
| 44 |
.tooltipster-content {
|
|
| 45 |
font-size: @font-size-small; |
|
| 46 |
line-height: 16px; |
|
| 47 |
padding: 1.2em 1.0em 1.2em 1.4em; |
|
| 48 |
overflow: hidden; |
|
| 49 |
background-color: @jquery_ui_tooltipster-bg-color; |
|
| 50 |
} |
|
| 9 | 51 |
|
| 10 |
/* Use this next selector to style things like font-size and line-height: */ |
|
| 11 |
.tooltipster-default .tooltipster-content {
|
|
| 12 |
font-size: @font-size-small; |
|
| 13 |
line-height: 16px; |
|
| 14 |
padding: 1.2em 1.0em 1.2em 1.4em; |
|
| 15 |
overflow: hidden; |
|
| 16 |
} |
|
| 52 |
/* These next classes handle the styles for the little arrow attached to the tooltip. */ |
|
| 53 |
/* By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ |
|
| 54 |
.tooltipster-arrow {
|
|
| 55 |
display: block; |
|
| 56 |
text-align: center; |
|
| 57 |
width: 100%; |
|
| 58 |
height: 100%; |
|
| 59 |
position: absolute; |
|
| 60 |
top: 0; |
|
| 61 |
left: 0; |
|
| 62 |
z-index: -1; |
|
| 63 |
|
|
| 64 |
/* This next selector defines the color of the border on the outside of the arrow. */ |
|
| 65 |
/* This will automatically match the color and size of the border set on the main tooltip styles. */ |
|
| 66 |
/* Set display: none; if you would like a border around the tooltip but no border around the arrow */ |
|
| 67 |
.tooltipster-arrow-border { }
|
|
| 68 |
} |
|
| 69 |
|
|
| 70 |
} // /.tooltipster-default |
|
| 17 | 71 |
|
| 18 |
/* This next selector defines the color of the border on the outside of the arrow. */ |
|
| 19 |
/* This will automatically match the color and size of the border set on the main tooltip styles. */ |
|
| 20 |
/* Set display: none; if you would like a border around the tooltip but no border around the arrow */ |
|
| 21 |
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
|
|
| 22 |
/* border-color: ... !important; */ |
|
| 23 |
} |
|
| 24 | 72 |
|
| 25 | 73 |
|
| 26 | 74 |
/* If you're using the icon option, use this next selector to style them */ |
| ... | ... | |
| 40 | 88 |
z-index: 9999999; |
| 41 | 89 |
pointer-events: none; |
| 42 | 90 |
width: auto; |
| 91 |
max-width: 400px ; |
|
| 43 | 92 |
overflow: visible; |
| 44 |
} |
|
| 45 |
.tooltipster-base .tooltipster-content {
|
|
| 46 |
overflow: hidden; |
|
| 93 |
|
|
| 94 |
.tooltipster-content {
|
|
| 95 |
overflow: hidden; |
|
| 96 |
} |
|
| 47 | 97 |
} |
| 48 | 98 |
|
| 49 | 99 |
|
| 50 |
/* These next classes handle the styles for the little arrow attached to the tooltip. */ |
|
| 51 |
/* By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ |
|
| 52 |
.tooltipster-arrow {
|
|
| 53 |
display: block; |
|
| 54 |
text-align: center; |
|
| 55 |
width: 100%; |
|
| 56 |
height: 100%; |
|
| 57 |
position: absolute; |
|
| 58 |
top: 0; |
|
| 59 |
left: 0; |
|
| 60 |
z-index: -1; |
|
| 61 |
} |
|
| 100 |
|
|
| 101 |
|
|
| 62 | 102 |
.tooltipster-arrow span, |
| 63 | 103 |
.tooltipster-arrow-border {
|
| 64 | 104 |
display: block; |
| ... | ... | |
| 287 | 327 |
-ms-transform: scale(1.1, 1.1); |
| 288 | 328 |
transform: scale(1.1, 1.1); |
| 289 | 329 |
} |
| 330 |
|
|
| 331 |
|
|
| 332 |
|
|
| 333 |
|
|
| 334 |
// ---------------------------------------------------------------------------- |
|
| 335 |
// |
|
| 336 |
// Tooltipster Light |
|
| 337 |
// |
|
| 338 |
// ---------------------------------------------------------------------------- |
|
| 339 |
// |
|
| 340 |
|
|
| 341 |
|
|
| 342 |
.tooltipster-light {
|
|
| 343 |
border-radius: @controlpanel-radius; |
|
| 344 |
border: 1px solid @jquery_ui_tooltipster-border-color; |
|
| 345 |
background-color: @jquery_ui_tooltipster-bg-color; |
|
| 346 |
color: @jquery_ui_tooltipster-color; |
|
| 347 |
|
|
| 348 |
.tooltipster-content {
|
|
| 349 |
font-size: @font-size-smaller; |
|
| 350 |
line-height: 16px; |
|
| 351 |
background-color: @jquery_ui_tooltipster-bg-color; |
|
| 352 |
padding: 1.0em 1.4em; |
|
| 353 |
} |
|
| 354 |
} |
|
| 355 |
|
|
Auch abrufbar als: Unified diff
Erweiterung und Optimierung less und css fuer Design 4.0