Difference between revisions of "Team:ZJU-China/interLab/CSS"

Revision as of 14:50, 19 July 2018 (view source) LJY (Talk | contribs) (Created page with "* { box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: auto; } body { padding: 2em 2em 2em 17em; font-size: 16px; line-height: 1.6; font...")		Revision as of 15:00, 19 July 2018 (view source) LJY (Talk | contribs) Newer edit →
Line 42:		Line 42:
	top: 0;		top: 0;
	left: 0;		left: 0;
−	width: 100%;	+	width: 100% !important;
−	height: 100%;	+	height: 100% !important;
	z-index: -1; }		z-index: -1; }
	.toc-marker path {		.toc-marker path {
Line 77:		Line 77:
	font-size: 14px; } }		font-size: 14px; } }
−	/**
−	* 1. Change the default font family in all browsers (opinionated).
−	* 2. Correct the line height in all browsers.
−	* 3. Prevent adjustments of font size after orientation changes in
−	*    IE on Windows Phone and in iOS.
−	*/
−	/* Document
−	========================================================================== */
	html {		html {
Line 94:		Line 86:
	}		}
−	/* Sections
−	========================================================================== */
−	/**
−	* Remove the margin in all browsers (opinionated).
−	*/
	body {		body {
Line 105:		Line 92:
	}		}
−	/**	+
−	* Add the correct display in IE 9-.	+
−	*/	+
	article,		article,
Line 117:		Line 102:
	display: block;		display: block;
	}		}
−
−	/**
−	* Correct the font size and margin on `h1` elements within `section` and
−	* `article` contexts in Chrome, Firefox, and Safari.
−	*/
	h1 {		h1 {
Line 127:		Line 107:
	margin: 0.67em 0;		margin: 0.67em 0;
	}		}
−
−	/* Grouping content
−	========================================================================== */
−
−	/**
−	* Add the correct display in IE 9-.
−	* 1. Add the correct display in IE.
−	*/
	figcaption,		figcaption,
Line 141:		Line 113:
	display: block;		display: block;
	}		}
−
−	/**
−	* Add the correct margin in IE 8.
−	*/
	figure {		figure {
Line 150:		Line 118:
	}		}
−	/**	+
−	* 1. Add the correct box sizing in Firefox.	+
−	* 2. Show the overflow in Edge and IE.	+
−	*/	+
	hr {		hr {
Line 161:		Line 126:
	}		}
−	/**
−	* 1. Correct the inheritance and scaling of font size in all browsers.
−	* 2. Correct the odd `em` font sizing in all browsers.
−	*/
	pre {		pre {
Line 171:		Line 132:
	}		}
−	/* Text-level semantics
−	========================================================================== */
−	/**
−	* 1. Remove the gray background on active links in IE 10.
−	* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
−	*/
	a {		a {
Line 184:		Line 139:
	}		}
−	/**
−	* Remove the outline on focused links when they are also active or hovered
−	* in all browsers (opinionated).
−	*/
	a:active,		a:active,
Line 194:		Line 145:
	}		}
−	/**	+
−	* 1. Remove the bottom border in Firefox 39-.	+
−	* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.	+
−	*/	+
	abbr[title] {		abbr[title] {
Line 205:		Line 153:
	}		}
−	/**
−	* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
−	*/
	b,		b,
Line 214:		Line 159:
	}		}
−	/**	+
−	* Add the correct font weight in Chrome, Edge, and Safari.	+
−	*/	+
	b,		b,
Line 223:		Line 166:
	}		}
−	/**	+
−	* 1. Correct the inheritance and scaling of font size in all browsers.	+
−	* 2. Correct the odd `em` font sizing in all browsers.	+
−	*/	+
	code,		code,
Line 235:		Line 175:
	}		}
−	/**	+
−	* Add the correct font style in Android 4.3-.	+
−	*/	+
	dfn {		dfn {
Line 243:		Line 181:
	}		}
−	/**	+
−	* Add the correct background and color in IE 9-.	+
−	*/	+
	mark {		mark {
Line 252:		Line 188:
	}		}
−	/**	+
−	* Add the correct font size in all browsers.	+
−	*/	+
	small {		small {
Line 260:		Line 194:
	}		}
−	/**
−	* Prevent `sub` and `sup` elements from affecting the line height in
−	* all browsers.
−	*/
	sub,		sub,
Line 281:		Line 211:
	}		}
−	/* Embedded content
−	========================================================================== */
−	/**
−	* Add the correct display in IE 9-.
−	*/
	audio,		audio,
Line 293:		Line 218:
	}		}
−	/**	+
−	* Add the correct display in iOS 4-7.	+
−	*/	+
	audio:not([controls]) {		audio:not([controls]) {
Line 302:		Line 225:
	}		}
−	/**	+
−	* Remove the border on images inside links in IE 10-.	+
−	*/	+
	img {		img {
Line 310:		Line 231:
	}		}
