Mercurial > sat_legacy_website

diff static/css/sat_website.css @ 29:b45621706d83

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use Bootstrap carousels to display images and videos galeries: - one carousel for a 3x3 thumbnails grid - a second one in a modal window to view bigger pictures when a thumbnail is clicked
author souliane <souliane@mailoo.org>
date Wed, 21 Jan 2015 20:13:19 +0100
parents 30a1edf90fae
children 73c6333fd124
line wrap: on
line diff
--- a/static/css/sat_website.css	Wed Jan 21 20:08:26 2015 +0100
+++ b/static/css/sat_website.css	Wed Jan 21 20:13:19 2015 +0100
@@ -36,13 +36,54 @@
     font-size: 13px;
 }
 
+.carousel-inner {
+    padding: 10px 30px 10px 30px;
+    border-radius: 5px;
+}
+
+.carousel-inner > .item {
+    text-align: center;
+}
+
+.carousel-caption {
+    padding: 10px;
+    bottom: -55px;
+    color: black;
+    font-style: italic;
+    font-size: 14px;
+    text-shadow: none;
+}
+
+.carousel-indicators {
+    bottom: -5px;
+    color: black;
+}
+
+.carousel-indicators li {
+    border: 1px solid black;
+}
+
+.carousel-indicators .active {
+    background-color: black;
+}
+
+.carousel-control.left, .carousel-control.right{
+    width: 30px;
+    border-radius: 5px;
+}
+
+.modal-header .close {
+    margin-top: -10px;
+    padding-right: 5px;
+}
+
 
 /* sat_website own styles */
 
 
 #language {
-    /* position: absolute; */
     text-align: center;
+    padding-top: 10px;
 }
 
 #sat_logo {
@@ -96,25 +137,28 @@
 }
 
 div:last-child>div.feature {
- /* we don't wine line on the last feature */
+    /* we don't want the line on the last feature */
 	border-bottom-style: none;
 }
 
-.screenshot_desc {
-	text-align: center;
-	font-style: italic;
-	font-size: 14px;
+#carousel-screenshots img, #carousel-screenshots video {
+    cursor: pointer;
+    height: 200px;
+    width: auto;
+    display: table-cell;
 }
 
-.screencast {
-	text-align: center;
+#modal-screenshots .modal-dialog {
+    max-width: 90%;
+    width: auto;
 }
 
-.screencast_dest {
-	text-align: center;
-	font-style: italic;
-	font-size: 14px;
-	margin-bottom: 30px;
+#carousel-screenshots-modal .carousel-inner {
+    padding-bottom: 80px;
+}
+
+#carousel-screenshots-modal img, #carousel-screenshots-modal video {
+    margin: auto;
 }
 
 #language_form {