更改

跳到导航 跳到搜索

MediaWiki:MenuSidebar.css (查看源代码)

2021年1月7日 (四) 16:28的版本

添加2,983字节 、​ 2021年1月7日 (四) 16:28
无编辑摘要
第1行： 第1行：  
/* 这里放置的CSS将应用于所有皮肤的侧边栏 */
 
/* 这里放置的CSS将应用于所有皮肤的侧边栏 */
−
   
.skin-vector .mw-body {
 
.skin-vector .mw-body {
−
    margin-left: 11em !important;
+
margin-left: 11em!important;
−
    padding: 1.25em 1.5em 1.5em 1.5em !important;
+
padding: 1.25em 1.5em 1.5em 1.5em!important
 
}
 
}
 +
 
.skin-vector #mw-panel {
 
.skin-vector #mw-panel {
−
    padding-left: 0 !important;
+
padding-left: 0!important;
−
    width: 10.5em !important;
+
width: 10.5em!important
−
}
  −
 
  −
.skin-vector #left-navigation,
  −
.skin-vector #content {
  −
margin-left: 11em
   
}
 
}
   −
div#MenuSidebar{
+
div#MenuSidebar {
−
    margin-bottom: 5rem;
+
margin-bottom: 5rem;
−
    position: absolute;
+
position: absolute;
−
    top: 200px;
+
top: 200px;
−
    width: 100%;
+
width: 100%
 
}
 
}
   −
div#MenuSidebar a.external{
+
div#MenuSidebar a.external {
−
    background:none;
+
background: 0;
−
    padding-right:auto;
+
padding-right: auto
 
}
 
}
    
div#MenuSidebar>:first-child {
 
div#MenuSidebar>:first-child {
−
    margin-top:0px;
+
margin-top: 0;
−
    border-top:2px solid #f4c430;
+
border-top: 2px solid #f4c430
−
color:;
   
}
 
}
    
div#MenuSidebar>:first-child>:first-child {
 
div#MenuSidebar>:first-child>:first-child {
−
    box-shadow:none;
+
box-shadow: none
 
}
 
}
    
div#MenuSidebar>ul {
 
div#MenuSidebar>ul {
−
    list-style: none none;
+
list-style: none none;
−
    width: 100%;
+
width: 100%;
−
    margin: 0px;
+
margin: 0
−
    background-color: rgba(20,20,20,0.6);
  −
    border-top: 2px solid #f4c430;
  −
    border-bottom-right-radius: 5px;
   
}
 
}
    
div#MenuSidebar ul {
 
div#MenuSidebar ul {
−
    position:relative;
+
position: relative;
−
    font-size:0.9rem;
+
font-size: .9rem
 
}
 
}
   −
div#MenuSidebar>ul>li ul{
+
div#MenuSidebar>ul>li ul {
−
    display: block;
+
display: block;
−
    opacity: 0;
+
opacity: 0;
−
    pointer-events: none;
+
pointer-events: none;
−
    visibility: hidden;
+
visibility: hidden;
−
    transition: 0.2s all ease-in-out;
+
transition: .2s all ease-in-out
−
    z-index:1;
  −
background-color:#373737;
  −
width: unset !important;
  −
white-space: nowrap;
  −
}
  −
 
  −
div#MenuSidebar>ul>li ul a,
  −
div#MenuSidebar>ul>li ul b{
  −
    padding-right: 18px;
   
}
 
}
    
div#MenuSidebar>ul ul {
 
div#MenuSidebar>ul ul {
−
    list-style: none none;
+
list-style: none none;
−
    position: absolute;
+
position: absolute;
−
    left: 100%;
+
left: 100%;
−
    width: 100%;
+
width: 100%;
−
    top: 0px;
+
top: 0;
−
    margin: 0px;
+
margin: 0;
−
    z-index:1;
+
z-index: 1;
−
    background-color: #333;
+
background-color: #333;
−
    box-shadow: -1px 2px 10px 0px rgba(0,0,0,0.4), -1px -2px 10px 0px rgba(0,0,0,0.4);
+
box-shadow: -1px 2px 10px 0 rgba(0, 0, 0, 0.4), -1px -2px 10px 0 rgba(0, 0, 0, 0.4)
 
}
 
}
    
