- Timestamp:
- Jan 9, 2018, 11:35:29 PM (6 years ago)
- Location:
- shared
- Files:
-
- 2 deleted
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
shared/css-v6/pagestyles/startseite.css
r1431 r1432 251 251 252 252 253 /*** Slider Styles ***/253 /*** Slider (http://meandmax.github.io/lory/) Styles ***/ 254 254 /*** Started 2018-01-07 ***/ 255 255 … … 258 258 } 259 259 260 /* Pure CSS fade-in-out transition */261 262 .slider { 263 width: 940px; 264 height: 290px; 260 /*! Flickity v2.0.10 261 http://flickity.metafizzy.co 262 ---------------------------------------------- */ 263 264 .flickity-enabled { 265 265 position: relative; 266 266 } 267 267 268 /* Pause-Button */ 269 .slider .pause { 270 display: inline-block; 271 position: absolute; 272 right: 32px; 273 top: 32px; 274 z-index: 100; 275 } 276 277 .slider .slide { 268 .flickity-enabled:focus { outline: none; } 269 270 .flickity-viewport { 271 overflow: hidden; 272 position: relative; 273 height: 100%; 274 } 275 276 .flickity-slider { 278 277 position: absolute; 279 278 width: 100%; 280 279 height: 100%; 281 } 282 283 /* Dauer = Gesamter Prozess. */ 284 .play .slide1 { animation:fade1 15s infinite; -webkit-animation:fade1 15s infinite; } 285 .play .slide2 { animation:fade2 15s infinite; -webkit-animation:fade2 15s infinite; } 286 .play .slide3 { animation:fade3 15s infinite; -webkit-animation:fade3 15s infinite; } 287 288 @keyframes fade1 289 { 290 0% {opacity:1} 291 33.333% { opacity: 0} 292 66.666% { opacity: 0} 293 100% { opacity: 1} 294 } 295 @keyframes fade2 296 { 297 0% {opacity:0} 298 33.333% { opacity: 1} 299 66.666% { opacity: 0 } 300 100% { opacity: 0} 301 } 302 @keyframes fade3 303 { 304 0% {opacity:0} 305 33.333% { opacity: 0} 306 66.666% { opacity: 1} 307 100% { opacity: 0} 308 } 309 310 311 312 313 314 280 } 281 282 /* draggable */ 283 284 .flickity-enabled.is-draggable { 285 -webkit-tap-highlight-color: transparent; 286 tap-highlight-color: transparent; 287 -webkit-user-select: none; 288 -moz-user-select: none; 289 -ms-user-select: none; 290 user-select: none; 291 } 292 293 .flickity-enabled.is-draggable .flickity-viewport { 294 cursor: move; 295 cursor: -webkit-grab; 296 cursor: grab; 297 } 298 299 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { 300 cursor: -webkit-grabbing; 301 cursor: grabbing; 302 } 303 304 /* ---- previous/next buttons ---- */ 305 306 .flickity-prev-next-button { 307 position: absolute; 308 top: 50%; 309 width: 44px; 310 height: 44px; 311 border: none; 312 border-radius: 50%; 313 background: white; 314 background: hsla(0, 0%, 100%, 0.75); 315 cursor: pointer; 316 /* vertically center */ 317 -webkit-transform: translateY(-50%); 318 transform: translateY(-50%); 319 } 320 321 .flickity-prev-next-button:hover { background: white; } 322 323 .flickity-prev-next-button:focus { 324 outline: none; 325 box-shadow: 0 0 0 5px #09F; 326 } 327 328 .flickity-prev-next-button:active { 329 opacity: 0.6; 330 } 331 332 .flickity-prev-next-button.previous { left: 10px; } 333 .flickity-prev-next-button.next { right: 10px; } 334 /* right to left */ 335 .flickity-rtl .flickity-prev-next-button.previous { 336 left: auto; 337 right: 10px; 338 } 339 .flickity-rtl .flickity-prev-next-button.next { 340 right: auto; 341 left: 10px; 342 } 343 344 .flickity-prev-next-button:disabled { 345 opacity: 0.3; 346 cursor: auto; 347 } 348 349 .flickity-prev-next-button svg { 350 position: absolute; 351 left: 20%; 352 top: 20%; 353 width: 60%; 354 height: 60%; 355 } 356 357 .flickity-prev-next-button .arrow { 358 fill: #333; 359 } 360 361 /* ---- page dots ---- */ 362 363 .flickity-page-dots { 364 position: absolute; 365 width: 100%; 366 bottom: -25px; 367 padding: 0; 368 margin: 0; 369 list-style: none; 370 text-align: center; 371 line-height: 1; 372 } 373 374 .flickity-rtl .flickity-page-dots { direction: rtl; } 375 376 .flickity-page-dots .dot { 377 display: inline-block; 378 width: 10px; 379 height: 10px; 380 margin: 0 8px; 381 background: #333; 382 border-radius: 50%; 383 opacity: 0.25; 384 cursor: pointer; 385 } 386 387 .flickity-page-dots .dot.is-selected { 388 opacity: 1; 389 }
Note: See TracChangeset
for help on using the changeset viewer.