483 lines
12 KiB
CSS
483 lines
12 KiB
CSS
.sm {
|
|
position: relative;
|
|
z-index: 9999
|
|
}
|
|
|
|
.sm,.sm li,.sm ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: normal;
|
|
direction: ltr;
|
|
text-align: left;
|
|
-webkit-tap-highlight-color: transparent
|
|
}
|
|
|
|
.sm,.sm li {
|
|
display: block
|
|
}
|
|
|
|
.sm-rtl,.sm-rtl li,.sm-rtl ul {
|
|
direction: rtl;
|
|
text-align: right
|
|
}
|
|
|
|
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6 {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
.sm ul {
|
|
display: none
|
|
}
|
|
|
|
.sm a,.sm li {
|
|
position: relative
|
|
}
|
|
|
|
.sm a,.sm:after {
|
|
display: block
|
|
}
|
|
|
|
.sm a.disabled {
|
|
cursor: not-allowed
|
|
}
|
|
|
|
.sm:after {
|
|
content: " ";
|
|
height: 0;
|
|
font: 0/0 serif;
|
|
clear: both;
|
|
visibility: hidden;
|
|
overflow: hidden
|
|
}
|
|
|
|
.sm,.sm *,.sm :after,.sm :before {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.main-menu-btn {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 36px;
|
|
text-indent: 36px;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent
|
|
}
|
|
|
|
.main-menu-btn-icon {
|
|
top: 50%;
|
|
left: 2px
|
|
}
|
|
|
|
.main-menu-btn-icon,.main-menu-btn-icon:after,.main-menu-btn-icon:before {
|
|
position: absolute;
|
|
height: 2px;
|
|
width: 24px;
|
|
background: var(--nav-menu-button-color);
|
|
-webkit-transition: all .25s;
|
|
transition: all .25s
|
|
}
|
|
|
|
.main-menu-btn-icon:before {
|
|
content: "";
|
|
top: -7px;
|
|
left: 0
|
|
}
|
|
|
|
.main-menu-btn-icon:after {
|
|
content: "";
|
|
top: 7px;
|
|
left: 0
|
|
}
|
|
|
|
#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon {
|
|
height: 0
|
|
}
|
|
|
|
#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:before {
|
|
top: 0;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg)
|
|
}
|
|
|
|
#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:after {
|
|
top: 0;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
#main-menu-state {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
border: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(1px,1px,1px,1px)
|
|
}
|
|
|
|
#main-menu-state:not(:checked)~#main-menu {
|
|
display: none
|
|
}
|
|
|
|
#main-menu-state:checked~#main-menu {
|
|
display: block
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.main-menu-btn {
|
|
position: absolute;
|
|
top: -99999px
|
|
}
|
|
|
|
#main-menu-state:not(:checked)~#main-menu {
|
|
display: block
|
|
}
|
|
}
|
|
|
|
.sm-dox {
|
|
background-color: var(--nav-menu-background-color)
|
|
}
|
|
|
|
.sm-dox a,.sm-dox a:active,.sm-dox a:focus,.sm-dox a:hover {
|
|
padding: 0 43px 0 12px;
|
|
font-family: var(--font-family-nav);
|
|
font-size: 13px;
|
|
line-height: 36px;
|
|
text-decoration: none;
|
|
color: var(--nav-text-normal-color);
|
|
outline: 0
|
|
}
|
|
|
|
.sm-dox a:hover {
|
|
background-color: var(--nav-menu-active-bg);
|
|
border-radius: 5px
|
|
}
|
|
|
|
.sm-dox a.current {
|
|
color: #d23600
|
|
}
|
|
|
|
.sm-dox a.disabled {
|
|
color: #bbb
|
|
}
|
|
|
|
.sm-dox a span.sub-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -14px;
|
|
left: auto;
|
|
right: 3px;
|
|
width: 28px;
|
|
height: 28px;
|
|
overflow: hidden;
|
|
font: 700 12px/28px monospace!important;
|
|
text-align: center;
|
|
text-shadow: none;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px
|
|
}
|
|
|
|
.sm-dox a span.sub-arrow:before {
|
|
display: block;
|
|
content: "+"
|
|
}
|
|
|
|
.sm-dox a.highlighted span.sub-arrow:before {
|
|
display: block;
|
|
content: "-"
|
|
}
|
|
|
|
.sm-dox>li:first-child>:not(ul) a,.sm-dox>li:first-child>a {
|
|
-moz-border-radius: 5px 5px 0 0;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px 5px 0 0
|
|
}
|
|
|
|
.sm-dox>li:last-child>:not(ul) a,.sm-dox>li:last-child>a,.sm-dox>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul {
|
|
-moz-border-radius: 0 0 5px 5px;
|
|
-webkit-border-radius: 0;
|
|
border-radius: 0 0 5px 5px
|
|
}
|
|
|
|
.sm-dox>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted {
|
|
-moz-border-radius: 0;
|
|
-webkit-border-radius: 0;
|
|
border-radius: 0
|
|
}
|
|
|
|
.sm-dox ul {
|
|
background: var(--nav-menu-background-color)
|
|
}
|
|
|
|
.sm-dox ul a,.sm-dox ul a:active,.sm-dox ul a:focus,.sm-dox ul a:hover {
|
|
font-size: 12px;
|
|
border-left: 8px solid transparent;
|
|
line-height: 36px;
|
|
text-shadow: none;
|
|
background-color: var(--nav-menu-background-color);
|
|
background-image: none
|
|
}
|
|
|
|
.sm-dox ul a:hover {
|
|
background-color: var(--nav-menu-active-bg);
|
|
border-radius: 5px
|
|
}
|
|
|
|
.sm-dox ul ul a,.sm-dox ul ul a:active,.sm-dox ul ul a:focus,.sm-dox ul ul a:hover {
|
|
border-left: 16px solid transparent
|
|
}
|
|
|
|
.sm-dox ul ul ul a,.sm-dox ul ul ul a:active,.sm-dox ul ul ul a:focus,.sm-dox ul ul ul a:hover {
|
|
border-left: 24px solid transparent
|
|
}
|
|
|
|
.sm-dox ul ul ul ul a,.sm-dox ul ul ul ul a:active,.sm-dox ul ul ul ul a:focus,.sm-dox ul ul ul ul a:hover {
|
|
border-left: 32px solid transparent
|
|
}
|
|
|
|
.sm-dox ul ul ul ul ul a,.sm-dox ul ul ul ul ul a:active,.sm-dox ul ul ul ul ul a:focus,.sm-dox ul ul ul ul ul a:hover {
|
|
border-left: 40px solid transparent
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.sm-dox ul {
|
|
position: absolute;
|
|
width: 12em;
|
|
border: 1px solid #bbb;
|
|
padding: 5px 0;
|
|
background: var(--nav-menu-background-color);
|
|
-moz-border-radius: 5px!important;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px!important;
|
|
-moz-box-shadow: 0 5px 9px rgba(0,0,0,.2);
|
|
-webkit-box-shadow: 0 5px 9px rgba(0,0,0,.2);
|
|
box-shadow: 0 5px 9px rgba(0,0,0,.2)
|
|
}
|
|
|
|
.sm-dox li {
|
|
float: left;
|
|
border-top: 0;
|
|
padding: 3px
|
|
}
|
|
|
|
.sm-dox.sm-rtl li {
|
|
float: right
|
|
}
|
|
|
|
.sm-dox ul li,.sm-dox.sm-rtl ul li,.sm-dox.sm-vertical li {
|
|
float: none
|
|
}
|
|
|
|
.sm-dox a {
|
|
white-space: nowrap
|
|
}
|
|
|
|
.sm-dox ul a,.sm-dox.sm-vertical a {
|
|
white-space: normal
|
|
}
|
|
|
|
.sm-dox .sm-nowrap>li>:not(ul) a,.sm-dox .sm-nowrap>li>a {
|
|
white-space: nowrap
|
|
}
|
|
|
|
.sm-dox,.sm-dox a span.sub-arrow {
|
|
background-color: var(--nav-menu-background-color)
|
|
}
|
|
|
|
.sm-dox {
|
|
padding: 0 10px;
|
|
line-height: 36px
|
|
}
|
|
|
|
.sm-dox a span.sub-arrow {
|
|
top: 15px;
|
|
right: 10px;
|
|
box-sizing: content-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-right: 2px solid var(--nav-arrow-color);
|
|
border-bottom: 2px solid var(--nav-arrow-color);
|
|
transform: rotate(45deg);
|
|
-moz-border-radius: 0;
|
|
-webkit-border-radius: 0;
|
|
border-radius: 0
|
|
}
|
|
|
|
.sm-dox a,.sm-dox a.highlighted,.sm-dox a:active,.sm-dox a:focus,.sm-dox a:hover {
|
|
padding: 0 6px
|
|
}
|
|
|
|
.sm-dox a:hover {
|
|
background-color: var(--nav-menu-active-bg);
|
|
border-radius: 5px!important
|
|
}
|
|
|
|
.sm-dox a:hover span.sub-arrow {
|
|
background-color: var(--nav-menu-active-bg);
|
|
border-right: 2px solid var(--nav-arrow-selected-color);
|
|
border-bottom: 2px solid var(--nav-arrow-selected-color)
|
|
}
|
|
|
|
.sm-dox a.has-submenu {
|
|
padding-right: 24px
|
|
}
|
|
|
|
.sm-dox>li>ul:after,.sm-dox>li>ul:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -18px;
|
|
left: 30px;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-width: 9px;
|
|
border-style: dashed dashed solid;
|
|
border-color: transparent transparent #bbb
|
|
}
|
|
|
|
.sm-dox>li>ul:after {
|
|
top: -16px;
|
|
left: 31px;
|
|
border-width: 8px;
|
|
border-color: transparent transparent var(--nav-menu-background-color) transparent
|
|
}
|
|
|
|
.sm-dox ul a span.sub-arrow {
|
|
transform: rotate(-45deg);
|
|
top: 3px;
|
|
}
|
|
|
|
.sm-dox ul a,.sm-dox ul a.highlighted,.sm-dox ul a:active,.sm-dox ul a:focus,.sm-dox ul a:hover {
|
|
color: var(--nav-menu-foreground-color);
|
|
background-image: none;
|
|
line-height: normal;
|
|
border: 0!important
|
|
}
|
|
|
|
.sm-dox ul a:hover {
|
|
background-color: var(--nav-menu-active-bg);
|
|
border-radius: 5px
|
|
}
|
|
|
|
.sm-dox span.scroll-down,.sm-dox span.scroll-up {
|
|
position: absolute;
|
|
display: none;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
background: var(--nav-menu-background-color);
|
|
height: 36px
|
|
}
|
|
|
|
.sm-dox span.scroll-down:hover,.sm-dox span.scroll-up:hover {
|
|
background: #eee
|
|
}
|
|
|
|
.sm-dox span.scroll-up:hover span.scroll-down-arrow,.sm-dox span.scroll-up:hover span.scroll-up-arrow {
|
|
border-color: transparent transparent #d23600
|
|
}
|
|
|
|
.sm-dox span.scroll-down:hover span.scroll-down-arrow {
|
|
border-color: #d23600 transparent transparent
|
|
}
|
|
|
|
.sm-dox span.scroll-down-arrow,.sm-dox span.scroll-up-arrow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -6px;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-width: 6px;
|
|
border-style: dashed dashed solid;
|
|
border-color: transparent transparent var(--nav-menu-foreground-color) transparent
|
|
}
|
|
|
|
.sm-dox span.scroll-down-arrow {
|
|
top: 8px;
|
|
border-style: solid dashed dashed;
|
|
border-color: var(--nav-menu-foreground-color) transparent transparent transparent
|
|
}
|
|
|
|
.sm-dox.sm-rtl a.has-submenu {
|
|
padding-right: 6px;
|
|
padding-left: 24px
|
|
}
|
|
|
|
.sm-dox.sm-rtl a span.sub-arrow {
|
|
right: auto;
|
|
left: 6px
|
|
}
|
|
|
|
.sm-dox.sm-rtl.sm-vertical a.has-submenu,.sm-dox.sm-vertical a,.sm-dox.sm-vertical ul a {
|
|
padding: 10px 20px
|
|
}
|
|
|
|
.sm-dox.sm-rtl ul a span.sub-arrow,.sm-dox.sm-rtl.sm-vertical a span.sub-arrow {
|
|
right: auto;
|
|
left: 8px;
|
|
border-style: dashed solid dashed dashed;
|
|
border-color: transparent #555 transparent transparent
|
|
}
|
|
|
|
.sm-dox.sm-rtl>li>ul:before {
|
|
left: auto;
|
|
right: 30px
|
|
}
|
|
|
|
.sm-dox.sm-rtl>li>ul:after {
|
|
left: auto;
|
|
right: 31px
|
|
}
|
|
|
|
.sm-dox.sm-rtl ul a.has-submenu {
|
|
padding: 10px 20px!important
|
|
}
|
|
|
|
.sm-dox.sm-vertical {
|
|
padding: 10px 0;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px
|
|
}
|
|
|
|
.sm-dox.sm-vertical a.highlighted,.sm-dox.sm-vertical a:active,.sm-dox.sm-vertical a:focus,.sm-dox.sm-vertical a:hover {
|
|
background: #fff
|
|
}
|
|
|
|
.sm-dox.sm-vertical a span.sub-arrow {
|
|
right: 8px;
|
|
top: 50%;
|
|
margin-top: -5px;
|
|
border-width: 5px;
|
|
border-style: dashed dashed dashed solid;
|
|
border-color: transparent transparent transparent #555
|
|
}
|
|
|
|
.sm-dox.sm-vertical>li>ul:after,.sm-dox.sm-vertical>li>ul:before {
|
|
display: none
|
|
}
|
|
|
|
.sm-dox.sm-vertical ul a.highlighted,.sm-dox.sm-vertical ul a:active,.sm-dox.sm-vertical ul a:focus,.sm-dox.sm-vertical ul a:hover {
|
|
background: #eee
|
|
}
|
|
|
|
.sm-dox.sm-vertical ul a.disabled {
|
|
background: var(--nav-menu-background-color)
|
|
}
|
|
}
|
|
|