div#MenuSidebar ul li:first-child {
 
div#MenuSidebar ul li:first-child {
−
    box-shadow: none;
+
box-shadow: none
 
}
 
}
−
div#MenuSidebar > p {
+
 
−
    padding: 8px 10px;
+
div#MenuSidebar>p {
−
    margin: 0px;
+
padding: 8px 10px;
−
    cursor: default;
+
margin: 0;
−
    color: #f4c430;
+
cursor: default;
−
    font-weight: bold;
+
margin-top: 8px
−
    margin-top: 8px;
  −
    background-color: rgba(30,30,30,0.6);
   
}
 
}
−
div#MenuSidebar>ul li:hover>ul{
+
 
−
    display: block;
+
div#MenuSidebar>ul li:hover>ul {
−
    opacity: 1;
+
display: block;
−
    pointer-events: auto;
+
opacity: 1;
−
    visibility: visible;
+
pointer-events: auto;
 +
visibility: visible
 
}
 
}
    
div#MenuSidebar li {
 
div#MenuSidebar li {
−
    position: relative;
+
position: relative;
−
    margin: 0px;
+
margin: 0;
−
    box-shadow: inset 0 1px rgba(244, 196, 48, 0.5);
+
box-shadow: inset 0 1px rgba(244, 196, 48, 0.5);
−
    transition: 0.15s all ease-in;
+
transition: .15s all ease-in;
−
    z-index: 1;
+
z-index: 1
 
}
 
}
   −
div#MenuSidebar li b, div#MenuSidebar li a {
+
div#MenuSidebar li b,
−
    padding: 5px 0px;
+
div#MenuSidebar li a {
−
    padding-left: 18px;
+
padding: 5px 0;
−
    display: block;
+
padding-left: 18px;
−
    width: auto;
+
display: block;
−
    height: 100%;
+
width: auto;
−
    font-weight: normal;
+
height: 100%;
 +
font-weight: normal
 
}
 
}
   −
div#MenuSidebar a{
+
div#MenuSidebar a {
−
    transition:all 0.15s ease-in;
+
transition: all .15s ease-in;
−
    color:#eaeaea;
+
color: #eaeaea
 
}
 
}
−
div#MenuSidebar a:hover,div#MenuSidebar b:hover{
+
 
−
    color:black;
+
div#MenuSidebar a:hover,
−
    background-color:#f4c430;
+
div#MenuSidebar b:hover {
−
    text-decoration:none !important;
+
color: #000;
 +
background-color: #f4c430;
 +
text-decoration: none!important
 
}
 
}
−
div#MenuSidebar b{
+
 
−
    cursor:default;
+
div#MenuSidebar b {
 +
cursor: default
 
}
 
}
−
/* div#MenuSidebar li.child>a::after,div#MenuSidebar li.child>b::after{
+
 
−
    float:right;
+
div#MenuSidebar li.child>a::after,
−
    content: "\f0da";
+
div#MenuSidebar li.child>b::after {
−
    font-family: 'Font Awesome 5 Free';
+
float: right;
−
    font-weight: 900;
+
content: "\f0da";
−
    display:inherit;
+
font-family: 'Font Awesome 5 Free';
−
    -moz-osx-font-smoothing: grayscale;
+
font-weight: 900;
−
    -webkit-font-smoothing: antialiased;
+
display: inherit;
−
    display: inline-block;
+
-moz-osx-font-smoothing: grayscale;
−
    font-style: normal;
+
-webkit-font-smoothing: antialiased;
−
    font-variant: normal;
+
display: inline-block;
−
    text-rendering: auto;
+
font-style: normal;
−
    line-height: 100%;
+
font-variant: normal;
−
    font-size: 1rem;
+
text-rendering: auto;
−
    padding-top: 2%;
+
line-height: 100%;
−
    margin-right:3px;
+
font-size: 1rem;
−
} */
+
padding-top: 2%;
−
div#MenuSidebar a.selflink{
+
margin-right: 3px
−
    font-weight: bold;
  −
    color: #f4c430;
  −
    cursor: default;
   
}
 
}
   −
div#MenuSidebar a.selflink:hover{
+
div#MenuSidebar a.selflink:hover {
−
    background-color:inherit;
+
background-color: inherit;
−
    color:#f4c430;
