@import url("../fonts/font-awesome/css/font-awesome.min.css");
@import url("components.css");
@import url("icons.css");
@import url("bootstrap-icons/bootstrap-icons.css");
@import url("FS/components.css");
@import url("FS/hanlunls.css");
body {
padding-bottom: 30px;
line-height: 1.6;
font-family: Microsoft YaHei, MHei, Hei, Verdana, Geneva, sans-serif;
font-size: 1.6em;
overflow-x: hidden;
text-align: justify;
min-width:200px;
}
p {
margin:0 0 10px;
padding-top:0;
}
.btn{
background-image: none;
}
.btn:focus{
outline: none;
}
.panel > .panel-heading{
background-image: none;
}
button:focus{
outline: none;
}
a:focus{
outline: none;
}
a:hover{
cursor: pointer;
}
.MathJax{
pointer-events: none;
}
.MathJax:focus{
outline: none;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.toc-header {
color: #494949;
text-align: center;
font: bold 48px;
}
/* --- Banner --- */
header .header .icon {position: absolute; padding-top: 18px; z-index: 5;}
/* --- deactivate the curser effect when hovering the img--- */
header .header .icon a:hover, header .header .icon a:focus {
cursor: pointer;
}
.banner{ background:#e4e3f2; padding-top:80px; position:relative; overflow:hidden;}
.banner .container{position: relative; }
.banner .bg{ position: absolute; height:100%; width:auto; right:0; top:0;display:none;}
.banner .title{color: #000; position: relative; padding-bottom: 20px;}
.banner.lesson .title{min-height: 100px;}
.banner .title h2{ font-size: 70px; font-weight: 300; line-height: 60px; margin-bottom: 15px;}
/* .banner .title h3{ font-size: 36px;padding-bottom:20px;} */
.banner .title p{ margin-top: 10px; font-size: 17px; line-height: 1.6em; text-align: justify;}
/* .banner.bio {background:#1aa0ac} */
/* .banner.chem {background:#1074bf} */
/* .banner.maths {background:#8ab74e} */
/* .banner.phy {background:#450099} */
/* --- Content panel --- */
.container {max-width: 1170px; margin: 0 auto;}
.container.content {padding-top: 45px;}
/*--------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part 1 Begin
--------------------------------------------------------------*/
div.container.content.lesson{color:#333;}
div.banner.lesson {
background-image: url('../img/bg_img.jpg');
background-size: cover; /* Adjust as needed */
background-position: center; /* Adjust as needed */
z-index: -2;
}
div.banner.lesson::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2); /* Adjust the alpha value (0.5 in this case) */
z-index: -1;
}
/*General: equals to module index page h3 */
.banner .title h3 {
font-size: 36px;
font-weight: 700;
line-height: 40.8px;
margin-top:6px;
margin-bottom: 0;
padding-bottom: 12px;
width:100%;
color: var(--header_bg1);
}
/*General: equals to module index page h4 */
.banner .title p{
font-size:18px;
line-height: 27px;
}
.content.lesson > div.title {
font-size: 24px;
font-weight:700;
margin-bottom:15px;
}
@media screen and (min-width: 1280px) {
.banner .title p{
font-size:20px;
line-height: 30px;
}
.content.lesson > div.title {
font-size: 26px;
margin-bottom:21px;
}
}
@media screen and (max-width: 991px) {
.banner .title h3 {
font-size: 30px;
line-height: 33.6px;
padding-bottom: 9px;
}
.banner .title p{
font-size:16px;
line-height: 32px;
}
.content.lesson > div.title {
font-size: 22px;
}
}
@media screen and (max-width: 476px) {
.banner .title h3 {
font-size: 24px;
line-height: 36px;
padding-bottom: 6px;
}
.banner .title p{
font-size:14px;
line-height: 24px;
}
.container.content {
padding-top: 30px;
}
.content.lesson > div.title {
font-size: 20px;
margin-bottom:0px;
}
}
/*--------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part 1 End
--------------------------------------------------------------*/
.breadcrumb-holder{background:#FF6D1A; display: none;}
.breadcrumb-holder .container{position: relative; display: none;}
.breadcrumb-holder .breadcrumb{background:none;margin-bottom: 0;padding: 13px 0; display: none;}
.breadcrumb-holder a{color:#FFF; text-decoration:none; transition: border-color 0.2s; border-bottom: 2px solid rgba(255,255,255,0); display: none;}
.breadcrumb-holder a:hover{ border-color: rgba(255,255,255,0.8); display: none;}
.breadcrumb-holder .breadcrumb > li + li::before {content:'>';color:#FFF; display: none;}
.breadcrumb-holder .lang{position: absolute;right:0;top:0;background:#b22e4d;padding:13px; display: none;}
.breadcrumb-holder .lang a{margin:0 7px; position: relative; text-decoration:none; display: none;}
.breadcrumb-holder .lang a.on{ border-bottom: 3px solid white; display: none;}
.breadcrumb-holder .lang a:not(.on):hover{ border-color: rgba(255,255,255,0.7); display: none; }
/* --- Diagnostic index page --- */
.content.lesson-info table.lesson-index.diagnostic thead th { padding:15px; padding-left: 20px; color:#FFF; background:#21d3e3; margin-bottom:1px; font-size:19px; width: 50%;}
.diagnostic.breadcrumb-holder{background:#21d3e3;}
.diagnostic.breadcrumb-holder .lang{background:#4469be;}
.diagnostic.breadcrumb-holder .lang a{color:#FFF;}
.content.lesson-info .btn-test{ /* position:absolute; */ float:right; top: 3px; right: 3px; background:#4469be;border-bottom: 2px solid #1d3a7c;display:inline-block;margin-right:0;vertical-align: middle;color: #FFF;border-radius: 0;padding: 6px 20px; display:none;}
/* --- Diagnostic switch on from general index page --- */
.content.lesson-info.diagnostic table.lesson-index a{
pointer-events: none;
color: black !important;
}
.content.lesson-info.diagnostic .title{
padding-right: 140px;
}
.content.lesson-info.diagnostic div.btn-test{
display: inline-block;
}
.content.lesson-info div.btn-test{
/* display: none; */
}
/* --- index page --- */
.content.lesson-info > .row{padding-bottom:40px; border-bottom:1px solid #CCC; margin-bottom:45px; position: relative; text-align: justify;}
.content.lesson-info > .row:last-of-type{border:none;margin-bottom:0;}
.content.lesson-info p{font-size:17px;line-height: 1.6em;}
.content.lesson-info .title{font-size:26px;font-weight: bold;margin-bottom:20px;position: relative;}
.content.lesson-info > .row > div[class^=col]{margin-bottom: 25px;}
.content.lesson-info table.lesson-index {
/* border-collapse: initial; */
/* border-spacing: 2px 2px; */
width: 100%;
/* background-color: #333; */
position: relative;
/* z-index: -1; */
}
.content.lesson-info table.lesson-index thead th { padding:15px; padding-left: 20px; color:#000; border:1px solid #333; margin-bottom:1px; font-size:19px; width: 50%; background-color: white;}
/* .content.lesson-info table.lesson-index thead th { padding:15px; padding-left: 20px; color:#FFF; background:#FF6712; margin-bottom:1px; font-size:19px; width: 50%;} */
.content.lesson-info table.lesson-index tr td { margin:0; margin-bottom:1px; border:1px solid #333; position:relative; padding:15px; padding-left:35px; background-color: white;}
/* .content.lesson-info table.lesson-index tr td { margin:0; margin-bottom:1px; background:#f1f1f1; position: relative; padding:15px; padding-left:35px;} */
.content.lesson-info table.lesson-index tr{ color:#000; font-size:17px; }
.content.lesson-info table.lesson-index ul{ list-style: none; color: black; padding:0; margin: 0;}
.content.lesson-info table.lesson-index ul li{ padding-bottom: 8px; position: relative;}
.content.lesson-info table.lesson-index ul li:last-of-type{ padding-bottom: 0;}
.content.lesson-info table.lesson-index ul li:before{ content:'.'; font-size:26px; position: absolute; left: -0.6em; top: -0.6em;}
.content.lesson-info table.lesson-index a{ color: #6647d7; text-decoration:none; }
.content.lesson-info table.lesson-index a:before{ content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.2s; }
.content.lesson-info table.lesson-index a:hover{ color: #4125a7; }
.content.lesson-info table.lesson-index a:hover:before{ opacity: 1; }
/* --- Next Lesson --- */
.next-lesson{
margin-top: 35px;
padding-top: 25px;
border-top: 1px solid #CCC;
}
.next-lesson a{ color: #6647d7; text-decoration:none; position: relative; padding: 8px 12px; transition: color 0.2s; }
.next-lesson a:before{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ccc; opacity: 0; transition: opacity 0.2s;}
.next-lesson a:hover{ color: #4125a7; }
.next-lesson a:hover:before{ opacity: 0.3; }
/* --- company infomation --- */
body > footer .container{padding-top: 60px;padding-bottom:20px; display:none;}
body > footer .container p{font-size:13px;margin-bottom:0; display:none;}
/* --- List --- */
ol.parentheses {
counter-reset: list;
margin: 0;
}
ol.parentheses > li {
list-style: none;
position: relative;
}
ol.parentheses > li:before {
counter-increment: list;
content: "(" counter(list, decimal) ") ";
position: absolute;
left: -1.4em;
}
/*--------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part II begin
--------------------------------------------------------------*/
.header_side a.header_title_btn:hover {
color: var(--white);
text-decoration:none;
cursor:default;
}
.header_side a.header_title_btn:visited, .header_side a.header_title_btn:focus {
color: var(--white);
text-decoration:none;
}
div.dropdown-menu.lang_dropdown_list.w-dropdown-list {
padding-top:0;
padding-bottom:0;
}
div.btn.dropdown-toggle.lang_dropdown_toggle.w-dropdown-toggle:visited {
color: var(--white);
text-decoration:none;
}
/*--------------------------------------------------------------
# Repository Module Index
--------------------------------------------------------------*/
/*General: combine the hanlunls css: page_container*/
.new-lesson-index-width{
flex-flow: column;
width: 100%;
min-height: 60vh;
display: flex;
}
/*General: equals to the hanlunls css: page_container_in */
.new-lesson-index-width .row{
display:block;
padding-left: 30px;
padding-right: 30px;
margin-left: auto;
margin-right: auto;
}
/* remove the effect of classname "row" by bootstrap css */
.new-lesson-index-width .row:before {display:none;}
.new-lesson-index-width .row:after {display:none;}
/*General: equals to the hanlunls css: inner_page_container */
.new-lesson-index-width .col-xs-10.col-xs-offset-1.col-sm-10.col-md-10.col-lg-10 {
box-shadow: 0 3px 9px 0 var(--shadow);
background-color: #fff;
background-image: url('../img/bg_magnifier.jpg');
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
border-radius: 24px;
width: 100%;
max-width: 1590px;
/*General: change to remove the effect of
in module index.html */
margin-top:4px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
/*General: change to 0 */
padding-left: 0px;
padding-right: 0px;
position: relative;
overflow: auto;
}
/*--------------------------------------------------------------
# Title, Prerequisite and introduction
--------------------------------------------------------------*/
table.motherboardheader{
width:100%;
background-color:var(--white);
}
/*General: hanlunls css: inner-page radius and course_detail_banner_bg color*/
table.motherboardheader th{
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
/*General: equals to the hanlunls css: h1 */
table.motherboardheader h3 {
font-size: 36px;
font-weight: 700;
line-height: 40.8px;
/*General: change margin to 0; padding to inner_page_container margin-top */
margin-top:0;
margin-bottom: 0;
padding-top:60px;
padding-bottom: 30px;
width:100%;
color: var(--white);
background-color:var(--purple);
}
/*prerequisite*/
table.motherboardheader h4 {
font-size:18px;
line-height: 27px;
margin-top:-5px;
margin-bottom: 0;
padding-top:15px;
padding-bottom:60px;
width:100%;
color: var(--white);
background-color:var(--purple);
}
table.motherboardheader p.intro {
font-size:18px;
line-height: 27px;
color: var(--purple);
background-color:var(--white);
width: 100%;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-top: 48px;
padding-bottom: 18px;
padding-left: 60px;
padding-right: 60px;
}
/*--------------------------------------------------------------
Index Lesson List
--------------------------------------------------------------*/
table.motherboard{
margin-left: 60px;
margin-right: 60px;
}
table.motherboard tr th {
border: 1px solid #bfbfbf;
font-size:18px;
font-weight: 700;
background-color: rgba(245, 245, 245, .72);
color: var(--purple);
vertical-align: middle!important;
padding: 10px 0;
}
/*lesson-title*/
table.motherboard .new-title{
font-size:22px;
line-height:33px;
font-weight: 700;
padding-bottom:10px;
}
table.motherboard th:first-child, table.motherboard td:first-child {
border-left: none;
}
table.motherboard th:last-child, table.motherboard td:last-child {
border-right: none;
}
table.motherboard tr td {
font-size:18px;
line-height: 27px;
vertical-align: top;
padding-top: 10px;
border: 1px solid #ccc;
}
table.motherboard a {
display: inline-block;
margin-left: 12px;
margin-right: 12px;
}
.new-title, .new-index p {
margin-left: 12px;
margin-right: 12px;
}
table.motherboard ul li {
margin-left:-6px;
padding-bottom:9px;
}
@media screen and (min-width: 1280px) {
table.motherboardheader h3 {
font-size: 42px;
line-height: 54px;
}
table.motherboardheader h4, table.motherboardheader p.intro, table.motherboard tr td{
font-size:20px;
line-height: 30px;
}
table.motherboard .new-title{
font-size:24px;
line-height:36px;
}
table.motherboard tr th {
font-size:20px;
}
}
@media screen and (min-width: 1650px) {
.new-lesson-index-width .row{
padding-right: 0px;
}
}
@media screen and (max-width: 991px) {
.new-lesson-index-width{
top: 60px;
}
.new-lesson-index-width .col-xs-10, .new-lesson-index-width .col-sm-10, .new-lesson-index-width .col-md-10, .new-lesson-index-width .col-lg-10 {
margin-top:0;
}
table.motherboardheader h3 {
font-size: 30px;
line-height: 33.6px;
padding-top:48px;
padding-bottom: 16px;
}
table.motherboardheader h4{
font-size: 16px;
padding-bottom:32px;
}
table.motherboardheader p.intro {
font-size: 18px;
line-height: 27px;
padding-left: 42px;
padding-right: 42px;
padding-top: 36px;
padding-bottom: 12px;
}
table.motherboard {
margin-left: 42px;
margin-right: 42px;
}
table.motherboard tr th {
font-size: 18px;
}
table.motherboard .new-title {
font-size:20px;
}
table.motherboard tr td{
font-size: 18px;
line-height: 27px;
}
}
@media screen and (max-width: 479px) {
.new-lesson-index-width .row{
padding-left:24px;
padding-right:24px;
}
.new-lesson-index-width{
top: 54px;
}
table.motherboardheader h3 {
font-size: 24px;
line-height: 36px;
padding-top:42px;
padding-bottom: 12px;
}
table.motherboardheader h4{
font-size: 14px;
padding-bottom:24px;
}
table.motherboardheader p.intro {
font-size: 16px;
line-height: 24px;
padding-left: 24px;
padding-right: 24px;
padding-top: 24px;
padding-bottom: 8px;
}
table.motherboard {
margin-left: 24px;
margin-right: 24px;
}
table.motherboard tr th {
font-size: 16px;
}
table.motherboard .new-title {
font-size:18px;
}
table.motherboard tr td{
font-size: 16px;
line-height: 24px;
}
}
/*--------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part II End
--------------------------------------------------------------*/
/*------------------------------------------------------------------------
# Repository Navigation Bar (Top) and Copyright(Bottom) --Start
------------------------------------------------------------------------*/
/*-----Container1 NavBar--*/
.container1 {
display: flex;
position: fixed;/* Set position to fixed*/
top: 0; /* Position at the top*/
width: 100%; /* Set width to full*/
min-width:380px;
z-index: 9; /* Optional: Set a higher z-index to ensure it's on top of other elementss*/
height:66px;
}
/*-----overwrite the bootstrap style--*/
.header_side a.header_title_btn:hover, .header_center_container a:hover, .mobile_menu_btn_row a:hover, .header_center_container a:visited, .mobile_menu_btn_row a:visited{
text-decoration:none;
}
.header_side a.header_title_btn:hover, .header_center_container a:hover, .mobile_menu_btn_row a:hover{
color: var(--white);
}
.header_center_btn.w--current:hover, .mobile_menu_btn.w--current:hover{
color: var(--purple);
}
.header_side a.lang_dropdown_link:hover{
text-decoration:none;
}
.mobile_menu_btn_row a.active{
color: var(--purple);
background-color: #fff;
font-weight: 700;
}
.header_center_block a.active{
color: var(--purple);
background-color: #fff;
font-weight: 700;
}
/*----adjust lightbox location according to the Navbar height--*/
div.modal-dialog {
margin-top: 80px;
}
/*-----Container2 Footer--*/
.container2 {
display: flex;
position: fixed;/* Set position to fixed*/
bottom: 0; /* Position at the top*/
width: 100%; /* Set width to full*/
min-width:380px;
background: #81338a; /*Optional: Add a background color*/
z-index: 9; /* Optional: Set a higher z-index to ensure it's on top of other elementss*/
height:50px;
cursor:default;
}
.footnote {
position:relative;
width:100%;
margin-top:6px;
margin-left:1em;
margin-right:1em;
}
.contactinfo{
position:absolute;
top:0;
right:0;
}
.copyright, .contactinfo, .copyrightitems {
font-size:18px;
color:#fff;
text-decoration: none;
}
.copyrightitems:visited, .copyrightitems:active {
color: #fff;
text-decoration: none;
}
.copyrightitems:hover, .copyrightitems:focus {
color:#47b2e4;
text-decoration:underlined;
}
@media (max-width:768px){
.container2 {
height:75px;
}
.contactinfo {
position:absolute;
top:30px;
left:0;
}
.copyright, .contactinfo, .copyrightitems {
font-size:16px;
}
}
/*------------------------------------------------------------------------
# Repository Navigation Bar (Top) and Copyright(Bottom) --End
------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part III unified styles of components--Start
----------------------------------------------------------------------------------*/
/*panel*/
.container.content.lesson div[class^="panel"] {
border-color: #ddd;
}
.container.content.lesson div[class^="panel"] >.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
/*--------------------------------------------------------------
# CSS for template v5.3 2024 Janurary Part III End
--------------------------------------------------------------*/