diff --git a/website/css/style-new.css b/website/css/style-new.css new file mode 100644 index 00000000..9df51d6c --- /dev/null +++ b/website/css/style-new.css @@ -0,0 +1,126 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); +} + + +.left { + display: table-cell; + text-align:center; + background: #F0F3F7; +} +.central { + display: table-cell; + width: 100%; +} +.right { + display: table-cell; + width: 150px; +} +.container { + margin-top: 10px; + max-width: 1200px; + margin-left: 20px; + margin-right: 20px; + font-family: 'Open Sans', sans-serif; +} + + +.surveyDiv { + vertical-align:top; + text-align: center; + height: 500px; + overflow: auto; +} + + +.surveys-list { + margin-top: 8px; +} + +.survey { + position: relative; + background: #333; + height: 50px; + overflow: hidden; +} + +.survey-label { + position: absolute; + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); + border-radius: 0 8px 8px 0; + bottom: 10%; + padding: 6px 16px 6px 14px; + color: white; + /*width: 65%;*/ + z-index: 3; + font-weight: bold; + pointer-events: none; +} + +.survey-preview { + cursor: pointer; + left: 0; + position: absolute; + top: 0; + width: 100%; + transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s; +} + +.survey-selected { + position: absolute; + opacity: 0.8; + right: 10px; + top: 12px; + z-index: 3; + pointer-events: none; +} + +.survey-selected-img { + width: 24px; + height: 24px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=); + background-repeat: no-repeat; + background-position:center center; + +} + +.survey-preview:hover { + cursor: pointer; + opacity: 0.6; + width: 120%; +} +} + +.title { + margin-top: 5px; + font-weight:bold; + text-align: center; +} +.targetDiv { + width: 220px; + margin-top: 5px; + vertical-align:center; +} +#target { + font-size: 13pt; + padding: 6px; + margin: 8px 0; + width: 80%; +} +.bottom { text-align:center;font-style:italic;font-size:12px;} + +#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; } +#aladin-lite-div .aladin-zoomControl a { + width: 25px; height: 25px; line-height: 25px; + display: block; margin: 0 0 3px 0; } + +.developerInfo { + margin: 10px 0 20px 20px; +} + +.aladin-container { + border: 0 !important; +} diff --git a/website/css/style-new.css.chrome b/website/css/style-new.css.chrome new file mode 100644 index 00000000..d1947541 --- /dev/null +++ b/website/css/style-new.css.chrome @@ -0,0 +1,131 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); +} + + +.left { + display: table-cell; + text-align:center; + background: #F0F3F7; +} +.central { + display: table-cell; + width: 100%; + /*height: 100%;*/ + height: 580px; +} +#aladin-lite-div { + width: 100%; +} +.right { + display: table-cell; + width: 150px; +} +.container { + margin-top: 10px; + max-width: 1200px; + margin-left: 20px; + margin-right: 20px; + font-family: 'Open Sans', sans-serif; +} + + +.surveyDiv { + vertical-align:top; + text-align: center; + height: 500px; + overflow: auto; +} + + +.surveys-list { + margin-top: 8px; +} + +.survey { + position: relative; + background: #333; + height: 50px; + overflow: hidden; +} + +.survey-label { + position: absolute; + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); + border-radius: 0 8px 8px 0; + bottom: 10%; + padding: 6px 16px 6px 14px; + color: white; + /*width: 65%;*/ + z-index: 3; + font-weight: bold; + pointer-events: none; +} + +.survey-preview { + cursor: pointer; + left: 0; + position: absolute; + top: 0; + width: 100%; + transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s; +} + +.survey-selected { + position: absolute; + opacity: 0.8; + right: 10px; + top: 12px; + z-index: 3; + pointer-events: none; +} + +.survey-selected-img { + width: 24px; + height: 24px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=); + background-repeat: no-repeat; + background-position:center center; + +} + +.survey-preview:hover { + cursor: pointer; + opacity: 0.6; + width: 120%; +} +} + +.title { + margin-top: 5px; + font-weight:bold; + text-align: center; +} +.targetDiv { + width: 220px; + margin-top: 5px; + vertical-align:center; +} +#target { + font-size: 13pt; + padding: 6px; + margin: 8px 0; + width: 80%; +} +.bottom { text-align:center;font-style:italic;font-size:12px;} + +#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; } +#aladin-lite-div .aladin-zoomControl a { + width: 25px; height: 25px; line-height: 25px; + display: block; margin: 0 0 3px 0; } + +.developerInfo { + margin: 10px 0 20px 20px; +} + +.aladin-container { + border: 0 !important; +} diff --git a/website/css/style.css b/website/css/style.css new file mode 100644 index 00000000..9df51d6c --- /dev/null +++ b/website/css/style.css @@ -0,0 +1,126 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); +} + + +.left { + display: table-cell; + text-align:center; + background: #F0F3F7; +} +.central { + display: table-cell; + width: 100%; +} +.right { + display: table-cell; + width: 150px; +} +.container { + margin-top: 10px; + max-width: 1200px; + margin-left: 20px; + margin-right: 20px; + font-family: 'Open Sans', sans-serif; +} + + +.surveyDiv { + vertical-align:top; + text-align: center; + height: 500px; + overflow: auto; +} + + +.surveys-list { + margin-top: 8px; +} + +.survey { + position: relative; + background: #333; + height: 50px; + overflow: hidden; +} + +.survey-label { + position: absolute; + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); + border-radius: 0 8px 8px 0; + bottom: 10%; + padding: 6px 16px 6px 14px; + color: white; + /*width: 65%;*/ + z-index: 3; + font-weight: bold; + pointer-events: none; +} + +.survey-preview { + cursor: pointer; + left: 0; + position: absolute; + top: 0; + width: 100%; + transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s; +} + +.survey-selected { + position: absolute; + opacity: 0.8; + right: 10px; + top: 12px; + z-index: 3; + pointer-events: none; +} + +.survey-selected-img { + width: 24px; + height: 24px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=); + background-repeat: no-repeat; + background-position:center center; + +} + +.survey-preview:hover { + cursor: pointer; + opacity: 0.6; + width: 120%; +} +} + +.title { + margin-top: 5px; + font-weight:bold; + text-align: center; +} +.targetDiv { + width: 220px; + margin-top: 5px; + vertical-align:center; +} +#target { + font-size: 13pt; + padding: 6px; + margin: 8px 0; + width: 80%; +} +.bottom { text-align:center;font-style:italic;font-size:12px;} + +#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; } +#aladin-lite-div .aladin-zoomControl a { + width: 25px; height: 25px; line-height: 25px; + display: block; margin: 0 0 3px 0; } + +.developerInfo { + margin: 10px 0 20px 20px; +} + +.aladin-container { + border: 0 !important; +} diff --git a/website/css/tooltipster.css b/website/css/tooltipster.css new file mode 100644 index 00000000..e5c609cc --- /dev/null +++ b/website/css/tooltipster.css @@ -0,0 +1,274 @@ +/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ +.tooltipster-default { + border-radius: 5px; + border: 2px solid #000; + background: #4c4c4c; + color: #fff; +} + +/* Use this next selector to style things like font-size and line-height: */ +.tooltipster-default .tooltipster-content { + font-family: Arial, sans-serif; + font-size: 14px; + line-height: 16px; + padding: 8px 10px; + overflow: hidden; +} + +/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ +.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { + /* border-color: ... !important; */ +} + + +/* If you're using the icon option, use this next selector to style them */ +.tooltipster-icon { + cursor: help; + margin-left: 4px; +} + + + + + + + + +/* This is the base styling required to make all Tooltipsters work */ +.tooltipster-base { + padding: 0; + font-size: 0; + line-height: 0; + position: absolute; + left: 0; + top: 0; + z-index: 9999999; + pointer-events: none; + width: auto; + overflow: visible; +} +.tooltipster-base .tooltipster-content { + overflow: hidden; +} + + +/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ +.tooltipster-arrow { + display: block; + text-align: center; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.tooltipster-arrow span, .tooltipster-arrow-border { + display: block; + width: 0; + height: 0; + position: absolute; +} +.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { + border-left: 8px solid transparent !important; + border-right: 8px solid transparent !important; + border-top: 8px solid; + bottom: -7px; +} +.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { + border-left: 9px solid transparent !important; + border-right: 9px solid transparent !important; + border-top: 9px solid; + bottom: -7px; +} + +.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { + border-left: 8px solid transparent !important; + border-right: 8px solid transparent !important; + border-bottom: 8px solid; + top: -7px; +} +.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { + border-left: 9px solid transparent !important; + border-right: 9px solid transparent !important; + border-bottom: 9px solid; + top: -7px; +} +.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { + left: 0; + right: 0; + margin: 0 auto; +} +.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { + left: 6px; +} +.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { + left: 5px; +} +.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { + right: 6px; +} +.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { + right: 5px; +} +.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { + border-top: 8px solid transparent !important; + border-bottom: 8px solid transparent !important; + border-left: 8px solid; + top: 50%; + margin-top: -7px; + right: -7px; +} +.tooltipster-arrow-left .tooltipster-arrow-border { + border-top: 9px solid transparent !important; + border-bottom: 9px solid transparent !important; + border-left: 9px solid; + margin-top: -8px; +} +.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { + border-top: 8px solid transparent !important; + border-bottom: 8px solid transparent !important; + border-right: 8px solid; + top: 50%; + margin-top: -7px; + left: -7px; +} +.tooltipster-arrow-right .tooltipster-arrow-border { + border-top: 9px solid transparent !important; + border-bottom: 9px solid transparent !important; + border-right: 9px solid; + margin-top: -8px; +} + + +/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ + +.tooltipster-fade { + opacity: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; +} +.tooltipster-fade-show { + opacity: 1; +} + +.tooltipster-grow { + -webkit-transform: scale(0,0); + -moz-transform: scale(0,0); + -o-transform: scale(0,0); + -ms-transform: scale(0,0); + transform: scale(0,0); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-backface-visibility: hidden; +} +.tooltipster-grow-show { + -webkit-transform: scale(1,1); + -moz-transform: scale(1,1); + -o-transform: scale(1,1); + -ms-transform: scale(1,1); + transform: scale(1,1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} + +.tooltipster-swing { + opacity: 0; + -webkit-transform: rotateZ(4deg); + -moz-transform: rotateZ(4deg); + -o-transform: rotateZ(4deg); + -ms-transform: rotateZ(4deg); + transform: rotateZ(4deg); + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; +} +.tooltipster-swing-show { + opacity: 1; + -webkit-transform: rotateZ(0deg); + -moz-transform: rotateZ(0deg); + -o-transform: rotateZ(0deg); + -ms-transform: rotateZ(0deg); + transform: rotateZ(0deg); + -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); + -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); + transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); +} + +.tooltipster-fall { + top: 0; + -webkit-transition-property: top; + -moz-transition-property: top; + -o-transition-property: top; + -ms-transition-property: top; + transition-property: top; + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} +.tooltipster-fall-show { +} +.tooltipster-fall.tooltipster-dying { + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + top: 0px !important; + opacity: 0; +} + +.tooltipster-slide { + left: -40px; + -webkit-transition-property: left; + -moz-transition-property: left; + -o-transition-property: left; + -ms-transition-property: left; + transition-property: left; + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); + transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); +} +.tooltipster-slide.tooltipster-slide-show { +} +.tooltipster-slide.tooltipster-dying { + -webkit-transition-property: all; + -moz-transition-property: all; + -o-transition-property: all; + -ms-transition-property: all; + transition-property: all; + left: 0px !important; + opacity: 0; +} + + +/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ +.tooltipster-content-changing { + opacity: 0.5; + -webkit-transform: scale(1.1, 1.1); + -moz-transform: scale(1.1, 1.1); + -o-transform: scale(1.1, 1.1); + -ms-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1); +} diff --git a/website/doc/API/examples/AAS225/index.gml b/website/doc/API/examples/AAS225/index.gml new file mode 100644 index 00000000..4592d3d6 --- /dev/null +++ b/website/doc/API/examples/AAS225/index.gml @@ -0,0 +1,50 @@ + +
+ + + <&CDS.headStuff2> + + + + + + + + + + + + <&CDS.headArea2 '' 'aladin'> +A.aladin(<container-div-selector>, <options>?)
+Creating an Aladin Lite instance is quite easy: after having inserted the embedding code in your page,
+ just call var aladin = A.aladin('#aladin-lite-div');. The variable aladin is a reference to the Aladin lite instance.
+
Note that Aladin Lite view will automatically adapt if the container div is resized, as shown in this example.
+The method takes an optional second argument which gives the initialization options as a key-value object. Possible options are: +
| Key name | Description | Default value |
|---|---|---|
| target | Initial target, as a position or an object name resolved by Sesame | 0 +0 |
| cooFrame | Coordinate system: "ICRS" or "galactic" | "ICRS" |
| survey | Identifier of the initial image survey. See this section for more details. | "P/DSS2/color" |
| fov | Initial value of the visible field of view, in decimal degrees | 60 |
| showReticle | If true, the reticle will be displayed | true |
| showZoomControl | If true, the zoom control GUI is displayed (plus/minus buttons) | true |
| showFullscreenControl | If true, the button to pass in full screen mode (at the top right of the interface) is displayed | true |
| showLayersControl | If true, the icon to open the layers controls is displayed | true |
| showGotoControl | If true, the icon to easily jump to a new position/object is displayed | true |
| showFrame | If true, coordinate are displayed (at the top left of the interface) | true |
| fullScreen | If true, Aladin Lite starts in "full screen" mode | false |
| reticleColor | Color of the reticle | "rgb(178, 50, 178)" |
| reticleSize | Size in pixels of the reticle | 22 |
Example of Aladin Lite initialization with custom options
+ +If you want to customize the location of the GUI elements (full screen icon, zoom controller, goto controller, layers controller), the easiest way is to + override the CSS properties of the corresponding class (respectively .aladin-fullscreen, .aladin-zoomControl, .aladin-gotoControl, .aladin-layersControl). +
+ + + + +aladin.getSize() will return an array with the current dimension (width, height) of Aladin Lite view in pixels.
aladin.getFov() returns an array with the current dimension on the sky (size in X, size in Y) of the view in decimal degrees.
Use aladin.setFov()
+
There are several methods to update the current position:
+ + + + + + + +Calling aladin.getBaseImageLayer() will return an ImageLayer object corresponding to the base image layer.
Call getColorMap() on an ImageLayer object to retrieve its color map.
+ Once retrieved, call update(<color-map-name>) to set a new color map. Recognized values are:
+
Example: setting a rainbow color map
+ + + + +Calling A.catalogFromURL(<votable-URL>, <options>?) will return a Catalog object which can then be added
Example: loading a VOTable from VizieR
+ + + + +Click here to access to the full list of examples illustrating Aladin Lite API.
+ +| t |