metro.css/less/tiles.less at 0378841b258618a32672cd006933af75d35486b6 · Code52/metro.css · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@tilebasewidth: 130px;
@tilepadding: 5px;
@tilemargin: 10px;
@tilesize: (@tilepadding*2) + @tilebasewidth + @tilemargin;
@2tilewidth: (@tilebasewidth + @tilemargin) *2;
@smalltilesize: (@tilepadding*2) + @tilebasewidth /2 + @tilemargin;
@small2tilewidth: (@tilebasewidth /2 + @tilemargin) *2;

.tile {
	-webkit-perspective: 0;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 0.2s;
	float: left;
	margin-right: @tilemargin;
	margin-bottom: @tilemargin;
	text-align:center;
	padding: @tilepadding;
	opacity:0.75;

	h1, h2, h3, h4, h5, h6 {
		color: @white;
		-webkit-user-select: none;
	}

	h2 { font-size: 1.75em; margin-top: 0px - @tilemargin; margin-left:0px; }

	a:hover { text-decoration: none; }
}


.tile img { border :0;}
.tile:hover { opacity:1;}
.tiles { .clear; }
.tilerow  {
	float:left;
	-webkit-perspective: 0;
	-webkit-transform-style: preserve-3d;
	-webkit-user-select: none;
}

.tilesize(@width, @height) {
	width: @width;
	height: @height;
}
.one {
	.tilesize(@tilebasewidth, @tilebasewidth);
}
.two-h {
	.tilesize(@2tilewidth, @tilebasewidth);
}
.two-v {
	.tilesize(@tilebasewidth, @2tilewidth);
}

.half-h {
	.tilesize(@small2tilewidth, @tilebasewidth /2);
}
.half-v {
	.tilesize(@tilebasewidth /2, @small2tilewidth);
}
.quarter {
	.tilesize(@tilebasewidth /2, @tilebasewidth /2);
}

.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol, .smallfirstcol, .smallsecondcol, .smallthirdcol, .smallfourthcol, .smallfifthcol { position: absolute;}
.firstcol { }
.secondcol { margin-left: @tilesize*1; }
.thirdcol { margin-left: @tilesize*2; }
.fourthcol { margin-left: @tilesize*3; }
.fifthcol { margin-left: @tilesize*4; }
.smallfirstcol { }
.smallsecondcol { margin-left: @smalltilesize*1; }
.smallthirdcol { margin-left: @smalltilesize*2; }
.smallfourthcol { margin-left: @smalltilesize*3; }
.smallfifthcol { margin-left: @smalltilesize*4; }