comparison oc/blank.css.less @ 0:4c04d9c9b71d

update
author oc
date Sat, 29 Nov 2014 14:15:55 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:4c04d9c9b71d
1 ////////
2 // variables for easy configuration
3 //
4 // (note: this is a less extendend css script, to learn more about less; see lesscss.org)
5
6 @color: black;
7 @color-step-hidden: silver;
8
9 @background-color-code: #ffffa9;
10
11 // -- gradient colors used for slides classified with cover | title
12
13 @background-gradient-color1-cover: white;
14 @background-gradient-color2-cover: white;
15
16 // -- gradient colors for all other slides
17
18 @background-gradient-color1: white;
19 @background-gradient-color2: white;
20
21 // --- font size
22
23 @font-size-h1: 190%; // 30pt / 40px (assuming 100% => 12pt / 16px)
24 @font-size-h2: 200%; // 28pt / 37px
25 @font-size-h3: 150%; // 24pt / 32px
26 @font-size-text: 130%; // 18pt / 24px
27 @font-size-list: 120%;
28 @font-size-code: 150%; // 16pt / 22px
29 @font-small-size: 100%;
30
31 /////////////////////////////
32
33 body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
34
35 a:link,
36 a:visited { color: @color; }
37
38
39 .slide {
40
41 color: @color;
42
43 h1 { font-size: @font-size-h1;
44 color: white;
45 text-align: center;
46
47 &.fullscreen { position: absolute;
48 top: 40%;
49 width: 100%; }
50
51 // lets you create slides with no heading (that is, heading gets hidden but included in toc)
52 &.hidden { display: none; }
53 }
54
55 h2 { font-size: @font-size-h2; background-color: #808db5; color:white; padding: 5px;}
56
57 h3 { font-size: @font-size-h3; }
58 name {
59 font-size: @font-size-h3;
60 background-color: #ffcc00;
61 &.fullscreen { position: absolute;
62 top: 40%;
63 width: 100%; }
64 }
65
66 .stepcurrent { color: @color; }
67 .step { color: @color-step-hidden; } // or hide next steps e.g. .step { visibility: hidden; }
68 }
69
70
71 ul { list-style-type: square; }
72
73
74 p { font-size: @font-size-text; }
75 li, dt, dd, td{ font-size: @font-size-list; }
76 th { font-size: @font-small-size; font-weight:normal; align:left}
77
78
79 pre {font-size: @font-size-code; }
80
81 .code {
82 background-color: @background-color-code;
83 padding: 5px;
84 }
85 code {
86 font-size: @font-size-code;
87 background-color: @background-color-code;
88 padding: 5px;
89 }
90 .footnote a:first-of-type { text-decoration: none; }
91
92 p.footnote { font-size: 88%; }
93
94 .help {
95 p, td { font-size: 88%; }
96 }
97
98 /********
99 * example gradient background using css3
100 */
101
102 .slide {
103 background-image: -webkit-linear-gradient(top, @background-gradient-color1,
104 @background-gradient-color2,
105 @background-gradient-color1,
106 @background-gradient-color2);
107
108 background-image: -moz-linear-gradient(top, @background-gradient-color1,
109 @background-gradient-color2,
110 @background-gradient-color1,
111 @background-gradient-color2);
112
113 &.cover, &.title {
114 background-image: -webkit-linear-gradient(top, @background-gradient-color1-cover,
115 @background-gradient-color2-cover,
116 @background-gradient-color1-cover,
117 @background-gradient-color2-cover);
118
119 background-image: -moz-linear-gradient(top, @background-gradient-color1-cover,
120 @background-gradient-color2-cover,
121 @background-gradient-color1-cover,
122 @background-gradient-color2-cover);
123
124 }
125 }