initial
This commit is contained in:
zDEFz
37
css/colorblind.css
Normal file
37
css/colorblind.css
Normal file
File diff suppressed because one or more lines are too long
254
css/noimages.css
Normal file
254
css/noimages.css
Normal file
@ -0,0 +1,254 @@
|
||||
/* filter is used to correct game assets and is not needed in the no-assets fallback */
|
||||
* {
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: lightgray;
|
||||
border: 1px solid darkgray;
|
||||
border-top: 2px solid white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-count-a {
|
||||
top: 1px;
|
||||
}
|
||||
.card-count-b {
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.card-reverse {
|
||||
border: 10px solid #66928a;
|
||||
background-image: linear-gradient(45deg, #0d5d50 25%, transparent 25%, transparent 75%, #0d5d50 75%), linear-gradient(45deg, #0d5d50 25%, transparent 25%, transparent 75%, #0d5d50 75%);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 5px 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ugly hack fix */
|
||||
.card.card-highlight.card-reverse:not(.grand_dragon) {
|
||||
background-color: #c6f2ea;
|
||||
background-image: linear-gradient(45deg, #0d5d50 25%, transparent 25%, transparent 75%, #0d5d50 75%), linear-gradient(45deg, #0d5d50 25%, transparent 25%, transparent 75%, #0d5d50 75%);
|
||||
}
|
||||
|
||||
.slot {
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.slot-spare {
|
||||
border: 4px dotted rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.slot-flower, .slot-out {
|
||||
border: 2px solid rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.slot-tray {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 5px 5px;
|
||||
}
|
||||
|
||||
#board {
|
||||
background-color: #012f1b;
|
||||
}
|
||||
|
||||
.btn-dragon {
|
||||
background-color: #b09d6f;
|
||||
font-size: 40px;
|
||||
box-sizing: border-box;
|
||||
border-style: none;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 64px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0px 2px 12px rgba(0, 0, 0, 0.9), 0px 0px 2px rgba(0, 0, 0, 0.32);
|
||||
border: 2px solid black;
|
||||
}
|
||||
.btn-dragon[style*="_active.png"] {
|
||||
background-color: #e7d7b1;
|
||||
}
|
||||
.btn-dragon[style*="_down.png"] {
|
||||
background-color: #86754a;
|
||||
}
|
||||
|
||||
#btn_dragon_red {
|
||||
color: #ae2810;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
#btn_dragon_red:after {
|
||||
content: "\004E2D";
|
||||
}
|
||||
#btn_dragon_green {
|
||||
color: #17714e;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
#btn_dragon_green:after {
|
||||
content: "\024F35";
|
||||
}
|
||||
#btn_dragon_white {
|
||||
color: black;
|
||||
text-shadow:
|
||||
-1px -1px 0 #FFF,
|
||||
1px -1px 0 #FFF,
|
||||
-1px 1px 0 #FFF,
|
||||
1px 1px 0 #FFF;
|
||||
}
|
||||
#btn_dragon_white:after {
|
||||
content: "\00767D";
|
||||
}
|
||||
|
||||
.card-logo {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.card-logo:after {
|
||||
font-size: 70px;
|
||||
line-height: 102px;
|
||||
}
|
||||
|
||||
/* .card-logo[style*="solitaire/large_icons/dragon_white.png"] {
|
||||
text-shadow: 0 0 16px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.card-logo[style*="solitaire/large_icons/dragon_red.png"] {
|
||||
text-shadow: 0 0 16px red;
|
||||
}
|
||||
.card-logo[style*="solitaire/large_icons/dragon_green.png"] {
|
||||
text-shadow: 0 0 16px green;
|
||||
} */
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/flower.png"]:after {
|
||||
content: "\01F337";
|
||||
color: red;
|
||||
}
|
||||
.card-logo-a[style*="solitaire/small_icons/flower.png"]:after,
|
||||
.card-logo-b[style*="solitaire/small_icons/flower.png"]:after {
|
||||
font-weight: bold;
|
||||
content: "\01F337";
|
||||
font-size: 16px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/dragon_white.png"]:after {
|
||||
content: "\00767D";
|
||||
color: black;
|
||||
}
|
||||
.card-logo-a[style*="solitaire/small_icons/dragon_white.png"]:after,
|
||||
.card-logo-b[style*="solitaire/small_icons/dragon_white.png"]:after {
|
||||
font-weight: bold;
|
||||
content: "\00767D";
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/dragon_red.png"]:after {
|
||||
content: "\004E2D";
|
||||
color: #ae2810;
|
||||
}
|
||||
.card-logo-a[style*="solitaire/small_icons/dragon_red.png"]:after,
|
||||
.card-logo-b[style*="solitaire/small_icons/dragon_red.png"]:after {
|
||||
font-weight: bold;
|
||||
content: "\004E2D";
|
||||
font-size: 16px;
|
||||
color: #ae2810;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/dragon_green.png"]:after {
|
||||
content: "\024F35";
|
||||
color: #17714e;
|
||||
}
|
||||
.card-logo-a[style*="solitaire/small_icons/dragon_green.png"]:after,
|
||||
.card-logo-b[style*="solitaire/small_icons/dragon_green.png"]:after {
|
||||
font-weight: bold;
|
||||
content: "\024F35";
|
||||
font-size: 16px;
|
||||
color: #17714e;
|
||||
}
|
||||
|
||||
.slot-flower {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.slot-flower:after {
|
||||
line-height: 237px;
|
||||
content: "\01F337";
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
/* numbers */
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_1.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_1.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_1.png"]:after {
|
||||
content: "\4E00";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_2.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_2.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_2.png"]:after {
|
||||
content: "\4E8C";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_3.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_3.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_3.png"]:after {
|
||||
content: "\4E09";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_4.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_4.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_4.png"]:after {
|
||||
content: "\56DB";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_5.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_5.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_5.png"]:after {
|
||||
content: "\4E94";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_6.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_6.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_6.png"]:after {
|
||||
content: "\516D";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_7.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_7.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_7.png"]:after {
|
||||
content: "\4E03";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_8.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_8.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_8.png"]:after {
|
||||
content: "\516B";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-logo[style*="solitaire/large_icons/bamboo_9.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/char_9.png"]:after,
|
||||
.card-logo[style*="solitaire/large_icons/coins_9.png"]:after {
|
||||
content: "\4E5D";
|
||||
opacity: 0.5;
|
||||
font-size: 36px;
|
||||
}
|
||||
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