辑录样式 评分栏
#header, #side-bar, #page-title, #breadcrumbs, .page-tags, #page-options-container, #footer, #license-area, #odialog-shader-iframe, #odialog-shader, #odialog-container, .page-only { display: none !important; } #content-wrap { margin: 0 auto; } #main-content { margin: 0; padding: 0 0em; } .iframe-only { } /* ===================================== 评分栏 ===================================== */ :root{ /* ------------------- 评分栏 ------------------- */ /* 颜色 */ --rate-boder-flag: #333; --page-bg:#ecebf0; --rate-btn-bgcolor:#ddd; /* 尺寸 */ --rate-num-size:1.2rem; --rate-num-padding:0.4rem; --rate-padding-top:1rem; --rate-padding-left:0.1rem; --rate-btn-size:1rem; --rate-btn-width:1.6rem; --rate-btn-height:1.5rem; --rate-btn-mgleft:0.5rem; --rate-flag-underTOP:0.2rem; --rate-flag-top:0.2rem; --rate-flag-topHover:2.8rem; --rate-delta-half:0.8rem; --rate-delta-height:0.4rem; --rate-delta-size:0 0.8rem 0.4rem 0.8rem; --rate-gap-rateup:0.4rem; --rate-gap-ratedown:2.7rem; --rate-gap-cancel: 5rem; } .rateBox .creditButton p a:focus, .page-rate-widget-box a:focus{ user-select:none; background:transparent; } /* ----------- 常规 ---------------- */ .page-rate-widget-box { border-radius: 0; box-shadow: none; margin-bottom: 0rem; margin-right: 0.5rem; position: relative; z-index: 0; user-select:none; } #main-content .page-rate-widget-box .rate-points { border: solid 0px transparent; border-bottom: solid 2px #333; display: block; border-radius: 0; padding-top:var(--rate-padding-top, 0.6rem); padding-right:var(--rate-padding-left, 1rem); font-size: 0; color:#333 ; z-index:1; background-color: var(--page-bg) !important; position: relative; } .page-rate-widget-box .rate-points:after { content: ' '; width: 100%; background-color: transparent !important; border: solid 0px transparent; border-top: solid 2px #333; display: block; border-radius: 0; padding: 0.1rem 0rem 0 0rem; } .rate-points .number { font-size: var(--rate-num-size) ; background-color:#333 ; color:#e8e8e8 ; padding: 0 var(--rate-num-padding) ; letter-spacing: 1px; } .page-rate-widget-box .rate-points:before { content: '▶ 评分'; font-size: 0.8rem; padding: 0 0.5rem 0 0.6rem; letter-spacing: 0.2rem; color:#333; } .page-rate-widget-box:hover .rate-points:before { content: '◢ 评分'; } /* 评分旗子 */ .page-rate-widget-box a:hover { background-color: initial; color: #b01; } .page-rate-widget-box span.btn { background-color: transparent; border: solid 0px transparent; } .page-rate-widget-box .btn:not(:first-child){ border-radius: 0; z-index: 0; font-size: var(--rate-btn-size); width: 0; display: inline-flex; flex-wrap: wrap; justify-content: left; margin-right:var(--rate-btn-mgleft); height:var(--rate-btn-height); width: var(--rate-btn-width); background-color: var(--rate-btn-bgcolor); position: absolute; left: 0; --rate-btn-filter: drop-shadow(0px -1px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)); -webkit-filter:var(--rate-btn-filter); filter:var(--rate-btn-filter); } .page-rate-widget-box span.rateup{ margin-left: var(--rate-gap-rateup); } .page-rate-widget-box .ratedown{ margin-left: var(--rate-gap-ratedown) ;; } .page-rate-widget-box .cancel{ margin-left: var(--rate-gap-cancel); } .page-rate-widget-box .btn:last-child{ margin-right: var(--rate-flagLAST-mgRidght, 0.6rem); } .page-rate-widget-box .btn:not(:first-child) a{ padding:0; width: 100%; text-align: center; display: block; } .page-rate-widget-box .btn:not(:first-child):after{ content: ' '; height: 0; border-style: solid; border-width: var(--rate-delta-size); border-color: var(--rate-btn-bgcolor) var(--rate-btn-bgcolor) transparent var(--rate-btn-bgcolor); position: relative; top:var(--rate-flag-underTOP, 0.15rem); } /* 模块底界 */ .page-rate-widget-box:after{ position: absolute; content: ' '; width: 100%; height: var(--rate-btn-width); background-color: transparent ; display: block; z-index: -1; } .page-rate-widget-box .btn:not(:first-child){ } /* 鼠标移过 */ .page-rate-widget-box .btn:not(:first-child){ z-index: 0; top:var(--rate-flag-top); transition-property:var(--rate-flag-top); transition-duration: 0.5s; } .page-rate-widget-box:hover .rateup, .page-rate-widget-box:hover .ratedown, .page-rate-widget-box:hover .cancel { top:0rem; transition-property:top; transition-duration: 0.5s; top:var(--rate-flag-topHover); } .page-rate-widget-box:hover .rateup { transition-delay: 0s; } .page-rate-widget-box:hover .ratedown { transition-delay: 0.2s; } .page-rate-widget-box:hover .cancel { transition-delay: 0.3s; }
带分割线和页面信息的评分栏
#header, #side-bar, #page-title, #breadcrumbs, .page-tags, #page-options-container, #footer, #license-area, #odialog-shader-iframe, #odialog-shader, #odialog-container, .page-only { display: none !important; } #content-wrap { margin: 0 auto; } #main-content { margin: 0; padding: 0 0em; } .iframe-only { } /* ========================================= 分割线 ========================================= */ hr{ margin: 1em 0em; padding-bottom: -1em; height: 0px; border-top: rgba(128,128,128,0.8) dashed 3.5px; color: transparent; background-color: transparent; } .mz-hr{ display: flex !important; flex-wrap: nowrap; flex-basis: 20%; width: 100%; } .mz-hr p br{ display: none; } .mz-hr p{ line-height: 0; align-self:center; } .mz-hr hr{ flex-basis: 10%; flex-grow: 1; top: 1rem; position: relative; } .mz-hr tt { flex-basis: 0% !important; font-size: 0rem; } .mz-hr tt::before { content: ' '; margin: 0rem 0.5rem 0 0.2rem; font-size: 1.6rem; border-left: 2px solid grey; position: relative; top: 0.2rem; } .mz-hr sub { font-size: inherit; position: relative; top:0.3rem; } .mz-hr img{ width: 2rem; margin: 0 1rem } /* 分割线窄屏 */ @media (max-width: 500px){ hr{ border-top: 2px dashed rgba(128,128,128,0.8) ; } .mz-hr{ flex-wrap: nowrap; } .mz-hr .page-rate-widget-box{ flex-shrink: 0; } .mz-hr p{ flex-shrink: 1; } .mz-hr img{ flex-shrink: 2; } } /* ====================================== 页面信息块 ====================================== */ .lograte-wrap p{ margin-top:1.2rem; } .lograte-wrap p *{ display: inline-table; } .lograte-wrap .lograte-edit{ display: table-header-group; line-height: 2; text-align: center; white-space: nowrap; } .lograte-wrap .fa:before { padding-right: 0.2rem } .lograte-wrap .lograte-info:before{ content: '◎'; } .lograte-wrap .lograte-edit:before{ content: '◈'; } .lograte-wrap a { color:#555; text-decoration: none; } .lograte-wrap a:hover { color:#e8e8e8; background: #444; } /* ===================================== 评分栏 ===================================== */ :root{ /* ------------------- 评分栏 ------------------- */ /* 颜色 */ --rate-boder-flag: #333; --page-bg:#ecebf0; --rate-btn-bgcolor:#ddd; /* 尺寸 */ --rate-num-size:1.2rem; --rate-num-padding:0.4rem; --rate-padding-top:1rem; --rate-padding-left:0.1rem; --rate-btn-size:1rem; --rate-btn-width:1.6rem; --rate-btn-height:1.5rem; --rate-btn-mgleft:0.5rem; --rate-flag-underTOP:0.2rem; --rate-flag-top:0.2rem; --rate-flag-topHover:2.8rem; --rate-delta-half:0.8rem; --rate-delta-height:0.4rem; --rate-delta-size:0 0.8rem 0.4rem 0.8rem; --rate-gap-rateup:0.4rem; --rate-gap-ratedown:2.7rem; --rate-gap-cancel: 5rem; } .rateBox .creditButton p a:focus, .page-rate-widget-box a:focus{ user-select:none; background:transparent; } /* ----------- 常规 ---------------- */ .page-rate-widget-box { border-radius: 0; box-shadow: none; margin-bottom: 0rem; margin-right: 0.5rem; position: relative; z-index: 0; user-select:none; } #main-content .page-rate-widget-box .rate-points { border: solid 0px transparent; border-bottom: solid 2px #333; display: block; border-radius: 0; padding-top:var(--rate-padding-top, 0.6rem); padding-right:var(--rate-padding-left, 1rem); font-size: 0; color:#333 ; z-index:1; background-color: var(--page-bg) !important; position: relative; } .page-rate-widget-box .rate-points:after { content: ' '; width: 100%; background-color: transparent !important; border: solid 0px transparent; border-top: solid 2px #333; display: block; border-radius: 0; padding: 0.1rem 0rem 0 0rem; } .rate-points .number { font-size: var(--rate-num-size) ; background-color:#333 ; color:#e8e8e8 ; padding: 0 var(--rate-num-padding) ; letter-spacing: 1px; } .page-rate-widget-box .rate-points:before { content: '▶ 评分'; font-size: 0.8rem; padding: 0 0.5rem 0 0.6rem; letter-spacing: 0.2rem; color:#333; } .page-rate-widget-box:hover .rate-points:before { content: '◢ 评分'; } /* 评分旗子 */ .page-rate-widget-box a:hover { background-color: initial; color: #b01; } .page-rate-widget-box span.btn { background-color: transparent; border: solid 0px transparent; } .page-rate-widget-box .btn:not(:first-child){ border-radius: 0; z-index: 0; font-size: var(--rate-btn-size); width: 0; display: inline-flex; flex-wrap: wrap; justify-content: left; margin-right:var(--rate-btn-mgleft); height:var(--rate-btn-height); width: var(--rate-btn-width); background-color: var(--rate-btn-bgcolor); position: absolute; left: 0; --rate-btn-filter: drop-shadow(0px -1px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.1px var(--page-bg)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)) drop-shadow(0px 0px 0.5px var(--rate-boder-flag)) drop-shadow(0px 0px 0px var(--rate-boder-flag)); -webkit-filter:var(--rate-btn-filter); filter:var(--rate-btn-filter); } .page-rate-widget-box span.rateup{ margin-left: var(--rate-gap-rateup); } .page-rate-widget-box .ratedown{ margin-left: var(--rate-gap-ratedown) ;; } .page-rate-widget-box .cancel{ margin-left: var(--rate-gap-cancel); } .page-rate-widget-box .btn:last-child{ margin-right: var(--rate-flagLAST-mgRidght, 0.6rem); } .page-rate-widget-box .btn:not(:first-child) a{ padding:0; width: 100%; text-align: center; display: block; } .page-rate-widget-box .btn:not(:first-child):after{ content: ' '; height: 0; border-style: solid; border-width: var(--rate-delta-size); border-color: var(--rate-btn-bgcolor) var(--rate-btn-bgcolor) transparent var(--rate-btn-bgcolor); position: relative; top:var(--rate-flag-underTOP, 0.15rem); } /* 模块底界 */ .page-rate-widget-box:after{ position: absolute; content: ' '; width: 100%; height: var(--rate-btn-width); background-color: transparent ; display: block; z-index: -1; } .page-rate-widget-box .btn:not(:first-child){ } /* 鼠标移过 */ .page-rate-widget-box .btn:not(:first-child){ z-index: 0; top:var(--rate-flag-top); transition-property:var(--rate-flag-top); transition-duration: 0.5s; } .page-rate-widget-box:hover .rateup, .page-rate-widget-box:hover .ratedown, .page-rate-widget-box:hover .cancel { top:0rem; transition-property:top; transition-duration: 0.5s; top:var(--rate-flag-topHover); } .page-rate-widget-box:hover .rateup { transition-delay: 0s; } .page-rate-widget-box:hover .ratedown { transition-delay: 0.2s; } .page-rate-widget-box:hover .cancel { transition-delay: 0.3s; }