[Mapbender-commits] r10349 - trunk/mapbender/http/css
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu Nov 21 02:32:30 PST 2019
Author: armin11
Date: 2019-11-21 02:32:30 -0800 (Thu, 21 Nov 2019)
New Revision: 10349
Added:
trunk/mapbender/http/css/tiny-slider-demo-style.css
trunk/mapbender/http/css/tiny-slider-mapbender.css
Removed:
trunk/mapbender/http/css/mapbenderMetadataCarousel.css
Log:
Switch from flexslider to tiny-slider
Deleted: trunk/mapbender/http/css/mapbenderMetadataCarousel.css
===================================================================
--- trunk/mapbender/http/css/mapbenderMetadataCarousel.css 2019-11-21 10:30:48 UTC (rev 10348)
+++ trunk/mapbender/http/css/mapbenderMetadataCarousel.css 2019-11-21 10:32:30 UTC (rev 10349)
@@ -1,73 +0,0 @@
-/*
- * jQuery FlexSlider v2.7.2
- * https://www.woocommerce.com/flexslider/
- *
- * Copyright 2012 WooThemes
- * Free to use under the GPLv2 and later license.
- * http://www.gnu.org/licenses/gpl-2.0.html
- *
- * Contributing author: Tyler Smith (@mbmufffin)
- *
- */
-/* ====================================================================================================================
- * Mapbender specific adoptions - resize preview images!
- * ====================================================================================================================*/
-
-.flexslider {
- overflow:hidden;
- position:relative;
- height: 180px; /* desired height here */
- width: 586px;
- margin: 0 0 0px;
-}
-
-.flexslider .slides {
- overflow:hidden;
- position:relative;
- height: 160px; /* desired height here */
- width: 586px;
-}
-
-.flexslider .slides > li {
- width: 184px !important;
- height: 130px;
-}
-.flexslider .slides img {
- width: 150px;
- height: 100px;
-}
-
-.flex-direction-nav a {
- opacity: 0.5;
-}
-
-
-/*Caption Text*/
-.flexslider .slides .flex-caption {
- bottom:0px;
- color: white;
- font-weight: bold;
- font-size: 16px;
- text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
- line-height: 20px;
- left:0;
- padding:0 0px;
- position:relative;
- right:0;
- text-transform: uppercase;
- z-index:100;
-}
-
-/*Caption Text*/
-.flexslider .slides .flex-load-count {
- bottom: 110px;
- color: white;
- font-weight: bold;
- font-size: 16px;
- text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
- line-height: 0px;
- padding:0 120px;
- position:relative;
- text-transform: uppercase;
- z-index:100;
-}
Added: trunk/mapbender/http/css/tiny-slider-demo-style.css
===================================================================
--- trunk/mapbender/http/css/tiny-slider-demo-style.css (rev 0)
+++ trunk/mapbender/http/css/tiny-slider-demo-style.css 2019-11-21 10:32:30 UTC (rev 10349)
@@ -0,0 +1,409 @@
+body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
+li { list-style: none; }
+ul, ol, li { margin: 0; padding: 0; }
+/*.container {
+ max-width: 900px;
+ margin: 0 auto;
+}*/
+pre[class*="language-"] > code[data-language] { overflow: auto !important; }
+section { margin: 50px 0; }
+h1 { font-size: 45px; }
+h2 {
+ padding-top: 60px;
+ text-align: center;
+}
+ at media (min-width: 300px) and (max-width: 799px) {
+ h2 { padding-top: 20%; }
+}
+ at media (min-width: 800px) {
+ h2 { padding-top: 160px; }
+}
+p {
+ margin: 0;
+ padding: 0.8em 0;
+ line-height: 1.4;
+ font-weight: 300;
+ text-align: center;
+}
+a:focus {
+ outline: 1px solid red;
+}
+/*img { max-width: 100%; }
+img:not(.tns-lazy-img), .lazyload img { height: auto; }
+.autoWidth img { max-width: none; }
+.autoHeight img { width: 100%; }
+.img {
+ font-size: 100px;
+ font-weight: 100;
+ color: #fff;
+ text-align: center;
+}*/
+.img a {
+ display: block;
+ padding: 22% 0;
+ color: inherit;
+ text-decoration: none;
+}
+.visually-hidden {
+ position: fixed;
+ left: -10000px;
+ opacity: 0;
+}
+
+/* nav */
+.nav.active ul { left: 0; }
+.nav.active .nav-toggle-handle { left: 17em; }
+.nav.active .nav-toggle-handle:before { display: inline-block; }
+.nav.active .nav-toggle-handle:after { display: none; }
+.nav ul {
+ position: fixed;
+ top: 0;
+ left: -17em;
+ z-index: 100;
+ width: 17em;
+ height: 1000px;
+ height: 100vh;
+ background-color: #fff;
+ -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
+ box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
+ transition: left 0.25s;
+ overflow-y: auto;
+}
+.nav a {
+ display: block;
+ padding: 0.7em 1em;
+ color: inherit;
+ text-decoration: none;
+}
+.nav a:hover { background-color: #F3F3F3; }
+.nav .active {
+ color: #fff;
+ background-color: #af23ff !important;
+}
+.nav-toggle-handle {
+ position: fixed;
+ transition: left 0.25s;
+ left: 0;
+ top: 0;
+ z-index: 100;
+ padding: 10px;
+ color: #fff;
+ background-color: #af23ff;
+ cursor: pointer;
+}
+.nav-toggle-handle:before {
+ display: none;
+ padding-right: 5px;
+ content: '◄';
+ font-size: 0.8em;
+}
+.nav-toggle-handle:after {
+ padding-left: 5px;
+ content: '►';
+ font-size: 0.8em;
+}
+
+.img-1 { background: #D6D65B; background: hsl(60, 60%, 60%); }
+.img-2 { background: #5BD6AD; background: hsl(160, 60%, 60%); }
+.img-3 { background: #5B99D6; background: hsl(210, 60%, 60%); }
+.img-4 { background: #D65BC1; background: hsl(310, 60%, 60%); }
+.img-5 { background: #70D65B; background: hsl(110, 60%, 60%); }
+.img-6 { background: #D65B5B; background: hsl(0, 60%, 60%); }
+.img-7 { background: #D6995B; background: hsl(30, 60%, 60%); }
+.img-8 { background: #705BD6; background: hsl(250, 60%, 60%); }
+.customize-tools { position: relative; }
+.thumbnails {
+ margin: 20px 0;
+ text-align: center;
+}
+.thumbnails li {
+ display: inline-block;
+ cursor: pointer;
+ border: 5px solid #fff;
+}
+.thumbnails .tns-nav-active {
+ background: none;
+ border-color: #000;
+}
+.thumbnails li { width: 50px; }
+.thumbnails img { vertical-align: bottom; height: auto; max-height: 50px; }
+.controls { text-align: center; }
+.controls li {
+ display: block;
+ position: absolute;
+ top: 50%;
+ height: 60px;
+ line-height: 60px;
+ margin-top: -30px;
+ padding: 0 15px;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+.controls li img { display: inline-block; vertical-align: middle; }
+.controls .prev { left: 0; }
+.controls .next { right: 0; }
+.controls li:hover { background: #f2f2f2; }
+
+.tns-controls { text-align: center; margin-bottom: 10px; }
+.tns-controls [aria-controls] {
+ font-size: 15px;
+ margin: 0 5px;
+ padding: 0 1em;
+ height: 2.5em;
+ color: #000;
+ background: #66CCFF;
+ border-radius: 3px;
+ border: 0;
+}
+.lt-ie9 .tns-controls > [aria-controls] {
+ line-height: 2.5em;
+}
+[data-action] {
+ display: block;
+ margin: 10px auto;
+ font-size: 17px;
+ min-width: 3em;
+ text-align: center;
+ background: transparent;
+ border: 0;
+}
+.tns-controls [disabled] {
+ color: #999999;
+ background: #B3B3B3;
+ cursor: not-allowed !important;
+}
+.tns-nav {
+ text-align: center;
+ margin: 10px 0;
+}
+.tns-nav > [aria-controls] {
+ width: 9px;
+ height: 9px;
+ padding: 0;
+ margin: 0 5px;
+ border-radius: 50%;
+ background: #ddd;
+ border: 0;
+}
+.tns-nav > .tns-nav-active { background: #999; }
+.playbutton-wrapper { text-align: center; }
+.playbutton-wrapper button { height: 34px; padding: 0 10px; font-size: 14px; background: #fff; border-radius: 3px; border: 1px solid #ccc; cursor: pointer; }
+.wrapper { padding: 0 5em; }
+.suite-container .title,
+.suite-container .subtitle,
+.suite-container li { padding: 5px 10px; }
+.suite-container li {
+ font-size: 12px;
+ line-height: 1.4;
+ background: #f5f5f5;
+}
+.suite-container .title { font-size: 14px; font-weight: bold; background: #8acac6; text-transform: capitalize; }
+.suite-container .subtitle { font-size: 13px; font-weight: bold; background: #dedede; text-transform: capitalize; }
+.suite-container .fail { background: #FFADE2; }
+
+[class*="vertical"] .img { padding: 30px 0; }
+[class*="vertical"] .img:before { content: ''; display: inline-block; width: 1px; margin-right: -1px; height: 100%; vertical-align: middle; }
+[class*="vertical"] .img a { display: inline-block; padding: 0; }
+[class*="vertical"] .img-1 { height: 137px; }
+[class*="vertical"] .img-2 { height: 122px; }
+[class*="vertical"] .img-3 { height: 143px; }
+[class*="vertical"] .img-4 { height: 325px; }
+[class*="vertical"] .img-5 { height: 140px; }
+[class*="vertical"] .img-6 { height: 119px; }
+[class*="vertical"] .img-7 { height: 223px; }
+[class*="vertical"] .img-8 { height: 164px; }
+/*[class*="vertical"] p { display: none; }*/
+
+/*.animation .img-1 { height: 137px; }
+.animation .img-2 { height: 122px; }
+.animation .img-3 { height: 143px; }
+.animation .img-4 { height: 325px; }
+.animation .img-5 { height: 140px; }
+.animation .img-6 { height: 119px; }
+.animation .img-7 { height: 223px; }
+.animation .img-8 { height: 164px; }*/
+
+/* reset prism */
+pre[class*="language-"] { margin: 0; }
+
+/* test results */
+.test-results {
+ line-height: 1.4;
+ padding: 20px 10%;
+ background-color: #f2f2f2;
+}
+
+/* go to */
+.goto-controls {
+ margin-bottom: 10px;
+ text-align: center;
+}
+.goto-controls input,
+.goto-controls .button {
+ display: inline-block;
+ font-size: 14px;
+ height: 2.6em;
+ line-height: 2.6;
+ padding: 0 1em;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ vertical-align: middle;
+}
+.goto-controls input {
+ border: 1px solid #ccc;
+}
+.goto-controls .button {
+ min-width: 4em;
+ border: none;
+ color: #fff;
+ background-color: #333;
+ cursor: pointer;
+}
+
+/* test results */
+.test-results { line-height: 1.6; }
+.test-results .title { font-weight: bold; text-transform: capitalize; }
+.test-results .title:nth-child(n+2) { margin-top: 1em; }
+.test-results [class*="item"] { margin-left: 1em; font-size: 0.9em; }
+.test-results [class*="item"] { font-weight: 300; }
+.test-results [class*="item"]:after { margin-left: 0.5em; }
+.test-results .item-success { color: #0EB80E; }
+.test-results .item-success:after { content: '✓'; }
+.test-results .item-fail { color: #ED1E1E; }
+.test-results .item-fail:after { content: '✗'; }
+.test-results .item-comment { font-style: italic; color: #666; }
+.test-results .item-notsure:after { content: '？'; }
+.test-results .item-running:after {
+ display: inline-block;
+ height: 16px;
+ content: url('../images/pinwheel.svg');
+ vertical-align: middle;
+}
+.customize-tools [hidden] { display: none; }
+
+
+/* https://daneden.github.io/animate.css/ */
+ at -webkit-keyframes jello {
+ from,
+ 11.1%,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+ at keyframes jello {
+ from,
+ 11.1%,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+.jello {
+ -webkit-animation-name: jello;
+ animation-name: jello;
+ -webkit-transform-origin: center;
+ transform-origin: center;
+}
+
+ at -webkit-keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+ at keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+.rollOut {
+ -webkit-animation-name: rollOut;
+ animation-name: rollOut;
+}
Added: trunk/mapbender/http/css/tiny-slider-mapbender.css
===================================================================
--- trunk/mapbender/http/css/tiny-slider-mapbender.css (rev 0)
+++ trunk/mapbender/http/css/tiny-slider-mapbender.css 2019-11-21 10:32:30 UTC (rev 10349)
@@ -0,0 +1,177 @@
+body {
+ background: #333;
+ color: white;
+}
+.slider-container {
+ max-width: 600px;
+/*max-width: 1000px*/
+ /*padding: 2rem 3rem;*/
+ /*background: #e6e6e6;*/
+ margin: 2rem auto 0 auto;
+ overflow: hidden;
+ border-radius: 5px;
+ position:relative;
+ &:before {
+ content: '.slider-container';
+ position: absolute;
+ left: 0;
+ top: 0;
+ color: blue;
+ }
+}
+
+/*img {
+ display: inline-block;
+ vertical-align: top;
+ max-width: 100%;
+}*/
+
+[data-controls] {
+ border: 0;
+ padding: 0;
+ font-size: 30px;
+ position: absolute;
+ top: 50%;
+ margin-top: -18px;
+ z-index: 10000;
+ background: transparent;
+}
+
+[data-controls="prev"] {
+ left: 20px;
+}
+
+[data-controls="next"] {
+ right: 20px;
+}
+
+[data-controls="prev"] svg.direction {
+ float: right;
+ transform: rotate(-90deg) !important;
+}
+
+[data-controls="next"] svg.direction {
+ float: left;
+ transform: rotate(90deg) !important;
+}
+.my-slider {
+ position: relative;
+}
+
+.slider-item {
+ background: transparent;
+ /*border-right: 2px solid #333;*/
+ padding: 1.5rem .75rem;
+ position: relative;
+/*new*/
+height: 150px;
+ &:before {
+ content: '.slider-item';
+ position: absolute;
+ left: 0;
+ top: 0;
+ color: blue;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.controls {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ left: 0;
+ /*background: #e2e2e2;*/
+background: #333;
+ width: 100%;
+ top: 50%;
+ transform: translatey(-50%);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &:focus {
+ outline: none;
+ }
+
+ li:hover {
+ cursor: pointer;
+ }
+}
+
+.card {
+ text-align: center;
+ margin: 0 auto;
+ max-width: 150px;
+/*max-width: 200px; */
+ color: #333;
+ background: white;
+ border-radius: 5px;
+ padding-bottom: .75rem;
+ font-family: sans-serif;
+ overflow: hidden;
+ box-shadow: 2px 2px rgba(black, .3);
+ position: relative;
+ &:before {
+ content: '.card';
+ position: absolute;
+ bottom: 0;
+ color: blue;
+ }
+ img {
+ margin-bottom: .25rem;
+ }
+
+ h2 {
+ /*new*/
+ font-size: 30%;
+ margin: 0 0 .25rem;
+ }
+ p {
+ /*new*/
+ font-size: 10px;
+ margin: 0;
+ padding: 0 .5rem;
+ }
+}
+.card > img {
+ height: 120px !important;
+ width: 150px !important;
+}
+
+img.load_image {
+ height: 24px !important;
+ width: 24px !important;
+ position: absolute;
+ top: 0;
+ right: 0;
+
+}
+
+.tns-item {
+ font-size: 10px;
+}
+
+.tns-nav {
+ margin: unset;
+}
+
+.tns-controls [aria-controls] {
+ background: #e2e2e2 !important;
+}
+
+/*Caption Text*/
+.slider-item .card .load-count {
+ /*bottom: 110px;*/
+ color: black;
+ font-weight: bold;
+ /*font-size: 16px;*/
+ text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
+ /*line-height: 0px;*/
+ /*padding:0 120px;*/
+ position: absolute;
+ text-transform: uppercase;
+ z-index:100;
+}
More information about the Mapbender_commits
mailing list