div{
/* width: 100%; */
height: 100%;
display: flex; /* display: flex; to show */
flex-direction: column;
margin: 0;
border-radius: 1em 1em 0 0;
box-shadow:0 1em 4em 4em #444;
/* box-shadow:0 -1.1em 4em 3em #333; */
}
/* pop TITLE, header */
.sFPhc .sFPt{
text-align:center;
padding: 0.3em 1em;
margin: 0 -2em; /* change to 0 in mobile TODO */
border-radius: 3em 3em 0 0;
/*border-bottom: 1px solid #696;*/
background:#f0fff0;
}
/* pop CONTENT height:100%; */
.sFPhc .sFPc {
flex: 1;
overflow: auto;
padding: 0.5em 1em;
margin: 0;
background:#f0fff0;
}
/* pop footer */
.sFPhc .sFPb{
background:#f0fff0;
}
/* --------END POPUP div window --------- */
/* ----- CHAT related ----- */
/* ------ chat msg window fixed at the bottom; desktop: Right fixed, handheld: Bottome Center
* .sMsgWin for the default window size and postion .sMsgCB for the expanded window size and position
* These value default to big screen
* usage:
chat window content here
use javascript to toogleClass sMsgCB */
/* change according to device size */
.s_MsgWin {
display: flex;
flex-direction: column;
max-height: 360px;
transition: margin-left 0.5s;
}
.s_MsgCon {
padding: 0.1em 0.5em;
flex-grow: 1;
overflow:auto;
}
.s_MsgCon > div {
line-height: 1.3;
padding: 0.4em 0;
}
.s_MsgCon > div:hover {
background: #dee;
}
/* for big chat window, center of screen */
.s_MsgWB {
position: fixed;
z-index: 6;
background: #ffe;
max-height: none;
height: 100%;
top: 0;
/* change these value on smaller device, width< 600px */
border: 3px double #fb9;
width: 600px; /* for small device, set this to be 100% */
left:50%;
margin: 0 0 0 -300px;
/*
left: 0; right: 0;
margin: 0 auto;
*/
}
/* ----- End of CHAT related ----- */
/* ----- Regular Drop Down Up Menu ----*/
/*
*/
/* 主菜单项目 .s_Mnu 下拉菜单 .s_Mnu_L .s_Mnu_R*/
.s_Mnu,
.s_Mnu_L,
.s_Mnu_R {
list-style: none;
padding: 0;
margin: 0;
}
/* 下拉菜单项目 的显示摸样*/
.s_Mnu > li {
position: relative;
margin: 0;
padding: 0;
/* flex: 1; */
/*transition-duration: 0.5s;*/
}
/* on li > ul drop down */
.s_Mnu_R { /* To align drop down menu on the right side */
right: 0;
}
.s_Mnu_L {
left: 0;
}
/* 菜单中链接颜色 */
.s_MnuI,
.s_Mnu_L > li > a,
.s_Mnu_R > li > a {
display: block;
margin: 0;
padding: 0.2em 1.5em;
text-decoration: none;
color: #333;
background: #eee;
outline: none;
/*transition: background 0.5s;*/
}
.s_MnuI {
position: relative;
background: 0;
}
.s_MnuI:after {
content: ' ▼';
font-weight: bold;
color: #f13;
transition: all .5s;
/*
position: absolute;
top: 0;
height: 100%;
right: 1em;
display: flex;
align-items: center;
*/
}
/* 菜单项目 所在 min-width，max-height 需要根据不同设备的大小来确定*/
.s_Mnu_L,
.s_Mnu_R {
position: absolute;
z-index: 3; /* make sure it is always on the top*/
/*
opacity: 0;
visibility: hidden;
display: none;
*/
width: 0; /* to hide */
color: #060;
background: #eee;
/*min-width: 13em;*/
transition: top 0.4s;
top: 150%; /*margin-top: 0.7rem;*/
overflow: hidden;
/* max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
*/
}
/* 鼠标到达处，当前项目显示 背景深色*/
/*.s_Mnu a:hover,*/
.s_Mnu li:hover > a {
background: #060;
color: #fff;
cursor: pointer;
}
.s_Mnu > li:hover >.s_MnuI:after {
transform: rotate(180deg); /** looks like a X **/
color: #fff;
}
/* 显示下拉菜单项目 when hover*/
.s_Mnu > li:hover > ul,
/*.s_Mnu > li:focus-within > ul,*/
.s_Mnu_L:hover,
.s_Mnu_R:hover,
.s_Mnu_L:focus,
.s_Mnu_R:focus {
top: 100%;
white-space: nowrap;
overflow-wrap: normal;
min-width: 100%;
width: auto;
border: 1px solid #050;
/*
opacity: 1;
visibility: visible;
display: block;
*/
}
/* for click, to add this class or remove this class*/
/*.s_Mnu_Show */
/* -----END Regular Drop Down Up Menu ----*/
/** Begin Accordion **/
/* ------------ here is how to markup html for Accordion
-
Item1
Content 1
..... repeat pattern
**/
.sAcco { /** Container of Accordion **/
list-style: none;
padding: 0;
margin: 0.5em 0 1em;
/** width decide by another class or the upper container **/
}
/** .sAcco > li for each section of Accordion
* CONTAINER
*/
.sAccoL {
position: relative; /** to hide the checkbox in absolute position **/
min-height: 3em; /* same height for h4, .sAccoIC. height expand when content is shown */
border: 1px solid #ada;
}
/* .sAcco > li > input[type=radio] input[type=checkbox]
* CLICKABLE
*/
.sAccoIC {
position: absolute;
cursor: pointer;
width: 100%; /** so that click on the bar will be click on the checkbox **/
right: 0;
height: 3em; /** same height as h4 */
top:0;
z-index: 1; /** so it is on the top to click on **/
opacity: 0; /** make it invisibale **/
}
/*
* CONTENT FOR HIDE AND SHOW
*
*/
.sAcco >li> .s_Sec {
/* max-height only care about padding, but the display size is max-height+margin */
max-height: 1.5em; /* just make it smaller than: H4 hight, .sAccoIC 3 - .s_Sec padding-top 0.5 - .s_Sec padding-bottom 1 */
overflow: hidden;
margin: 0;
transition: max-height .4s;
}
/* .sAcco > li > div > h4
* the HEADER of the Accordion
*/
.sAcco > .sAccoL > .s_Sec > h4 {
position: absolute; /* for ::after and for fixed postion in s_Sec when there is scroll */
width: 100%;
height: 3em;
top: 0;
margin-top: 0; /* cancel s_Sec > h4 margin-top */
/* to have enough space for the + */
padding-right: 3em;
/* to get rid of the visual effect from .s_Sec>h4 */
border-top: 0;
border-radius: 0;
background: #def;
color: #000;
}
/* .sAcco > li >div> h4:after */
.sAcco > li > .s_Sec > h4:after {
position: absolute;
height: 100%;
right: .5em;
transition: all .5s;
content: "+"; /** they icon for visual cue **/
font-size: 150%;
font-weight: bold;
display: flex;
align-items: center;
}
/* now for onclick effect */
.sAccoIC:checked + .s_Sec {
padding-top: 3.5em; /* height: 3em, and 0.5em padding from H4 */
max-height: 500px; /*300px;*/
overflow: auto;
}
/* .sAcco > li > input[type=checkbox]:checked + div>h4 */
.sAccoIC:checked + .s_Sec>h4 {
background: #008080;
color: #fff;
}
/*.sAcco > li > input[type=checkbox]:checked + div>h4:after */
.sAccoIC:checked + .s_Sec>h4:after {
transform: rotate(135deg); /** looks like a X **/
}
/* .sAcco > li h4 > a The same in .s_Sec h4 a*/
.sAcco .s_SecHA {
z-index: 3; /* so it is clickable */
}
.sAccoIC:checked + .s_Sec .s_SecHA {
color: #ffa;
}
/* to make it stack together */
.sImpBlk + .sAcco,
.s_Sec + .sAcco {
margin-top: -1em;
}
/** End Accordion **/
/* mainly for mobile device */
@media screen and (max-width: 1023px){
/* #DG_AppB_M,
#DG_AppB_R
*/
#DG_AppBC{
width: 100%;
max-width: 800px;
}
#DG_AppB {
padding: 0 1em;
}
.s_AppH {
width: 100%;
max-width: 870px;
padding: 0 35px;
}
/* the menu at the BOTTOM of each post
* for MOBILE version,
* BACKGROUND same as Mainbody */
.sPMnuB{position:absolute;left: 50%; transform: translate(-50%, 0);bottom:0;background:#f3f3f3;white-space:nowrap} /* the menu inside each post, Bottom. Relative to the sPACont */
/* todo, this doesnt work */
/* input[type=checkbox],
input[type=radio] {
width: 1em; height: 1em;
border: 1px solid #bbb;
}
*/
}
/*
*
* inherit what ever is in max-width: 1023px
*
*/
@media screen and (max-width: 690px) {
/*
#DG_AppB,
.s_AppH,
#DG_AppB_M,
#DG_AppB_R{
padding: 0;
margin: 0;
}
*/
#DG_AppBC{
/* max-width: none;*/
}
#DG_AppB {
padding: 0;
}
.s_AppH {
border-radius: 0;
padding: 0;
}
/* mainly the display in board topic list */
.s_FW {
flex-wrap: wrap-reverse;
}
.s_FW_R {
flex: 1 100%;
}
.s_FW_R > small {
display: none;
}
/* for clickable menu nav item */
.s_MnuI {
padding: 0.2em 0.5em;
}
/* for the pop up */
.sFPhc > div{
box-shadow: none;
}
/* pop TITLE, header */
.sFPhc .sFPt{
margin: 0;
border-radius: 8px 8px 0 0;
}
/* pop CONTENT height:100%; */
.sFPhc .sFPc {
padding: 0.5em;
}
/* for sections */
.s_Sec {
padding: 0.5em 0.5em 1em;
}
.s_Sec > h3,
.s_Sec > h4 {
margin: -0.5em -0.5em 1em;
}
.s_SecCNoP {
margin: 0 -0.5em; /* -0.5em to cancel the padding in .s_Sec */
}
.s_SecC + .s_SecC {
border-top: 0.2em solid #d8d8d8;
}
/* chat window */
.s_MsgWin {
max-height: 250px;
}
.s_MsgWB {
/*border: 0;*/
width: 100%; /* for small device, set this to be 100% */
left: 0;
margin-left: 0;
}
}
/* non mobile, commmon settings with top menu on */
/* TWO columns 686 + */
@media screen and (min-width: 1024px){
.s_AppH {
width: 100%;
max-width: 1124px;
padding: 0 65px;
}
#DG_AppBC {
width: 100%;
max-width: 1046px;
}
#DG_AppB {
display: flex;
padding: 0 0 1em;
}
#DG_AppB_L {
display: none;
}
#DG_AppB_M{
flex: 1;
min-width: 0px; /* this is to prevent white-space: nowrap ele not working and enlarge the container */
margin: 0 0.5em 0 1em;
padding: 0;
}
#DG_AppB_R {
margin: 0 1em 0 0.5em;
width: 300px;
}
}
/* Three columns 686+300+300 + 6 * 12*/
@media screen and (min-width: 1360px){
.s_AppH {
max-width: 1450px; /* from 1360 to 1476 */
}
#DG_AppBC {
max-width: none;
width: 1360px;
}
#DG_AppB {
position: relative; /* for the most left panel */
}
#DG_AppB_L,
#DG_AppB_R,
#DG_RSBottom {
margin: 0 2em;
width: 300px;
}
#DG_AppB_L {
display: block;
}
#DG_AppB_M{
margin: 0; /* three coloumn, use margin from left and right */
}
/* ====== the most LEFT colum ===== */
#DG_RSBottom {
position: absolute; /* relative to #DG_AppB */
left: 0;
top: 0;
}
}
/* Three columns 686+300+300+ 4* 30: 1406px and 35+35 for the top*/
@media screen and (min-width: 1476px){
.s_AppH {
max-width: none;
width: 1476px;
}
#DG_AppBC {
width: 1406px;
}
}
/* Three columns 686+336+336+ 4* 30 : 1479 and 45 + 45 for the top to stick out */
@media screen and (min-width:1570px){
.s_AppH {
width: 1570px;
}
/* width:20 + 336 + 40 + 686 + 40 + 336 + 20*/
#DG_AppBC {
width: 1478px;
}
#DG_AppB_L,
#DG_AppB_R,
#DG_RSBottom {
width: 336px;
}
}