−	/**
−	* Hide the overflow in IE.
−	*/
	svg:not(:root) {		svg:not(:root) {
Line 318:		Line 236:
	}		}
−	/* Forms
−	========================================================================== */
−
−	/**
−	* 1. Change the font styles in all browsers (opinionated).
−	* 2. Remove the margin in Firefox and Safari.
−	*/
	button,		button,
Line 336:		Line 247:
	margin: 0; /* 2 */		margin: 0; /* 2 */
	}		}
−
−	/**
−	* Show the overflow in IE.
−	* 1. Show the overflow in Edge.
−	*/
	button,		button,
Line 347:		Line 253:
	}		}
−	/**	+
−	* Remove the inheritance of text transform in Edge, Firefox, and IE.	+
−	* 1. Remove the inheritance of text transform in Firefox.	+
−	*/	+
	button,		button,
Line 357:		Line 260:
	}		}
−	/**	+
−	* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`	+
−	*    controls in Android 4.	+
−	* 2. Correct the inability to style clickable types in iOS and Safari.	+
−	*/	+
	button,		button,
Line 369:		Line 268:
	-webkit-appearance: button; /* 2 */		-webkit-appearance: button; /* 2 */
	}		}
−
−	/**
−	* Remove the inner border and padding in Firefox.
−	*/
	button::-moz-focus-inner,		button::-moz-focus-inner,
Line 382:		Line 277:
	}		}
−	/**
−	* Restore the focus styles unset by the previous rule.
−	*/
	button:-moz-focusring,		button:-moz-focusring,
Line 392:		Line 284:
	outline: 1px dotted ButtonText;		outline: 1px dotted ButtonText;
	}		}
−
−	/**
−	* Change the border, margin, and padding in all browsers (opinionated).
−	*/
	fieldset {		fieldset {
Line 403:		Line 291:
	}		}
−	/**	+
−	* 1. Correct the text wrapping in Edge and IE.	+
−	* 2. Correct the color inheritance from `fieldset` elements in IE.	+
−	* 3. Remove the padding so developers are not caught out when they zero out	+
−	*    `fieldset` elements in all browsers.	+
−	*/	+
	legend {		legend {
Line 419:		Line 302:
	}		}
−	/**
−	* 1. Add the correct display in IE 9-.
−	* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
−	*/
	progress {		progress {
Line 429:		Line 308:
	}		}
−	/**
−	* Remove the default vertical scrollbar in IE.
−	*/
	textarea {		textarea {
	overflow: auto;		overflow: auto;
	}		}
−
−	/**
−	* 1. Add the correct box sizing in IE 10-.
−	* 2. Remove the padding in IE 10-.
−	*/
	[type="checkbox"],		[type="checkbox"],
Line 447:		Line 318:
	padding: 0; /* 2 */		padding: 0; /* 2 */
	}		}
−
−	/**
−	* Correct the cursor style of increment and decrement buttons in Chrome.
−	*/
	[type="number"]::-webkit-inner-spin-button,		[type="number"]::-webkit-inner-spin-button,
Line 456:		Line 323:
	height: auto;		height: auto;
	}		}
−
−	/**
−	* 1. Correct the odd appearance in Chrome and Safari.
−	* 2. Correct the outline style in Safari.
−	*/
	[type="search"] {		[type="search"] {
Line 466:		Line 328:
	outline-offset: -2px; /* 2 */		outline-offset: -2px; /* 2 */
	}		}
−
−	/**
−	* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
−	*/
	[type="search"]::-webkit-search-cancel-button,		[type="search"]::-webkit-search-cancel-button,
Line 475:		Line 333:
	-webkit-appearance: none;		-webkit-appearance: none;
	}		}
−
−	/**
−	* 1. Correct the inability to style clickable types in iOS and Safari.
−	* 2. Change font properties to `inherit` in Safari.
−	*/
−
	::-webkit-file-upload-button {		::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */		-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */		font: inherit; /* 2 */
	}		}
−
−	/* Interactive
−	========================================================================== */
−
−	/*
−	* Add the correct display in IE 9-.
−	* 1. Add the correct display in Edge, IE, and Firefox.
−	*/
	details, /* 1 */		details, /* 1 */
Line 499:		Line 343:
	}		}
−	/*
−	* Add the correct display in all browsers.
−	*/
	summary {		summary {
	display: list-item;		display: list-item;
	}		}
−
−	/* Scripting
−	========================================================================== */
−
−	/**
−	* Add the correct display in IE 9-.
−	*/
	canvas {		canvas {
	display: inline-block;		display: inline-block;
	}		}
−
−	/**
−	* Add the correct display in IE.
−	*/
	template {		template {
Line 526:		Line 356:
	}		}
−	/* Hidden
−	========================================================================== */
−
−	/**
−	* Add the correct display in IE 10-.
−	*/
	[hidden] {		[hidden] {
	display: none;		display: none;
	}		}

---

Revision as of 15:00, 19 July 2018

• {

 box-sizing: border-box; }

