MediaWiki:WMDE FR2016/Resources/ProgressBar/style.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

#donationMeterWrapper {
    position: relative;
    margin: {{{margin|4px 35px}}};
    /* max-width: 1200px; */
    border: 2px solid {{{border-color}}};
    border-radius: 8px;
}

#donationMeter {
    margin: 0 auto;
    height: {{{size|20}}}px;
}

#donationFill {
    position: absolute;
    top: -1px;
    left: 0;
    width: 90px;
    height: {{#expr: {{{size|20}}} + 2 }}px;
    background: {{{fill-color}}};
	{{#ifeq: {{{tip-type|sharp}}} | round | border-radius: 5px 16px 16px 5px; | border-radius: 5px 0 0 5px; }}
}

#pbarTip {
    position: absolute;
    right: 0;
    height: {{{size|20}}}px;
}

#pbarTip img {
    vertical-align: baseline;
}

#donationText {
    position: absolute;
    right: {{#expr: {{{size|20}}} / 2 }}px;
    height: 100%;
    width: 100%;
    text-align: right;
    line-height: {{#expr: {{{size|20}}} + 4 }}px;
    font-size: {{{font-size|15}}}px;
    font-weight: bold;
    color: {{{text-color-inner|#000000}}};
    overflow: hidden;
}

#donationRemaining {
    position: absolute;
    top: -1px;
    right: 10px;
    font-size: {{{font-size|15}}}px;
    color: {{{text-color-outer|#FFFFFF}}};
    font-weight: bold;
    display: none;
    line-height: {{#expr: {{{size|20}}} + 4 }}px;
}

#donationRemainingOuter {
    position: absolute;
    top: -1px;
    line-height: {{#expr: {{{size|20}}} + 4 }}px;
    right: -150px;
    font-size: {{{font-size|15}}}px;
    color: {{{text-color-outer|#FFFFFF}}};
    font-weight:bold;
    display: none;
}

#donationRemainingOuter .pointer-tip {
    width: 5px;
    height: 5px;
    background: {{{text-color-outer|#000000}}};
    float: left;
    border-radius: 100%;
    margin-top: {{#expr: {{{size|20}}} / 2 }}px;
}

#donationRemainingOuter .pointer-line {
    float: left;
    width: 25px;
    background: {{{text-color-outer|#000000}}};
    margin: {{#expr: {{{size|20}}} / 2 + 2 }}px 2px 0 0;
}

#daysLeft {
    display: none;
    font-size: {{{font-size|15}}}px;
    color: {{{text-color-inner|#000000}}};
    font-weight: bold;
    line-height: {{#expr: {{{size|20}}} + 4 }}px;
    position: absolute;
    left: 5px;
}

#donationMeterTip {
	{{#ifeq: {{{tip-type|sharp}}} | round | display: none; | display: block; }}
    background: {{{background-color}}};
    border-bottom: {{#expr: {{{size|20}}} / 2 }}px solid transparent;
    border-left: {{#expr: {{{size|20}}} / 2 }}px solid {{{fill-color}}};
    border-top: {{#expr: {{{size|20}}} / 2 }}px solid transparent;
    height: 0;
    position: absolute;
    right: 0;
    width: 0;
}