|
|
| Line 1: |
Line 1: |
| | + | |
| | {{CAU_China/CSS/Top}} | | {{CAU_China/CSS/Top}} |
| | + | |
| | + | |
| | + | |
| | + | |
| | <html> | | <html> |
| | | | |
| Line 14: |
Line 19: |
| | | | |
| | </script> | | </script> |
| | + | |
| | <style> | | <style> |
| | + | .customelementM5B{ |
| | + | display:none; |
| | + | } |
| | | | |
| − | .pictureTitle{
| + | table{ |
| − | background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)), url("");
| + | float: none!important; |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | background-position:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* HTML5 display-role reset for older browsers */
| + | |
| − | article, aside, details, figcaption, figure,
| + | |
| − | footer, header, hgroup, menu, nav, section, main {
| + | |
| − | display: block;
| + | |
| | } | | } |
| − | body {
| |
| − | line-height: 1;
| |
| − | }
| |
| − | ol, ul {
| |
| − | list-style: none;
| |
| − | }
| |
| − | blockquote, q {
| |
| − | quotes: none;
| |
| − | }
| |
| − | blockquote:before, blockquote:after,
| |
| − | q:before, q:after {
| |
| − | content: '';
| |
| − | content: none;
| |
| − | }
| |
| − | table {
| |
| − | border-collapse: collapse;
| |
| − | border-spacing: 0;
| |
| − | }
| |
| − | ul{
| |
| − | line-height: 1em;
| |
| − | }
| |
| − | /* style css */
| |
| − | /* --------------------------------
| |
| | | | |
| − | Primary style
| |
| | | | |
| − | -------------------------------- */
| + | .customHeader{ |
| − | *, *::after, *::before {
| + | border-bottom: none; |
| − | box-sizing: border-box;
| + | |
| | } | | } |
| | | | |
| − | /* --------------------------------
| + | #HQ_page table{ |
| − | | + | margin: 1%; |
| − | Main Components
| + | |
| − | | + | |
| − | -------------------------------- */
| + | |
| − | .cd-schedule {
| + | |
| − | position: relative;
| + | |
| − | margin: 2em 0;
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule::before {
| + | h5{ |
| − | /* never visible - this is used in js to check the current MQ */
| + | text-align: left; |
| − | content: 'mobile';
| + | |
| − | display: none;
| + | |
| | } | | } |
| | | | |
| − | @media only screen and (min-width: 800px) {
| + | /* Weekdays (Mon-Sun) */ |
| − | .cd-schedule {
| + | .weekdays { |
| − | width: 90%; | + | margin: 0; |
| − | max-width: 1400px; | + | padding: 10px 8%; |
| − | margin: 2em auto; | + | background-color:#ddd; |
| − | }
| + | text-align: center; /* new */ |
| − | .cd-schedule::after {
| + | display: grid; |
| − | clear: both;
| + | grid-template-columns: auto auto auto auto auto auto auto; |
| − | content: ""; | + | |
| − | display: block; | + | |
| − | }
| + | |
| − | .cd-schedule::before {
| + | |
| − | content: 'desktop';
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .timeline { | + | .weekdays .weekday { |
| − | display: none;
| + | width: 12%; |
| | + | color: black; |
| | + | text-align: center; |
| | + | margin: auto; |
| | } | | } |
| − | | + | .monthContainer { |
| − | @media only screen and (min-width: 800px) {
| + | padding: 10px 8%; |
| − | .cd-schedule .timeline {
| + | background: #eee; |
| − | display: block; | + | margin: 0; |
| − | position: absolute; | + | |
| − | top: 0; | + | |
| − | left: 0;
| + | |
| − | height: 100%;
| + | |
| | width: 100%; | | width: 100%; |
| − | padding-top: 50px; | + | box-sizing: border-box; |
| − | }
| + | display: grid; |
| − | .cd-schedule .timeline li {
| + | grid-template-columns: auto auto auto auto auto auto auto; |
| − | width: 100%;
| + | |
| − | position: relative; | + | |
| − | height: 50px; | + | |
| − | }
| + | |
| − | .cd-schedule .timeline li::after {
| + | |
| − | /* this is used to create the table horizontal lines */
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 1px;
| + | |
| − | background: #EAEAEA;
| + | |
| − | }
| + | |
| − | .cd-schedule .timeline li:last-of-type::after {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .cd-schedule .timeline li span {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | @media only screen and (min-width: 1000px) {
| |
| − | .cd-schedule .timeline li::after {
| |
| − | width: calc(100% - 30px);
| |
| − | left: 70px;
| |
| − | }
| |
| − | .cd-schedule .timeline li span {
| |
| − | display: inline-block;
| |
| − | -webkit-transform: translateY(-50%);
| |
| − | -ms-transform: translateY(-50%);
| |
| − | transform: translateY(-50%);
| |
| − | }
| |
| − | .cd-schedule .timeline li:nth-of-type(2n) span {
| |
| − | display: none;
| |
| − | }
| |
| | } | | } |
| | | | |
| − | .cd-schedule .events { | + | .monthContainer .day { |
| − | position: relative;
| + | width: 100%; |
| − | z-index: 1;
| + | text-align: center; |
| | + | margin-bottom: 5px; |
| | + | font-size:2em; |
| | + | color: #000; |
| | + | border: 1px solid black; |
| | } | | } |
| | | | |
| − | .cd-schedule .events .events-group { | + | .monthContainer .day:hover{ |
| − | margin-bottom: 30px;
| + | background-color: #90EE90; |
| | } | | } |
| | | | |
| − | .cd-schedule .events .top-info { | + | .monthContainer .day.active{ |
| − | width: 100%;
| + | background-color:#77a4ef; |
| − | padding: 0 5%;
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .events .top-info > span { | + | .monthContainer .inactiveDay{ |
| − | display: inline-block;
| + | background-color: lightgrey; |
| − | line-height: 1.2;
| + | width: 100%; |
| − | margin-bottom: 10px;
| + | text-align: center; |
| − | font-weight: bold;
| + | margin-bottom: 5px; |
| | + | font-size:2em; |
| | + | color: #777; |
| | + | border: 1px solid black; |
| | } | | } |
| | | | |
| − | .cd-schedule .events .events-group > ul { | + | .customelementM4B, .customelementM4A, .customelementM5B, .customelementM5A, .customelementM3, .calenderContainer, .navigateArrows{margin:0; padding:30px;text-align:left;} |
| − | position: relative;
| + | |
| − | padding: 0 5%;
| + | |
| − | /* force its children to stay on one line */
| + | |
| − | display: -webkit-box;
| + | |
| − | display: -ms-flexbox;
| + | |
| − | display: flex;
| + | |
| − | overflow-x: scroll;
| + | |
| − | -webkit-overflow-scrolling: touch;
| + | |
| − | margin: 0;
| + | |
| − | } | + | |
| | | | |
| − | .cd-schedule .events .events-group > ul::after {
| |
| − | /* never visible - used to add a right padding to .events-group > ul */
| |
| − | display: inline-block;
| |
| − | content: '-';
| |
| − | width: 1px;
| |
| − | height: 100%;
| |
| − | opacity: 0;
| |
| − | color: transparent;
| |
| − | }
| |
| | | | |
| − | .cd-schedule .events .single-event { | + | .calenderContainer { |
| − | /* force them to stay on one line */
| + | padding: 5%; |
| − | -ms-flex-negative: 0;
| + | margin: 0 5% 0 25vh; |
| − | flex-shrink: 0;
| + | box-sizing: border-box; |
| − | float: left;
| + | color: #000; |
| − | height: 150px;
| + | background-color: white; |
| − | width: 70%;
| + | text-align: justify; |
| − | max-width: 300px;
| + | |
| − | box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
| + | |
| − | margin-right: 20px;
| + | |
| − | -webkit-transition: opacity .2s, background .2s;
| + | |
| − | transition: opacity .2s, background .2s;
| + | |
| − | }
| + | |
| | | | |
| − | .cd-schedule .events .single-event:last-of-type {
| + | overflow: auto; |
| − | margin-right: 5%;
| + | z-index: 5; |
| | } | | } |
| | | | |
| − | .cd-schedule .events .single-event a { | + | .monthHeader { |
| − | display: block;
| + | display: none |
| − | height: 100%;
| + | |
| − | padding: 0.8em;
| + | |
| | } | | } |
| | | | |
| − | @media only screen and (min-width: 550px) {
| + | /* Month header */ |
| − | .cd-schedule .events .single-event {
| + | .month { |
| − | width: 40%;
| + | padding: 70px 25px; |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media only screen and (min-width: 800px) {
| + | |
| − | .cd-schedule .events {
| + | |
| − | float: left; | + | |
| | width: 100%; | | width: 100%; |
| − | }
| + | background: #A4C2F4; |
| − | .cd-schedule .events .events-group {
| + | |
| − | width: 25%; | + | |
| − | float: left;
| + | |
| − | border: 1px solid #EAEAEA;
| + | |
| − | /* reset style */
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .events-group:not(:first-of-type) {
| + | |
| − | border-left-width: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .top-info {
| + | |
| − | /* vertically center its content */
| + | |
| − | display: table;
| + | |
| − | height: 50px;
| + | |
| − | border-bottom: 1px solid #EAEAEA;
| + | |
| − | /* reset style */
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .top-info > span {
| + | |
| − | /* vertically center inside its parent */
| + | |
| − | display: table-cell;
| + | |
| − | vertical-align: middle;
| + | |
| − | padding: 0 .5em;
| + | |
| | text-align: center; | | text-align: center; |
| − | /* reset style */ | + | box-sizing: border-box; |
| − | font-weight: normal;
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .events-group > ul {
| + | |
| − | height: 650px;
| + | |
| − | /* reset style */
| + | |
| − | display: block;
| + | |
| − | overflow: visible;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .events-group > ul::after {
| + | |
| − | clear: both;
| + | |
| − | content: "";
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .events-group > ul::after {
| + | |
| − | /* reset style */
| + | |
| | display: none; | | display: none; |
| − | }
| + | color: black; |
| − | .cd-schedule .events .single-event {
| + | font-size: 2em; |
| − | position: absolute; | + | |
| − | z-index: 3; | + | |
| − | /* top position and height will be set using js */
| + | |
| − | width: calc(100% + 2px);
| + | |
| − | left: -1px;
| + | |
| − | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
| + | |
| − | /* reset style */
| + | |
| − | -ms-flex-negative: 1;
| + | |
| − | flex-shrink: 1;
| + | |
| − | height: auto;
| + | |
| − | max-width: none;
| + | |
| − | margin-right: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .single-event a {
| + | |
| − | padding: 0.2em;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .single-event:last-of-type {
| + | |
| − | /* reset style */
| + | |
| − | margin-right: 0;
| + | |
| − | }
| + | |
| − | .cd-schedule .events .single-event.selected-event {
| + | |
| − | /* the .selected-event class is added when an user select the event */
| + | |
| − | visibility: hidden;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | @media only screen and (min-width: 1000px) {
| |
| − | .cd-schedule .events {
| |
| − | /* 60px is the .timeline element width */
| |
| − | width: calc(100% - 60px);
| |
| − | margin-left: 100px;
| |
| − | }
| |
| − | }
| |
| | | | |
| − | .cd-schedule.loading .events .single-event {
| + | /* Previous button inside month header */ |
| − | /* the class .loading is added by default to the .cd-schedule element
| + | .month .prev { |
| − | it is removed as soon as the single events are placed in the schedule plan (using javascript) */
| + | float: left; |
| − | opacity: 0;
| + | padding-top: 10px; |
| | } | | } |
| | | | |
| − | .cd-schedule .event-name,
| + | /* Next button */ |
| − | .cd-schedule .event-date { | + | .month .next { |
| − | display: block;
| + | float: right; |
| − | color: white;
| + | padding-top: 10px; |
| − | font-weight: bold;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| | } | | } |
| − | | + | /* Style the tab */ |
| − | .cd-schedule .event-name { | + | .anotherWrapper{ |
| − | font-size: 1rem;
| + | position:relative; |
| | + | width:100%; |
| | + | } |
| | + | .tab { |
| | + | margin: 0 5% 0 25vh; |
| | + | width:100%; |
| | + | position:absolute; |
| | + | top:-2.5vw; |
| | + | z-index: 0; |
| | + | height: 2.5vw |
| | } | | } |
| | | | |
| − | .display-4{ | + | /* Style the buttons that are used to open the tab content */ |
| − | font-size: 2rem;
| + | .tab button { |
| | + | background-color: #A4C2F4; |
| | + | width: 15%; |
| | + | height: 100%; |
| | + | margin: 0 2%; |
| | + | float: left; |
| | + | border: none; |
| | + | outline: none; |
| | + | cursor: pointer; |
| | + | padding: 0.5%; |
| | + | transition: 0.3s; |
| | + | font-size: 1vw; |
| | + | z-index: -1; |
| | + | border-radius: 20px 20px 0 0; |
| | + | |
| | } | | } |
| | | | |
| − | @media only screen and (min-width: 800px) {
| + | /* Change background color of buttons on hover */ |
| − | .cd-schedule .event-name {
| + | .tab button:hover { |
| − | font-size: 1rem; | + | background-color: #90EE90; |
| − | }
| + | |
| − | .display-4{
| + | |
| − | font-size: 3.5rem;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .event-date {
| + | /* Create an active/current tablink class */ |
| − | /* they are not included in the the HTML but added using JavScript */
| + | .tab button.active { |
| − | font-size: 1rem;
| + | background-color: #77a4ef; |
| − | opacity: .7;
| + | |
| − | line-height: 1.2;
| + | |
| − | margin-bottom: .2em;
| + | |
| − | display: none;
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-1"],
| |
| − | .cd-schedule [data-event="event-1"] .header-bg {
| |
| − | /* this is used to set a background color for the event and the modal window */
| |
| − | background: rgba(0,203,177,1);
| |
| − | }
| |
| | | | |
| − | .cd-schedule .single-event[data-event="event-1"]:hover { | + | .customelementM5B { |
| − | background: rgba(1,101,224,1);
| + | padding: 50px; |
| | + | margin: 0 5% 0 25vh; |
| | + | box-sizing: border-box; |
| | + | color: #000; |
| | + | background-color: white; |
| | + | height: 100%; |
| | + | text-align: justify; |
| | + | border-right: 15px solid #A4C2F4; |
| | + | border-bottom: 15px solid #A4C2F4; |
| | + | overflow: auto; |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-2"], | + | .navigateArrows{ |
| − | .cd-schedule [data-event="event-2"] .header-bg {
| + | margin: 0 5% 0 25vh; |
| − | background: rgba(213,59,72,1);
| + | box-sizing: border-box; |
| | + | color: black; |
| | + | background-color: #A4C2F4; |
| | + | position: relative; |
| | + | font-size: 1.5vw; |
| | + | line-height: 8vh; |
| | + | height: 8vh; |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-2"]:hover { | + | .navigateArrows .arrowLeft{ |
| − | background: rgba(247,148,77,1);
| + | float: left; |
| | + | padding-left: 2%; |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-3"], | + | .navigateArrows .arrowRight{ |
| − | .cd-schedule [data-event="event-3"] .header-bg {
| + | float: right; |
| − | background: rgba(153, 0, 204,1);
| + | padding-right: 2%; |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-3"]:hover { | + | .navigateArrows a{ |
| − | background: rgba(153, 51, 102,1);
| + | text-decoration: none; |
| | + | color: black; |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-4"], | + | .navigateArrows b{ |
| − | .cd-schedule [data-event="event-4"] .header-bg {
| + | font-weight: 900!important; |
| − | background: #f6b067;
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .single-event[data-event="event-4"]:hover { | + | .InterlabTable{ |
| − | background: #f7bd7f; | + | font-size: 0.7vw; |
| | + | margin: 2%; |
| | + | float: right; |
| | + | box-shadow: 10px 10px 5px grey; |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal { | + | .InterlabTable th, td { |
| − | position: fixed;
| + | text-align: center; |
| − | z-index: 500;
| + | padding: 2px 5px!important; |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | visibility: hidden;
| + | |
| − | /* Force Hardware acceleration */
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | transform: translateZ(0);
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | -ms-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | -webkit-transition: visibility .4s, -webkit-transform .4s;
| + | |
| − | transition: visibility .4s, -webkit-transform .4s;
| + | |
| − | transition: transform .4s, visibility .4s;
| + | |
| − | transition: transform .4s, visibility .4s, -webkit-transform .4s;
| + | |
| − | -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| + | |
| − | transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal .header {
| + | th{ |
| − | position: relative;
| + | background-color: #77a4ef !important; |
| − | height: 70px;
| + | |
| − | /* vertically center its content */
| + | |
| − | display: table;
| + | |
| − | width: 100%;
| + | |
| | } | | } |
| − | | + | .InterlabTable tr:nth-child(even) {background-color: #f2f2f2;} |
| − | .cd-schedule .event-modal .header .content { | + | .InterlabTable{ |
| − | position: relative;
| + | font-size: 0.8vw; |
| − | z-index: 3;
| + | margin: 1%; |
| − | /* vertically center inside its parent */
| + | |
| − | display: table-cell; | + | |
| − | vertical-align: middle;
| + | |
| − | padding: .6em 5%; | + | |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal .body { | + | .url_icon { |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | /* 70px is the .header height */
| + | |
| − | height: calc(100% - 70px);
| + | |
| − | }
| + | |
| | | | |
| − | .cd-schedule .event-modal .event-info {
| + | background: url() center right no-repeat !important; |
| − | position: relative;
| + | height: 13px !important; |
| − | padding: 1em;
| + | padding-right: 15px !important; |
| − | z-index: 2;
| + | |
| − | line-height: 1.4;
| + | |
| − | height: 100%;
| + | |
| − | overflow-x:hidden;
| + | |
| − | overflow-y:auto;
| + | |
| − | }
| + | |
| | | | |
| − | .cd-schedule .event-modal .event-info > div {
| |
| − | overflow: auto;
| |
| − | height: 100%;
| |
| − | padding: 1.4em 5%;
| |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
| |
| − | /* these are the morphing backgrounds - visible on desktop only */
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | }
| |
| | | | |
| − | .cd-schedule .event-modal .body-bg { | + | .customHeader2{ |
| − | z-index: 1;
| + | border-top: 15px solid #A4C2F4; |
| − | background: white;
| + | border-right: 15px solid #A4C2F4; |
| − | -webkit-transform-origin: top left;
| + | border-bottom: 15px solid #A4C2F4; |
| − | -ms-transform-origin: top left;
| + | margin: 0 5% 0 25vh; |
| − | transform-origin: top left;
| + | padding: 0; |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal .header-bg { | + | .customHeader2 img{ |
| − | z-index: 2;
| + | width: 100%; |
| − | -webkit-transform-origin: top center;
| + | |
| − | -ms-transform-origin: top center; | + | |
| − | transform-origin: top center;
| + | |
| | } | | } |
| − | | + | html{ |
| − | .cd-schedule .event-modal .close {
| + | background-color: #eaf4edff; |
| − | /* this is the 'X' icon */
| + | font-family: "PT Sans"; |
| − | position: absolute;
| + | font-weight: normal; |
| − | top: 0;
| + | font-style: normal; |
| − | right: 0;
| + | |
| − | z-index: 3;
| + | |
| − | background: rgba(0, 0, 0, 0.1);
| + | |
| − | /* replace text with icon */
| + | |
| − | color: transparent;
| + | |
| − | white-space: nowrap;
| + | |
| − | text-indent: 100%;
| + | |
| − | height: 70px;
| + | |
| − | width: 70px;
| + | |
| | } | | } |
| | | | |
| − | .cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
| + | body{ |
| − | /* these are the two lines of the 'X' icon */
| + | font-family: "PT Sans"; |
| − | content: '';
| + | font-weight: normal; |
| − | position: absolute;
| + | font-style: normal; |
| − | top: 50%;
| + | font-size: 1em; |
| − | left: 50%;
| + | margin: 14.1vh 0px 0px 0px; |
| − | width: 2px;
| + | background-color: transparent; |
| − | height: 22px;
| + | @charset 'UTF-8' |
| − | background: white;
| + | } |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | } | + | |
| | | | |
| − | .cd-schedule .event-modal .close::before {
| + | /* 测试位置*/ |
| − | -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
| + | |
| − | -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
| + | |
| − | transform: translateX(-50%) translateY(-50%) rotate(45deg);
| + | |
| − | }
| + | |
| | | | |
| − | .cd-schedule .event-modal .close::after {
| |
| − | -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
| |
| − | -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
| |
| − | transform: translateX(-50%) translateY(-50%) rotate(-45deg);
| |
| − | }
| |
| | | | |
| − | .cd-schedule .event-modal .event-date {
| |
| − | display: none;
| |
| − | }
| |
| | | | |
| − | .cd-schedule .event-modal.no-transition {
| |
| − | -webkit-transition: none;
| |
| − | transition: none;
| |
| − | }
| |
| | | | |
| − | .cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
| |
| − | -webkit-transition: none;
| |
| − | transition: none;
| |
| − | }
| |
| − | .cd-schedule .event-modal .event-name {
| |
| − | font-size: 1rem;
| |
| − | }
| |
| | | | |
| − | @media only screen and (min-width: 800px) {
| |
| − | .cd-schedule .event-modal {
| |
| − | /* reset style */
| |
| − | right: auto;
| |
| − | width: auto;
| |
| − | height: auto;
| |
| − | -webkit-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | will-change: transform, width, height;
| |
| − | -webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
| |
| − | transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
| |
| − | transition: height .4s, width .4s, transform .4s, visibility .4s;
| |
| − | transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | }
| |
| − | .cd-schedule .event-modal .header {
| |
| − | position: absolute;
| |
| − | display: block;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | height: 100%;
| |
| − | }
| |
| − | .cd-schedule .event-modal .header .content {
| |
| − | /* reset style */
| |
| − | display: block;
| |
| − | padding: .8em;
| |
| − | }
| |
| − | .cd-schedule .event-modal .event-info > div {
| |
| − | padding: 2em 3em 2em 2em;
| |
| − | }
| |
| − | .cd-schedule .event-modal .body {
| |
| − | height: 100%;
| |
| − | width: auto;
| |
| − | }
| |
| − | .cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
| |
| − | /* Force Hardware acceleration */
| |
| − | -webkit-transform: translateZ(0);
| |
| − | transform: translateZ(0);
| |
| − | will-change: transform;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − | .cd-schedule .event-modal .header-bg {
| |
| − | -webkit-transition: -webkit-transform .4s;
| |
| − | transition: -webkit-transform .4s;
| |
| − | transition: transform .4s;
| |
| − | transition: transform .4s, -webkit-transform .4s;
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | }
| |
| − | .cd-schedule .event-modal .body-bg {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: none;
| |
| − | -ms-transform: none;
| |
| − | transform: none;
| |
| − | }
| |
| − | .cd-schedule .event-modal .event-date {
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .cd-schedule .event-modal .close {
| |
| − | width: 40px;
| |
| − | height: 40px;
| |
| − | background: transparent;
| |
| − | }
| |
| − | .cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
| |
| − | background: #222222;
| |
| − | height: 16px;
| |
| − | }
| |
| − | }
| |
| | | | |
| − | @media only screen and (min-width: 1000px) {
| |
| − | .cd-schedule .event-modal .header .content {
| |
| − | padding: 1.2em;
| |
| − | }
| |
| − | }
| |
| | | | |
| − | .cd-schedule.modal-is-open .event-modal {
| |
| − | /* .modal-is-open class is added as soon as an event is selected */
| |
| − | -webkit-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | visibility: visible;
| |
| − | }
| |
| | | | |
| − | .cd-schedule.modal-is-open .event-modal .event-info > div {
| |
| − | /* smooth scroll on iOS touch devices */
| |
| − | -webkit-overflow-scrolling: touch;
| |
| − | }
| |
| | | | |
| − | @media only screen and (min-width: 800px) {
| |
| − | .cd-schedule.animation-completed .event-modal .close,
| |
| − | .cd-schedule.content-loaded.animation-completed .event-modal .event-info {
| |
| − | /* the .animation-completed class is added when the modal animation is completed
| |
| − | the .content-loaded class is added when the modal content has been loaded (using ajax) */
| |
| − | opacity: 1;
| |
| − | -webkit-transition: opacity .2s;
| |
| − | transition: opacity .2s;
| |
| − | }
| |
| − | .cd-schedule.modal-is-open .body-bg {
| |
| − | opacity: 1;
| |
| − | -webkit-transition: -webkit-transform .4s;
| |
| − | transition: -webkit-transform .4s;
| |
| − | transition: transform .4s;
| |
| − | transition: transform .4s, -webkit-transform .4s;
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
| |
| − | }
| |
| − | }
| |
| | | | |
| − | .cd-schedule .cover-layer {
| |
| − | /* layer between the content and the modal window */
| |
| − | position: fixed;
| |
| − | z-index: 2;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background: rgba(0, 0, 0, 0.8);
| |
| − | opacity: 0;
| |
| − | visibility: hidden;
| |
| − | -webkit-transition: opacity .4s, visibility .4s;
| |
| − | transition: opacity .4s, visibility .4s;
| |
| − | }
| |
| | | | |
| − | .cd-schedule.modal-is-open .cover-layer {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #toc{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width: 575.98px) {}
| |
| − |
| |
| − | @media only screen and (max-width: 767.98px) {}
| |
| − |
| |
| − | @media only screen and (max-width: 991.98px) {}
| |
| − |
| |
| − | @media only screen and (max-width: 1199.98px) {}
| |
| − |
| |
| − |
| |
| − | /* 下面是表格方面的布局 有冲突再调整 */
| |
| − |
| |
| − |
| |
| | </style> | | </style> |
| | | | |
| − | | + | <body> |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | | + | |
| | <script src="https://2019.igem.org/Template:CAU_China/JS/CAUjquery?action=raw&ctype=text/javascript"></script> | | <script src="https://2019.igem.org/Template:CAU_China/JS/CAUjquery?action=raw&ctype=text/javascript"></script> |
| | | | |
| Line 793: |
Line 406: |
| | </script> | | </script> |
| | | | |
| − | <div class="container-fluid text-center my-0 align-items-center text-light bg-phactory2">
| |
| | | | |
| − | <div class="anotherWrapper"> | + | <div class="anotherWrapper"> |
| | <!-- Tab links --> | | <!-- Tab links --> |
| | <div class="tab"> | | <div class="tab"> |
| Line 804: |
Line 416: |
| | | | |
| | </div> | | </div> |
| − |
| |
| − | </div>
| |
| − |
| |
| | | | |
| | | | |
| Line 1,065: |
Line 674: |
| | | | |
| | | | |
| − | | + | </body> |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| | | | |
| | | | |