body {

 width: 100vw;
 height: 100vh;
 overflow: auto; }

body {

 padding: 2em 2em 2em 17em;
 font-size: 16px;
 line-height: 1.6;
 font-family: 'Roboto', sans-serif; }

.toc {

 position: fixed;
 left: 3em;
 top: 5em;
 padding: 1em;
 width: 14em;
 line-height: 2; }
 .toc ul {
   list-style: none;
   padding: 0;
   margin: 0; }
 .toc ul ul {
   padding-left: 2em; }
 .toc li a {
   display: inline-block;
   color: #aaa;
   text-decoration: none;
   -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
           transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
 .toc li.visible > a {
   color: #111;
   -webkit-transform: translate(5px);
       -ms-transform: translate(5px);
           transform: translate(5px); }

.toc-marker {

 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 z-index: -1; }
 .toc-marker path {
   -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease; }

.contents {

 padding: 1em;
 max-width: 800px;
 font-size: 1.2em;
 font-family: 'Frank Ruhl Libre', sans-serif; }
 .contents img {
   max-width: 100%; }
 .contents .code-block {
   white-space: pre;
   overflow: auto;
   max-width: 100%; }
   .contents .code-block code {
     display: block;
     background-color: #f9f9f9;
     padding: 10px; }
 .contents .code-inline {
   background-color: #f9f9f9;
   padding: 4px; }
 .contents h2

h3 {

   padding-top: 1em; }
 .contents h2 {
   margin-top: 1.2em; }

@media screen and (max-width: 1200px) {

 body {
   font-size: 14px; } }

html {

 font-family: sans-serif; /* 1 */
 line-height: 1.15; /* 2 */
 -ms-text-size-adjust: 100%; /* 3 */
 -webkit-text-size-adjust: 100%; /* 3 */

}

body {

 margin: 0;

}

article, aside, footer, header, nav, section {

 display: block;

}

h1 {

 font-size: 2em;
 margin: 0.67em 0;

}

figcaption, figure, main { /* 1 */

 display: block;

}

figure {

 margin: 1em 40px;

}

hr {

 box-sizing: content-box; /* 1 */
 height: 0; /* 1 */
 overflow: visible; /* 2 */

}

pre {

 font-family: monospace, monospace; /* 1 */
 font-size: 1em; /* 2 */

}

a {

 background-color: transparent; /* 1 */
 -webkit-text-decoration-skip: objects; /* 2 */

}

a:active, a:hover {

 outline-width: 0;

}

abbr[title] {

 border-bottom: none; /* 1 */
 text-decoration: underline; /* 2 */
 text-decoration: underline dotted; /* 2 */

}

b, strong {

 font-weight: inherit;

}

b, strong {

 font-weight: bolder;

}

code, kbd, samp {

 font-family: monospace, monospace; /* 1 */
 font-size: 1em; /* 2 */

}

dfn {

 font-style: italic;

}

mark {

 background-color: #ff0;
 color: #000;

}

small {

 font-size: 80%;

}

sub, sup {

 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;

}

sub {

 bottom: -0.25em;

}

sup {

 top: -0.5em;

}

audio, video {

 display: inline-block;

}

audio:not([controls]) {

 display: none;
 height: 0;

}

img {

 border-style: none;

}

svg:not(:root) {

 overflow: hidden;

}

button, input, optgroup, select, textarea {

 font-family: sans-serif; /* 1 */
 font-size: 100%; /* 1 */
 line-height: 1.15; /* 1 */
 margin: 0; /* 2 */

}

button, input { /* 1 */

 overflow: visible;

}

button, select { /* 1 */

 text-transform: none;

}

button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] {

 -webkit-appearance: button; /* 2 */

}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {

 border-style: none;
 padding: 0;

}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {

 outline: 1px dotted ButtonText;

}

fieldset {

 border: 1px solid #c0c0c0;
 margin: 0 2px;
 padding: 0.35em 0.625em 0.75em;

}

legend {

 box-sizing: border-box; /* 1 */
 color: inherit; /* 2 */
 display: table; /* 1 */
 max-width: 100%; /* 1 */
 padding: 0; /* 3 */
 white-space: normal; /* 1 */

}

progress {

 display: inline-block; /* 1 */
 vertical-align: baseline; /* 2 */

}

textarea {

 overflow: auto;

}

[type="checkbox"], [type="radio"] {

 box-sizing: border-box; /* 1 */
 padding: 0; /* 2 */

}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {

 height: auto;

}

[type="search"] {

 -webkit-appearance: textfield; /* 1 */
 outline-offset: -2px; /* 2 */

}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {

 -webkit-appearance: none;

}

-webkit-file-upload-button {

 -webkit-appearance: button; /* 1 */
 font: inherit; /* 2 */

}

details, /* 1 */ menu {

 display: block;

}

summary {

 display: list-item;

}

canvas {

 display: inline-block;

}

template {

 display: none;

}

[hidden] {

 display: none;

}