New design

Thibaut committed 12 years ago

Commit 465a1721 parent a3aa03b29 files · +235 −293Browse files

Unified · Split

29 files

assets/images/icons.png +0 −0
assets/images/icons@2x.png +0 −0
assets/javascripts/templates/pages/news_tmpl.coffee +5 −1
assets/javascripts/templates/pages/root_tmpl.coffee.erb +2 −2
assets/javascripts/views/search/search_scope.coffee +1 −1
assets/javascripts/views/sidebar/sidebar_hover.coffee +1 −1
assets/stylesheets/components/_app.scss +1 −1
assets/stylesheets/components/_content.scss +27 −9
assets/stylesheets/components/_header.scss +40 −53
assets/stylesheets/components/_mobile.scss +5 −20
assets/stylesheets/components/_notice.scss +2 −17
assets/stylesheets/components/_notif.scss +3 −12
assets/stylesheets/components/_page.scss +2 −3
assets/stylesheets/components/_path.scss +2 −5
assets/stylesheets/components/_sidebar.scss +40 −76
assets/stylesheets/global/_base.scss +11 −16
assets/stylesheets/global/_classes.scss +23 −63
assets/stylesheets/global/_variables.scss +66 −8
assets/stylesheets/pages/_angular.scss +1 −1
assets/stylesheets/pages/_c.scss +1 −2
assets/stylesheets/pages/_maxcdn.scss +3 −3
assets/stylesheets/pages/_mdn.scss +1 −1
assets/stylesheets/pages/_node.scss +1 −1
assets/stylesheets/pages/_rdoc.scss +2 −2
assets/stylesheets/pages/_yii.scss +1 −1
public/icons/ui/home/16.png +0 −0
public/icons/ui/home/16@2x.png +0 −0
public/icons/ui/menu/16.png +0 −0
public/icons/ui/menu/16@2x.png +0 −0

assets/images/icons.png+0−0

Binary file not shown.

assets/images/icons@2x.png+0−0

Binary file not shown.

assets/javascripts/templates/pages/news_tmpl.coffee+5−1

