initial
This commit is contained in:
zDEFz
273
css/style.css
Normal file
273
css/style.css
Normal file
@ -0,0 +1,273 @@
|
||||
html {
|
||||
cursor: url(../assets/cursor_normal.png) 38 38, default;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
margin: 0;
|
||||
background-color: rgb(11, 82, 55);
|
||||
color: #E8F5E9;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
@media (min-width: 1279px) {
|
||||
body {
|
||||
background-image: url(../assets/window.png);
|
||||
background-position: center -8px;
|
||||
background-size: 1502px 889px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local;
|
||||
}
|
||||
}
|
||||
|
||||
/* the canary indicates whether we can load images */
|
||||
#canary {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #B3E5FC;
|
||||
}
|
||||
|
||||
#board {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 4em;
|
||||
background-image: url(../solitaire/table_large.png);
|
||||
width: 1279px;
|
||||
height: 805px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#cards {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 122px;
|
||||
height: 237px;
|
||||
background-image: url(../solitaire/card_front.png);
|
||||
position: absolute;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card.card-highlight:not(.grand_dragon) {
|
||||
background-image: linear-gradient( rgba(16, 125, 76, 0.5), rgba(255, 255, 255, 0)), url(../solitaire/card_front.png);
|
||||
}
|
||||
|
||||
.card.card-highlight.grand_dragon {
|
||||
filter: brightness(1.2) !important;
|
||||
}
|
||||
|
||||
.card.card-hotspot {
|
||||
border-radius: 8px;
|
||||
background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 50%, rgba(20, 50, 128, 0.5) 100%), url(../solitaire/card_front.png);
|
||||
}
|
||||
|
||||
.card-reverse {
|
||||
background-image: url(../solitaire/card_back.png)
|
||||
}
|
||||
.card-reverse.grand_dragon {
|
||||
background-image: url(../assets/card_back_upgrade.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.card-reverse.grand_dragon.grand_dragon_2 {
|
||||
background-image: url(../assets/card_back_upgrade_200.png)
|
||||
}
|
||||
.card-reverse .card-logo, .card-reverse .card-logo-a, .card-reverse .card-logo-b {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 122px;
|
||||
height: 237px;
|
||||
position: absolute;
|
||||
/*background-color: #FF00FF;*/
|
||||
}
|
||||
|
||||
.card-logo {
|
||||
position: absolute;
|
||||
width: 73px;
|
||||
height: 102px;
|
||||
left: 25px;
|
||||
top: 67px;
|
||||
}
|
||||
|
||||
.card-count-a, .card-count-b {
|
||||
position: absolute;
|
||||
font-family: sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-count-a {
|
||||
left: 10px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.card-count-b {
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.card-count-b, .card-mini-logo.b {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
}
|
||||
|
||||
.card-mini-logo-a, .card-mini-logo-b {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.card-mini-logo-a {
|
||||
left: 10px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.card-mini-logo-b {
|
||||
right: 10px;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.card-logo-a, .card-logo-b {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.card-logo-a {
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.card-logo-b {
|
||||
right: 6px;
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
.btn-dragon {
|
||||
position: absolute;
|
||||
left: 497px;
|
||||
width: 72px;
|
||||
height: 71px;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
#btn_dragon_red {
|
||||
top: 18px;
|
||||
background-image: url('solitaire/button_red_up.png');
|
||||
}
|
||||
#btn_dragon_green {
|
||||
top: 102px;
|
||||
}
|
||||
#btn_dragon_white {
|
||||
top: 184px;
|
||||
}
|
||||
|
||||
/*.ui-draggable-dragging {
|
||||
visibility: hidden;
|
||||
}*/
|
||||
|
||||
a, button, .btn-dragon, .bottom-button, .bottom-button * {
|
||||
cursor: url(../assets/cursor_point.png) 38 38, pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
position: absolute;
|
||||
top: 808px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
height: 46px;
|
||||
vertical-align: middle;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
background-image: url(../assets/button_bottom.png);
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
color: white;
|
||||
width: 141px;
|
||||
height: 46px;
|
||||
font-size: 20px;
|
||||
font-family: sans-serif;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottom-button.music {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-button:hover {
|
||||
background-image: url(../assets/button_bottom_hover.png);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#image_load_error {
|
||||
color: orange;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.card-logo-display, .card-text-display {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 48px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.card-logo-display .card-logo-a {
|
||||
left: 6px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.card-text-display {
|
||||
color: black;
|
||||
line-height: 48px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-text-display--red {
|
||||
color: #ae2810;
|
||||
}
|
||||
|
||||
.card-text-display--green {
|
||||
color: #17714e;
|
||||
}
|
||||
|
||||
.card-text-display--white {
|
||||
color: black;
|
||||
}
|
||||
Reference in New Issue
Block a user