Difference between revisions of "Team:Tongji Software/vendors css"

(Created page with "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;...")
 
 
Line 1: Line 1:
−
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}}
+
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
 +
    }
 +
}

Latest revision as of 07:46, 2 October 2019

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
   }

}