Mercurial > sat_legacy_website
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; |