main.css (6286B)
1 /* Overriding WordPress native styles */ 2 3 .ocdi { 4 max-width: none; 5 } 6 7 .ocdi h2 { 8 text-align: inherit; 9 } 10 11 .ocdi h2:first-child, 12 .ocdi h3:first-child { 13 margin-top: 0; 14 } 15 16 .ocdi hr { 17 margin: 2.62em 0; 18 } 19 20 .feature-section + hr { 21 margin-top: 0; 22 } 23 24 #wpbody select { 25 height: auto; 26 padding: .62em; 27 line-height: inherit; 28 } 29 30 .ocdi .notice { 31 display: block !important; 32 } 33 34 /* Plugin elements */ 35 36 .ocdi__demo-import-files { 37 width: 100%; 38 } 39 40 .ocdi__demo-import-preview-image-message { 41 font-style: italic; 42 } 43 44 /* Plugin title */ 45 46 .ocdi__title:before { 47 width: auto; 48 height: auto; 49 font-size: inherit; 50 } 51 52 /* Plugin intro text */ 53 54 .ocdi__intro-text ul { 55 padding: 0 4%; 56 list-style-type: square; 57 } 58 59 /* Plugin switch import mode link*/ 60 .ocdi__import-mode-switch { 61 float: right; 62 } 63 64 /* Plugin multi select import and Plugin file upload containers */ 65 66 .ocdi__file-upload, 67 .ocdi__multi-select-import, 68 .ocdi__demo-import-notice:not(:empty) { 69 padding: 4%; 70 margin: 1.62em 0; 71 background-color: #ffffff; 72 border: 1px solid #e5e5e5; 73 } 74 75 .ocdi__file-upload { 76 margin: 0; 77 margin-bottom: -1px; 78 } 79 80 .ocdi__file-upload span { 81 font-size: .81em; 82 font-weight: normal; 83 opacity: .66; 84 } 85 86 .ocdi__demo-import-notice:not(:empty) { 87 border: 0; 88 border-left: 4px solid #00a0d2; 89 -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); 90 box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); 91 } 92 93 [dir="rtl"] .ocdi__demo-import-notice:not(:empty) { 94 border: 0; 95 border-right: 4px solid #00a0d2; 96 } 97 98 /* Plugin button */ 99 100 .ocdi__button-container { 101 margin-top: 1.62em; 102 } 103 104 /* AJAX loader */ 105 106 p.ocdi__ajax-loader { 107 font-size: 1.5em; 108 display: none; 109 } 110 111 .ocdi__ajax-loader .spinner { 112 display: inline-block; 113 float: none; 114 visibility: visible; 115 margin-bottom: 6px; 116 } 117 118 119 /* New grid layout */ 120 121 .ocdi__gl-navigation li a { 122 -webkit-box-shadow: none; 123 box-shadow: none; 124 } 125 126 .ocdi__gl-item { 127 float: left; 128 width: 100%; 129 margin: 0 0 20px 0; 130 position: relative; 131 border: 1px solid #ddd; 132 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); 133 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); 134 -webkit-box-sizing: border-box; 135 -moz-box-sizing: border-box; 136 box-sizing: border-box; 137 } 138 139 .ocdi__gl-item-image-container { 140 display: block; 141 overflow: hidden; 142 position: relative; 143 -webkit-backface-visibility: hidden; 144 -webkit-transition: opacity 0.2s ease-in-out; 145 transition: opacity 0.2s ease-in-out; 146 } 147 148 .ocdi__gl-item-image-container::after { 149 content: ""; 150 display: block; 151 padding-top: 66.66666%; 152 } 153 154 .ocdi__gl-item-image { 155 height: auto; 156 position: absolute; 157 left: 0; 158 top: 0; 159 width: 100%; 160 -webkit-transition: opacity 0.2s ease-in-out; 161 transition: opacity 0.2s ease-in-out; 162 } 163 164 .ocdi__gl-item-image--no-image { 165 display: inline-block; 166 width: 50%; 167 text-align: center; 168 position: absolute; 169 top: 45%; 170 right: 25%; 171 left: 25%; 172 } 173 174 .ocdi__gl-item-footer { 175 height: 30px; 176 margin: 0; 177 padding: 10px; 178 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 179 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 180 background: #ffffff; 181 background: rgba(255,255,255,0.65); 182 } 183 184 h4.ocdi__gl-item-title { 185 width: 70%; 186 overflow: hidden; 187 white-space: nowrap; 188 text-overflow: ellipsis; 189 display: inline-block; 190 margin: 6px 0 0 0; 191 } 192 193 .ocdi__gl-item-footer--with-preview h4.ocdi__gl-item-title { 194 width: calc(100% - 140px); 195 } 196 197 .ocdi__gl-item-button { 198 float: right; 199 } 200 201 .ocdi__gl-item-button + .ocdi__gl-item-button { 202 margin-right: 5px; 203 } 204 205 @media (max-width: 782px) { 206 h4.ocdi__gl-item-title, 207 .ocdi__gl-item-footer--with-preview h4.ocdi__gl-item-title { 208 width: 100%; 209 margin-bottom: 10px; 210 } 211 212 .ocdi__gl-item-button { 213 width: calc(50% - 10px); 214 margin-bottom: 10px; 215 } 216 217 .ocdi__gl-item-button + .ocdi__gl-item-button { 218 float: left; 219 } 220 221 .ocdi__gl-item-footer { 222 height: 72px; 223 } 224 } 225 226 .ocdi__gl-header { 227 display: inline-block; 228 width: calc(100% - 40px); 229 background-color: #ffffff; 230 margin-bottom: 20px; 231 padding: 0 20px; 232 } 233 234 .ocdi__gl-navigation { 235 font-size: 13px; 236 width: 100%; 237 float: left; 238 } 239 240 .ocdi__gl-navigation ul { 241 list-style-type: none; 242 margin: 0; 243 padding: 0; 244 overflow: hidden; 245 } 246 247 .ocdi__gl-navigation li { 248 float: left; 249 margin: 0 15px; 250 } 251 252 .ocdi__gl-navigation li.active a, 253 .ocdi__gl-navigation li.active a:hover { 254 border-bottom: 4px solid #666666; 255 } 256 257 .ocdi__gl-navigation li a { 258 display: block; 259 text-align: center; 260 text-decoration: none; 261 color: #444444; 262 border-bottom: 4px solid #ffffff; 263 padding: 15px 0; 264 } 265 266 .ocdi__gl-navigation li a:hover { 267 color: #00a0d2; 268 border-bottom: 4px solid #ffffff; 269 cursor:pointer; 270 } 271 272 .ocdi__gl-search-input { 273 width: 100%; 274 margin: 10px 0; 275 } 276 277 @media (min-width: 640px) { 278 .ocdi__gl-navigation { 279 width: calc(100% - 180px); 280 } 281 282 .ocdi__gl-navigation li { 283 margin: 0; 284 } 285 286 .ocdi__gl-navigation li a { 287 padding: 15px; 288 } 289 290 .ocdi__gl-search-input { 291 display: inline-block; 292 width: 180px; 293 height: 30px; 294 margin: 0; 295 margin-top: 11px; 296 } 297 298 .ocdi__gl-item-container { 299 margin-right: -20px; 300 } 301 302 .ocdi__gl-item { 303 width: calc(50% - 20px); 304 margin: 0 20px 20px 0; 305 } 306 } 307 308 @media (min-width: 1120px) { 309 .ocdi__gl-item-container { 310 margin-right: -30px; 311 } 312 313 .ocdi__gl-item { 314 width: calc(20% - 30px); 315 margin: 0 30px 30px 0; 316 } 317 } 318 319 /* Grid animations */ 320 @keyframes ocdi-fade { 321 from { 322 opacity: 1; 323 } 324 325 to { 326 opacity: 0; 327 } 328 } 329 330 .ocdi-is-fadeout { 331 animation: ocdi-fade linear 200ms 1 forwards; 332 } 333 334 .ocdi-is-fadein { 335 animation: ocdi-fade linear 200ms 1 reverse forwards; 336 } 337 338 /* Grid layout modal window */ 339 340 .ocdi__modal-image-container { 341 width: 100%; 342 height: 180px; 343 margin: 0; 344 overflow: hidden; 345 } 346 347 .ocdi__modal-item-title { 348 margin-top: 0.5em; 349 font-weight: bold; 350 } 351 352 .ocdi__modal-image-container img { 353 width: 100%; 354 } 355 356 .ocdi__modal-notice.ocdi__demo-import-notice:not(:empty) { 357 border: 1px solid #e5e5e5; 358 border-left: 4px solid #00a0d2; 359 margin: 1em 0 0; 360 } 361 362 /* Redux */ 363 .ocdi__redux-option-name-label { 364 margin-right: 5px; 365 } 366 367 li.success { 368 color: #155724 !important; 369 background-color: #d4edda; 370 border-color: #c3e6cb; 371 padding: 15px 15px; 372 border-left: 5px solid #b1debc; 373 text-align: left; 374 margin: 5px 0; 375 display: block; 376 max-width: 600px; 377 } 378 379 li.error { 380 color: #a94442 !important; 381 background-color: #f2dede; 382 border-color: #e8c4c4; 383 border-left: 5px solid #e8c4c4; 384 padding: 15px 15px; 385 text-align: left; 386 margin: 5px 0; 387 display: list-item; 388 max-width: 600px; 389 }