Skip to content

Commit 9ef0060

Browse files
hakimelhakimel
committed
add new black theme
1 parent 0aad39f commit 9ef0060

3 files changed

Lines changed: 315 additions & 0 deletions

File tree

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ module.exports = function(grunt) {
4141
main: {
4242
files: {
4343
'css/theme/default.css': 'css/theme/source/default.scss',
44+
'css/theme/black.css': 'css/theme/source/black.scss',
4445
'css/theme/beige.css': 'css/theme/source/beige.scss',
4546
'css/theme/night.css': 'css/theme/source/night.scss',
4647
'css/theme/serif.css': 'css/theme/source/serif.scss',

‎css/theme/black.css‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
/**
2+
* Black theme for reveal.js.
3+
*
4+
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
5+
*/
6+
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
7+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
8+
/*********************************************
9+
* GLOBAL STYLES
10+
*********************************************/
11+
body {
12+
background: #111111;
13+
background-color: #111111; }
14+
15+
.reveal {
16+
font-family: "Open Sans", Helvetica, sans-serif;
17+
font-size: 32px;
18+
font-weight: normal;
19+
color: #eeeeee; }
20+
21+
::selection {
22+
color: white;
23+
background: #b6d7fe;
24+
text-shadow: none; }
25+
26+
.reveal .slides > section,
27+
.reveal .slides > section > section {
28+
line-height: 1.3;
29+
font-weight: inherit; }
30+
31+
/*********************************************
32+
* HEADERS
33+
*********************************************/
34+
.reveal h1,
35+
.reveal h2,
36+
.reveal h3,
37+
.reveal h4,
38+
.reveal h5,
39+
.reveal h6 {
40+
margin: 0 0 20px 0;
41+
color: #eeeeee;
42+
font-family: "Montserrat", Helvetica, sans-serif;
43+
line-height: 1em;
44+
letter-spacing: normal;
45+
text-transform: none;
46+
text-shadow: none;
47+
word-wrap: break-word; }
48+
49+
.reveal h1 {
50+
font-size: 3.77em; }
51+
52+
.reveal h2 {
53+
font-size: 2.11em; }
54+
55+
.reveal h3 {
56+
font-size: 1.55em; }
57+
58+
.reveal h4 {
59+
font-size: 1em; }
60+
61+
.reveal h1 {
62+
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
63+
64+
/*********************************************
65+
* OTHER
66+
*********************************************/
67+
.reveal p {
68+
margin-bottom: 10px;
69+
line-height: 1.3; }
70+
71+
/* Ensure certain elements are never larger than the slide itself */
72+
.reveal img,
73+
.reveal video,
74+
.reveal iframe {
75+
max-width: 95%;
76+
max-height: 95%; }
77+
78+
.reveal strong,
79+
.reveal b {
80+
font-weight: bold; }
81+
82+
.reveal em {
83+
font-style: italic; }
84+
85+
.reveal ol,
86+
.reveal dl,
87+
.reveal ul {
88+
display: inline-block;
89+
text-align: left;
90+
margin: 0 0 0 1em; }
91+
92+
.reveal ol {
93+
list-style-type: decimal; }
94+
95+
.reveal ul {
96+
list-style-type: disc; }
97+
98+
.reveal ul ul {
99+
list-style-type: square; }
100+
101+
.reveal ul ul ul {
102+
list-style-type: circle; }
103+
104+
.reveal ul ul,
105+
.reveal ul ol,
106+
.reveal ol ol,
107+
.reveal ol ul {
108+
display: block;
109+
margin-left: 40px; }
110+
111+
.reveal dt {
112+
font-weight: bold; }
113+
114+
.reveal dd {
115+
margin-left: 40px; }
116+
117+
.reveal q,
118+
.reveal blockquote {
119+
quotes: none; }
120+
121+
.reveal blockquote {
122+
display: block;
123+
position: relative;
124+
width: 70%;
125+
margin: 5px auto;
126+
padding: 5px;
127+
font-style: italic;
128+
background: rgba(255, 255, 255, 0.05);
129+
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
130+
131+
.reveal blockquote p:first-child,
132+
.reveal blockquote p:last-child {
133+
display: inline-block; }
134+
135+
.reveal q {
136+
font-style: italic; }
137+
138+
.reveal pre {
139+
display: block;
140+
position: relative;
141+
width: 90%;
142+
margin: 15px auto;
143+
text-align: left;
144+
font-size: 0.55em;
145+
font-family: monospace;
146+
line-height: 1.2em;
147+
word-wrap: break-word;
148+
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
149+
150+
.reveal code {
151+
font-family: monospace; }
152+
153+
.reveal pre code {
154+
display: block;
155+
padding: 5px;
156+
overflow: auto;
157+
max-height: 400px;
158+
word-wrap: normal;
159+
background: #3F3F3F;
160+
color: #DCDCDC; }
161+
162+
.reveal table {
163+
margin: auto;
164+
border-collapse: collapse;
165+
border-spacing: 0; }
166+
167+
.reveal table th {
168+
font-weight: bold; }
169+
170+
.reveal table th,
171+
.reveal table td {
172+
text-align: left;
173+
padding: 0.2em 0.5em 0.2em 0.5em;
174+
border-bottom: 1px solid; }
175+
176+
.reveal table tr:last-child td {
177+
border-bottom: none; }
178+
179+
.reveal sup {
180+
vertical-align: super; }
181+
182+
.reveal sub {
183+
vertical-align: sub; }
184+
185+
.reveal small {
186+
display: inline-block;
187+
font-size: 0.6em;
188+
line-height: 1.2em;
189+
vertical-align: top; }
190+
191+
.reveal small * {
192+
vertical-align: top; }
193+
194+
/*********************************************
195+
* LINKS
196+
*********************************************/
197+
.reveal a {
198+
color: #3992fb;
199+
text-decoration: none;
200+
-webkit-transition: color .15s ease;
201+
-moz-transition: color .15s ease;
202+
transition: color .15s ease; }
203+
204+
.reveal a:hover {
205+
color: #84bbfd;
206+
text-shadow: none;
207+
border: none; }
208+
209+
.reveal .roll span:after {
210+
color: #fff;
211+
background: #056be3; }
212+
213+
/*********************************************
214+
* IMAGES
215+
*********************************************/
216+
.reveal section img {
217+
margin: 15px 0px;
218+
background: rgba(255, 255, 255, 0.12);
219+
border: 4px solid #eeeeee;
220+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
221+
222+
.reveal a img {
223+
-webkit-transition: all .15s linear;
224+
-moz-transition: all .15s linear;
225+
transition: all .15s linear; }
226+
227+
.reveal a:hover img {
228+
background: rgba(255, 255, 255, 0.2);
229+
border-color: #3992fb;
230+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
231+
232+
/*********************************************
233+
* NAVIGATION CONTROLS
234+
*********************************************/
235+
.reveal .controls div.navigate-left,
236+
.reveal .controls div.navigate-left.enabled {
237+
border-right-color: #3992fb; }
238+
239+
.reveal .controls div.navigate-right,
240+
.reveal .controls div.navigate-right.enabled {
241+
border-left-color: #3992fb; }
242+
243+
.reveal .controls div.navigate-up,
244+
.reveal .controls div.navigate-up.enabled {
245+
border-bottom-color: #3992fb; }
246+
247+
.reveal .controls div.navigate-down,
248+
.reveal .controls div.navigate-down.enabled {
249+
border-top-color: #3992fb; }
250+
251+
.reveal .controls div.navigate-left.enabled:hover {
252+
border-right-color: #84bbfd; }
253+
254+
.reveal .controls div.navigate-right.enabled:hover {
255+
border-left-color: #84bbfd; }
256+
257+
.reveal .controls div.navigate-up.enabled:hover {
258+
border-bottom-color: #84bbfd; }
259+
260+
.reveal .controls div.navigate-down.enabled:hover {
261+
border-top-color: #84bbfd; }
262+
263+
/*********************************************
264+
* PROGRESS BAR
265+
*********************************************/
266+
.reveal .progress {
267+
background: rgba(0, 0, 0, 0.2); }
268+
269+
.reveal .progress span {
270+
background: #3992fb;
271+
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
272+
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
273+
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
274+
275+
/*********************************************
276+
* SLIDE NUMBER
277+
*********************************************/
278+
.reveal .slide-number {
279+
color: #3992fb; }

‎css/theme/source/black.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Black theme for reveal.js.
3+
*
4+
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
5+
*/
6+
7+
8+
// Default mixins and settings -----------------
9+
@import "../template/mixins";
10+
@import "../template/settings";
11+
// ---------------------------------------------
12+
13+
14+
// Include theme-specific fonts
15+
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
16+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
17+
18+
19+
// Override theme settings (see ../template/settings.scss)
20+
$backgroundColor: #111;
21+
22+
$mainFont: 'Open Sans', Helvetica, sans-serif;
23+
$mainFontSize: 32px;
24+
$headingFont: 'Montserrat', Helvetica, sans-serif;
25+
$headingTextShadow: none;
26+
$headingLetterSpacing: normal;
27+
$headingTextTransform: none;
28+
$linkColor: #3992fb;
29+
$linkColorHover: lighten( $linkColor, 15% );
30+
$selectionBackgroundColor: lighten( $linkColor, 25% );
31+
32+
33+
// Theme template ------------------------------
34+
@import "../template/theme";
35+
// ---------------------------------------------

0 commit comments

Comments
 (0)