Difference between revisions of "Template:Lanzhou/CSS"

Line 1: Line 1:
 
/* Clear the default wiki settings */
 
/* Clear the default wiki settings */
#home_logo, #sideMenu { display:none; }
+
#home_logo, #sideMenu { display:none; }
#sideMenu, #top_title, .patrollink  {display:none;}
+
#sideMenu, #top_title, .patrollink  {display:none;}
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
body {background-color:white; }
+
body {background-color:white; }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
html, body {height: 100%;}
+
html, body {height: 100%;}
#globalWrapper {height: 100%;}
+
#globalWrapper {height: 100%;}
 +
#top_menu_inside{animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(255, 255, 255); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(200, 200, 200); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(200, 200, 200); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: 0px; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(255, 255, 255); content: ; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: arial, sans-serif; font-kerning: auto; font-size: 12px; font-stretch: normal; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; height: 14px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: normal; left: 0px; letter-spacing: normal; line-height: normal; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 20px; margin-right: 731.2px; margin-top: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(255, 255, 255); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px; pointer-events: auto; position: relative; resize: none; right: 0px; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(255, 255, 255); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(255, 255, 255); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: 0px; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 960px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(255, 255, 255); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: normal; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: "en"; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 480px 7px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 480px 7px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(255, 255, 255);}
 +
  
 
/* fallback */
 
/* fallback */

Revision as of 08:34, 28 August 2017

/* Clear the default wiki settings */

  1. home_logo, #sideMenu { display:none; }
  2. sideMenu, #top_title, .patrollink {display:none;}
  3. content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}

body {background-color:white; }

  1. bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

html, body {height: 100%;}

  1. globalWrapper {height: 100%;}

#top_menu_inside{animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(255, 255, 255); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(200, 200, 200); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(200, 200, 200); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: 0px; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(255, 255, 255); content: ; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: arial, sans-serif; font-kerning: auto; font-size: 12px; font-stretch: normal; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; height: 14px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: normal; left: 0px; letter-spacing: normal; line-height: normal; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 20px; margin-right: 731.2px; margin-top: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(255, 255, 255); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px; pointer-events: auto; position: relative; resize: none; right: 0px; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(255, 255, 255); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(255, 255, 255); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-overflow: clip; text-transform: none; top: 0px; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 960px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(255, 255, 255); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: normal; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: "en"; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 480px 7px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 480px 7px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(255, 255, 255);}


/* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://static.igem.org/mediawiki/2017/d/d5/Lanzhou_wiki_MaterialIcons-Regular.woff) format('woff'); }

.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

/* Main */ .mdc-toolbar--fixed{ top: 16px; } .surface{ display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; padding: 1rem; cursor: pointer; user-select: none; -webkit-user-select: none; } /* General */

  • , :after, :before{

box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section{ display: block; } a, a:active, a:hover, a:link, a:visited{ font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: .875rem; font-weight: 400; letter-spacing: .04em; line-height: 1.25rem; color: rgba(0, 0, 0, 0.87); font-family: Roboto Mono; } nav ul{ list-style-type: none; } li{ list-style: none; padding-bottom: 8px; } body{ display: -webkit-box; display: -ms-flexbox; /* display: flex; */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: calc(100vh + 192px); }

  1. to-top{

display: none; position: fixed; bottom: 1rem; right: 1rem; } .page__content, .footer__content{ max-width: 1312px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } /* Navigation */ .mdc-drawer-scroll-lock{ overflow: initial; } .mdc-temporary-drawer__header .logo{ display: block; width: 100px; height: 100px; margin-right: 12px; border-radius: 100px; } .mdc-temporary-drawer__header .logo-name{ color: white; font-size: 16px; } /* Page */ .page__content{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 150px; } .page__article{ height: auto; max-width: 760px; } .page__drawer{ position: fixed; width: 304px; height: auto; margin-right: 24px; border: 0; } .page__drawer + .page__article, .story{ width: calc(100% - 328px); } .page__article{ position: relative; left: 328px; } .story{ position: initial; left: 0; max-width: initial; } .story-image{ position: initial; } .page__drawer-list{ font-weight: 500; } .page__drawer-list__link{ display: inline-block; padding: 8px 0; } .page__drawer-list__link, .page__drawer-list__link:hover, .page__drawer-list__link:link, .page__drawer-list__link:active, .page__drawer-list__link:visited{ text-decoration: none; } .page__drawer-list__link--active{ color: black; font-weight: 600 !important; border-bottom: 1px black solid; } .page__article__citations{ padding: 0; } .page__article__citation__item{ color: #4F4F4F; } .team-page{ display: block; } .team-cards{ padding: 0; } .team-cards .mdc-card{ max-width: 21.875rem; } /* Footer */ .footer{ font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: .875rem; font-weight: 400; letter-spacing: .04em; line-height: 1.25rem; background: #fafafa; height: 192px; margin-top: 144px; } .footer ul{ padding: 0; } .footer__content{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 32px; height: 100%; } .footer__logo{ display: inline-block; font-size: 1.5em; font-weight: 400; opacity: .5; } .footer__links{ display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; left: -8px; list-style-type: none; margin-left: 0; } .footer__links li{ margin-left: 24px; } .footer__links li:first-child{ margin-left: 0px; } .footer__link{ font-family: Roboto, sans-serif; color: rgba(0, 0, 0, 0.87); padding: 8px; text-decoration: none; } .footer__link:active, .footer__link:hover, .footer__link:link, .footer__link:visited{ font-family: Roboto; } .footer__link-container--right{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; } .footer__made-with-desktop{ display: initial; } .footer__made-with-mobile{ display: none; } /* Media */ @media (min-width: 1200px){ #to-top{ bottom: 3rem; right: 5rem; } } @media (max-width: 1312px) and (min-width: 721px){ .page__content, .footer__content{ max-width: 1400px; width: 100%; padding-left: 60px; padding-right: 60px; } } @media (max-width: 720px){ .footer{ height: 114px; margin-top: 120px; } .footer__content{ padding-bottom: 12px; padding-top: 24px; } .footer__link{ font-size: .75rem; } .footer__link:active, .footer__link:hover, .footer__link:link, .footer__link:visited{ font-size: .75rem; } .footer__made-with-desktop{ display: none; } .footer__made-with-mobile{ display: inline-block; } }