PluginProbe
Cooked – Recipe Management / 1.11.2
Cooked – Recipe Management v1.11.2
1.16.1 1.16.0 1.15.0 trunk 1.10.0 1.11.0 1.11.1 1.11.2 1.11.3 1.11.4 1.12.0 1.13.0 1.14.0 1.7.10 1.7.11 1.7.12 1.7.13 1.7.15.1 1.7.15.3 1.7.15.4 1.8.0 1.8.1 1.8.2 1.8.3 1.8.4 All 37 releases
cooked / assets / css / responsive.php

responsive.php in Cooked – Recipe Management 1.11.2, at assets/css/responsive.php

105 lines 6.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 $_cooked_settings = Cooked_Settings::get();
4
5 ?>@media screen and ( max-width: <?php echo esc_html( $_cooked_settings['responsive_breakpoint_1'] ); ?>px ) {
6
7 #cooked-timers-wrap { width:90%; margin:0 -45% 0 0; }
8
9 .cooked-recipe-grid,
10 .cooked-recipe-term-grid { margin:3% -1.5%; width: 103%; }
11 .cooked-term-block.cooked-col-25,
12 .cooked-recipe-grid.cooked-columns-3 .cooked-recipe,
13 .cooked-recipe-grid.cooked-columns-4 .cooked-recipe,
14 .cooked-recipe-grid.cooked-columns-5 .cooked-recipe,
15 .cooked-recipe-grid.cooked-columns-6 .cooked-recipe { width: 47%; margin: 0 1.5% 3%; padding: 0; }
16
17 }
18
19 @media screen and ( max-width: <?php echo esc_html( $_cooked_settings['responsive_breakpoint_2'] ); ?>px ) {
20
21 .cooked-recipe-grid,
22 .cooked-recipe-term-grid { margin:5% -2.5%; width:105%; }
23 .cooked-term-block.cooked-col-25,
24 .cooked-recipe-grid.cooked-columns-2 .cooked-recipe,
25 .cooked-recipe-grid.cooked-columns-3 .cooked-recipe,
26 .cooked-recipe-grid.cooked-columns-4 .cooked-recipe,
27 .cooked-recipe-grid.cooked-columns-5 .cooked-recipe,
28 .cooked-recipe-grid.cooked-columns-6 .cooked-recipe
29 .cooked-recipe-grid .cooked-recipe { width:95%; margin:0 2.5% 5%; padding:0; }
30
31 .cooked-recipe-info .cooked-left, .cooked-recipe-info .cooked-right { float:none; display:block; text-align:center; }
32 .cooked-recipe-info > section.cooked-right > span, .cooked-recipe-info > section.cooked-left > span { margin:0.5rem 1rem 1rem; }
33 .cooked-recipe-info > section.cooked-left > span:last-child, .cooked-recipe-info > span:last-child { margin-right:1rem; }
34 .cooked-recipe-info > section.cooked-right > span:first-child { margin-left:1rem; }
35
36 .cooked-recipe-search .cooked-fields-wrap { padding:0; display:block; }
37 .cooked-recipe-search .cooked-fields-wrap > .cooked-browse-search { width:100%; max-width:100%; border-right:1px solid rgba(0,0,0,.15); margin:2% 0; }
38 .cooked-recipe-search .cooked-fields-wrap.cooked-1-search-fields .cooked-browse-select-block { width:100%; left:0; }
39 .cooked-recipe-search .cooked-fields-wrap > .cooked-field-wrap-select { display:block; width:100%; }
40 .cooked-recipe-search .cooked-sortby-wrap { display:block; position:relative; width:68%; right:auto; top:auto; float:left; margin:0; }
41 .cooked-recipe-search .cooked-sortby-wrap > select { position:absolute; width:100%; border:1px solid rgba(0,0,0,.15); }
42 .cooked-recipe-search .cooked-browse-search-button { width:30%; right:auto; position:relative; display:block; float:right; }
43 .cooked-recipe-search .cooked-browse-select-block { top:3rem; left:-1px; width:calc( 100% + 2px ) !important; border-radius:0 0 10px 10px; max-height:16rem; overflow:auto; transform:translate3d(0,-1px,0); }
44 .cooked-recipe-search .cooked-fields-wrap.cooked-1-search-fields .cooked-browse-select-block { width:100%; padding:1.5rem; }
45 .cooked-recipe-search .cooked-fields-wrap.cooked-2-search-fields .cooked-browse-select-block { width:100%; padding:1.5rem; }
46 .cooked-recipe-search .cooked-fields-wrap.cooked-3-search-fields .cooked-browse-select-block { width:100%; padding:1.5rem; }
47 .cooked-recipe-search .cooked-fields-wrap.cooked-4-search-fields .cooked-browse-select-block { width:100%; padding:1.5rem; }
48 .cooked-recipe-search .cooked-browse-select-block { flex-wrap:wrap; max-height:20rem; }
49 .cooked-recipe-search .cooked-browse-select-block .cooked-tax-column { width:100%; min-width:100%; padding:0 0 1.5rem; }
50 .cooked-recipe-search .cooked-browse-select-block .cooked-tax-column > div { max-height:none; }
51 .cooked-recipe-search .cooked-browse-select-block .cooked-tax-column:last-child { padding:0; }
52 .cooked-recipe-search .cooked-fields-wrap.cooked-1-search-fields .cooked-browse-select-block .cooked-tax-column { width:100%; }
53 .cooked-recipe-search .cooked-fields-wrap.cooked-2-search-fields .cooked-browse-select-block .cooked-tax-column { width:100%; }
54 .cooked-recipe-search .cooked-fields-wrap.cooked-3-search-fields .cooked-browse-select-block .cooked-tax-column { width:100%; }
55 .cooked-recipe-search .cooked-fields-wrap.cooked-4-search-fields .cooked-browse-select-block .cooked-tax-column { width:100%; }
56
57 #cooked-timers-wrap { width:20rem; right:50%; margin:0 -10rem 0 0; transform:translate3d(0,11.2em,0); }
58 #cooked-timers-wrap.cooked-multiples { margin:0; right:0; border-radius:10px 0 0 0; width:20rem; }
59 #cooked-timers-wrap .cooked-timer-block { padding-left:3.25rem; }
60 #cooked-timers-wrap .cooked-timer-block.cooked-visible { padding-top:1rem; line-height:1.5rem; padding-left:3.25rem; }
61 #cooked-timers-wrap .cooked-timer-block .cooked-timer-step { font-size:0.9rem; }
62 #cooked-timers-wrap .cooked-timer-block .cooked-timer-desc { font-size:1rem; padding:0; }
63 #cooked-timers-wrap .cooked-timer-block .cooked-timer-obj { top:auto; right:auto; width:auto; font-size:1.5rem; line-height:2rem; }
64 #cooked-timers-wrap .cooked-timer-block .cooked-timer-obj > i.cooked-icon { font-size:1.5rem; width:1.3rem; margin-right:0.5rem; }
65 #cooked-timers-wrap .cooked-timer-block i.cooked-icon-times { line-height:1rem; font-size:1rem; top:1.4rem; left:1.2rem; }
66
67 body.cooked-fsm-active #cooked-timers-wrap { bottom:0; }
68
69 /* "Slide up" on mobile */
70 .cooked-fsm { opacity:1; transform:scale(1); top:120%; }
71 .cooked-fsm.cooked-active { top:0; }
72 .cooked-fsm .cooked-fsm-mobile-nav { display:block; }
73 .cooked-fsm .cooked-fsm-ingredients,
74 .cooked-fsm .cooked-fsm-directions-wrap { padding:9rem 2rem 1rem; width:100%; display:none; left:0; background:#fff; }
75 .cooked-fsm .cooked-fsm-ingredients.cooked-active,
76 .cooked-fsm .cooked-fsm-directions-wrap.cooked-active { display:block; }
77
78 <?php if ( isset($_cooked_settings['dark_mode']) && in_array('enabled', $_cooked_settings['dark_mode']) ):
79
80 ?>.cooked-fsm .cooked-fsm-ingredients,
81 .cooked-fsm .cooked-fsm-directions-wrap { background:#000; color:#fff; }<?php
82
83 endif; ?>
84
85 .cooked-fsm {
86 -webkit-transition: all 350ms cubic-bezier(0.420, 0.000, 0.150, 1.000);
87 -moz-transition: all 350ms cubic-bezier(0.420, 0.000, 0.150, 1.000);
88 -o-transition: all 350ms cubic-bezier(0.420, 0.000, 0.150, 1.000);
89 transition: all 350ms cubic-bezier(0.420, 0.000, 0.150, 1.000);
90 }
91
92 }
93
94 @media screen and ( max-width: <?php echo esc_html( $_cooked_settings['responsive_breakpoint_3'] ); ?>px ) {
95
96 .cooked-fsm .cooked-fsm-directions p { font-size:1rem; }
97 .cooked-fsm .cooked-recipe-directions .cooked-heading { font-size:1.25rem; }
98
99 #cooked-timers-wrap { width:100%; right:0; margin:0; border-radius:0; }
100
101 .cooked-recipe-search .cooked-fields-wrap > .cooked-browse-search { margin:3% 0; }
102 .cooked-recipe-search .cooked-sortby-wrap { width:67%; }
103
104 }
105