companion-install.css (8343B)
1 .notice.materialis-welcome-notice .notice-content-wrapper { 2 margin: auto; 3 } 4 5 .notice.materialis-welcome-notice [id=materialis_homepage] { 6 display: block !important; 7 } 8 9 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup { 10 margin: auto; 11 } 12 13 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup h3.materialis_title { 14 padding: 0; 15 color: #32373c; 16 line-height: 1.2em; 17 font-size: 2.1em; 18 font-weight: 400; 19 margin: 0; 20 } 21 22 .notice.materialis-welcome-notice [id=materialis_homepage] h4 { 23 font-size: 20px; 24 font-weight: normal; 25 } 26 27 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-features-list li:before { 28 font-family: dashicons; 29 color: #45a002; 30 content: "\f147"; 31 padding-right: 10px; 32 font-size: 29px; 33 vertical-align: bottom; 34 } 35 36 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-features-list li { 37 font-size: 1.3em; 38 line-height: 120%; 39 display: inline-block; 40 max-width: 320px; 41 width: 100%; 42 box-sizing: border-box; 43 margin-bottom: 10px; 44 } 45 46 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div { 47 display: flex; 48 } 49 50 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div.footer { 51 display: block; 52 margin-bottom: 10px; 53 z-index: 1; 54 position: relative; 55 } 56 57 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div.footer .disable-popup-cb { 58 display: none; 59 } 60 61 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div.footer .materialis-popup-cancel { 62 margin-left: 10px; 63 margin-top: 10px; 64 } 65 66 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div .materialis_cp_column:first-of-type { 67 flex-grow: 1; 68 padding-bottom: 78px; 69 } 70 71 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup > div .materialis_cp_column:last-of-type { 72 flex-grow: 0; 73 } 74 75 .notice.materialis-welcome-notice [id=materialis_homepage] img.popup-theme-screenshot { 76 max-width: 480px; 77 } 78 79 .notice.materialis-welcome-notice h1.thank-you-title { 80 text-align: center; 81 font-size: 32px; 82 line-height: 115%; 83 font-weight: 300; 84 margin-bottom: 10px; 85 } 86 87 .notice.materialis-welcome-notice a.button.button-hero.button-primary { 88 text-transform: capitalize; 89 } 90 91 .wp-customizer .materialis-popup .image-scroll, 92 .notice.materialis-welcome-notice .image-scroll { 93 width: 480px; 94 height: 100%; 95 background-color: #000; 96 background-image: url(./rolling-image.jpg); 97 animation: materialis-image-scroll 80s linear infinite; 98 animation-delay: 2s; 99 border: 1px solid #e6e6e6; 100 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1); 101 min-height: 380px; 102 background-size: cover; 103 } 104 105 .wp-customizer .materialis-popup .image-scroll { 106 width: 330px; 107 min-height: unset; 108 height: 340px; 109 transition-delay: unset; 110 } 111 112 .notice.materialis-welcome-notice ul.materialis-features-list { 113 max-width: 800px; 114 } 115 116 @keyframes materialis-image-scroll { 117 0% { 118 background-position-y: 0%; 119 } 120 121 50% { 122 background-position-y: 100%; 123 } 124 } 125 126 @media (max-width: 1024px) { 127 .notice.materialis-welcome-notice .image-scroll { 128 display: none; 129 } 130 } 131 132 @media (max-width: 1180px) { 133 .notice.materialis-welcome-notice .image-scroll { 134 width: 200px; 135 } 136 137 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-features-list li { 138 font-size: 16px; 139 max-width: 290px; 140 } 141 } 142 143 @media (min-width: 1180px) and (max-width: 1420px) { 144 .notice.materialis-welcome-notice .image-scroll { 145 width: 300px; 146 } 147 148 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-features-list li { 149 font-size: 16px; 150 max-width: 290px; 151 } 152 153 .notice.materialis-welcome-notice [id=materialis_homepage] .materialis-popup h3.materialis_title { 154 font-size: 26px; 155 } 156 } 157 158 .clearfix { 159 clear: both !important; 160 } 161 162 .notice.materialis-welcome-notice img.popup-theme-screenshot { 163 max-height: 320px; 164 max-width: unset !important; 165 border: 1px solid #c1c1c1; 166 } 167 168 169 /** Companion popover */ 170 171 172 #extend-themes-companion-popover { 173 position: fixed; 174 z-index: 1000000; 175 max-width: 320px; 176 text-align: center; 177 left: 120px; 178 top: 200px; 179 border-radius: 4px; 180 box-sizing: border-box; 181 padding: 14px 10px 10px 10px; 182 background: #ffffff; 183 border: 1px solid #dddddd; 184 } 185 186 #extend-themes-companion-popover:after, 187 #extend-themes-companion-popover:before { 188 right: 100%; 189 top: 50%; 190 border: solid transparent; 191 content: " "; 192 height: 0; 193 width: 0; 194 position: absolute; 195 pointer-events: none; 196 } 197 198 #extend-themes-companion-popover:after { 199 border-color: rgba(255, 255, 255, 0); 200 border-right-color: #ffffff; 201 border-width: 10px; 202 margin-top: -10px; 203 } 204 205 #extend-themes-companion-popover:before { 206 border-color: rgba(221, 221, 221, 0); 207 border-right-color: #dddddd; 208 border-width: 11px; 209 margin-top: -11px; 210 } 211 212 #extend-themes-companion-popover.arrow-down:after, #extend-themes-companion-popover.arrow-down:before { 213 top: 100%; 214 left: 50%; 215 border: solid transparent; 216 content: " "; 217 height: 0; 218 width: 0; 219 position: absolute; 220 pointer-events: none; 221 margin-top: 0; 222 } 223 224 #extend-themes-companion-popover.arrow-down:after { 225 border-color: rgba(255, 255, 255, 0); 226 border-top-color: #ffffff; 227 border-width: 9px; 228 margin-left: -9px; 229 } 230 231 #extend-themes-companion-popover.arrow-down:before { 232 border-color: rgba(221, 221, 221, 0); 233 border-top-color: #dddddd; 234 border-width: 10px; 235 margin-left: -10px; 236 } 237 238 .extend-themes-companion-popover-close { 239 position: absolute; 240 right: 4px; 241 top: 4px; 242 cursor: pointer; 243 } 244 245 #extendthemes_start_with_homepage { 246 padding: 12px 0; 247 } 248 249 #extendthemes_start_with_homepage .maybe-later { 250 padding-left: 0; 251 padding-right: 0; 252 margin-left: 10px; 253 } 254 255 #extendthemes_start_with_homepage .title { 256 margin-bottom: 1em; 257 } 258 259 #extendthemes_start_with_homepage .image-wrapper { 260 width: 400px; 261 border: 1px solid #caccce; 262 max-width: 400px; 263 overflow: hidden; 264 height: 280px; 265 } 266 267 #extendthemes_start_with_homepage .image-wrapper { 268 width: 400px; 269 border: 1px solid #caccce; 270 max-width: 400px; 271 overflow: hidden; 272 height: 280px; 273 background-size: cover; 274 animation-name: extendthemes-homepage-animation; 275 animation-delay: 1s; 276 animation-duration: 100s; 277 animation-iteration-count: infinite; 278 animation-timing-function: linear; 279 280 } 281 282 283 #extendthemes_start_with_homepage .image-wrapper:hover { 284 -webkit-animation-play-state: paused; 285 -moz-animation-play-state: paused; 286 -o-animation-play-state: paused; 287 animation-play-state: paused; 288 } 289 290 @keyframes extendthemes-homepage-animation { 291 0% { 292 background-position-y: 0; 293 } 294 50% { 295 background-position-y: 100%; 296 } 297 298 100% { 299 background-position-y: 0; 300 } 301 } 302 303 #extendthemes_start_with_homepage .maybe-later { 304 font-size: 14px; 305 height: 46px; 306 line-height: 44px; 307 margin-left: .5em; 308 } 309 310 .extendthemes-container-fluid { 311 margin-right: auto; 312 margin-left: auto; 313 padding-right: 5px; 314 padding-left: 5px; 315 } 316 317 .extendthemes-row { 318 box-sizing: border-box; 319 display: -ms-flexbox; 320 display: -webkit-box; 321 display: flex; 322 -ms-flex: 0 1 auto; 323 -webkit-box-flex: 0; 324 flex: 0 1 auto; 325 -ms-flex-direction: row; 326 -webkit-box-orient: horizontal; 327 -webkit-box-direction: normal; 328 flex-direction: row; 329 -ms-flex-wrap: wrap; 330 flex-wrap: wrap; 331 margin-right: -1rem; 332 margin-left: -1rem; 333 align-items: center; 334 } 335 336 .extendthemes-row.reverse { 337 -ms-flex-direction: row-reverse; 338 -webkit-box-orient: horizontal; 339 -webkit-box-direction: reverse; 340 flex-direction: row-reverse; 341 } 342 343 .extendthemes-col { 344 box-sizing: border-box; 345 -ms-flex: 0 0 auto; 346 flex: 0 0 auto; 347 padding-right: 1rem; 348 padding-left: 1rem; 349 -webkit-flex-grow: 1; 350 -webkit-box-flex: 1; 351 flex-grow: 1; 352 -ms-flex-preferred-size: 0; 353 flex-basis: 0; 354 max-width: 100%; 355 } 356 357 .extendthemes-col.fit { 358 flex-grow: 0; 359 } 360 361 .companion-needed-section { 362 display: list-item !important; 363 }