1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
.littlefoot{
--button-background-color:#949494;
--button-text-color:#fff;
--button-active-background-color:#3f3f3f;
--button-active-text-color:#fff;
--button-border-radius:0.25rem;
--button-height:16px;
--button-height:1rem;
--button-margin:0 1.6px;
--button-margin:0 0.1rem;
--button-padding:0 0.3rem;
--button-transition:background-color 0.25s ease,color 0.25s ease;
--popover-background-color:#f5f5f5;
--popover-text-color:#111;
--popover-border:1px solid #ddd;
--popover-border-radius:8px;
--popover-border-radius:0.1rem;
--popover-max-height:15em;
--popover-max-width:90%;
--popover-horizontal-padding:22.4px;
--popover-horizontal-padding:1.4rem;
--popover-vertical-padding:9.6px;
--popover-vertical-padding:0.6rem;
--popover-shadow:0 0 0.2rem rgba(0,0,0,.1);
--popover-transform-origin:50% 0;
--popover-transform:scale(0.1) translateZ(0);
--popover-active-transform:scale(1) translateZ(0);
--popover-transition:opacity 0.25s ease,transform 0.25s ease;
--popover-width:22em;
--popover-scroll-indicator-color:#3f3f3f;
--popover-tooltip-size:8px;
--popover-tooltip-size:0.5rem;
position:relative;
@media (prefers-color-scheme: dark) {
--button-background-color: #555;
--button-text-color: #fff;
--button-active-background-color: #222;
--button-active-text-color: #fff;
--popover-background-color: var(--block-background-color);
--popover-text-color: var(--text-color);
--popover-border: 1px solid var(--border-color);
--popover-shadow: 0 0 0.2rem rgba(100, 100, 100, 0.1);
--popover-scroll-indicator-color: #aaa;
}
}
.littlefoot__button{
background-color:var(--button-background-color);
border:0;
border:var(--button-border,0);
border-radius:var(--button-border-radius);
color:var(--button-text-color);
cursor:pointer;
display:inline-block;
font-size:12px;
font-size:var(--button-font-size,12px);
font-size:.75rem;
font-size:var(--button-font-size,.75rem);
font-weight:400;
font-weight:var(--button-font-weight,initial);
height:var(--button-height);
margin:var(--button-margin);
padding:var(--button-padding);
-webkit-text-decoration:none;
text-decoration:none;
transition:var(--button-transition);
vertical-align:middle
}
.littlefoot__button.is-active,.littlefoot__button:active,.littlefoot__button:focus,.littlefoot__button:hover{
background-color:var(--button-active-background-color);
color:var(--button-active-text-color)
}
.littlefoot__button svg{
float:left;
height:4.8px;
height:.3rem
}
.littlefoot__popover{
border:var(--popover-border);
border-radius:var(--popover-border-radius);
box-shadow:var(--popover-shadow);
margin:calc(var(--popover-tooltip-size) + var(--button-height)) 0;
max-width:var(--popover-max-width);
position:absolute;
top:0;
transform:var(--popover-transform);
transform-origin:var(--popover-transform-origin);
transition:var(--popover-transition);
width:var(--popover-width);
z-index:10
}
.littlefoot__popover.is-above{
bottom:0;
top:auto
}
.littlefoot__popover.is-active{
transform:var(--popover-active-transform)
}
.littlefoot__wrapper{
position:relative;
z-index:10
}
.littlefoot__content,.littlefoot__wrapper{
border-radius:var(--popover-border-radius)
}
.littlefoot__content{
-webkit-overflow-scrolling:touch;
background-color:var(--popover-background-color);
box-sizing:border-box;
color:var(--popover-text-color);
font-family:serif;
font-family:initial;
font-family:var(--popover-font-family,initial);
font-size:medium;
font-size:var(--popover-font-size,initial);
font-style:normal;
font-style:var(--popover-font-style,initial);
font-weight:400;
font-weight:var(--popover-font-weight,initial);
line-height:normal;
line-height:var(--popover-line-height,normal);
max-height:var(--popover-max-height);
overflow:auto;
padding:var(--popover-vertical-padding) var(--popover-horizontal-padding);
width:100%
}
.littlefoot__content img{
max-width:100%
}
.littlefoot__content:focus{
outline:none
}
.is-scrollable{
--arrow-x:calc(var(--popover-horizontal-padding)*-1);
--arrow-y:calc(var(--popover-vertical-padding)/2)
}
.is-scrollable .littlefoot__content:after{
bottom:0;
color:var(--popover-scroll-indicator-color);
content:"\21E3";
display:block;
left:0;
opacity:1;
position:sticky;
text-align:center;
transform:translateX(var(--arrow-x)) translateY(var(--arrow-y));
transition:var(--popover-transition);
width:var(--popover-horizontal-padding)
}
.is-scrollable.is-fully-scrolled .littlefoot__content:after{
opacity:0
}
.littlefoot__tooltip{
--tooltip-margin:calc(var(--popover-tooltip-size)*-1);
background-color:var(--popover-background-color);
border:var(--popover-border);
box-shadow:var(--popover-shadow);
height:calc(var(--popover-tooltip-size)*2);
margin-left:var(--tooltip-margin);
position:absolute;
transform:rotate(45deg);
width:calc(var(--popover-tooltip-size)*2)
}
.is-below .littlefoot__tooltip{
top:var(--tooltip-margin)
}
.is-above .littlefoot__tooltip{
bottom:var(--tooltip-margin)
}
@media (max-width:767.98px){
.littlefoot__popover{
border-radius:0;
border-width:1px 0 0;
bottom:0!important;
left:0!important;
margin:0;
max-width:100%!important;
position:fixed;
right:0!important;
top:auto!important;
transform:translateY(100%);
width:100%
}
.littlefoot__popover.is-active{
transform:translateY(0)
}
.littlefoot__wrapper{
border-radius:0;
max-width:100%!important;
transform:none
}
.littlefoot__tooltip{
display:none
}
}
@media not print{
.littlefoot--print{
display:none
}
}
@media print{
.littlefoot__button,.littlefoot__popover{
display:none
}
}
|
