Team:Tongji Software/vendors css
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block
}
audio, canvas, video {
display: inline-block
}
audio:not([controls]) {
display: none; height: 0
}
[hidden] {
display: none
}
html {
font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%
}
body {
margin: 0
}
a:focus {
outline: thin dotted
}
a:active, a:hover {
outline: 0
}
h1 {
font-size: 2em; margin: .67em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b, strong {
font-weight: 700
}
dfn {
font-style: italic
}
hr {
box-sizing: content-box; height: 0
}
mark {
background: #ff0; color: #000
}
code, kbd, pre, samp {
font-family: monospace, serif; font-size: 1em
}
pre {
white-space: pre-wrap
}
q {
quotes: "\201C" "\201D" "\2018" "\2019"
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
fieldset {
border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em
}
legend {
border: 0; padding: 0
}
button, input, select, textarea {
font-family: inherit; font-size: 100%; margin: 0
}
button, input {
line-height: normal
}
button, select {
text-transform: none
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button; cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box; padding: 0
}
input[type=search] {
-webkit-appearance: textfield; box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0; padding: 0
}
textarea {
overflow: auto; vertical-align: top
}
table {
border-collapse: collapse; border-spacing: 0
}
- , :after, :before {
box-sizing: border-box
}
- root {
font-size: 16px
}
.frame, body, html, main {
width: 100%; height: 100%
}
body {
position: fixed; top: 0; left: 0; --color-text: #fff; --color-bg: #0e0e0f; --color-link: #0f51e4; --color-link-hover: #ebd944; color: var(--color-text); background-color: var(--color-bg); font-family: Futura, futura-pt, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
}
a {
display: inline-block; text-decoration: none; color: var(--color-link); outline: none; transition: color .2s, transform .2s; transform: translate(0)
}
a:focus, a:hover {
color: var(--color-link-hover); outline: none; transform: translateY(-2px)
}
.message {
background: var(--color-text); color: var(--color-bg); padding: 1rem
}
.frame, .message {
text-align: center
}
.frame {
padding: 3rem 5vw; position: relative; z-index: 1000
}
.frame__title {
font-size: 1rem; margin: 0 0 1rem; font-weight: 400
}
.frame__links {
display: inline
}
.frame a {
text-transform: lowercase
}
.frame__demos a:not(:last-child), .frame__github, .frame__links a:not(:last-child) {
margin-right: 1rem
}
.frame__demos {
width: 100%; padding: 0 2.5rem; margin: 1rem 0; position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%)
}
.frame__demo {
margin-top: 1rem
}
.frame__demo--current, .frame__demo:hover {
color: var(--color-text)
}
.frame__demo--current {
border-bottom: 2px solid var(--color-text); transform: none
}
.content {
display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100vw; height: calc(100vh - 13rem); position: relative; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: center; align-items: center
}
.overlay {
position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background-color: #0e0e0f; opacity: 1
}
@media screen and (min-width: 53em) {
.message {
display: none
}
.frame {
position: fixed;
text-align: left;
z-index: 10000;
top: 0;
left: 0;
display: -ms-grid;
display: grid;
-ms-flex-line-pack: justify;
align-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 3rem;
pointer-events: none;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
-ms-grid-rows: auto auto auto;
grid-template-rows: auto auto auto;
grid-template-areas: "title links" "... ..." "github demos"
}
.frame__title-wrap {
grid-area: title;
display: -ms-flexbox;
display: flex
}
.frame__title {
margin: 0
}
.frame__tagline {
position: relative;
margin: 0 0 0 4rem;
padding: 0 0 0 1rem
}
.frame__tagline:before {
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 1px;
width: 3rem;
background: var(--color-text)
}
.frame__github {
grid-area: github;
justify-self: start;
margin: 0
}
.frame__demos {
position: static;
left: auto;
width: auto;
transform: none;
margin: 0;
padding: 0;
grid-area: demos;
justify-self: end
}
.frame__demo {
margin-top: 0
}
.frame__links {
grid-area: links;
padding: 0;
justify-self: end
}
.frame a {
pointer-events: auto
}
.content {
height: 100vh;
-ms-flex-pack: center;
justify-content: center
}
}