he4et/BadBarSlots
1
0
Fork 0
mirror of https://github.com/He4eT/BadBarSlots.git synced 2026-05-04 16:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

styling

Browse source
This commit is contained in:
He4eT 2017-01-31 01:36:40 +05:00
commit 32a10f361c
2 changed files with 45 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

55
css/style.css
View file

@ -20,41 +20,62 @@ body {
.logo { .logo {
text-align: center; text-align: center;
margin-bottom: 100px; margin-bottom: 50px;
}
.logo img {
filter: drop-shadow(0px 12px 20px rgba(255,48,0,0.5));
} }
.jSlots-wrapper { .jSlots-wrapper {
overflow: hidden; overflow: hidden;
height: 100px; height: 100px;
display: inline-block; /* to size correctly, can use float too, or width*/ display: inline-block; /* to size correctly, can use float too, or width*/
/*border: 2px solid #999;*/ transform: translateZ(0);
transform: translateZ(0);
background-color: #212121; background-color: #212121;
padding: 0 5px; padding: 0 5px;
} }
.slots { .jSlots-wrapper:before,
box-shadow: 0 0 10px 1px #000 inset; .jSlots-wrapper:after {
font-size: 0; content: '';
position: absolute;
left: 0;
right: 0;
box-shadow: 0 0 10px 3px #000;
z-index: 10;
}
.jSlots-wrapper:before {
top: 0;
}
.jSlots-wrapper:after {
bottom: 0;
} }
ul { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
.slot { .slot {
float: left; float: left;
margin: 0 10px;
box-shadow: 0 0 10px 2px #ff3000;
} }
.slot li { .slot li {
text-align: center; text-align: center;
padding: 0 30px; padding: 0 30px;
margin: 0 10px;
line-height: 100px; line-height: 100px;
font-size: 2rem; font-size: 2rem;
border-left: 2px solid #ccc; background-color: #616161;
border-right: 2px solid #ccc; color: #ffa52e;
background-color: #424242; font-family: monospace;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: #ff3000 0px 0px 25px;
} }

15
slots.html
View file

@ -12,14 +12,13 @@
<div class="logo"> <div class="logo">
<img src="img/logo.svg" alt=""> <img src="img/logo.svg" alt="">
</div> </div>
<div class="slots"> <ul class="slot">
<ul class="slot"> <li>Водка</li>
<li>Водка</li> <li>Гренадин</li>
<li>Гренадин</li> <li>Текила</li>
<li>Пусиджус</li> <li>Пусиджус</li>
<li>Текила</li> <li>Сопли</li>
</ul> </ul>
</div>
</div> </div>
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>