mirror of
https://github.com/reality/dbot.git
synced 2024-12-25 12:12:35 +01:00
eb1d12ec83
+ Add a counter to the random imgur page. + Added functionality to the ``c`` key to toggle the counter display. + Added functionality to the ``r`` key to reset the counter to default. + Added a new configuration option for a quote category to get the default 'highscore' from. This commit adds a small decreasing counter to the corner of the screen. Hidden by default, press ``c`` to toggle it. The counter will begin at highscore + 1, and will decrease with every new image. This is intended to be used during contests to see how many images one can cycle through before, for example, finding a picture of a cat. The counter can be reset using the ``r`` key. The highscore is automatically set at page load to the most recent quote added to the category specified in the configuration option. Therefore it is important that only numeric data is placed in that particular quote. The score will not reset to a new highscore automatically, and nor will a new highscore update the quote category.
109 lines
1.4 KiB
CSS
109 lines
1.4 KiB
CSS
#container {
|
|
text-align:center;
|
|
}
|
|
|
|
#container,#image {
|
|
margin:0;
|
|
max-height:100%;
|
|
max-width:100%;
|
|
padding:0;
|
|
}
|
|
|
|
#details {
|
|
display:none;
|
|
font-family:sans-serif;
|
|
font-weight:700;
|
|
left:25px;
|
|
min-width:280px;
|
|
padding:20px;
|
|
text-align:center;
|
|
top:25px;
|
|
}
|
|
|
|
#history {
|
|
left:25px;
|
|
margin:0;
|
|
max-height:210px;
|
|
overflow:hidden;
|
|
padding:0;
|
|
top:95px;
|
|
}
|
|
|
|
#history li {
|
|
font-family:monospace;
|
|
left:25px;
|
|
margin-bottom:10px;
|
|
opacity:0.1;
|
|
text-align:center;
|
|
width:168px;
|
|
}
|
|
|
|
#history li,#loading,#count {
|
|
display:block;
|
|
font-family:monospace;
|
|
font-size:10px;
|
|
padding:10px;
|
|
}
|
|
|
|
#history li:hover,#history li:nth-of-type(1) {
|
|
opacity:1!important;
|
|
}
|
|
|
|
#history li:nth-of-type(2) {
|
|
opacity:0.8;
|
|
}
|
|
|
|
#history li:nth-of-type(3) {
|
|
opacity:0.6;
|
|
}
|
|
|
|
#history li:nth-of-type(4) {
|
|
opacity:0.4;
|
|
}
|
|
|
|
#history li:nth-of-type(5) {
|
|
opacity:0.2;
|
|
}
|
|
|
|
#history,#loading,#details,#count {
|
|
position:absolute;
|
|
}
|
|
|
|
#loading, #count {
|
|
font-weight:500;
|
|
}
|
|
#loading {
|
|
top:95px;
|
|
left:220px;
|
|
min-width:95px;
|
|
}
|
|
|
|
#count {
|
|
bottom:25px;
|
|
left:25px;
|
|
display:none;
|
|
}
|
|
|
|
#loading,#details,#history li,#count {
|
|
background:rgba(43,43,43,0.8);
|
|
border-radius:5px;
|
|
color:#85bf25;
|
|
}
|
|
|
|
a {
|
|
color:inherit;
|
|
}
|
|
|
|
body.crop {
|
|
overflow:hidden;
|
|
}
|
|
|
|
html,body {
|
|
background-color:#121211;
|
|
border:0;
|
|
height:100%;
|
|
margin:0;
|
|
overflow:auto;
|
|
padding:0;
|
|
}
|