Custom Donation Tracker CSS

[obeewnn]

Hello,

I would like to request 2 custom CSS for the donation tracker to match my current layout, which can be viewed here:
https://www.youtube.com/watch?v=eCLuGJ-7IAs

Would like blue bar with teal outline and legible text preferably blue with teal outline as well.
Would need one for the vertical donation tracker, and one for the horizontal.

Thanks for your help!

[TheNumbLock]

What do you think about this?

[obeewnn]

omg... that looks so fucking badassedly amazing!!!!

[TheNumbLock]

Requested by: obeewnn

Donation Tracker Mode 1:

Link: http://deepbot.tv/widgets/donationtracker.htm
Width: 380
Height: 360

CSS Code:

Code: [Select]

body {
background-color: transparent;
color: white;
}

#content {
width:200px;
margin:5px;
margin-left: 45px;
}

#thermometer {
width:135px;
height:480px;
position: relative;
background: 0001fc !important;
background-image: url('http://puu.sh/jQ9id/858ad967ea.png') !important;
background
border: 3px solid #179893 !important;
webkit-border-radius: 0px !important;
border-radius: 0px !important;
  -webkit-box-shadow: 0px 0px 10px #179893, 0px 0px 20px #179893, 0px 0px 30px #179893 !important;
}

#thermometer .track {
height:280px;
top:10px;
width:20px;
border: 1px solid #179893 !important;
position: relative;
margin:0 auto;
background: #0001fc !important;
background-position: 0 -1px;
background-size: 100% 5%;
}

#thermometer .progress {
height:0%;
width:100%;
background: #179893 !important;
position: absolute;
bottom:0;
left:0;
}

#thermometer .goal {
position:absolute;
top:0;
}

#thermometer .end-amount {
display: inline-block;
padding:0 0px 0 25px;
border-top:1px solid black;
font-family: Impact !important;
font-weight: bold;
color: #0001fc !important;
  -webkit-text-stroke-color: #179893;
  -webkit-text-stroke-width: 2px;
  text-shadow:0px 0px 25px #179893;
}

#thermometer .progress .amount {
padding:0 25px 0 0px;
position: absolute;
border-top:1px solid #060;
font-family: Impact !important;
font-weight: bold;
color: #0001fc !important;
  -webkit-text-stroke-color: #179893;
  -webkit-text-stroke-width: 2px;
  text-shadow:0px 0px 25px #179893;
right:0;
}

Preview: (If there is a black background, it is just my background.)




Donation Tracker Mode 2:

Link: http://deepbot.tv/widgets/donationtracker.htm?mode=2
Width: 640
Height: 170

CSS Code:

Code: [Select]

body {
background-color: transparent;
color: white;
}

#content {
/* width:100%; */
padding: 10px 10px;
}

#thermometer {
position: relative;
  margin: 0px 10px 10px 10px;
height:100px;
background: 0001fc !important;
background-image: url('http://puu.sh/jOdKs/c86747946f.png') !important;
border: 3px solid #179893 !important;
-webkit-border-radius: 0px !important;
-webkit-box-shadow: 0px 0px 10px #179893, 0px 0px 20px #179893, 0px 0px 30px #179893 !important;
}

#thermometer .track {
height:50px;
top: 0px;
border: 1px solid #179893 !important;
margin: 20px 20px;
background: #0001fc !important;
}

#thermometer .progress {
height: 50px;
width:10%;
background: #179893 !important;
}

#thermometer .goal {
position:absolute;
width: 100%;
}

#thermometer .start-amount {
position: absolute;
float: right;
display: inline-block;
border-top:0px solid black;
font-family: Impact !important;
font-weight: bold;
font-size: 20px !important;
top: 50px;
right: 0px;
width: 100%;
color: #0001fc !important;
-webkit-text-stroke-color: #179893;
-webkit-text-stroke-width: 2px;
  text-shadow:0px 0px 25px #179893;
}
#thermometer .end-amount {
position: absolute;
float: right;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: bold;
font-size: 20px !important;
top: 50px;
right: 0px;
color: #0001fc !important;
-webkit-text-stroke-color: #179893;
-webkit-text-stroke-width: 2px;
  text-shadow:0px 0px 25px #179893;
}
#thermometer .progress .amount {
display: block;
position: absolute;
text-align: center;
border-top: 0px solid #060;
font-family: Impact !important;
font-size: 32px;
font-weight: bold;
color: #0001fc !important;
top: 27px;
width: 100%;
-webkit-text-stroke-color: #179893;
  -webkit-text-stroke-width: 2px;
  text-shadow:0px 0px 25px #179893;
}

Preview: (If there is a black background, it is just my background.)