|
|
| （未显示同一用户的3个中间版本） |
| 第1行： |
第1行： |
| <noinclude>用于展示投票箱</noinclude><includeonly><div class="salt-vote-container not-init"> | | <noinclude>用于展示投票箱</noinclude><includeonly><!-- |
| <div class="salt-vote-color"></div> | | --><div class="salt-vote-container not-init"> <!-- |
| <div class="salt-vote-title">{{{title|投票统计}}}</div>{{#if: {{{subtitle|}}} | <div class="salt-vote-subtitle">{{{subtitle|}}}</div> | }} | | -->{{#if: {{{color|{{{颜色|}}}}}} | <div class="salt-vote-color"> {{{color|{{{颜色|}}}}}}</div> | }}<!-- |
| <div class="salt-vote-bar"></div> | | --><div class="salt-vote-title">{{{title |{{{标题|投票统计 }}}}}}</div ><!-- |
| {{#forargs: # | | -->{{#if: {{{subtitle| {{{副标题|}}}}}} | <div class="salt-vote-subtitle">{{{subtitle |{{{副标题| }}}}}}</div> | }} <!-- |
| | _k
| | -->{{#if: {{{bar|}}} | <div class="salt-vote-bar"></div> | }}<!-- |
| | _v
| | --><ul class="salt-vote-options">{{#forargs: #| _k | _v| |
| | <nowiki></nowiki>
| | <li><div class="salt-vote-option-content"><!-- |
| * <div class="salt-vote-option">{{#var: _k }}</div><div class="salt-vote-voter">{{#var: _v }}</div> | | --><div class="salt-vote-option">{{#var: _k }}</div ><!-- |
| }}</div> | | --><div class="salt-vote-voter">{{#var: _v }}</div ><!-- |
| {{CSS|1=
| | --></div></li> |
| .salt-vote-container {
| | }}</ul><!-- |
| width: 100%;
| | --><ul class="salt-vote-describe">{{#forargs: * | _i | _d | |
| max-width: 50rem;
| | <li><div class="salt-vote-desc-option">{{#var: _i }}</div><div class="salt-vote-desc">{{#var: _d }}</div></li> |
| margin: 0 auto;
| | }}</ul><!-- |
| }
| | --></div><!-- |
| .salt-vote-container .salt-vote-title {
| | -->{{CSS|1= |
| width: 100%;
| | {{U:Salt lovely/沙盒/投票箱/style.css}} |
| font-size: 1.25rem;
| |
| line-height: 2rem;
| |
| text-align: center;
| |
| color: #222d;
| |
| }
| |
| .salt-vote-container .salt-vote-subtitle {
| |
| width: 100%;
| |
| font-size: 1rem;
| |
| line-height: 1.25rem;
| |
| text-align: center;
| |
| color: #333a;
| |
| }
| |
| | |
| .salt-vote-container .salt-vote-bar {
| |
| display: flex;
| |
| align-items: center;
| |
| width: 100%;
| |
| height: 1rem;
| |
| margin: 0 0 0 1rem;
| |
| }
| |
| .salt-vote-container .salt-vote-bar .salt-vote-bar-item {
| |
| position: relative;
| |
| min-width: 2rem;
| |
| height: 100%;
| |
| line-height: 100%;
| |
| text-align: center;
| |
| transition: 240ms ease;
| |
| text-shadow: 0 0 8px #fff;
| |
| }
| |
| .salt-vote-container .salt-vote-bar .salt-vote-bar-item:hover {
| |
| text-shadow: 0 0 8px #fff,0 0 8px #fff,0 0 16px #fff,0 0 16px #fff;
| |
| }
| |
| .salt-vote-container .salt-vote-bar .salt-vote-bar-item::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 25%;
| |
| bottom: 25%;
| |
| left: 0;
| |
| right: 0;
| |
| background-color: var(--vote-color, #ab8749);
| |
| opacity: .5;
| |
| transition: 240ms ease;
| |
| z-index: -1;
| |
| } | |
| .salt-vote-container .salt-vote-bar .salt-vote-bar-item:hover::before {
| |
| top: 0;
| |
| bottom: 0;
| |
| opacity: 1;
| |
| } | |
| | |
| .salt-vote-container .salt-vote-color {
| |
| display: none;
| |
| }
| |
| | |
| .salt-vote-container ul {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| margin: .5rem 0 .5rem 2rem;
| |
| } | |
| .salt-vote-container ul li {
| |
| display: flex;
| |
| position: relative;
| |
| width: 100%;
| |
| justify-content: flex-start;
| |
| align-items: center;
| |
| margin: 0 0 2px 0;
| |
| } | |
| .salt-vote-container ul li::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background-color: var(--vote-color, #ab8749);
| |
| opacity: 0;
| |
| z-index: -1;
| |
| } | |
| .salt-vote-container ul li:hover::before{
| |
| opacity: 0.1;
| |
| } | |
| .salt-vote-container ul li .salt-vote-option {
| |
| min-width: 4rem;
| |
| flex-shrink: 0;
| |
| padding: .5rem 1rem;
| |
| text-align: center;
| |
| border-left: 4px solid var(--vote-color, #ab8749);
| |
| font-size: 1rem;
| |
| }
| |
| .salt-vote-container ul li .salt-vote-voter {
| |
| width: 100%;
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| padding: 0 1rem 0 0;
| |
| font-size: 1rem;
| |
| }
| |
| .salt-vote-container ul li .salt-vote-voter a {
| |
| display: block;
| |
| position: relative;
| |
| height: 1.5rem;
| |
| padding: 0 .4rem;
| |
| margin: .1rem .2rem .1rem 0;
| |
| line-height: 1.5rem;
| |
| font-size: .9rem;
| |
| box-sizing: border-box;
| |
| }
| |
| .salt-vote-container ul li .salt-vote-voter a::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background-color: var(--vote-color, #ab8749);
| |
| opacity: 0.1;
| |
| z-index: -1;
| |
| } | |
| .salt-vote-container ul li .salt-vote-voter a:hover::before{
| |
| opacity: 0.2;
| |
| } | |
| }}{{#Widget:SaltVoteContainer}}</includeonly> | | }}{{#Widget:SaltVoteContainer}}</includeonly> |