@@ -33,7 +33,11 @@ newsItem = (date, news) -> · 32 unmodified lines
33	33	result
34	34
35	35	app.news = [
36		− [ 1413676800000, # October 19, 2014
	36	+ [ 1415491200000, # November 9, 2014
	37	+ """ New design
	38	+ Feedback welcome on <a href="https://twitter.com/DevDocs" target="_blank">Twitter</a> and <a href="https://github.com/Thibaut/devdocs" target="_blank">GitHub</a>. """
	39	+ ], [
	40	+ 1413676800000, # October 19, 2014
37	41	""" New <a href="/svg/">SVG</a>, <a href="/marionette/">Marionette.js</a>, and <a href="/mongoose/">Mongoose</a> documentations """,
38	42	], [
39	43	1413590400000, # October 18, 2014

assets/javascripts/templates/pages/root_tmpl.coffee.erb+2−2

@@ -13,8 +13,8 @@ app.templates.intro = """ · 12 unmodified lines
13	13	<ol class="_intro-list">
14	14	<li>Your local version of DevDocs won't self-update. Unless you're offline or modifying the code,
15	15	I recommend using the hosted version at <a href="http://devdocs.io">devdocs.io</a>.
16		− <li>Run <code class="_label">thor docs:list</code> to see all available documentations.
17		− <li>Run <code class="_label">thor docs:download --all</code> to download/update all documentations.
	16	+ <li>Run <code>thor docs:list</code> to see all available documentations.
	17	+ <li>Run <code>thor docs:download --all</code> to download/update all documentations.
18	18	<li>To be notified about new versions, don't forget to <a href="https://github.com/Thibaut/devdocs/subscription">watch the repository</a> on GitHub.
19	19	<li>The <a href="https://github.com/Thibaut/devdocs/issues">issue tracker</a> is the preferred channel for bug reports and
20	20	feature requests. For everything else, use the <a href="https://groups.google.com/d/forum/devdocs">mailing list</a>.

assets/javascripts/views/search/search_scope.coffee+1−1

@@ -49,7 +49,7 @@ class app.views.SearchScope extends app.View · 48 unmodified lines
49	49
50	50	@input.removeAttribute 'placeholder'
51	51	@input.value = @input.value[@input.selectionStart..]
52		− @input.style.paddingLeft = @tag.offsetWidth + 6 + 'px'
	52	+ @input.style.paddingLeft = @tag.offsetWidth + 10 + 'px'
53	53	$.trigger @input, 'input'
54	54
55	55	reset: =>

assets/javascripts/views/sidebar/sidebar_hover.coffee+1−1

@@ -59,7 +59,7 @@ class app.views.SidebarHover extends app.View · 58 unmodified lines
59	59	el.classList.contains 'active'
60	60
61	61	isTruncated: (el) ->
62		− el.scrollWidth >= el.offsetWidth
	62	+ el.scrollWidth > el.offsetWidth
63	63
64	64	onFocus: (event) =>
65	65	@focusTime = Date.now()

assets/stylesheets/components/_app.scss+1−1

@@ -26,7 +26,7 @@ · 25 unmodified lines
26	26	line-height: 1;
27	27	margin-top: -.75em;
28	28	font-size: 4rem;
29		− color: #ccc;
	29	+ color: $loadingText;
30	30	text-align: center;
31	31	letter-spacing: -.125rem;
32	32	opacity: 0;

assets/stylesheets/components/_content.scss+27−9

@@ -7,9 +7,6 @@ · 6 unmodified lines
7	7	z-index: $contentZ;
8	8	height: 100%;
9	9	margin-left: $sidebarWidth;
10		− border-top: 1px solid #b4b7bf;
11		− box-shadow: inset 0 1px rgba(black, .04), // top inner shadow
12		− inset 1px 0 #f4f4f4; // left inner shadow
13	10	pointer-events: none;
14	11	@extend %border-box;
15	12
@@ -20,7 +17,7 @@ · 4 unmodified lines
20	17	position: relative;
21	18	height: 100%;
22	19	overflow-y: scroll;
23		− margin-left: 1rem;
	20	+ margin-left: .875rem;
24	21	padding: 1.25rem 1.5rem 0;
25	22	font-size: .875rem;
26	23	pointer-events: auto;
@@ -28,6 +25,8 @@ · 1 unmodified line
28	25	@extend %border-box;
29	26
30	27	-webkit-padding-start: .75rem;
	28	+ -webkit-padding-end: 1rem;
	29	+
31	30	@media (-moz-overlay-scrollbars) { padding-left: .75rem; }
32	31	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
33	32
@@ -36,10 +35,28 @@ · 2 unmodified lines
36	35	display: block;
37	36	margin-bottom: 1.25rem;
38	37	}
	38	+
	39	+ &::-webkit-scrollbar { -webkit-appearance: none; }
	40	+ &::-webkit-scrollbar:vertical { width: 14px; }
	41	+ &::-webkit-scrollbar:horizontal { height: 14px }
	42	+ &::-webkit-scrollbar-button { display: none; }
	43	+ &::-webkit-scrollbar-track { background: $contentBackground; }
	44	+ &::-webkit-scrollbar-thumb {
	45	+ min-height: 2rem;
	46	+ background: $scrollbarColor;
	47	+ background-clip: padding-box;
	48	+ border: 5px solid $contentBackground;
	49	+ border-radius: 10px;
	50	+
	51	+ &:active {
	52	+ background-color: $scrollbarColorHover;
	53	+ border-width: 4px;
	54	+ }
	55	+ }
39	56	}
40	57
41	58	._content-loading:before {
42		− color: #e6e6e6;
	59	+ opacity: 1;
43	60	@extend ._booting:before;
44	61	}
45	62
@@ -48,7 +65,7 @@ · 2 unmodified lines
48	65	//
49	66
50	67	._splash-title {
51		− color: #ddd;
	68	+ color: $splashText;
52	69	cursor: default;
53	70	opacity: 1;
54	71	@extend ._booting:before, %user-select-none;
@@ -58,7 +75,7 @@ · 3 unmodified lines
58	75	position: absolute;
59	76	bottom: 1.25rem;
60	77	line-height: 1rem;
61		− color: #bbb;
	78	+ color: $promoText;
62	79
63	80	&:hover { color: $linkColor; }
64	81	}
@@ -73,6 +90,7 @@ · 8 unmodified lines
73	90
74	91	._splash-gratipay {
75	92	right: 1.25rem;
	93	+ -webkit-margin-end: -.5rem;
76	94	@extend %splash-promo;
77	95
78	96	> ._gratipay-logo-bw { opacity: .35; }
@@ -175,7 +193,7 @@ · 96 unmodified lines
175	193	height: 1px;
176	194	line-height: 0;
177	195	margin-left: 1rem;
178		− background: #dde3e8;
	196	+ background: $boxBorderLight;
179	197	}
180	198	}
181	199
@@ -297,7 +315,7 @@ · 115 unmodified lines
297	315	._note { @extend %note; }
298	316	._note-green { @extend %note-green; }
299	317	._label { @extend %label; }
300		−._highlight { background: #fffdcd !important; }
	318	+._highlight { background: $highlightBackground !important; }
301	319
302	320	._github-btn {
303	321	display: inline-block;

assets/stylesheets/components/_header.scss+40−53

@@ -10,11 +10,8 @@ · 9 unmodified lines
10	10	right: 0;
11	11	height: $headerHeight;
12	12	line-height: $headerHeight;
13		− text-shadow: 0 1px rgba(white, .5);
14		− background: -webkit-linear-gradient(top, #f6f6f8, #e4e4e6);
15		− background: linear-gradient(to bottom, #f6f6f8, #e4e4e6);
16		− box-shadow: inset 0 1px rgba(white, .8), // top inner glow
17		− inset 0 -1px rgba(white, .3); // bottom inner glow
	13	+ background: $headerBackground;
	14	+ border-bottom: 1px solid $headerBorder;
18	15	@extend %user-select-none;
19	16
20	17	a:focus { outline: 0; }
@@ -28,30 +25,38 @@ · 7 unmodified lines
28	25	float: right;
29	26	margin-right: .5rem;
30	27	font-size: .875rem;
31		− color: lighten($textColor, 5%);
	28	+ color: $textColor;
32	29	}
33	30
34	31	._nav-link,
35	32	._nav-link:hover {
	33	+ position: relative;
36	34	float: left;
37	35	padding: 0 1.25rem;
38	36	color: inherit;
39	37	text-decoration: none;
40		− background-clip: padding-box;
41		− border: solid transparent;
42		− border-width: 0 1px;
43	38	}
44	39
45		−._nav-current,
46		−._nav-current:hover {
47		− color: lighten($textColor, 8%);
48		− background: -webkit-linear-gradient(top, #e1e1e4, #f2f2f5);
49		− background: linear-gradient(to bottom, #e1e1e4, #f2f2f5);
50		− border-color: rgba(black, .15);
51		− box-shadow: inset 0 1px rgba(black, .07), // top border
52		− inset 0 1px 2px rgba(black, .1), // top inner shadow
53		− 1px 0 rgba(white, .2), // right glow
54		− -1px 0 rgba(white, .2); // left glow
	40	+._nav-link {
	41	+ &:before, &:after {
	42	+ position: absolute;
	43	+ left: 50%;
	44	+ bottom: 0;
	45	+ width: 0;
	46	+ height: 0;
	47	+ margin-left: -.375rem;
	48	+ border: .375rem solid transparent;
	49	+ border-bottom-color: darken($headerBorder, 2%);
	50	+ }
	51	+
	52	+ &:after {
	53	+ bottom: -1px;
	54	+ border-bottom-color: $contentBackground;
	55	+ }
	56	+}
	57	+
	58	+._nav-current {
	59	+ &:before, &:after { content: ''; }
55	60	}
56	61
57	62	//
@@ -66,21 +71,9 @@ · 8 unmodified lines
66	71	line-height: inherit;
67	72	font-size: inherit;
68	73
69		− &:before, &:after { // left border
70		− content: '';
71		− position: absolute;
72		− top: 0;
73		− bottom: 0;
74		− left: -1px;
75		− width: 1px;
76		− background: -webkit-linear-gradient(bottom, #b4b7bf, rgba(#b4b7bf, 0) 80%);
77		− background: linear-gradient(to top, #b4b7bf, rgba(#b4b7bf, 0) 80%);
78		− }
79		−
80		− &:after { // left glow
81		− left: -2px;
82		− background: -webkit-linear-gradient(bottom, rgba(white, .4), rgba(white, 0) 80%);
83		− background: linear-gradient(to top, rgba(white, .4), rgba(white, 0) 80%);
	74	+ > ._nav-link {
	75	+ float: none;
	76	+ padding: 0 1rem;
84	77	}
85	78	}
86	79
@@ -93,8 +86,7 @@ · 6 unmodified lines
93	86	float: left;
94	87	width: $sidebarWidth;
95	88	height: 100%;
96		− padding: .625rem;
97		− border-right: 1px solid transparent;
	89	+ padding: .5rem 0 .5rem .5rem;
98	90	@extend %border-box;
99	91
100	92	@media #{$mediumScreen} { width: $sidebarMediumWidth; }
@@ -103,7 +95,7 @@ · 2 unmodified lines
103	95	position: absolute;
104	96	top: 1rem;
105	97	left: 1rem;
106		− opacity: .5;
	98	+ opacity: .4;
107	99	@extend %icon, %icon-search;
108	100	}
109	101	}
@@ -112,19 +104,17 @@ · 2 unmodified lines
112	104	display: block;
113	105	width: 100%;
114	106	height: 100%;
115		− padding: 0 .75rem 1px 1.625rem;
	107	+ padding: 0 .75rem 1px 1.75rem;
116	108	font-size: .875rem;
	109	+ background: $contentBackground;
117	110	border: 1px solid;
118		− border-color: #b2b5bb #babbc5 #bebfc6;
119		− border-radius: 1rem;
120		− box-shadow: inset 0 1px 1px rgba(black, .1), // top inner shadow
121		− 0 1px rgba(white, .3); // bottom glow
	111	+ border-color: darken($headerBorder, 2%);
	112	+ border-radius: 3px;
122	113
123	114	&:focus {
124	115	outline: 0;
125		− border-color: #35b5f4 #35b5f4 #30aeee;
126		− box-shadow: inset 0 0 1px rgba(#35b5f4, .5), // inner glow
127		− 0 0 2px rgba(#35b5f4, .8); // outer glow
	116	+ border-color: $inputFocusBorder;
	117	+ box-shadow: 0 0 1px $inputFocusBorder;
128	118	}
129	119	}
130	120
@@ -132,7 +122,7 @@ · 1 unmodified line
132	122	display: none;
133	123	position: absolute;
134	124	top: .5em;
135		− right: .5em;
	125	+ right: 0;
136	126	padding: .5em;
137	127	cursor: pointer;
138	128	opacity: .3;
@@ -147,13 +137,10 @@ · 8 unmodified lines
147	137	position: absolute;
148	138	top: .875rem;
149	139	left: .875rem;
150		− margin: -1px 0 0 -1px;
151		− padding: 0 .625rem;
	140	+ padding: 0 .5rem;
152	141	line-height: 1.25rem;
153	142	font-size: .875rem;
154		− background: #dfeafe;
155		− border: 1px solid #98aed8;
156		− border-radius: .75rem;
157		− box-shadow: inset 0 1px rgba(white, .2), // top inner glow
158		− 0 1px rgba(black, .05); // bottom shadow
	143	+ color: $textColorLight;
	144	+ background: darken($headerBackground, 5%);
	145	+ border-radius: 2px;
159	146	}

assets/stylesheets/components/_mobile.scss+5−20

@@ -14,7 +14,6 @@ · 13 unmodified lines
14	14	._container {
15	15	margin: 0;
16	16	border: 0;
17		− box-shadow: none;
18	17	}
19	18
20	19	._content {
@@ -24,19 +23,11 @@ · 3 unmodified lines
24	23	padding: .75rem 1rem 2.5rem;
25	24	}
26	25
27		− ._booting:before, ._content-loading:before {
28		− font-size: 3rem;
29		− color: #ccc;
30		− }
	26	+ ._booting:before, ._content-loading:before { font-size: 3rem; }
31	27
32	28	// Header
33	29
34		− ._header {
35		− position: fixed;
36		− z-index: $contentZ + 1;
37		− border-bottom: 1px solid #b4b7bf;
38		− box-shadow: 0 1px rgba(black, .03);
39		− }
	30	+ ._header { position: fixed; }
40	31
41	32	._logo, ._nav { display: none; }
42	33	._home-link, ._menu-link { display: block; }
@@ -52,7 +43,6 @@ · 9 unmodified lines
52	43	&:before { left: .5rem; }
53	44	}
54	45
55		− ._search-clear { padding-right: 0; }
56	46	._search-tag { left: .325rem; }
57	47
58	48	// Sidebar
@@ -62,21 +52,17 @@ · 3 unmodified lines
62	52	min-height: 100%;
63	53	overflow: visible;
64	54	padding-bottom: 2rem;
65		− box-shadow: none;
66	55
67	56	> ._list { padding-bottom: 0; }
68	57	}
69	58
70		− ._list, ._sidebar-footer {
71		− width: 100%;
72		− box-shadow: none;
73		− }
	59	+ ._list, ._sidebar-footer { width: 100%; }
74	60
75	61	._list-item {
76	62	white-space: normal;
77	63	word-wrap: break-word;
78	64	overflow-wrap: break-word;
79		− border-right-width: 0;
	65	+ box-shadow: none;
80	66	}
81	67
82	68	._list-result {
@@ -101,7 +87,7 @@ · 18 unmodified lines
101	87
102	88	._sidebar-footer-save {
103	89	margin-top: 1rem;
104		− border-bottom: 1px solid #bac6d7;
	90	+ box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;
105	91	}
106	92
107	93	// Notice
@@ -111,7 +97,6 @@ · 3 unmodified lines
111	97	left: 0;
112	98	padding: 0 .5rem;
113	99
114		− &:before { content: none; }
115	100	~ ._sidebar { padding-bottom: 4rem; }
116	101	}
117	102

assets/stylesheets/components/_notice.scss+2−17

@@ -6,27 +6,12 @@ · 5 unmodified lines
6	6	right: 0;
7	7	height: 2.5rem;
8	8	padding: 0 1.25rem;
9		− text-shadow: 0 1px rgba(white, .5);
10		− background: #faf9e2;
11		− box-shadow: inset 0 1px #dddaaa, // top border
12		− inset 0 2px rgba(white, .7), // top inner glow
13		− inset 1px 0 rgba(black, .03); // left inner shadow
	9	+ background: $noticeBackground;
	10	+ box-shadow: inset 0 1px $noticeBorder;
14	11
15	12	@media #{$mediumScreen} { left: $sidebarMediumWidth; }
16	13
17	14	~ ._container { padding-bottom: 2.5rem; }
18		−
19		− &:before {
20		− content: '';
21		− position: absolute;
22		− bottom: 100%;
23		− left: 1.5rem;
24		− right: 1.5rem;
25		− height: 1.5rem;
26		− background-image: -webkit-linear-gradient(top, rgba(white, 0), rgba(white, .95));
27		− background-image: linear-gradient(to bottom, rgba(white, 0), rgba(white, .95));
28		− pointer-events: none;
29		− }
30	15	}
31	16
32	17	._notice-text {

assets/stylesheets/components/_notif.scss+3−12

@@ -7,16 +7,9 @@ · 6 unmodified lines
7	7	max-width: 90%;
8	8	padding: .75rem 1rem;
9	9	font-size: .75rem;
10		− color: white;
11		− text-shadow: 0 1px 1px rgba(black, .4);
12		− background: -webkit-linear-gradient(top, rgba(#3a3a3a, .9), rgba(#202020, .9));
13		− background: linear-gradient(to bottom, rgba(#3a3a3a, .9), rgba(#202020, .9));
14		− background-clip: padding-box;
15		− border: 1px solid black;
	10	+ color: $notifColor;
	11	+ background: $notifBackground;
16	12	border-radius: .25rem;
17		− box-shadow: inset 0 1px rgba(white, .1), // top inner glow
18		− inset 0 0 0 1px rgba(white, .1), // inner glow
19		− 0 1px 3px rgba(black, .5); // drop shadow
20	13	transition: opacity .2s;
21	14	opacity: 0;
22	15	cursor: default;
@@ -63,7 +56,7 @@ · 40 unmodified lines
63	56	> ._news-row {
64	57	line-height: 1.125rem;
65	58	font-size: .6875rem;
66		− color: #bbb;
	59	+ color: $notifColorLight;
67	60
68	61	+ ._news-row { margin-top: .75rem; }
69	62	}
@@ -89,9 +82,7 @@ · 19 unmodified lines
89	82	margin: 0 .25rem;
90	83	padding: 0;
91	84	color: inherit;
92		− text-shadow: inherit;
93	85	background: none;
94	86	border: 0;
95		− box-shadow: none;
96	87	}
97	88	}

assets/stylesheets/components/_page.scss+2−3

@@ -16,7 +16,7 @@ · 15 unmodified lines
16	16	iframe {
17	17	display: block;
18	18	padding: 1px;
19		− border: 1px dotted #ddd;
	19	+ border: 1px dotted $boxBorder;
20	20	border-radius: 3px;
21	21	}
22	22	}
@@ -41,8 +41,7 @@ · 18 unmodified lines
41	41	display: inline-block;
42	42	margin: 0;
43	43	padding: .25rem .75rem;
44		− text-shadow: 0 1px rgba(white, .3);
45		− background: #f2f2f2;
	44	+ background: $labelBackground;
46	45	border-radius: 3px;
47	46	}
48	47

assets/stylesheets/components/_path.scss+2−5

@@ -8,11 +8,8 @@ · 7 unmodified lines
8	8	line-height: 2rem;
9	9	padding: 0 .375rem;
10	10	font-size: .875rem;
11		− text-shadow: 0 1px rgba(white, .5);
12		− background: #f5f5f7;
13		− box-shadow: inset 0 1px #d5d5da, // top border
14		− inset 0 2px rgba(white, .3), // top inner glow
15		− inset 1px 0 rgba(black, .03); // left inner shadow
	11	+ background: $pathBackground;
	12	+ box-shadow: inset 0 1px $pathBorder;
16	13
17	14	@media #{$mediumScreen} { left: $sidebarMediumWidth; }
18	15

assets/stylesheets/components/_sidebar.scss+40−76

@@ -8,28 +8,26 @@ · 7 unmodified lines
8	8	top: $headerHeight;
9	9	bottom: 0;
10	10	left: 0;
	11	+ margin-top: 1px;
11	12	overflow-x: hidden;
12	13	overflow-y: scroll;
13		− text-shadow: 0 1px rgba(white, .3);
14		− background: #e5eaf4;
15		− box-shadow: inset 0 1px #b4b7bf, // top border
16		− inset 0 2px rgba(black, .03); // top inner shadow
	14	+ background: $sidebarBackground;
17	15	-webkit-overflow-scrolling: touch;
18	16	-ms-overflow-style: none; // IE 10 doesn't support pointer-events
19	17	@extend %user-select-none;
20	18
21		− &::-webkit-scrollbar { width: 10px; }
	19	+ &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
22	20	&::-webkit-scrollbar-button { display: none; }
23		− &::-webkit-scrollbar-track { background: white; }
	21	+ &::-webkit-scrollbar-track { background: $contentBackground; }
24	22	&::-webkit-scrollbar-thumb {
25		− min-height: 1rem;
26		− background: #ccc;
	23	+ min-height: 2rem;
	24	+ background: $scrollbarColor;
27	25	background-clip: padding-box;
28		− border: 3px solid white;
	26	+ border: 3px solid $contentBackground;
29	27	border-radius: 5px;
30	28
31	29	&:active {
32		− background-color: #999;
	30	+ background-color: $scrollbarColorHover;
33	31	border-width: 2px;
34	32	}
35	33	}
@@ -46,15 +44,14 @@ · 10 unmodified lines
46	44	padding: 0;
47	45	list-style: none;
48	46	width: $sidebarWidth;
	47	+ box-shadow: inset -1px 0 $sidebarBorder;
	48	+ @extend %border-box;
49	49
50	50	@media #{$mediumScreen} { width: $sidebarMediumWidth; }
51	51
52	52	._sidebar > & {
53	53	min-height: 100%;
54	54	padding-bottom: 3.5rem;
55		− box-shadow: inset -1px 0 #bbc1cc, // right border
56		− inset -2px 0 rgba(white, .2); // right inner glow
57		− @extend %border-box;
58	55	}
59	56	}
60	57
@@ -74,16 +71,15 @@ · 13 unmodified lines
74	71	position: relative;
75	72	overflow: hidden;
76	73	padding: .25rem .75rem;
77		− line-height: 1.25rem;
	74	+ line-height: 1.5rem;
78	75	font-size: .875rem;
79	76	white-space: nowrap;
80	77	word-wrap: normal;
81	78	overflow-wrap: normal;
82	79	text-overflow: ellipsis;
83		− text-shadow: 0 1px rgba(white, .3);
84		− border: solid transparent;
85		− border-width: 1px 1px 1px 0;
86	80	cursor: default;
	81	+ background: $sidebarBackground;
	82	+ box-shadow: inset -1px 0 $sidebarBorder;
87	83
88	84	&, &:hover {
89	85	color: inherit;
@@ -94,26 +90,21 @@ · 4 unmodified lines
94	90	&.focus:hover,
95	91	&.active,
96	92	&.active:hover {
97		− color: white;
98		− text-shadow: 0 1px rgba(black, .2);
99		− background: -webkit-linear-gradient(top, #bfc6dd, #949eb8);
100		− background: linear-gradient(to bottom, #bfc6dd, #949eb8);
101		− border-color: #96a1c6 #8e99b7 #7f87a4;
102		− box-shadow: inset 0 1px rgba(white, .15), // top inner glow
103		− inset 0 0 0 1px rgba(white, .08), // inner glow
104		− 0 1px rgba(black, .05); // drop shadow
	93	+ color: $focusText;
	94	+ background: $focusBackground;
	95	+ box-shadow: inset -1px 0 $focusBorder;
105	96	}
106	97
107	98	&.active,
108	99	&.active:hover {
109		− background: -webkit-linear-gradient(top, #65b2fb, #3492e9);
110		− background: linear-gradient(to bottom, #65b2fb, #3492e9);
111		− border-color: #318ce4 #2b82db #2878c7;
	100	+ color: $selectionText;
	101	+ background: $selectionBackground;
	102	+ box-shadow: inset -1px 0 $selectionBorder;
112	103	}
113	104
114	105	&:before {
115	106	float: left;
116		− margin: .125rem .625rem 0 0;
	107	+ margin: .25rem .625rem 0 0;
117	108	@extend %icon;
118	109	}
119	110	}
@@ -136,10 +127,7 @@ · 16 unmodified lines
136	127
137	128	._list-dir,
138	129	%_list-dir {
139		− line-height: 1.5rem;
140	130	padding-left: 2.25rem;
141		−
142		− &:before { margin-top: .25rem; }
143	131	}
144	132
145	133	._list-disabled {
@@ -155,9 +143,9 @@ · 9 unmodified lines
155	143	left: .25rem;
156	144	padding: .5rem;
157	145	cursor: pointer;
158		− opacity: .45;
	146	+ opacity: .4;
159	147
160		− &:hover { opacity: .7; }
	148	+ &:hover { opacity: .65; }
161	149
162	150	&:before {
163	151	@extend %icon, %icon-dir;
@@ -172,11 +160,11 @@ · 8 unmodified lines
172	160	._list-sub {
173	161	> ._list-item { padding-left: 2.75rem; }
174	162	> ._list-item:before { content: none; }
175		− > ._list-dir { line-height: 1.25rem; }
	163	+ > ._list-dir { line-height: 1.375rem; }
176	164
177	165	._list-arrow {
178	166	left: 1rem;
179		− padding: .375rem;
	167	+ padding: .4375rem;
180	168	}
181	169	}
182	170
@@ -220,17 +208,14 @@ · 37 unmodified lines
220	208	left: .5rem;
221	209	width: .75rem;
222	210	height: 1px;
223		− background: rgba(white, .9);
224		− box-shadow: 0 -3px rgba(white, .9), // top line
225		− 0 3px rgba(white, .9), // bottom line
226		− 0 -2px rgba(black, .15), // top shadow
227		− 0 1px rgba(black, .15), // middle shadow
228		− 0 4px rgba(black, .15); // bottom shadow
	211	+ background: rgba($selectionText, .9);
	212	+ box-shadow: 0 -3px rgba($selectionText, .9), // top line
	213	+ 0 3px rgba($selectionText, .9); // bottom line
229	214	}
230	215	}
231	216
232	217	._list-noresults {
233		− padding: .625rem .75rem;
	218	+ padding: .5rem .75rem;
234	219	line-height: 1.25rem;
235	220	font-size: .8125rem;
236	221	color: $textColorLight;
@@ -238,7 +223,7 @@ · 1 unmodified line
238	223
239	224	._list-noresults-note {
240	225	display: block;
241		− margin-top: .375rem;
	226	+ margin-top: .25rem;
242	227	}
243	228
244	229	._list-noresults-link { cursor: pointer; }
@@ -252,39 +237,21 @@ · 7 unmodified lines
252	237	z-index: $hoverZ;
253	238	left: 0;
254	239	overflow: visible;
	240	+ min-width: $sidebarWidth;
255	241	padding: .25rem .75rem;
256		− background-color: #e5eaf4;
257	242	pointer-events: none;
258	243	-webkit-font-smoothing: subpixel-antialiased;
259	244	-webkit-transform: translate3d(0, 0, 0);
260	245	transform: translate3d(0, 0, 0);
	246	+ @extend %border-box;
	247	+
	248	+ @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
261	249
262	250	&:not(._list-result) {
263	251	padding-left: 2.75rem;
264	252
265	253	&:before { content: none; }
266	254	}
267		−
268		− &:not(.focus):not(.active):after {
269		− content: '';
270		− position: absolute;
271		− top: -1px;
272		− bottom: -1px;
273		− left: $sidebarWidth;
274		− right: -2px;
275		− margin-left: -1px;
276		− border: 1px solid #bbc1cc;
277		− border-left-width: 0;
278		− border-radius: 0 2px 2px 0;
279		− box-shadow: inset -1px 0 rgba(white, .15), // right inner glow
280		− inset 0 1px rgba(white, .15), // top inner glow
281		− inset 0 -1px rgba(white, .15), // bottom inner glow
282		− 1px 0 rgba(black, .04), // right shadow
283		− 0 1px rgba(black, .04), // bottom shadow
284		− 0 -1px rgba(black, .02); // top shadow
285		−
286		− @media #{$mediumScreen} { left: $sidebarMediumWidth; }
287		− }
288	255	}
289	256
290	257	//
@@ -336,9 +303,8 @@ · 45 unmodified lines
336	303	bottom: 0;
337	304	left: 0;
338	305	width: $sidebarWidth;
339		− background: #e5eaf4;
340		− box-shadow: inset -1px 0 #bbc1cc, // right border
341		− inset -2px 0 rgba(white, .2); // right inner glow
	306	+ background: $sidebarBackground;
	307	+ box-shadow: inset -1px 0 $sidebarBorder;
342	308
343	309	@media #{$mediumScreen} { width: $sidebarMediumWidth; }
344	310
@@ -349,8 +315,8 @@ · 4 unmodified lines
349	315	left: 0;
350	316	right: 1px;
351	317	height: 1em;
352		− background-image: -webkit-linear-gradient(top, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
353		− background-image: linear-gradient(to bottom, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
	318	+ background-image: -webkit-linear-gradient(top, rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
	319	+ background-image: linear-gradient(to bottom, rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
354	320	pointer-events: none;
355	321	}
356	322	}
@@ -384,11 +350,9 @@ · 27 unmodified lines
384	350	._sidebar-footer-save {
385	351	margin-right: 1px;
386	352	font-weight: bold;
387		− background-image: -webkit-linear-gradient(top, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
388		− background-image: linear-gradient(to bottom, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
389		− box-shadow: inset 0 1px white, // top inner glow
390		− inset 0 0 0 1px rgba(white, .2), // inner glow
391		− 0 -1px #c4cfde; // top border
	353	+ background: $noteGreenBackground;
	354	+ box-shadow: inset 0 1px $noteGreenBorder,
	355	+ 1px 0 $noteGreenBorder;
392	356
393	357	&:before { @extend %icon-check; }
394	358	}

assets/stylesheets/global/_base.scss+11−16

@@ -1,7 +1,7 @@
1	1	html {
2	2	height: 100%;
3	3	font-size: 100%;
4		− background: white;
	4	+ background: $contentBackground;
5	5
6	6	@media #{$mediumScreen} { font-size: 93.75%; }
7	7	}
@@ -110,11 +110,10 @@ a > code { color: inherit; } · 102 unmodified lines
110	110	table {
111	111	margin: 1.5em 0;
112	112	background: none;
113		− border: 1px solid #d5d5d5;
	113	+ border: 1px solid $boxBorder;
114	114	border-collapse: separate;
115	115	border-spacing: 0;
116	116	border-radius: 3px;
117		− box-shadow: 0 1px 1px rgba(black, .04);
118	117	}
119	118
120	119	th, td {
@@ -127,17 +126,13 @@ th, td { · 6 unmodified lines
127	126
128	127	th {
129	128	border: 0;
130		− border-bottom: 1px solid #d5d5d5;
	129	+ border-bottom: 1px solid $boxBorder;
131	130	border-radius: 0;
132	131	@extend %heading-box;
133	132
134		− &:empty {
135		− background: none;
136		− box-shadow: none;
137		− }
	133	+ &:empty { background: none; }
138	134
139		− + th { border-left: 1px solid rgba(black, .12); }
140		− + td { border-left: 1px solid #d5d5d5; }
	135	+ + th, + td { border-left: 1px solid $boxBorder; }
141	136
142	137	tr:first-child > &:first-child { border-top-left-radius: 3px; }
143	138	tr:first-child > &:last-child { border-top-right-radius: 3px; }
@@ -148,9 +143,9 @@ th { · 4 unmodified lines
148	143	}
149	144
150	145	td {
151		− border-bottom: 1px solid #e5e5e5;
	146	+ border-bottom: 1px solid $boxBorderLight;
152	147
153		− + td { border-left: 1px solid #e5e5e5; }
	148	+ + td { border-left: 1px solid $boxBorderLight; }
154	149	tr:last-child > & { border-bottom: 0; }
155	150	}
156	151
@@ -162,7 +157,7 @@ input { · 5 unmodified lines
162	157	@extend %border-box;
163	158	}
164	159
165		−input[type="search"] { -webkit-appearance: textfield; }
	160	+input[type="search"] { -webkit-appearance: none; }
166	161
167	162	input[type="search"]::-webkit-search-cancel-button,
168	163	input[type="search"]::-webkit-search-decoration {
@@ -176,6 +171,6 @@ input[type="search"]::-webkit-search-decoration { · 7 unmodified lines
176	171	border: 0 !important;
177	172	}
178	173
179		−::-webkit-input-placeholder { color: #aaa; }
180		−::-moz-placeholder { color: #aaa; opacity: 1; }
181		−:-ms-input-placeholder { color: #aaa; }
	174	+::-webkit-input-placeholder { color: $textColorLighter; }
	175	+::-moz-placeholder { color: $textColorLighter; opacity: 1; }
	176	+:-ms-input-placeholder { color: $textColorLighter; }

assets/stylesheets/global/_classes.scss+23−63

@@ -19,25 +19,15 @@ · 18 unmodified lines
19	19	//
20	20
21	21	%box {
22		− text-shadow: 0 1px rgba(white, .3);
23		− background: #f8f8f8;
24		− border: 1px solid;
25		− border-color: #d5d5d5 #d5d5d5 #d1d1d1;
	22	+ background: $boxBackground;
	23	+ border: 1px solid $boxBorder;
26	24	border-radius: 3px;
27		− box-shadow: inset 0 1px rgba(white, .3), // top inner glow
28		− 0 1px 1px rgba(black, .04); // drop shadow
29	25	}
30	26
31	27	%heading-box {
32		− text-shadow: 0 1px rgba(white, .3);
33		− background: -webkit-linear-gradient(top, #f7f7fa, #f0f0f2);
34		− background: linear-gradient(to bottom, #f7f7fa, #f0f0f2);
35		− border: 1px solid;
36		− border-color: #d5d5d5 #d5d5d5 #d1d1d1;
	28	+ background: $boxHeaderBackground;
	29	+ border: 1px solid $boxBorder;
37	30	border-radius: 3px;
38		− box-shadow: inset 0 1px rgba(white, .3), // top inner glow
39		− inset 0 0 0 1px rgba(white, .2), // inner glow
40		− 0 1px 1px rgba(black, .04); // drop shadow
41	31	}
42	32
43	33	%block-heading {
@@ -56,48 +46,16 @@ · 12 unmodified lines
56	46	%note {
57	47	margin: 1.5rem 0;
58	48	padding: .5rem .875rem;
59		− text-shadow: 0 1px rgba(white, .3);
60		− background: #faf9e2;
61		− border: 1px solid;
62		− border-color: #dddaaa #dddaaa #d7d7a9;
	49	+ background: $noteBackground;
	50	+ border: 1px solid $noteBorder;
63	51	border-radius: 3px;
64		− box-shadow: inset 0 1px rgba(white, .2), // top inner glow
65		− 0 1px 1px rgba(black, .04); // drop shadow
66	52	}
67	53
68		−%note-green {
69		− background: #f1faeb;
70		− border-color: #b3dba8 #b3dba8 #aed7a5;
71		−}
72		−
73		−%note-blue {
74		− background: #f2f2ff;
75		− border-color: #c6cde9 #c6cde9 #c3cce7;
76		−}
77		−
78		−%note-gold {
79		− background: #fff0aa;
80		− border-color: #ddce81 #ddce81 #d9ca7f;
81		−}
82		−
83		−%note-red {
84		− background: #fed5d3;
85		− border-color: #dc7874 #dc7874 #d47474;
86		−}
87		−
88		−//
89		−// Labels
90		−//
91		−
92	54	%label {
93	55	margin: 0 1px;
94		− padding: 0 .3em 1px;
95		− text-shadow: 0 1px rgba(white, .3);
96		− background: #f2f2f2;
97		− border: 1px solid;
98		− border-color: #d2d2d2 #d2d2d2 #ccc;
99		− border-radius: 2px;
100		− box-shadow: 0 1px rgba(black, .04);
	56	+ padding: 1px 4px 2px;
	57	+ background: $labelBackground;
	58	+ border-radius: 3px;
101	59	}
102	60
103	61	%block-label {
@@ -107,27 +65,29 @@ · 3 unmodified lines
107	65	padding-left: .5em;
108	66	padding-right: .5em;
109	67	font-size: inherit;
	68	+ border: 1px solid $boxBorder;
	69	+ border-radius: 2px;
110	70	@extend %label;
111	71	}
112	72
113		−%label-green {
114		− background: #f1faeb;
115		− border-color: #b3dba8 #b3dba8 #aed7a5;
	73	+%note-green, %label-green {
	74	+ background: $noteGreenBackground;
	75	+ border-color: $noteGreenBorder;
116	76	}
117	77
118		−%label-blue {
119		− background: #dbe4ff;
120		− border-color: #a8a9e2;
	78	+%note-blue, %label-blue {
	79	+ background: $noteBlueBackground;
	80	+ border-color: $noteBlueBorder;
121	81	}
122	82
123		−%label-yellow {
124		− background: #ffdfb2;
125		− border-color: #c2a16f;
	83	+%note-orange, %label-orange {
	84	+ background: $noteOrangeBackground;
	85	+ border-color: $noteOrangeBorder;
126	86	}
127	87
128		−%label-red {
129		− background: #fed5d3;
130		− border-color: #dc7874;
	88	+%note-red, %label-red {
	89	+ background: $noteRedBackground;
	90	+ border-color: $noteRedBorder;
131	91	}
132	92
133	93	//

assets/stylesheets/global/_variables.scss+66−8

@@ -1,22 +1,80 @@
1	1	$baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
2	2	$monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace;
3	3
4		−$textColor: #39393e;
5		−$textColorLight: #6b6f78;
6		−$textColorLighter: #9498a6;
	4	+$headerHeight: 3rem;
	5	+$sidebarWidth: 18rem;
	6	+$sidebarMediumWidth: 16rem;
	7	+
	8	+$contentBackground: #fff;
	9	+
	10	+$textColor: #333;
	11	+$textColorLight: #666;
	12	+$textColorLighter: #999;
	13	+
	14	+$inputFocusBorder: #35b5f4;
	15	+
	16	+$focusBackground: #e5e5e5;
	17	+$focusBorder: #d4d4d4;
	18	+$focusText: #000;
	19	+
	20	+$loadingText: #e6e6e6;
	21	+$splashText: #ddd;
	22	+$promoText: #bbb;
	23	+
	24	+$selectionBackground: #398df0;
	25	+$selectionBorder: #196fc2;
	26	+$selectionText: #fff;
	27	+
	28	+$highlightBackground: #fffdcd;
7	29
8	30	$linkColor: #0082c6;
9	31	$linkColorHover: #0072c5;
10	32
11		−$headerHeight: 3rem;
	33	+$headerBackground: #f0f0f0;
	34	+$headerBorder: #d9d9d9;
12	35
13		−$sidebarWidth: 18rem;
14		−$sidebarMediumWidth: 16rem;
	36	+$sidebarBackground: #f9f9f9;
	37	+$sidebarBorder: #e3e3e3;
	38	+
	39	+$scrollbarColor: #d2d2d2;
	40	+$scrollbarColorHover: #aaa;
	41	+
	42	+$pathBackground: $sidebarBackground;
	43	+$pathBorder: $sidebarBorder;
	44	+
	45	+$noticeBackground: #faf9e2;
	46	+$noticeBorder: #e2e2c1;
	47	+
	48	+$boxBackground: #fafafa;
	49	+$boxBorder: #d8d8d8;
	50	+$boxBorderLight: #e5e5e5;
	51	+$boxHeaderBackground: #f5f5f5;
	52	+
	53	+$noteBackground: #f8f8dd;
	54	+$noteBorder: #d3d952;
	55	+
	56	+$noteGreenBackground: #e7f8e1;
	57	+$noteGreenBorder: #89da70;
	58	+
	59	+$noteBlueBackground: #d4f3fd;
	60	+$noteBlueBorder: #94bbeb;
	61	+
	62	+$noteOrangeBackground: #fbe6d1;
	63	+$noteOrangeBorder: #ec8b01;
	64	+
	65	+$noteRedBackground: #fed5d3;
	66	+$noteRedBorder: #dc7874;
	67	+
	68	+$labelBackground: #f4f4f4;
	69	+
	70	+$notifBackground: rgba(#333, .85);
	71	+$notifColor: #fff;
	72	+$notifColorLight: #bbb;
15	73
16	74	$mediumScreen: '(max-width: 800px)';
17	75
18		−$headerZ: 1;
	76	+$contentZ: 1;
19	77	$sidebarZ: 2;
20		−$contentZ: 3;
	78	+$headerZ: 3;
21	79	$noticeZ: 4;
22	80	$hoverZ: 5;

assets/stylesheets/pages/_angular.scss+1−1

@@ -30,7 +30,7 @@ · 29 unmodified lines
30	30	line-height: 1.7rem;
31	31	padding-left: 1em;
32	32	font-size: .875rem;
33		− background: white;
	33	+ background: $contentBackground;
34	34	}
35	35
36	36	.defs {

assets/stylesheets/pages/_c.scss+1−2

@@ -9,7 +9,6 @@ · 8 unmodified lines
9	9	line-height: inherit;
10	10	background: none;
11	11	border: 0;
12		− box-shadow: none;
13	12	}
14	13
15	14	.t-lines > span { display: block; } // numeric/fenv, string/byte, etc.
@@ -30,7 +29,7 @@ · 14 unmodified lines
30	29	margin: 1rem 0;
31	30	padding: .375rem;
32	31	font-size: .75rem;
33		− border: 1px solid #ccc;
	32	+ border: 1px solid $boxBorder;
34	33	border-radius: 2px;
35	34	}
36	35	}

assets/stylesheets/pages/_maxcdn.scss+3−3

@@ -19,7 +19,7 @@ · 18 unmodified lines
19	19	height: 2rem;
20	20	padding: 0;
21	21	list-style: none;
22		− border-bottom: 1px solid #ddd;
	22	+ border-bottom: 1px solid $boxBorder;
23	23
24	24	> li {
25	25	float: left;
@@ -37,8 +37,8 @@ · 11 unmodified lines
37	37	&.active > a {
38	38	color: $textColor;
39	39	text-decoration: none;
40		− background: white;
41		− border-color: #ddd #ddd transparent;
	40	+ background: $contentBackground;
	41	+ border-color: $boxBorder $boxBorder transparent;
42	42	cursor: default;
43	43	}
44	44	}

assets/stylesheets/pages/_mdn.scss+1−1

@@ -55,7 +55,7 @@ · 54 unmodified lines
55	55	}
56	56
57	57	.deprecated, .obsolete { @extend %label-red; }
58		− .nonStandard, .projectSpecific, .experimental { @extend %label-yellow; }
	58	+ .nonStandard, .projectSpecific, .experimental { @extend %label-orange; }
59	59
60	60	.htmlelt,
61	61	.cssprop {

assets/stylesheets/pages/_node.scss+1−1

@@ -1,6 +1,6 @@
1	1	._node {
2	2	.api_stability_0, .api_stability_1 { @extend %note, %note-red; }
3		− .api_stability_2 { @extend %note, %note-gold; }
	3	+ .api_stability_2 { @extend %note; }
4	4	.api_stability_3, .api_stability_4 { @extend %note, %note-green; }
5	5	.api_stability_5 { @extend %note, %note-blue; }
6	6

assets/stylesheets/pages/_rdoc.scss+2−2

@@ -38,8 +38,8 @@ · 37 unmodified lines
38	38	top: 0;
39	39	left: -1em;
40	40	right: 0;
41		− background: rgba(white, .95);
42		− box-shadow: 0 1em 1em 1em white;
	41	+ background: rgba($contentBackground, .95);
	42	+ box-shadow: 0 1em 1em 1em $contentBackground;
43	43
44	44	> pre { margin: 0; }
45	45	}

assets/stylesheets/pages/_yii.scss+1−1

@@ -17,7 +17,7 @@ · 16 unmodified lines
17	17	}
18	18
19	19	.summaryTable td:first-child[rowspan] {
20		− border-right: 1px solid #e5e5e5;
	20	+ border-right: 1px solid $boxBorderLight;
21	21
22	22	+ td { border-left: 0; }
23	23	}

public/icons/ui/home/16.png+0−0

Binary file not shown.

public/icons/ui/home/16@2x.png+0−0

Binary file not shown.

public/icons/ui/menu/16.png+0−0

Binary file not shown.

public/icons/ui/menu/16@2x.png+0−0

Binary file not shown.