@@ -2,11 +2,13 @@ $guidecolor: #9636FC;
2
2
$dottedline : 1px dotted $guidecolor ;
3
3
$solidline : 1px solid $guidecolor ;
4
4
.index {
5
- column-width : 250px ;
5
+ -webkit-column-width : 250px ;
6
+ column-width : 250px ;
6
7
}
7
8
8
9
.category {
9
- break-inside : avoid ;
10
+ -webkit-column-break-inside : avoid ;
11
+ break-inside : avoid ;
10
12
}
11
13
12
14
.reference-category {
@@ -27,14 +29,16 @@ h1#new-cat-index {
27
29
}
28
30
29
31
.sub-category {
30
- column-width : 250px ;
32
+ -webkit-column-width : 250px ;
33
+ column-width : 250px ;
31
34
// column-rule: $dottedline;
32
35
// column-gap: 1em;
33
36
/* border-bottom: $dottedline; */
34
37
}
35
38
36
39
#toc-categories {
37
- column-width : 250px ;
40
+ -webkit-column-width : 250px ;
41
+ column-width : 250px ;
38
42
padding-bottom : 3em ;
39
43
/* border-bottom: $dottedline; */
40
44
}
@@ -61,7 +65,8 @@ h1#new-cat-index {
61
65
}
62
66
63
67
.cat-group {
64
- break-inside : avoid ;
68
+ -webkit-column-break-inside : avoid ;
69
+ break-inside : avoid ;
65
70
}
66
71
67
72
.box-drawings {
@@ -82,7 +87,8 @@ h1#new-cat-index {
82
87
83
88
.summary ,
84
89
.ref-entry {
85
- break-inside : avoid ;
90
+ -webkit-column-break-inside : avoid ;
91
+ break-inside : avoid ;
86
92
}
87
93
88
94
.summary {
@@ -100,6 +106,8 @@ h1#new-cat-index {
100
106
}
101
107
102
108
#flex-search {
109
+ display : -webkit-box ;
110
+ display : -ms-flexbox ;
103
111
display : flex ;
104
112
* {
105
113
margin-right : 0.5em ;
@@ -113,19 +121,41 @@ h1#new-cat-index {
113
121
}
114
122
}
115
123
124
+ .flex-search-item ,
125
+ .flex-search-item ::-webkit-input-placeholder {
126
+ font-family : ' Times New Roman' , Times , serif ;
127
+ font-size : 1.2em ;
128
+ }
129
+
130
+ .flex-search-item ,
131
+ .flex-search-item :-ms-input-placeholder {
132
+ font-family : ' Times New Roman' , Times , serif ;
133
+ font-size : 1.2em ;
134
+ }
135
+
136
+ .flex-search-item ,
137
+ .flex-search-item ::-ms-input-placeholder {
138
+ font-family : ' Times New Roman' , Times , serif ;
139
+ font-size : 1.2em ;
140
+ }
141
+
116
142
.flex-search-item ,
117
143
.flex-search-item ::placeholder {
118
144
font-family : ' Times New Roman' , Times , serif ;
119
145
font-size : 1.2em ;
120
146
}
121
147
122
148
input .flex-search-item {
123
- flex-grow : 2 ;
149
+ -webkit-box-flex : 2 ;
150
+ -ms-flex-positive : 2 ;
151
+ flex-grow : 2 ;
124
152
border : $solidline ;
125
153
}
126
154
127
155
button .flex-search-item {
128
- flex-grow : 1 ;
156
+ -webkit-box-flex : 1 ;
157
+ -ms-flex-positive : 1 ;
158
+ flex-grow : 1 ;
129
159
& :hover {
130
160
background : $guidecolor !important ;
131
161
color : white ;
@@ -138,6 +168,11 @@ button.flex-search-item {
138
168
#flex-search-results {
139
169
.search-result-container {
140
170
padding-top : 1em ;
171
+ /* @keyframes duration | timing-function | delay |
172
+ iteration-count | direction | fill-mode | play-state | name */
173
+
174
+ -webkit-animation :200ms cubic-bezier (0.68 , 0.03 , 0.98 , 0.6 ) 0ms 1 normal none running fadein;
175
+ animation :200ms cubic-bezier (0.68 , 0.03 , 0.98 , 0.6 ) 0ms 1 normal none running fadein;
141
176
.ref-entry {
142
177
padding-top : 0.5em ;
143
178
border-top : $dottedline ;
@@ -148,6 +183,16 @@ button.flex-search-item {
148
183
}
149
184
}
150
185
186
+ @-webkit-keyframes fadein {
187
+ from { opacity : 0 ; }
188
+ to { opacity : 1 ; }
189
+ }
190
+
191
+ @keyframes fadein {
192
+ from { opacity : 0 ; }
193
+ to { opacity : 1 ; }
194
+ }
195
+
151
196
#advanced-search-hint {
152
197
input {
153
198
display : none ;
@@ -173,5 +218,6 @@ button.flex-search-item {
173
218
height : auto ;
174
219
opacity : 1 ;
175
220
overflow : hidden ;
221
+ -webkit-transition : opacity .5s linear , max-height .5s linear ;
176
222
transition : opacity .5s linear , max-height .5s linear ;
177
223
}
0 commit comments