WebSVN – ALCASAR – Diff – /web/css/index.css


/* 	
	Stylesheet for index.php
	Auteur : Stéphane ERARD & Rexy
	Licence : GNU GPL
*/
HTML {
	background: url(/images/background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-width: 450px;
}
 
BODY {
	text-align: center;
	font-size: 12px;
	margin: 0px;
}
BODY, :link, :visited, :hover:link, :hover:visited  {
	font-family: "DejaVu Sans";
	color: #000;
}
 
INPUT {
	border: #666666 1px solid;
	padding: 2px;
	font-family: arial;
	height: 22px;
}
INPUT, #contenu_acces {
	background-color: #ffffff;
}
INPUT, #box_url {
	font-family: arial;
}
 
H1 {
	font-size: 55px;
}
H2 {
	font-size: 30px;
}
H6 {
	font-size: 100%;
}
H1, H2 {
	text-align: center;	
	padding: 0px;
	margin: 3px;
}
 
P, UL, LI {
	text-align: justify;
}
UL {
	padding-left: 20px;
	margin: 0px;
	margin-bottom: 5px;
}
LI {
	list-style-type: square;
}
 
.error-margin {
	margin-left: 0;
	margin-right: 0;
}
 
.explanation_net_pb {
	color: red;
	margin-bottom: 2px;
	font-size: calc(12px + 0.2vw);
}
 
#contenu_acces {
	border-bottom-left-radius:  10px;	
	border-bottom-right-radius:  10px;	
 
	/* get the main box under banner*/
	padding-top: 5px;
	z-index: 5;
	top: -5px;
	/* ombrage css3 */
 
	-moz-box-shadow: 1px 4px 10px #000;
	-webkit-box-shadow: 1px 4px 10px #000;
	box-shadow: 0px 10px 10px #000;
}
 
.img_banner {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
}
 
.titre_banner {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}
 
.banner {
	z-index:10;
	display: flex;
	align-items: center;
	margin-top: 5vh;
	position: relative;
	background-image: linear-gradient(black,#222222);
/* ombrage CSS3 */
	-moz-box-shadow: 1px 1px 6px #666;
	-webkit-box-shadow: 1px 1px 6px #666;
	box-shadow: 1px 1px 6px #666;
	border-radius:  10px;	
}
 
#cadre_titre .titre_controle {
	color: white;
	font-size: calc(20px + 2.2vw);
}
 
#cadre_titre .titre_refus  {
	color: red;
	font-size: calc(20px + 2.2vw);
}
 
.titre_controle {
	text-align: center;
	font-size: calc(24px + 1vw);
	color: white;
	margin: 0px;
}
 
#acces_controle {
	text-align: center;
	font-size: calc(20px + 1.5vw);
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0px;
}
@media(max-width:420px) {
 
	#acces_controle {
		text-align: left !important;
	}
}
 
.domain_allowed_title {
	margin-bottom: 0px;
}
 
#acces_controle, #box_url, #cadre_titre SPAN {
	font-weight: bold;
}
.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited  {
	text-decoration: none;
	color: black;
	font-size: calc(14px + 0.2vw); 
	font-weight: bold;
}
.box_menu:hover {
	background-color: rgba(5,55,64,0.2); 
}
.box_menu {
	display: flex;
	align-items: center;
	height: 60px;
	position: relative;
	background-color: #efefef;
        padding: 10px;
	border-radius: 10px;	
/* ombrage CSS3 */
	-moz-box-shadow: 1px 1px 6px #666;
	-webkit-box-shadow: 1px 1px 6px #666;
	box-shadow: 1px 1px 6px #666;
	margin-top: 30px;
	margin-bottom: 30px;
}
 
.box_menu SPAN {
	display: flex;
	align-items: center;
}
 
.box_menu A{
	position: absolute;
	left: calc(100px + 1vw);
}
 
.box_menu IMG {
 	width: calc(80px + 1vw);
}
 