+
color: #f4c430
 
}
 
}
   −
div#MenuSidebar>ul>li:last-child>a,div#MenuSidebar>ul>li:last-child>b {
+
div#MenuSidebar>ul>li:last-child>a,
−
    border-bottom-right-radius: 5px;
+
div#MenuSidebar>ul>li:last-child>b {
 +
border-bottom-right-radius: 5px
 
}
 
}
    
div#MenuSidebar a.selflink::before {
 
div#MenuSidebar a.selflink::before {
−
    content:"";
+
display: block;
−
    display:block;
+
position: absolute;
−
    position:absolute;
+
left: 0;
−
    left:0px;
+
top: 50%;
−
    top:50%;
+
transform: translateY(-50%);
−
    transform:translateY(-50%);
+
border-top: 6px solid transparent;
−
    border-top:6px solid transparent;
+
border-bottom: 6px solid transparent;
−
    border-bottom:6px solid transparent;
+
border-left: 6px solid #f4c430
−
    border-left:6px solid #f4c430;
+
}
 +
 
 +
div#MenuSidebar {
 +
background-color: rgba(255, 255, 255, 0);
 +
box-shadow: none;
 +
top: 170px
 +
}
 +
 
 +
div#MenuSidebar>ul {
 +
background-color: hsla(0, 0%, 100%, 0.6);
 +
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
 +
border-bottom-right-radius: 4px;
 +
margin-top: -1px;
 +
margin-bottom: 6px
 +
}
 +
 
 +
div#MenuSidebar>ul>li {
 +
box-shadow: inset 0 1px #85c1f7;
 +
margin-left: 0
 +
}
 +
 
 +
div#MenuSidebar>ul ul {
 +
background-color: hsla(0, 0%, 100%, 0.9);
 +
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 +
border-radius: 4px;
 +
width: unset!important;
 +
z-index: 2
 +
}
 +
 
 +
div#MenuSidebar>ul ul li {
 +
box-shadow: none
 +
}
 +
 
 +
div#MenuSidebar>ul>li>ul {
 +
width: 150%;
 +
font-size: 100%
 +
}
 +
 
 +
div#MenuSidebar>ul>li>ul ul {
 +
font-size: 100%
 +
}
 +
 
 +
div#MenuSidebar a,
 +
div#MenuSidebar b {
 +
color: #333;
 +
text-decoration: none!important
 +
}
 +
 
 +
div#MenuSidebar>p {
 +
border-top: 0;
 +
border-bottom: 2px solid #4487df;
 +
color: #4487df;
 +
padding: 8px 10px 6px;
 +
background-color: hsla(0, 0%, 100%, 0.6);
 +
box-shadow: 0 0 4px rgba(0, 0, 0, 0.16), 0 0 4px rgba(0, 0, 0, 0.23);
 +
border-top-right-radius: 4px
 +
}
 +
 
 +
div#MenuSidebar>:first-child,
 +
div#MenuSidebar>:not(p)+ul {
 +
border-top: 0;
 +
border-top-right-radius: 4px
 +
}
 +
 
 +
div#MenuSidebar>:not(p)+ul>:first-child {
 +
border-top-right-radius: 4px
 +
}
 +
 
 +
div#MenuSidebar>ul>:first-child {
 +
box-shadow: none
 +
}
 +
 
 +
div#MenuSidebar>ul ul a,
 +
div#MenuSidebar>ul ul b {
 +
padding: 5px 18px 5px 10px;
 +
white-space: nowrap
 +
}
 +
 
 +
div#MenuSidebar>ul>li>a,
 +
div#MenuSidebar>ul>li>b {
 +
padding-left: 18px
 +
}
 +
 
 +
div#MenuSidebar li li.child>a::after,
 +
div#MenuSidebar li li.child>b::after {
 +
float: unset;
 +
position: absolute;
 +
right: 0;
 +
bottom: 5px
 +
}
 +
 
 +
div#MenuSidebar a:hover,
 +
div#MenuSidebar b:hover {
 +
background-color: rgba(205, 235, 252, 0.4)
 +
}
 +
 
 +
div#MenuSidebar a.selflink,
 +
div#MenuSidebar b.selflink {
 +
font-weight: normal;
 +
color: #333;
 +
