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

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
comparison
equal deleted inserted replaced
28:30a1edf90fae 29:b45621706d83
34 34
35 .navbar { 35 .navbar {
36 font-size: 13px; 36 font-size: 13px;
37 } 37 }
38 38
39 .carousel-inner {
40 padding: 10px 30px 10px 30px;
41 border-radius: 5px;
42 }
43
44 .carousel-inner > .item {
45 text-align: center;
46 }
47
48 .carousel-caption {
49 padding: 10px;
50 bottom: -55px;
51 color: black;
52 font-style: italic;
53 font-size: 14px;
54 text-shadow: none;
55 }
56
57 .carousel-indicators {
58 bottom: -5px;
59 color: black;
60 }
61
62 .carousel-indicators li {
63 border: 1px solid black;
64 }
65
66 .carousel-indicators .active {
67 background-color: black;
68 }
69
70 .carousel-control.left, .carousel-control.right{
71 width: 30px;
72 border-radius: 5px;
73 }
74
75 .modal-header .close {
76 margin-top: -10px;
77 padding-right: 5px;
78 }
79
39 80
40 /* sat_website own styles */ 81 /* sat_website own styles */
41 82
42 83
43 #language { 84 #language {
44 /* position: absolute; */
45 text-align: center; 85 text-align: center;
86 padding-top: 10px;
46 } 87 }
47 88
48 #sat_logo { 89 #sat_logo {
49 float: left; 90 float: left;
50 margin-right: 5px; 91 margin-right: 5px;
94 border-bottom-style: solid; 135 border-bottom-style: solid;
95 border-bottom-width: 1px; 136 border-bottom-width: 1px;
96 } 137 }
97 138
98 div:last-child>div.feature { 139 div:last-child>div.feature {
99 /* we don't wine line on the last feature */ 140 /* we don't want the line on the last feature */
100 border-bottom-style: none; 141 border-bottom-style: none;
101 } 142 }
102 143
103 .screenshot_desc { 144 #carousel-screenshots img, #carousel-screenshots video {
104 text-align: center; 145 cursor: pointer;
105 font-style: italic; 146 height: 200px;
106 font-size: 14px; 147 width: auto;
148 display: table-cell;
107 } 149 }
108 150
109 .screencast { 151 #modal-screenshots .modal-dialog {
110 text-align: center; 152 max-width: 90%;
153 width: auto;
111 } 154 }
112 155
113 .screencast_dest { 156 #carousel-screenshots-modal .carousel-inner {
114 text-align: center; 157 padding-bottom: 80px;
115 font-style: italic; 158 }
116 font-size: 14px; 159
117 margin-bottom: 30px; 160 #carousel-screenshots-modal img, #carousel-screenshots-modal video {
161 margin: auto;
118 } 162 }
119 163
120 #language_form { 164 #language_form {
121 padding-top: 12px; 165 padding-top: 12px;
122 padding-bottom: 12px; 166 padding-bottom: 12px;