.img-organisme{
	margin-top: 1vh;
	margin-bottom: 1vh;
	margin-right: auto;
	margin-left: auto;
}
/* shift menu items left and right in an alternating fashion if enough space: */
@media(min-width:500px){
	.box_menu {
		max-width: 90%;
	}
 
	.box_menu_right {
		max-width: 90%;
		left: 10%;
	}
	.box_menu_right A {
		right: 100px !important;
		left: 5% !important;
	}
 
	.box_menu_right IMG {
		position: absolute;
		top: -18px;
		right: 0px;
	}
}
 
#box_infos IMG {
	position: absolute;
	bottom: -15px;
	right: 0px;
 	width: 80px;
}
 
 
.div-cache {
	visibility: hidden;
	position: absolute;
	top: -1000px;
}
 
 
#contenu_acces SPAN {
	font-family: "courier new";
}
 
.info-box-container {
	margin-top: 30px;
	margin-bottom: 30px;
	height: 100%;
}
 
 
#box_infos {
	background-color: #efefef;
        padding-left: 10px;
        padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 10px;	
/* ombrage CSS3 */
	-moz-box-shadow: 1px 1px 6px #666;
	-webkit-box-shadow: 1px 1px 6px #666;
	box-shadow: 1px 1px 6px #666;
	}
 
 
 
 
 
 
 
 
.box_infos_titles {
	font-size: calc(14px + 0.15vw);
	font-weight: bold;
	color: black;
	margin-top: 5px;
}
 
.box_infos_explanations {
	font-size: calc(13px + 0.11vw);
	margin-bottom: 0px;
}
 
.box_infos_titles A {
	color: black;
}
 
#corner {
	position: fixed;
	bottom: 0;
	right: 0;
	
}
#adm {
	display: block;
	width: 100px;
	height: 100px;
}
.corn IMG:hover {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 0px;
	left: 0px;
}
 
.corn IMG {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 75px;
	left: 75px;
	transition: .2s;
}
 