background-image: linear-gradient(90deg, #4487df 4px, transparent 4px)
 +
}
 +
 
 +
div#MenuSidebar a.selflink:hover,
 +
div#MenuSidebar b.selflink:hover {
 +
background-color: inherit;
 +
color: #333
 +
}
 +
 
 +
.skin-vector #left-navigation,
 +
.skin-vector #content {
 +
margin-left: 10.5em
 +
}
 +
 
 +
div#MenuSidebar>ul,
 +
div#MenuSidebar>p {
 +
box-shadow: none;
 +
border-radius: 0!important;
 +
background-color: unset;
 +
margin: 0
 +
}
 +
 
 +
div#MenuSidebar>p {
 +
font-weight: normal;
 +
padding: 8px 10px 3px 10px
 +
}
 +
 
 +
div#MenuSidebar>ul>li {
 +
box-shadow: none
 +
}
 +
 
 +
div#MenuSidebar>p::after {
 +
height: 4px;
 +
display: block;
 +
width: 100%;
 +
position: absolute;
 +
bottom: -8px;
 +
left: 5px;
 +
border-radius: 25px;
 +
content: "";
 +
background-image: linear-gradient(90deg, #4487df, transparent 95%)
 +
}
 +
 
 +
div#MenuSidebar>p {
 +
color: #4487df;
 +
position: relative;
 +
padding-left: 15px!important;
 +
margin-top: 0!important;
 +
margin-bottom: 8px!important;
 +
border: 0!important
 +
}
 +
 
 +
div#MenuSidebar>ul>li>a,
 +
div#MenuSidebar>ul>li>b {
 +
padding: 2px 0;
 +
padding-left: 8px;
 +
margin-top: 2px;
 +
margin-left: 10px;
 +
margin-right: 0;
 +
border-radius: 5px 0 0 5px;
 +
transition: .3s all ease;
 +
color: #555
 +
}
 +
 
 +
div#MenuSidebar>ul>:first-child>a,
 +
div#MenuSidebar>ul>:first-child>b {
 +
margin-top: 5px
 +
}
 +
 
 +
div#MenuSidebar>ul>li>a:HOVER,
 +
div#MenuSidebar>ul>li>b:HOVER {
 +
background-color: rgba(34, 170, 255, 0.2);
 +
color: black
 +
}
 +
 
 +
div#MenuSidebar>ul>li>a.selflink {
 +
background-color: rgba(34, 170, 255, 0.2)!important;
 +
color: black!important
 +
}
 +
 
 +
div#MenuSidebar>ul {
 +
padding-top: 2px;
 +
padding-bottom: 2px;
 +
border: 0;
 +
background-image: none
 +
}
 +
 
 +
div#MenuSidebar {
 +
background-color: hsla(0, 0%, 100%, 0.6);
 +
border-radius: none!important;
 +
padding-top: 40px;
 +
box-shadow: none!important
 +
}
 +
 
 +
div#MenuSidebar>ul>li.child>a::after,
 +
div#MenuSidebar>ul>li.child>b::after {
 +
margin-right: 10px!important;
 +
color: inherit!important;
 +
padding-top: 1%!important;
 +
}
 +
 
 +
div#MenuSidebar>ul>li>ul {
 +
top: -4px
 +
}
 +
 
 +
a.feedlink {
 +
padding-left: 16px!important;
 
}
 
}
    
/* 为复制短链接增加一个图标 */
 
/* 为复制短链接增加一个图标 */
−
#MenuSidebar .copyUrl::after {
+
#MenuSidebar #wgCopyURL-url-copy-sidebar::after {
 
   content: "\f0c1";
 
   content: "\f0c1";
 
   font-family: 'Font Awesome 5 Free';
 
   font-family: 'Font Awesome 5 Free';
第185行： 第374行：  
   font-size: 70%;
 
   font-size: 70%;
 
   margin-left: .4em;
 
   margin-left: .4em;
−
   color: var(--production);
+
   color: var(--darkblue);
 
   pointer-events: auto;
 
   pointer-events: auto;
 
   cursor: pointer;
 
   cursor: pointer;
 
}
 
}
Zhbus
行政员、​界面管理员、​监督员、​管理员
15,756

个编辑

取自“https://w.zhbus.org/特殊:移动版差异/35665”

导航菜单