MediaWiki:Gadget-Awards.css: Difference between revisions
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
No edit summary |
No edit summary |
||
Line 2: | Line 2: | ||
.pollspinner { | .pollspinner { | ||
width: 100%; | |||
overflow: hidden; | |||
position: relative | |||
} | } | ||
.pollspinner.animated { | .pollspinner.animated { | ||
transition: height 0.5s; | |||
-webkit-transition: height 0.5s | |||
} | } | ||
.pollspinnerbox { | .pollspinnerbox { | ||
position: absolute; | |||
left: 100%; | |||
width: 100%; | |||
overflow: hidden; | |||
} | } | ||
.pollspinner.animated .pollspinnerbox { | .pollspinner.animated .pollspinnerbox { | ||
transition: left 0.5s; | |||
transition-delay: 0.5s; | |||
-webkit-transition: left 0.5s; | |||
-webkit-transition-delay: 0.5s | |||
} | } | ||
.pollspinnerbox.end { | .pollspinnerbox.end { | ||
max-width: 320px; | |||
background-image: url(/images/poll-thanks.png); | |||
background-size: 100% auto; | |||
padding: 209px 9px 9px; | |||
text-align: center; | |||
box-sizing: border-box; | |||
background-repeat: no-repeat; | |||
background-color: black; | |||
font-size: 11px; | |||
color: white; | |||
margin: 0 auto; | |||
background-position: top center; | |||
} | } | ||
.pollspinnerbox.visible { | .pollspinnerbox.visible { | ||
left: 0; | |||
} | } | ||
.pollspinner:not(.animated) .pollspinnerbox.visible { | .pollspinner:not(.animated) .pollspinnerbox.visible { | ||
position: static; | |||
} | } | ||
.pollspinnerbox.hidden { | .pollspinnerbox.hidden { | ||
left: -100%; | |||
} | } | ||
@keyframes pollthrobber { | @keyframes pollthrobber { | ||
from { | |||
background-position: right 0, right 20px; | |||
} | |||
to { | |||
background-position: right -320px, right 20px; | |||
} | |||
} | } | ||
@-webkit-keyframes pollthrobber { | @-webkit-keyframes pollthrobber { | ||
from { | |||
background-position: right 0, right 20px; | |||
} | |||
to { | |||
background-position: right -320px, right 20px; | |||
} | |||
} | } | ||
.pollspinner .throbber { | .pollspinner .throbber { | ||
color: transparent; | |||
width: 100%; | |||
height: 20px; | |||
} | } | ||
.pollspinner.throbbing:not(#N) .throbber { | .pollspinner.throbbing:not(#N) .throbber { | ||
color: inherit; | |||
animation: pollthrobber 2s steps(16); | |||
animation-iteration-count: 1; | |||
animation-fill-mode: both; | |||
-webkit-animation: pollthrobber 2s steps(16); | |||
-webkit-animation-iteration-count: 1; | |||
-webkit-animation-fill-mode: both; | |||
background-image: url(/images/poll-throbber.png), url(/images/poll-throbber.gif); | |||
background-size: 20px 320px, 20px 20px; | |||
background-repeat: no-repeat; | |||
background-position: right 20px, right 0; | |||
text-align: right; | |||
padding: 0px 25px 0px; | |||
box-sizing: border-box; | |||
} | } | ||
.pollspinner_skip:not(#N):not(#N) { | .pollspinner_skip:not(#N):not(#N) { | ||
margin-left: 1em; | |||
} | } | ||
.pollspinner .pds-box { | .pollspinner .pds-box { | ||
width: 100% !important; | |||
} | } | ||
.pollspinner .pds-input-label { | .pollspinner .pds-input-label { | ||
width: 100% !important; | |||
float: none !important; | |||
padding: 0 0 0 25px !important; | |||
box-sizing: border-box !important; | |||
min-height: 0px !important; | |||
} | } | ||
.pollspinner .pds-answer-group { | .pollspinner .pds-answer-group { | ||
padding: 1px !important; | |||
position: relative !important; | |||
margin: 5px 0 !important; | |||
} | } | ||
.pollspinner .pds-answer-input { | .pollspinner .pds-answer-input { | ||
position: absolute !important; | |||
top: 50% !important; | |||
transform: translate(0, -50%) !important; | |||
} | } | ||
.pollspinner .pds-other-label { | .pollspinner .pds-other-label { | ||
margin: 0 0 0 25px !important; | |||
} | } | ||
.pollspinner .pollspinner_begin { | .pollspinner .pollspinner_begin { | ||
font: normal normal bold 14px/24px Arial; | |||
color: #333; | |||
text-align: left; | |||
background: #f2f2f2 linear-gradient(to bottom, #ffffff, #ededed) repeat-x left top; | |||
border: 1px solid #999; | |||
border-radius: 11px; | |||
display: block; | |||
text-decoration: none; | |||
margin: 0; | |||
padding: 0 24px; | |||
width: -moz-fit-content; | |||
width: -webkit-fit-content; | |||
width: fit-content; | |||
} | } | ||
.pollspinner .pollspinner_begin.clicked { | .pollspinner .pollspinner_begin.clicked { | ||
pointer-events: none; | |||
} | } | ||
.pollspinner .pollspinner_begin, .pollspinner .pds-vote-button { | .pollspinner .pollspinner_begin, .pollspinner .pds-vote-button { | ||
cursor: pointer; | |||
box-shadow: 0 -0.25em 0.5em 0 rgba(0,0,0,0.1) inset, 0 0.25em 0.5em 0 rgba(255,255,255,0.1) inset; | |||
} | } | ||
.pollspinner .pollspinner_begin:active, .pollspinner .pds-vote-button:active { | .pollspinner .pollspinner_begin:active, .pollspinner .pds-vote-button:active { | ||
cursor: pointer; | |||
box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.1) inset, 0 -0.25em 0.5em 0 rgba(255,255,255,0.1) inset; | |||
} | |||
/* CPF container polls */ | |||
.cpf-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: justify; | |||
--border-color: #c55; | |||
--background-color: #f88; | |||
--highlight-color-1: #844; | |||
--highlight-color-2: #fdd; | |||
--text-color: #422; | |||
--header-background-color: #c55; | |||
--header-text-color: #fee; | |||
} | |||
.cpf-container .cpf-poll { | |||
border-width: 1px 1px 1px 5px; | |||
border-color: var(--border-color); | |||
border-style: solid; | |||
background-color: var(--background-color); | |||
max-width: 300px; | |||
margin: 2px; | |||
color: var(--text-color); | |||
} | |||
.cpf-container .cpf-header { | |||
padding: 5px; | |||
background-color: var(--header-background-color); | |||
color: var(--header-text-color); | |||
} | |||
.cpf-container .cpf-title { | |||
font-size: 150%; | |||
text-align: center; | |||
border-bottom: 1px solid var(--header-text-color); | |||
margin-bottom: 2px; | |||
padding-bottom: 2px; | |||
} | |||
.cpf-container .pds-question { | |||
display: none; | |||
} | |||
.cpf-container .pds-box { | |||
padding: 5px !important; | |||
border: none !important; | |||
background: none !important; | |||
} | |||
.cpf-container .pds-answer-group{ | |||
margin: 4px !important; | |||
color: var(--text-color); | |||
} | |||
.cpf-container .pds-answer-group:hover .pds-radiobutton, | |||
.cpf-container .pds-answer-group:hover .pds-answer-span { | |||
color: var(--highlight-color-1); | |||
filter: drop-shadow(1px 1px 3px var(--highlight-color-2)); | |||
} | |||
.cpf-container .pds-answer { | |||
padding: 0 !important; | |||
border-top: none !important; | |||
border-color: var(--border-color) !important; | |||
} | |||
.cpf-container .pds-vote { | |||
padding: 5px 0 0 0 !important; | |||
} | |||
.cpf-container .pds-radiobutton { | |||
margin: 0 !important; | |||
} | |||
.cpf-container .pds-links { | |||
margin-top: 5px !important; | |||
color: var(--text-color) !important; | |||
} | |||
.cpf-container .pds-links a, .cpf-container .pds-links-back a { | |||
color: var(--text-color) !important; | |||
opacity: 50%; | |||
} | |||
.cpf-container .pds-input-label { | |||
align-self: end; | |||
} | |||
.cpf-container .pds-answer-input{ | |||
align-self: center !important; | |||
} | |||
.cpf-container .pds-vote-button { | |||
background-color: var(--border-color) !important; | |||
} | |||
.cpf-container .pds-vote-button:hover { | |||
background-color: var(--highlight-color-1) !important; | |||
} | } |
Revision as of 21:14, June 13, 2020
/* Pollspinner (for the main page during awards) */
.pollspinner {
width: 100%;
overflow: hidden;
position: relative
}
.pollspinner.animated {
transition: height 0.5s;
-webkit-transition: height 0.5s
}
.pollspinnerbox {
position: absolute;
left: 100%;
width: 100%;
overflow: hidden;
}
.pollspinner.animated .pollspinnerbox {
transition: left 0.5s;
transition-delay: 0.5s;
-webkit-transition: left 0.5s;
-webkit-transition-delay: 0.5s
}
.pollspinnerbox.end {
max-width: 320px;
background-image: url(/images/poll-thanks.png);
background-size: 100% auto;
padding: 209px 9px 9px;
text-align: center;
box-sizing: border-box;
background-repeat: no-repeat;
background-color: black;
font-size: 11px;
color: white;
margin: 0 auto;
background-position: top center;
}
.pollspinnerbox.visible {
left: 0;
}
.pollspinner:not(.animated) .pollspinnerbox.visible {
position: static;
}
.pollspinnerbox.hidden {
left: -100%;
}
@keyframes pollthrobber {
from {
background-position: right 0, right 20px;
}
to {
background-position: right -320px, right 20px;
}
}
@-webkit-keyframes pollthrobber {
from {
background-position: right 0, right 20px;
}
to {
background-position: right -320px, right 20px;
}
}
.pollspinner .throbber {
color: transparent;
width: 100%;
height: 20px;
}
.pollspinner.throbbing:not(#N) .throbber {
color: inherit;
animation: pollthrobber 2s steps(16);
animation-iteration-count: 1;
animation-fill-mode: both;
-webkit-animation: pollthrobber 2s steps(16);
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
background-image: url(/images/poll-throbber.png), url(/images/poll-throbber.gif);
background-size: 20px 320px, 20px 20px;
background-repeat: no-repeat;
background-position: right 20px, right 0;
text-align: right;
padding: 0px 25px 0px;
box-sizing: border-box;
}
.pollspinner_skip:not(#N):not(#N) {
margin-left: 1em;
}
.pollspinner .pds-box {
width: 100% !important;
}
.pollspinner .pds-input-label {
width: 100% !important;
float: none !important;
padding: 0 0 0 25px !important;
box-sizing: border-box !important;
min-height: 0px !important;
}
.pollspinner .pds-answer-group {
padding: 1px !important;
position: relative !important;
margin: 5px 0 !important;
}
.pollspinner .pds-answer-input {
position: absolute !important;
top: 50% !important;
transform: translate(0, -50%) !important;
}
.pollspinner .pds-other-label {
margin: 0 0 0 25px !important;
}
.pollspinner .pollspinner_begin {
font: normal normal bold 14px/24px Arial;
color: #333;
text-align: left;
background: #f2f2f2 linear-gradient(to bottom, #ffffff, #ededed) repeat-x left top;
border: 1px solid #999;
border-radius: 11px;
display: block;
text-decoration: none;
margin: 0;
padding: 0 24px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.pollspinner .pollspinner_begin.clicked {
pointer-events: none;
}
.pollspinner .pollspinner_begin, .pollspinner .pds-vote-button {
cursor: pointer;
box-shadow: 0 -0.25em 0.5em 0 rgba(0,0,0,0.1) inset, 0 0.25em 0.5em 0 rgba(255,255,255,0.1) inset;
}
.pollspinner .pollspinner_begin:active, .pollspinner .pds-vote-button:active {
cursor: pointer;
box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.1) inset, 0 -0.25em 0.5em 0 rgba(255,255,255,0.1) inset;
}
/* CPF container polls */
.cpf-container {
display: flex;
flex-wrap: wrap;
align-items: justify;
--border-color: #c55;
--background-color: #f88;
--highlight-color-1: #844;
--highlight-color-2: #fdd;
--text-color: #422;
--header-background-color: #c55;
--header-text-color: #fee;
}
.cpf-container .cpf-poll {
border-width: 1px 1px 1px 5px;
border-color: var(--border-color);
border-style: solid;
background-color: var(--background-color);
max-width: 300px;
margin: 2px;
color: var(--text-color);
}
.cpf-container .cpf-header {
padding: 5px;
background-color: var(--header-background-color);
color: var(--header-text-color);
}
.cpf-container .cpf-title {
font-size: 150%;
text-align: center;
border-bottom: 1px solid var(--header-text-color);
margin-bottom: 2px;
padding-bottom: 2px;
}
.cpf-container .pds-question {
display: none;
}
.cpf-container .pds-box {
padding: 5px !important;
border: none !important;
background: none !important;
}
.cpf-container .pds-answer-group{
margin: 4px !important;
color: var(--text-color);
}
.cpf-container .pds-answer-group:hover .pds-radiobutton,
.cpf-container .pds-answer-group:hover .pds-answer-span {
color: var(--highlight-color-1);
filter: drop-shadow(1px 1px 3px var(--highlight-color-2));
}
.cpf-container .pds-answer {
padding: 0 !important;
border-top: none !important;
border-color: var(--border-color) !important;
}
.cpf-container .pds-vote {
padding: 5px 0 0 0 !important;
}
.cpf-container .pds-radiobutton {
margin: 0 !important;
}
.cpf-container .pds-links {
margin-top: 5px !important;
color: var(--text-color) !important;
}
.cpf-container .pds-links a, .cpf-container .pds-links-back a {
color: var(--text-color) !important;
opacity: 50%;
}
.cpf-container .pds-input-label {
align-self: end;
}
.cpf-container .pds-answer-input{
align-self: center !important;
}
.cpf-container .pds-vote-button {
background-color: var(--border-color) !important;
}
.cpf-container .pds-vote-button:hover {
background-color: var(--highlight-color-1) !important;
}