Rev 2819	Rev 3026
1	`/*`	1	`/*`
2	`Stylesheet for index.php`	2	`Stylesheet for index.php`
3	`Auteur : Stéphane ERARD & Rexy`	3	`Auteur : Stéphane ERARD & Rexy`
4	`Licence : GNU GPL`	4	`Licence : GNU GPL`
5	`*/`	5	`*/`
6	`HTML {`	6	`HTML {`
7	`background: url(/images/background.jpg) no-repeat center center fixed;`	7	`background: url(/images/background.jpg) no-repeat center center fixed;`
8	`-webkit-background-size: cover;`	8	`-webkit-background-size: cover;`
9	`-moz-background-size: cover;`	9	`-moz-background-size: cover;`
10	`-o-background-size: cover;`	10	`-o-background-size: cover;`
11	`background-size: cover;`	11	`background-size: cover;`
12	`min-width: 450px;`	12	`min-width: 450px;`
13	`}`	13	`}`
14		14
15	`BODY {`	15	`BODY {`
16	`text-align: center;`	16	`text-align: center;`
17	`font-size: 12px;`	17	`font-size: 12px;`
18	`margin: 0px;`	18	`margin: 0px;`
19	`}`	19	`}`
20	`BODY, :link, :visited, :hover:link, :hover:visited {`	20	`BODY, :link, :visited, :hover:link, :hover:visited {`
21	`font-family: "DejaVu Sans";`	21	`font-family: "DejaVu Sans";`
22	`color: #000;`	22	`color: #000;`
23	`}`	23	`}`
24		24
25	`INPUT {`	25	`INPUT {`
26	`border: #666666 1px solid;`	26	`border: #666666 1px solid;`
27	`padding: 2px;`	27	`padding: 2px;`
28	`font-family: arial;`	28	`font-family: arial;`
29	`height: 22px;`	29	`height: 22px;`
30	`}`	30	`}`
31	`INPUT, #contenu_acces {`	31	`INPUT, #contenu_acces {`
32	`background-color: #ffffff;`	32	`background-color: #ffffff;`
33	`}`	33	`}`
34	`INPUT, #box_url {`	34	`INPUT, #box_url {`
35	`font-family: arial;`	35	`font-family: arial;`
36	`}`	36	`}`
37		37
38	`H1 {`	38	`H1 {`
39	`font-size: 55px;`	39	`font-size: 55px;`
40	`}`	40	`}`
41	`H2 {`	41	`H2 {`
42	`font-size: 30px;`	42	`font-size: 30px;`
43	`}`	43	`}`
44	`H6 {`	44	`H6 {`
45	`font-size: 100%;`	45	`font-size: 100%;`
46	`}`	46	`}`
47	`H1, H2 {`	47	`H1, H2 {`
48	`text-align: center;`	48	`text-align: center;`
49	`padding: 0px;`	49	`padding: 0px;`
50	`margin: 3px;`	50	`margin: 3px;`
51	`}`	51	`}`
52		52
53	`P, UL, LI {`	53	`P, UL, LI {`
54	`text-align: justify;`	54	`text-align: justify;`
55	`}`	55	`}`
56	`UL {`	56	`UL {`
57	`padding-left: 20px;`	57	`padding-left: 20px;`
58	`margin: 0px;`	58	`margin: 0px;`
59	`margin-bottom: 5px;`	59	`margin-bottom: 5px;`
60	`}`	60	`}`
61	`LI {`	61	`LI {`
62	`list-style-type: square;`	62	`list-style-type: square;`
63	`}`	63	`}`
64		64
65	`.error-margin {`	65	`.error-margin {`
66	`margin-left: 0;`	66	`margin-left: 0;`
67	`margin-right: 0;`	67	`margin-right: 0;`
68	`}`	68	`}`
69		69
70	`.explanation_net_pb {`	70	`.explanation_net_pb {`
71	`color: red;`	71	`color: red;`
72	`margin-bottom: 2px;`	72	`margin-bottom: 2px;`
73	`font-size: calc(12px + 0.2vw);`	73	`font-size: calc(12px + 0.2vw);`
74	`}`	74	`}`
75		75
76	`#contenu_acces {`	76	`#contenu_acces {`
77	`border-bottom-left-radius: 10px;`	77	`border-bottom-left-radius: 10px;`
78	`border-bottom-right-radius: 10px;`	78	`border-bottom-right-radius: 10px;`
79		79
80	`/* get the main box under banner*/`	80	`/* get the main box under banner*/`
81	`padding-top: 5px;`	81	`padding-top: 5px;`
82	`z-index: 5;`	82	`z-index: 5;`
83	`top: -5px;`	83	`top: -5px;`
84	`/* ombrage css3 */`	84	`/* ombrage css3 */`
85		85
86	`-moz-box-shadow: 1px 4px 10px #000;`	86	`-moz-box-shadow: 1px 4px 10px #000;`
87	`-webkit-box-shadow: 1px 4px 10px #000;`	87	`-webkit-box-shadow: 1px 4px 10px #000;`
88	`box-shadow: 0px 10px 10px #000;`	88	`box-shadow: 0px 10px 10px #000;`
89	`}`	89	`}`
90		90
91	`.img_banner {`	91	`.img_banner {`
92	`display: inline-block;`	92	`display: inline-block;`
93	`margin-top: 5px;`	93	`margin-top: 5px;`
94	`margin-bottom: 5px;`	94	`margin-bottom: 5px;`
95	`}`	95	`}`
96		96
97	`.titre_banner {`	97	`.titre_banner {`
98	`display: inline-block;`	98	`display: inline-block;`
99	`margin-top: 10px;`	99	`margin-top: 10px;`
100	`margin-bottom: 10px;`	100	`margin-bottom: 10px;`
101	`}`	101	`}`
102		102
103	`.banner {`	103	`.banner {`
104	`z-index:10;`	104	`z-index:10;`
105	`display: flex;`	105	`display: flex;`
106	`align-items: center;`	106	`align-items: center;`
107	`margin-top: 5vh;`	107	`margin-top: 5vh;`
108	`position: relative;`	108	`position: relative;`
109	`background-image: linear-gradient(black,#222222);`	109	`background-image: linear-gradient(black,#222222);`
110	`/* ombrage CSS3 */`	110	`/* ombrage CSS3 */`
111	`-moz-box-shadow: 1px 1px 6px #666;`	111	`-moz-box-shadow: 1px 1px 6px #666;`
112	`-webkit-box-shadow: 1px 1px 6px #666;`	112	`-webkit-box-shadow: 1px 1px 6px #666;`
113	`box-shadow: 1px 1px 6px #666;`	113	`box-shadow: 1px 1px 6px #666;`
114	`border-radius: 10px;`	114	`border-radius: 10px;`
115	`}`	115	`}`
116		116
117	`#cadre_titre .titre_controle {`	117	`#cadre_titre .titre_controle {`
118	`color: white;`	118	`color: white;`
119	`font-size: calc(20px + 2.2vw);`	119	`font-size: calc(20px + 2.2vw);`
120	`}`	120	`}`
121		121
122	`#cadre_titre .titre_refus {`	122	`#cadre_titre .titre_refus {`
123	`color: red;`	123	`color: red;`
124	`font-size: calc(20px + 2.2vw);`	124	`font-size: calc(20px + 2.2vw);`
125	`}`	125	`}`
126		126
127	`.titre_controle {`	127	`.titre_controle {`
128	`text-align: center;`	128	`text-align: center;`
129	`font-size: calc(24px + 1vw);`	129	`font-size: calc(24px + 1vw);`
130	`color: white;`	130	`color: white;`
131	`margin: 0px;`	131	`margin: 0px;`
132	`}`	132	`}`
133		133
134	`#acces_controle {`	134	`#acces_controle {`
135	`text-align: center;`	135	`text-align: center;`
136	`font-size: calc(20px + 1.5vw);`	136	`font-size: calc(20px + 1.5vw);`
137	`padding-top: 20px;`	137	`padding-top: 20px;`
138	`padding-bottom: 20px;`	138	`padding-bottom: 20px;`
139	`margin: 0px;`	139	`margin: 0px;`
140	`}`	140	`}`
141	`@media(max-width:420px) {`	141	`@media(max-width:420px) {`
142		142
143	`#acces_controle {`	143	`#acces_controle {`
144	`text-align: left !important;`	144	`text-align: left !important;`
145	`}`	145	`}`
146	`}`	146	`}`
147		147
148	`.domain_allowed_title {`	148	`.domain_allowed_title {`
149	`margin-bottom: 0px;`	149	`margin-bottom: 0px;`
150	`}`	150	`}`
151		151
152	`#acces_controle, #box_url, #cadre_titre SPAN {`	152	`#acces_controle, #box_url, #cadre_titre SPAN {`
153	`font-weight: bold;`	153	`font-weight: bold;`
154	`}`	154	`}`
155	`.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited {`	155	`.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited {`
156	`text-decoration: none;`	156	`text-decoration: none;`
157	`color: black;`	157	`color: black;`
158	`font-size: calc(14px + 0.2vw);`	158	`font-size: calc(14px + 0.2vw);`
159	`font-weight: bold;`	159	`font-weight: bold;`
160	`}`	160	`}`
161	`.box_menu:hover {`	161	`.box_menu:hover {`
162	`background-color: rgba(5,55,64,0.2);`	162	`background-color: rgba(5,55,64,0.2);`
163	`}`	163	`}`
164	`.box_menu {`	164	`.box_menu {`
165	`display: flex;`	165	`display: flex;`
166	`align-items: center;`	166	`align-items: center;`
167	`height: 60px;`	167	`height: 60px;`
168	`position: relative;`	168	`position: relative;`
169	`background-color: #efefef;`	169	`background-color: #efefef;`
170	`padding: 10px;`	170	`padding: 10px;`
171	`border-radius: 10px;`	171	`border-radius: 10px;`
172	`/* ombrage CSS3 */`	172	`/* ombrage CSS3 */`
173	`-moz-box-shadow: 1px 1px 6px #666;`	173	`-moz-box-shadow: 1px 1px 6px #666;`
174	`-webkit-box-shadow: 1px 1px 6px #666;`	174	`-webkit-box-shadow: 1px 1px 6px #666;`
175	`box-shadow: 1px 1px 6px #666;`	175	`box-shadow: 1px 1px 6px #666;`
176	`margin-top: 30px;`	176	`margin-top: 30px;`
177	`margin-bottom: 30px;`	177	`margin-bottom: 30px;`
178	`}`	178	`}`
179		179
180	`.box_menu SPAN {`	180	`.box_menu SPAN {`
181	`display: flex;`	181	`display: flex;`
182	`align-items: center;`	182	`align-items: center;`
183	`}`	183	`}`
184		184
185	`.box_menu A{`	185	`.box_menu A{`
186	`position: absolute;`	186	`position: absolute;`
187	`left: calc(100px + 1vw);`	187	`left: calc(100px + 1vw);`
188	`}`	188	`}`
189		189
190	`.box_menu IMG {`	190	`.box_menu IMG {`
191	`width: calc(80px + 1vw);`	191	`width: calc(80px + 1vw);`
192	`}`	192	`}`
193		193
194	`.img-organisme{`	194	`.img-organisme{`
195	`margin-top: 1vh;`	195	`margin-top: 1vh;`
196	`margin-bottom: 1vh;`	196	`margin-bottom: 1vh;`
197	`margin-right: auto;`	197	`margin-right: auto;`
198	`margin-left: auto;`	198	`margin-left: auto;`
199	`}`	199	`}`
200	`/* shift menu items left and right in an alternating fashion if enough space: */`	200	`/* shift menu items left and right in an alternating fashion if enough space: */`
201	`@media(min-width:500px){`	201	`@media(min-width:500px){`
202	`.box_menu {`	202	`.box_menu {`
203	`max-width: 90%;`	203	`max-width: 90%;`
204	`}`	204	`}`
205		205
206	`.box_menu_right {`	206	`.box_menu_right {`
207	`max-width: 90%;`	207	`max-width: 90%;`
208	`left: 10%;`	208	`left: 10%;`
209	`}`	209	`}`
210	`.box_menu_right A {`	210	`.box_menu_right A {`
211	`right: 100px !important;`	211	`right: 100px !important;`
212	`left: 5% !important;`	212	`left: 5% !important;`
213	`}`	213	`}`
214		214
215	`.box_menu_right IMG {`	215	`.box_menu_right IMG {`
216	`position: absolute;`	216	`position: absolute;`
217	`top: -18px;`	217	`top: -18px;`
218	`right: 0px;`	218	`right: 0px;`
219	`}`	219	`}`
220	`}`	220	`}`
221		221
222	`#box_infos IMG {`	222	`#box_infos IMG {`
223	`position: absolute;`	223	`position: absolute;`
224	`bottom: -15px;`	224	`bottom: -15px;`
225	`right: 0px;`	225	`right: 0px;`
226	`width: 80px;`	226	`width: 80px;`
227	`}`	227	`}`
228		228
229		229
230	`.div-cache {`	230	`.div-cache {`
231	`visibility: hidden;`	231	`visibility: hidden;`
232	`position: absolute;`	232	`position: absolute;`
233	`top: -1000px;`	233	`top: -1000px;`
234	`}`	234	`}`
235		235
236		236
237	`#contenu_acces SPAN {`	237	`#contenu_acces SPAN {`
238	`font-family: "courier new";`	238	`font-family: "courier new";`
239	`}`	239	`}`
240		240
241	`.info-box-container {`	241	`.info-box-container {`
242	`margin-top: 30px;`	242	`margin-top: 30px;`
243	`margin-bottom: 30px;`	243	`margin-bottom: 30px;`
244	`height: 100%;`	244	`height: 100%;`
245	`}`	245	`}`
246		246
247		247
248	`#box_infos {`	248	`#box_infos {`
249	`background-color: #efefef;`	249	`background-color: #efefef;`
250	`padding-left: 10px;`	250	`padding-left: 10px;`
251	`padding-right: 10px;`	251	`padding-right: 10px;`
252	`padding-top: 5px;`	252	`padding-top: 5px;`
253	`padding-bottom: 5px;`	253	`padding-bottom: 5px;`
254	`border-radius: 10px;`	254	`border-radius: 10px;`
255	`/* ombrage CSS3 */`	255	`/* ombrage CSS3 */`
256	`-moz-box-shadow: 1px 1px 6px #666;`	256	`-moz-box-shadow: 1px 1px 6px #666;`
257	`-webkit-box-shadow: 1px 1px 6px #666;`	257	`-webkit-box-shadow: 1px 1px 6px #666;`
258	`box-shadow: 1px 1px 6px #666;`	258	`box-shadow: 1px 1px 6px #666;`
259	`}`	259	`}`
260		260
261	`/* When the the infobox goes bellow the main one (col-xs), it gets a dynamic height*/`	-
262	`@media(max-width:768px){`	-
263	`#box_infos {`	-
264	`height:100%;`	-
265	`}`	-
266	`}`	-
267		-
268	`.box_infos_titles {`	261	`.box_infos_titles {`
269	`font-size: calc(14px + 0.15vw);`	262	`font-size: calc(14px + 0.15vw);`
270	`font-weight: bold;`	263	`font-weight: bold;`
271	`color: black;`	264	`color: black;`
272	`margin-top: 5px;`	265	`margin-top: 5px;`
273	`}`	266	`}`
274		267
275	`.box_infos_explanations {`	268	`.box_infos_explanations {`
276	`font-size: calc(13px + 0.11vw);`	269	`font-size: calc(13px + 0.11vw);`
277	`margin-bottom: 0px;`	270	`margin-bottom: 0px;`
278	`}`	271	`}`
279		272
280	`.box_infos_titles A {`	273	`.box_infos_titles A {`
281	`color: black;`	274	`color: black;`
282	`}`	275	`}`
283		276
284	`#corner {`	277	`#corner {`
285	`position: fixed;`	278	`position: fixed;`
286	`bottom: 0;`	279	`bottom: 0;`
287	`right: 0;`	280	`right: 0;`
288		281
289	`}`	282	`}`
290	`#adm {`	283	`#adm {`
291	`display: block;`	284	`display: block;`
292	`width: 100px;`	285	`width: 100px;`
293	`height: 100px;`	286	`height: 100px;`
294	`}`	287	`}`
295	`.corn IMG:hover {`	288	`.corn IMG:hover {`
296	`position: absolute;`	289	`position: absolute;`
297	`width: 100px;`	290	`width: 100px;`
298	`height: 100px;`	291	`height: 100px;`
299	`top: 0px;`	292	`top: 0px;`
300	`left: 0px;`	293	`left: 0px;`
301	`}`	294	`}`
302		295
303	`.corn IMG {`	296	`.corn IMG {`
304	`position: absolute;`	297	`position: absolute;`
305	`width: 50px;`	298	`width: 50px;`
306	`height: 50px;`	299	`height: 50px;`
307	`top: 75px;`	300	`top: 75px;`
308	`left: 75px;`	301	`left: 75px;`
309	`transition: .2s;`	302	`transition: .2s;`
310	`}`	303	`}`
311		304

Subversion Repositories ALCASAR

(root)/web/css/index.css – Rev 2819 → 3026