Rev 69 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 69 | Rev 198 | ||
---|---|---|---|
1 | <?php \header('Content-Type: text/css; charset=UTF-8'); ?> |
1 | <?php \header('Content-Type: text/css; charset=UTF-8'); ?> |
2 | /*
|
2 | /*
|
3 | * Accessible Pure CSS Tooltips
|
3 | * Accessible Pure CSS Tooltips
|
4 | * Copyright (C) 2008, 2011 Thomas 'PointedEars' Lahn <mehl@PointedEars.de>
|
4 | * Copyright (C) 2008, 2011 Thomas 'PointedEars' Lahn <mehl@PointedEars.de>
|
5 | *
|
5 | *
|
6 | * This program is free software: you can redistribute it and/or modify
|
6 | * This program is free software: you can redistribute it and/or modify
|
7 | * it under the terms of the GNU General Public License as published by
|
7 | * it under the terms of the GNU General Public License as published by
|
8 | * the Free Software Foundation, either version 3 of the License, or
|
8 | * the Free Software Foundation, either version 3 of the License, or
|
9 | * (at your option) any later version.
|
9 | * (at your option) any later version.
|
10 | *
|
10 | *
|
11 | * This program is distributed in the hope that it will be useful,
|
11 | * This program is distributed in the hope that it will be useful,
|
12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
14 | * GNU General Public License for more details.
|
14 | * GNU General Public License for more details.
|
15 | *
|
15 | *
|
16 | * You should have received a copy of the GNU General Public License
|
16 | * You should have received a copy of the GNU General Public License
|
17 | * along with this program. If not, see <http://www.gnu.org/licenses/>.
|
17 | * along with this program. If not, see <http://www.gnu.org/licenses/>.
|
18 | */
|
18 | */
|
19 | 19 | ||
20 | .tooltip { |
20 | .tooltip { |
21 | position: relative; |
21 | position: relative; |
22 | border-bottom: 1px dotted black; |
22 | border-bottom: 1px dotted black; |
23 | text-decoration: none; |
23 | text-decoration: none; |
24 | cursor: help; |
24 | cursor: help; |
25 | }
|
25 | }
|
26 | 26 | ||
27 | .tooltip span { |
27 | .tooltip span { |
28 | display: none; |
28 | display: none; |
29 | visibility: hidden; |
29 | visibility: hidden; |
30 | opacity: 0; |
30 | opacity: 0; |
31 | -moz-transition: visibility 0.5s linear; |
31 | -moz-transition: visibility 0.5s linear; |
32 | -webkit-transition: visibility 0.5s linear; |
32 | -webkit-transition: visibility 0.5s linear; |
33 | position: absolute; |
33 | position: absolute; |
34 | width: 11em; |
34 | width: 11em; |
35 | height: auto; |
35 | height: auto; |
36 | padding: 2px 5px 5px 5px; |
36 | padding: 2px 5px 5px 5px; |
37 | border: 1px solid #666; |
37 | border: 1px solid #666; |
38 | box-shadow: 6px 6px 6px #666; |
38 | box-shadow: 6px 6px 6px #666; |
39 | -moz-box-shadow: 6px 6px 6px #666; |
39 | -moz-box-shadow: 6px 6px 6px #666; |
40 | -webkit-box-shadow: 6px 6px 6px #666; |
40 | -webkit-box-shadow: 6px 6px 6px #666; |
41 | background-color: #ffc !important; |
41 | background-color: #ffc !important; |
42 | color: black; |
42 | color: black; |
43 | text-decoration: none; |
43 | text-decoration: none; |
44 | }
|
44 | }
|
45 | 45 | ||
46 | .tooltip>span { |
46 | .tooltip>span { |
47 | width: auto; |
47 | width: auto; |
48 | min-width: 11em; |
48 | min-width: 11em; |
49 | }
|
49 | }
|
50 | 50 | ||
51 | .tooltip:hover span, |
51 | .tooltip:hover span, |
52 | .tooltip:focus span |
52 | .tooltip:focus span |
53 | {
|
53 | {
|
54 | display: block; |
54 | display: block; |
55 | visibility: visible; |
55 | visibility: visible; |
56 | opacity: 1; |
56 | opacity: 1; |
57 | z-index: 1337; |
57 | z-index: 1337; |
58 | }
|
58 | }
|
59 | 59 | ||
60 | /* Copyright note */
|
60 | /* Copyright note */
|
61 | .tooltip span:after { |
61 | .tooltip span:after { |
62 | display: block; |
62 | display: block; |
63 | margin: 0.5em 0 0 0; |
63 | margin: 0.5em 0 0 0; |
64 | border-top: 1px solid gray; |
64 | border-top: 1px solid gray; |
65 | padding-top: 0.5em; |
65 | padding-top: 0.5em; |
66 | background-color: transparent; |
66 | background-color: transparent; |
67 | content: "Accessible Pure\a0 CSS\a0 Tooltips\0d \0a\ |
67 | content: "Accessible Pure\a0 CSS\a0 Tooltips\0d \0a\ |
68 | Copyright\a0 \a9 \a0 2008,\a0 2010\a0 \a0 \
|
68 | Copyright\a0 \a9 \a0 2008,\a0 2010\a0 \a0 \
|
69 | Thomas\a0 'PointedEars'\a0 Lahn <mehl@PointedEars.de>.\0d \0a \
|
69 | Thomas\a0 'PointedEars'\a0 Lahn <mehl@PointedEars.de>.\0d \0a \
|
70 | Distributed under the\a0 GNU\a0 GPL\a0 v3 or later."; |
70 | Distributed under the\a0 GNU\a0 GPL\a0 v3 or later."; |
71 | color: gray; |
71 | color: gray; |
72 | font-size: xx-small; |
72 | font-size: xx-small; |
73 | }
|
73 | }
|
74 | 74 | ||
75 | *>.tooltip span:after { |
75 | *>.tooltip span:after { |
76 | color: black; |
76 | color: black; |
77 | opacity: 0.9; |
77 | opacity: 0.9; |
78 | }
|
78 | }
|
79 | 79 | ||
80 | /* elements of the tooltip contents to hide when the tooltop is displayed */
|
80 | /* elements of the tooltip contents to hide when the tooltop is displayed */
|
81 | .tooltip span span { |
81 | .tooltip span span { |
82 | position: relative; |
82 | position: relative; |
83 | visibility: visible; |
83 | visibility: visible; |
84 | display: inline; |
84 | display: inline; |
85 | padding: 0; |
85 | padding: 0; |
86 | border: none; |
86 | border: none; |
87 | }
|
87 | }
|
88 | 88 | ||
89 | .tooltip:hover span span, |
89 | .tooltip:hover span span, |
90 | .tooltip:focus span span { |
90 | .tooltip:focus span span { |
91 | visibility: hidden; |
91 | visibility: hidden; |
92 | display: none; |
92 | display: none; |
93 | }
|
93 | }
|