population/perso.css at master · js-cstj/population · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#interface > header,
#interface > footer {
	background-color: hsl(271, 50%, 20%);
	color:white;
}
#app {
	background-color: hsl(120, 30%, 40%);
	background-image: url(images/texture_gazon.png);
}
.perso {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	margin-left: -16px;
	margin-top: -16px;
	width: 32px;
	height: 32px;
}
.perso > div {
	/* border: 1px solid #990; */
	background-color: #ffed;
	border-radius: 1em 1em 1em 0;
	position: absolute;
	left:50%;
	bottom: 100%;
	font-family: cursive;
	font-size: 10px;
	padding: .25em;
	width: 20ch;
	box-shadow: .1em .1em .3em rgba(0,0,0,.5);
	transform: scale(1);
	transition-duration: .5s;
	transform-origin: left bottom;
	/* transition-property: opacity; */
}
.perso:hover {
	z-index: 100;
}
.perso:not(:hover) > div {
	opacity:0;
	transform: scale(0);
}