PluginProbe
Blog Floating Button / trunk
Blog Floating Button vtrunk
trunk 1.4.10 1.4.11 1.4.12 1.4.13 1.4.14 1.4.15 1.4.16 1.4.17 1.4.18 1.4.19 1.4.20 1.4.21 1.4.7 1.4.8 1.4.9
blog-floating-button / css / admin_bfb_style.css

admin_bfb_style.css in Blog Floating Button trunk, at css/admin_bfb_style.css

470 lines 11.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2
3 body.term-php #edittag{
4 max-width: none;
5 }
6 body.term-php #edittag table.form-table{
7 max-width: 800px;
8 }
9 .bfb_notice{
10 margin-left: 2px;
11 }
12 #bfb_wrap{
13 width: 100%;
14 line-height: 180%;
15 font-size: 14px;
16 }
17 #bfb_wrap:after, #bfb_wrap:before {
18 content: "";
19 clear: both;
20 display: block;
21 }
22 #bfb_wrap p.submit{ margin-top: 0; }
23 #bfb_wrap [id^="bfb_content_"]{
24 position: static;
25 }
26 #bfb_wrap [id^="bfb_content_"].bfb_imgBanner{
27 display: block;
28 max-width: 375px;
29 }
30 #bfb_wrap #bfb_main{
31 float: left;
32 min-width: 500px;
33 width: calc( 100% - 400px );
34 margin-right: 40px;
35 }
36 #bfb_wrap #bfb_main.bfb_pro{
37 width: 45%;
38 }
39 #bfb_wrap #bfb_sub h2{
40 margin-bottom: 20px;
41 }
42 #bfb_wrap #bfb_sub.bfb_free{
43 float: left;
44 width: 300px;
45 text-align: center;
46 }
47 #bfb_wrap #bfb_sub.bfb_free a{
48 display: block;
49 margin-bottom: 30px;
50 }
51 #bfb_wrap #bfb_sub.bfb_free img{
52 width: 100%;
53 min-width: 200px;
54 max-width: 300px;
55 }
56 #bfb_wrap #bfb_sub.bfb_pro{
57 float: left;
58 width: 50%;
59 min-width: 720px;
60 }
61 #bfb_wrap #bfb_sub [id^="bfb_content_"]{
62 position: relative;
63 }
64 #bfb_wrap #bfb_sub .bfb_preview_sp{
65 margin-top: 50px;
66 max-width: 395px;
67 }
68 #bfb_wrap #bfb_sub .bfb_view_sp{
69 display: block !important;
70 }
71 #bfb_wrap #bfb_sub iframe{
72 margin: -40px 0 0 0; padding: 0; width: 100%;
73 }
74 #bfb_wrap [class^="bfb_preview"] + [class^="bfb_preview"]{
75 margin-top: 30px;
76 }
77 #bfb_wrap .bfb_h1{
78 margin: 30px 0;
79 font-size: 24px;
80 }
81 #bfb_wrap .ui-widget-header{
82 background: transparent;
83 border: none;
84 }
85 #bfb_wrap #tabs .ui-widget-header{
86 border-bottom: 1px solid #ccc;
87 font-size: 13px;
88 }
89 #bfb_wrap #inner-tabs-pc .ui-widget-header,
90 #bfb_wrap #inner-tabs-sp .ui-widget-header{
91 border-bottom: none;
92 }
93 #bfb_wrap .ui-widget.ui-widget-content{
94 background: transparent;
95 border: none;
96 }
97 #bfb_wrap .ui-corner-all{
98 border-bottom-right-radius: 0;
99 border-bottom-left-radius: 0;
100 }
101 #bfb_wrap .ui-tabs .ui-tabs-panel{
102 padding: 10px 0;
103 /*border: 1px solid #ccc;*/
104 }
105 #bfb_wrap .ui-tabs .ui-tabs-nav li{
106 border-bottom: 1px solid #f1f1f1;
107 }
108 #bfb_wrap .bfb_box{
109 padding: 10px 30px;
110 background: #fff;
111 border-radius: 4px;
112 }
113 #bfb_wrap #inner-tabs-pc .ui-state-default,
114 #bfb_wrap #inner-tabs-sp .ui-state-default{
115 background: transparent;
116 border: none;
117 }
118 #bfb_wrap #inner-tabs-pc .ui-state-default:hover,
119 #bfb_wrap #inner-tabs-sp .ui-state-default:hover{
120 background: #ddd;
121 }
122 #bfb_wrap #inner-tabs-pc .ui-state-default a,
123 #bfb_wrap #inner-tabs-sp .ui-state-default a{
124 /*color: #0044CC;*/
125 }
126 #bfb_wrap #inner-tabs-pc .ui-state-default.ui-tabs-active,
127 #bfb_wrap #inner-tabs-sp .ui-state-default.ui-tabs-active{
128 background: #fff;
129 }
130 #bfb_wrap .ui-tabs:first-child .ui-tabs-nav li.ui-tabs-active a{
131 font-weight: 550;
132 }
133 #bfb_wrap h2{
134 position: relative;
135 margin: 0;
136 padding: 12px 10px 10px 17px;
137 line-height: 1.8;
138 background-color: #f3f3f3;
139 color: #1d2327!important;
140 font-weight: bold;
141 }
142 #bfb_wrap h2::before{
143 position: absolute;
144 content: " ";
145 display: block;
146 border-left: solid 4px #f7cf5e;
147 top: 25%;
148 left: 0;
149 height: 50%;
150 }
151 #bfb_wrap h3 {
152 position: relative;
153 margin: 0 0 0 0;
154 padding: 15px;
155 font-size: 18px;
156 }
157 #bfb_wrap h3::before {
158 position: absolute;
159 content: " ";
160 display: block;
161 border-left: solid 4px #f7cf5e;
162 top: 25%;
163 left: 0;
164 height: 50%;
165 }
166 #bfb_wrap h4{
167 margin-bottom: 10px;
168 font-size: 18px;
169 }
170 #bfb_wrap small.bfb_small{
171 margin-top: 3px;
172 display: block;
173 }
174 #bfb_wrap .bfb_check a{
175 color: #0044CC;
176 font-weight: 550;
177 }
178 #bfb_wrap .bfb_check a:hover{
179 opacity: 0.6;
180 }
181 #bfb_wrap .bfb_check:before{
182 position: absolute;
183 width: 20px;
184 height: 20px;
185 content: '';
186 left: 0;
187 }
188 #bfb_wrap .bfb_check.bfb_true,
189 #bfb_wrap .bfb_check.bfb_false{
190 position: relative;
191 margin-top: 8px;
192 padding-left: 20px;
193 }
194 #bfb_wrap .bfb_check.bfb_true{
195 color: green;
196 }
197 #bfb_wrap .bfb_check.bfb_false{
198 padding-left: 0;
199 }
200 #bfb_wrap .bfb_check.bfb_true:before{
201 background: url('../images/check_true.png') no-repeat;
202 background-size: 16px 16px;
203 }
204 #bfb_wrap .bfb_shortInput{ margin-right: 10px; width: 100px; }
205
206 #bfb_wrap .bfb_each{
207 margin: 30px 0;
208 border-bottom: 1px solid #eee;
209 }
210 #bfb_wrap .bfb_each:last-of-type{
211 border: none;
212 }
213 #bfb_wrap .bfb_each .bfb_q{
214 margin: 0 0 20px 10px;
215 color: #864A4C;
216 font-weight: 550;
217 }
218 #bfb_wrap .bfb_each .bfb_q:before{
219 margin-right: 10px;
220 content: 'Q.';
221 font-size: 20px;
222 font-weight: 550;
223 }
224 #bfb_wrap .bfb_each .bfb_a{
225 margin: 0 0 20px 10px;
226 }
227 #bfb_wrap .bfb_each .bfb_a:before{
228 margin-right: 10px;
229 content: 'A.';
230 font-size: 20px;
231 font-weight: 550;
232 }
233 #bfb_wrap .bfb_fnt-red{ color: #D80000 !important; }
234 #bfb_wrap .bfb_fnt-brown{ color: #864A4C !important; }
235 #bfb_wrap .bfb_fnt-pink{ color: #F9699A !important; }
236 #bfb_wrap .bfb_bg-yellow{ background-color: #ffffaf !important; }
237 #bfb_wrap .bfb_box2{
238 margin: 30px 0;
239 padding: 20px !important;
240 line-height:230%;
241 border: none !important;
242 }
243 #bfb_wrap .bfb_box2.bfb_red{ background-color: #ffe9e9; }
244 #bfb_wrap .bfb_box2.bfb_yellow{ background-color: #fffdeb; }
245 #bfb_wrap .bfb_box2.bfb_gray{ background-color: #f5f5f5; }
246 #bfb_wrap .bfb_box2 p:last-child{ margin-bottom: 0; }
247 #bfb_wrap:not(.optimize) .bfb_load_preview_wrap{ position: absolute; right: 30px; z-index: 9999; }
248 #bfb_wrap .bfb_load_preview_wrap a{ color: #0073aa; text-decoration: none; font-size: 13px; }
249 #bfb_wrap .bfb_load_preview_wrap a:hover{ color: #0073aa; }
250 #bfb_wrap #bfb_sub.fixed{ position: fixed; top: 10px; z-index: 99999; }
251 #bfb_wrap .bfb_sticky {
252 position: -webkit-sticky;
253 position: sticky;
254 top: 40px;
255 }
256 /*投稿編集画面*/
257 .post-php #bfb_sub.bfb_pro{ padding-top: 50px; }
258
259 .bfb_popup_help{
260 margin-left: 5px;
261 padding: 0;
262 color: #fff;
263 cursor: pointer;
264 background: #aaa;
265 display: inline-block;
266 width: 18px;
267 height: 18px;
268 border-radius: 50%;
269 line-height: 18px;
270 text-align:center;
271 font-size: 12px;
272 }
273 .bfb_popup_help_window{
274 display: none;
275 max-width: 300px;
276 position: absolute;
277 padding: 10px 15px;
278 background-color: #fff;
279 border: 1px solid #ccc;
280 line-height: 1.5em;
281 color: #333;
282 font-size: 14px;
283 border-radius: 4px;
284 box-shadow: 2px 2px 2px #ddd;
285 }
286
287 /*-------------------------
288 テーブル
289 -------------------------*/
290 #bfb_wrap table.table{ margin-bottom: 15px; max-width: calc( 100% - 20px ); width: calc( 100% - 20px ); background: #fff; border-collapse: collapse; word-break: break-all; font-size: 14px; }
291 #bfb_wrap table.table tr.bold{ font-weight: 550; }
292 #bfb_wrap table.table tr.gray{ background: #f8f8f8; }
293 #bfb_wrap table.table td img{ display: block; }
294 #bfb_wrap table.table td.star{ color: #ED953C; font-weight: 600; }
295 #bfb_wrap table.table th.short_item{ width: 150px; }
296 #bfb_wrap table.table td{ padding: 5px 10px; border: 1px solid #ccc; }
297 #bfb_wrap table.table th{ padding: 5px 10px; min-width: 50px; max-width: 250px; background-color: #f3f3f3 !important; border: 1px solid #ccc; color: #3a3a3a; font-size: 13px; }
298 #bfb_wrap table.table.scroll{ table-layout: fixed; }
299 #bfb_wrap table.table.force-scroll{ overflow-x: auto; display: block; table-layout: fixed; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #ddd; line-height: 160%; }
300 #bfb_wrap table.table.noborder,#bfb_wrap table.table.noborder th,#bfb_wrap table.table.noborder td{ border: none; }
301 #bfb_wrap table.table th.center,#bfb_wrap table.table td.center{ text-align: center !important; }
302 #bfb_wrap table.table.th_center th{ text-align: center !important; }
303 #bfb_wrap table.table.th_bold th{ font-weight: 600 !important; }
304 #bfb_wrap table.table.th_yellow th{ color: #383838 !important; background-color: #fffce2 !important; }
305 #bfb_wrap table.table tr.red{ background-color: #ffe9e9; }
306 #bfb_wrap table.table.fixed{ table-layout:fixed; }
307 #bfb_wrap table.table .w50{ max-width: 50px; width: 50px; }
308 #bfb_wrap table.table .w100{ max-width: 100px; width: 100px; }
309
310 @media screen and (max-width: 480px) {
311 #bfb_wrap table.table{ width: 100%; border: none; white-space: normal; }
312 #bfb_wrap table.table.scroll{ overflow-x: auto; display: block; table-layout: fixed; -webkit-overflow-scrolling: touch; white-space: nowrap; border-bottom: 1px solid #ddd; line-height: 160%; }
313 #bfb_wrap table.table.scroll:before,#bfb_wrap table.table.force-scroll:before{ content: "表は横にスクロールできます。"; }
314 }
315
316 @media screen and (max-width: 1600px) {
317 #bfb_wrap #bfb_main.bfb_pro{ width: calc( 100% - 30px ); }
318 #bfb_wrap #bfb_sub.bfb_pro{ width: calc( 100% - 30px ); }
319 #bfb_wrap #bfb_sub.bfb_pro .preview_wrap{
320 width: 50%;
321 min-width: 720px;
322 }
323 }
324 @media screen and (max-width: 1300px) {
325 #bfb_wrap #bfb_main{ width: 70%; }
326 #bfb_wrap #bfb_sub.bfb_free{ width: 20%; }
327 }
328 @media screen and (max-width: 783px) {
329 #bfb_wrap #bfb_main{ width: 100%; }
330 #bfb_wrap #bfb_sub.bfb_free{ width: 100%; }
331 #bfb_wrap #bfb_sub.bfb_free a{
332 display: inline-block;
333 margin-right: 30px;
334 }
335 #bfb_wrap #bfb_sub.bfb_free img{
336 max-width: 250px;
337 }
338 }
339
340 /*-------------------------
341 解析レポートの条件検索
342 -------------------------*/
343 #bfb_wrap form.search_box{ margin-bottom: 20px; }
344 #bfb_wrap form.search_box label{ margin-right: 20px; }
345 #bfb_wrap form.search_box table{ margin-bottom: 10px; padding: 20px; width: calc( 100% - 30px ); background: #fff; border-collapse: collapse; border-radius: 4px; }
346 #bfb_wrap form.search_box table td{ padding: 10px; }
347 #bfb_wrap form.search_box table tr td:first-child{ width: 150px; }
348 #bfb_wrap form.search_box table tr.memo{ display: none; }
349 #bfb_wrap form.search_box input[type="text"]{ width: 150px; }
350 #bfb_wrap form.search_box input[type="text"].longItem{ width: 325px; }
351 #canvasWrapper{
352 margin-bottom: 50px;
353 position: relative;
354 height: 400px;
355 }
356 #canvasWrapper #myChart{
357 box-sizing: border-box;
358 padding: 20px;
359 max-width: calc( 100% - 20px );
360 width: calc( 100% - 20px );
361 background: #fff;
362 }
363
364 /*-------------------------
365 ページネーション
366 -------------------------*/
367 .bfb_pagination{
368 margin: 20px 0 0;
369 box-sizing: border-box;
370 width: calc( 100% - 20px);
371 max-width: calc( 100% - 20px);
372 text-align: center;
373 }
374 .bfb_pagination a{
375 display: inline-block;
376 margin: 0 7px 7px 0;
377 padding: 3px 11px;
378 background: #888;
379 border-radius: 2px;
380 border: 1px solid #888;
381 color: #fff;
382 text-decoration: none;
383 }
384 .bfb_pagination a:hover{
385 background: #eee;
386 color: #333;
387 }
388 .bfb_pagination a.active{
389 padding: 5px 13px;
390 cursor: default;
391 background: #eee;
392 color: #333;
393 }
394 .bfb_pagination_count_text{
395 margin-bottom: 5px;
396 font-weight: 550;
397 }
398
399 /*-------------------------
400 最適化
401 -------------------------*/
402 #bfb_wrap.optimize{
403 width: calc( 100% - 20px );
404 max-width: calc( 100% - 20px );
405 }
406 #bfb_wrap.optimize h2{
407 margin-bottom: 30px;
408 }
409 #bfb_wrap.optimize h3{
410 margin-top: 20px;
411 }
412 #bfb_wrap.optimize a{
413 text-decoration: none;
414 }
415 #bfb_wrap.optimize .bfb_inner_wrap{
416 position: relative;
417 padding: 20px;
418 background: #fff;
419 border-radius: 4px;
420 }
421 #bfb_wrap.optimize .bfb_inner_wrap .bfb_load_preview_wrap{
422 position: absolute;
423 right: 30px;
424 z-index: 9999;
425 }
426 #bfb_wrap.optimize .bfb_inner_wrap table{
427 margin: 0;
428 }
429 #bfb_wrap.optimize textarea{
430 max-width: 500px;
431 height: 100px;
432 }
433 #bfb_wrap.optimize .bfb_inner_wrap label:not(:last-child){
434 margin-top: 20px;
435 margin-right: 10px;
436 }
437 #bfb_wrap.optimize .menuLink{
438 position: relative;
439 margin-bottom: 5px;
440 font-size: 13px;
441 }
442 #bfb_wrap.optimize form.action_back{
443 position: absolute;
444 left: 0;
445 top: -25px;
446 display: inline-block;
447 margin-right: 20px;
448 }
449 #bfb_wrap.optimize form.action_back input[type=submit]{
450 cursor: pointer;
451 background: transparent;
452 border: none;
453 color: #0073aa;
454 font-size: 13px;
455 }
456 #bfb_wrap.optimize .menuLink a.bfb_edit_finish{
457 position: absolute;
458 top: -25px;
459 right: 0;
460 }
461 #bfb_wrap.optimize .bfb_saveBtn{
462 margin-top: 20px;
463 }
464 #bfb_wrap.optimize .status_start{
465 color: #40a500;
466 font-weight: 550;
467 }
468 #bfb_wrap.optimize .status_stop{
469 color: #ce0000;
470 }