Created
January 28, 2020 21:10
-
-
Save erip2/adc1341b3082291002cc76ffd9975c27 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Buttons */ | |
.btn-default { | |
display: inline-block; | |
font-weight: 400; | |
color: #0065F2; | |
text-align: center; | |
vertical-align: middle; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
background-color: transparent; | |
border: 1px solid transparent; | |
padding: 8px 28px; | |
margin: 0 10px 0 0; | |
font-size: 1rem; | |
line-height: 0.09px; | |
border: 1px solid rgba(0,101,242,0.16); | |
} | |
.btn-bg-primary { | |
background: #0065F2; | |
color: #fff; | |
} | |
/* Lotteries */ | |
#lotteries { | |
max-width: 1440px; | |
margin-left: -15px; | |
margin-right: -15px; | |
margin-bottom: 30px; | |
display: flex; | |
display: -webkit-flex; | |
flex-wrap: wrap; | |
} | |
.lotteries-entry { | |
text-align: center; | |
padding: 24px 24px 60px 24px; | |
display: flex; | |
flex-direction: column; | |
height: calc(100% - 120px); | |
justify-content: space-between; | |
} | |
.lotteries-entry .btn-bg-primary { | |
font-size: 20px; | |
border: 1px solid transparent; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
height: 60px; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
text-transform: uppercase; | |
} | |
.lotteries-item { | |
display: inline-block; | |
position: relative; | |
width: 100%; | |
border-radius: 6px; | |
background-color: #FFFFFF; | |
box-shadow: 0 0 2px 0 rgba(0,0,0,0.1), 0 1px 4px 0 rgba(0,0,0,0.1); | |
margin-left: 15px; | |
margin-right: 15px; | |
} | |
.lotteries-jackpot { | |
text-align: center; | |
margin-top:10px; | |
margin: auto; | |
padding-bottom: 20px; | |
} | |
.jackpot-total { | |
font-size: 40px; | |
font-weight: 500; | |
line-height: 28px; | |
} | |
.lot-title { | |
font-size: 14px !important; | |
text-transform: uppercase; | |
font-weight: 500; | |
line-height: 28px; | |
letter-spacing: 2px; | |
margin-bottom: 0; | |
} | |
.lotteries-jackpot p { | |
font-size: 40px; | |
font-weight: 500; | |
line-height: 28px; | |
} | |
.lotteries-item .btn-default { | |
display: block; | |
width: 100%; | |
margin: 0 auto; | |
} | |
.draw-date { | |
color: #4F4F4F !important; | |
font-size: 14px; | |
font-weight: 500; | |
line-height: 20px; | |
} | |
.draw-date span { | |
font-weight: 600; | |
} | |
.lotteries-logo { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
position: relative; | |
height: 120px; | |
background: aliceblue; | |
} | |
.lotteries-jackpot ~ .lattest-draw { | |
border-top: 1px solid; | |
} | |
.lotteries-entry .lattest-draw { | |
border-bottom: 1px solid; | |
padding: 10px 0; | |
} | |
.lattest-draw .btn-default { | |
border: 0; | |
padding: 0; | |
text-transform: inherit; | |
font-weight: 500; | |
} | |
.lattest-draw .ticket-numbers ~ .btn-default { | |
padding-bottom: 25px; | |
} | |
.filter-shadow { | |
position: absolute; | |
width: 129%; | |
height: 130%; | |
left: -8px; | |
top: -9px; | |
} | |
.next-draw { | |
margin-top: 20px; | |
} | |
.lotteries-logo .far { | |
display: none; | |
position: absolute; | |
right: 10px; | |
top: 10px; | |
} | |
.numbers-container { | |
margin: 15px 0; | |
} | |
.numbers-container span { | |
display: inline-block; | |
width: 42px; | |
border-radius: 22px; | |
padding: 6px 8px; | |
background: #D1D1D1; | |
margin-right: 5px; | |
font-size: 19px; | |
} | |
.lattest-draw .numbers-container span:nth-child(7), .lattest-draw .numbers-container span:nth-child(8) { | |
position: relative; | |
background-color: #169AD6; | |
} | |
.numbers-container span:nth-child(7):after, .numbers-container span:nth-child(8):after { | |
position: absolute; | |
width: 50px; | |
color: #169AD6; | |
top: 43px; | |
left: -4px; | |
font-size: 12px; | |
font-weight: 500; | |
line-height: 16px; | |
} | |
.numbers-container span:nth-child(7):after { | |
content: "Jolly"; | |
} | |
.numbers-container span:nth-child(8):after { | |
content: "Superstar"; | |
} | |
.draw-time { | |
margin-bottom: 30px; | |
} | |
.draw-time span { | |
width: 60px; | |
position: relative; | |
font-size: 26px; | |
display: inline-block; | |
border-radius: 50%; | |
border: 2px solid #EAEAEA; | |
padding: 7px 10px; | |
margin-right: 8px; | |
font-weight: 500; | |
} | |
.draw-time span:after { | |
content: ''; | |
position: absolute; | |
bottom: -22px; | |
font-size: 12px; | |
left: 6px; | |
font-size: 10px; | |
color: #4F4F4F; | |
letter-spacing: 1px; | |
} | |
.draw-time span.hours:after { | |
content: 'HOURS' | |
} | |
.draw-time span.minutes:after { | |
content: 'MINUTES' | |
} | |
.draw-time span.seconds:after { | |
content: 'SECONDS' | |
} | |
/* Lotteries for Saysal Loto - or for orange color */ | |
.lotteries-orange .lotteries-logo { | |
background: #FA8E1C; | |
} | |
.lotteries-orange .lotteries-jackpot > * { | |
color: #FA8E1C; | |
} | |
.lotteries-orange .lattest-draw { | |
border-top-color: #FA8E1C; | |
border-bottom-color: #FA8E1C; | |
} | |
.lotteries-orange .lattest-draw > *, .lotteries-orange .lot-title { | |
color: #FA8E1C; | |
} | |
.lotteries-orange .numbers-container span { | |
background: #FA8E1C; | |
color: #fff; | |
} | |
.lotteries-orange .btn-default svg polyline { | |
stroke: #FA8E1C; | |
} | |
.lotteries-orange .lotteries-entry .btn-bg-primary { | |
background: #FA8E1C; | |
} | |
.lotteries-orange .filter-shadow path { | |
stroke: #FA8E1C; | |
} | |
/* Lotteries for Milli Piyango - or for blue color */ | |
.lotteries-blue .lotteries-logo { | |
background: #23AAE2; | |
} | |
.lotteries-blue .lotteries-jackpot > * { | |
color: #23AAE2; | |
} | |
.lotteries-blue .lattest-draw { | |
border-top-color: #23AAE2; | |
border-bottom-color: #23AAE2; | |
} | |
.lotteries-blue .lattest-draw > *, .lotteries-blue .lot-title { | |
color: #23AAE2; | |
} | |
.lotteries-blue .jackpot-title { | |
color: #23AAE2; | |
font-size: 14px; | |
font-weight: bold; | |
letter-spacing: 2px; | |
line-height: 16.36px; | |
text-align: center; | |
} | |
.lotteries-blue .numbers-container span { | |
background: #23AAE2; | |
color: #fff; | |
} | |
.lotteries-blue .lotteries-entry .btn-bg-primary { | |
background: #23AAE2; | |
} | |
.lotteries-blue .filter-shadow path { | |
stroke: #23AAE2; | |
} | |
.lotteries-blue .lattest-draw .btn-default { | |
color: #23AAE2; | |
} | |
.lotteries-blue .btn-default svg polyline { | |
stroke: #23AAE2; | |
} | |
.lattest-draw .ticket-numbers { | |
display: inline-block; | |
margin: 25px auto; | |
border: 1px solid #DFDFDF; | |
border-radius: 4px; | |
padding: 5px 10px; | |
color: #383838 !important; | |
font-size: 26px; | |
line-height: 29.58px; | |
font-weight: 500; | |
} | |
/* Lotteries for Milli Piyango - or for violet color */ | |
.lotteries-violet .lotteries-logo { | |
background: #7750A2; | |
} | |
.lotteries-violet .lotteries-jackpot > * { | |
color: #7750A2; | |
} | |
.lotteries-violet .lattest-draw { | |
border-top-color: #7750A2; | |
border-bottom-color: #7750A2; | |
} | |
.lotteries-violet .lattest-draw > *, .lotteries-violet .lot-title { | |
color: #7750A2; | |
} | |
.lotteries-violet .jackpot-title { | |
color: #7750A2; | |
font-size: 14px; | |
font-weight: bold; | |
letter-spacing: 2px; | |
line-height: 16.36px; | |
text-align: center; | |
} | |
.lotteries-violet .numbers-container span { | |
background: #7750A2; | |
color: #fff; | |
} | |
.lotteries-violet .lotteries-entry .btn-bg-primary { | |
background: #7750A2; | |
} | |
.lotteries-violet .filter-shadow path { | |
stroke: #7750A2; | |
} | |
.lotteries-violet .lattest-draw .btn-default { | |
color: #7750A2; | |
} | |
.lotteries-violet .btn-default svg polyline { | |
stroke: #7750A2; | |
} | |
@media (max-width: 979px) { | |
#lotteries { | |
flex-wrap: nowrap; | |
overflow: scroll; | |
} | |
.lotteries-item { | |
min-width: 330px; | |
} | |
.lattest-draw { | |
display: none; | |
} | |
.next-draw { | |
border-top: 1px solid rgba(0, 0, 0, 0.08); | |
} | |
.lotteries-jackpot { | |
margin-bottom: 0; | |
padding-bottom: 0; | |
} | |
.draw-time span { | |
font-size: 28px; | |
} | |
.lotteries-jackpot p { | |
font-size: 35px; | |
} | |
.next-draw { | |
margin-top: 0; | |
padding-top: 10px; | |
} | |
.lotteries-orange .next-draw { | |
border-top: 1px solid #FA8E1C; | |
} | |
} | |
/* Mobile */ | |
@media (max-width: 767px) { | |
.lotteries-item { | |
width: calc(100% - 40px); | |
margin-left: 20px; | |
margin-right: 20px; | |
margin-bottom: 30px; | |
} | |
#lotteries { | |
flex-wrap: wrap; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment