diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 371 |
1 files changed, 352 insertions, 19 deletions
@@ -3,7 +3,13 @@ header { background-color: silver; } header.your_turn { background-color: orange; }
#role_Dem { background-color: hsl(210,30%,80%); }
#role_Com { background-color: hsl(35,40%,80%); }
-#turn_info { background-color: gray; }
+#turn_info { background-color: white; }
+.aside_events {
+ font-family: "Source Sans";
+ font-style: normal;
+ font-size: 16px;
+ line-height: 1.5;
+}
#log { background-color: whitesmoke; }
#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
@@ -23,11 +29,14 @@ header.your_turn { background-color: orange; } #log div.i { padding-left: 32px; text-indent: -12px; }
#log div.ii { padding-left: 44px; text-indent: -12px; }
-/*Below needs updating
-#log .card_tip { font-style: italic; }
-#log .card_tip:hover { text-decoration: underline; }
+
+#log .card_name { font-style: italic; }
+#log .card_name:hover { text-decoration: underline; }
+#log .space_tip:hover { cursor: pointer; text-decoration: underline; }
+
+/* Below currently not used
#log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
-#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }
+
#log .way_tip:hover { cursor: pointer; text-decoration: underline; } */
.selected {
@@ -92,6 +101,44 @@ header.your_turn { background-color: orange; } border: transparent red 2px;
}
+/* PANELS AND HANDS */
+
+.panel {
+ background-color: #555;
+}
+
+.panel_header {
+ background-color: #444;
+ color: hsl(40, 60%, 90%);
+ font-weight: bold;
+ text-align: center;
+ padding: 3px 1em;
+}
+
+#events_panel, #played_card_panel {
+ min-width: 200px;
+ width: auto;
+ display: inline-block;
+ margin: 10px;
+ border-radius: 5px;
+}
+
+#discard_panel {
+ min-width: 200px;
+ width: auto;
+ display: inline-block;
+ margin: 10px;
+ border-radius: 5px;
+}
+
+#discard_panel.hide {
+ display: none;
+}
+
+#hand_panel {
+ margin: 10px;
+ border-radius: 5px;
+}
/* INFLUENCE MARKERS */
@@ -164,6 +211,25 @@ header.your_turn { background-color: orange; } left: 74px;
}
+.comInflValue.controlled, .held {
+ color: whitesmoke;
+ text-shadow:
+ 1px 1px 0 #c2272d, /* Right bottom */
+ -1px 1px 0 #c2272d, /* Left bottom */
+ 1px -1px 0 #c2272d, /* Right top */
+ -1px -1px 0 #c2272d; /* Left top */
+}
+
+.comInflValue.uncontrolled {
+ color: #c2272d;
+ text-shadow:
+ 1px 1px 0 #ffffff, /* Right bottom */
+ -1px 1px 0 #ffffff, /* Left bottom */
+ 1px -1px 0 #ffffff, /* Right top */
+ -1px -1px 0 #ffffff; /* Left top */
+}
+
+
/* GAME MARKERS */
.t0 {left: 511px}
@@ -207,14 +273,22 @@ header.your_turn { background-color: orange; } background-size: cover;
}
+
+
#stability-track {
position:absolute;
- top: 853px;
left: 1085px;
height: 35px;
width: 35px;
}
+.s0 {top: 853px}
+.s1 {top: 896px}
+.s2 {top: 939px}
+.s5 {top: 982px}
+.s4 {top: 1025px}
+
+
.tst0 {left: 0}
.tst1 {left: 38px}
.tst2 {left: 93px}
@@ -245,6 +319,9 @@ left: 660px} .vp-20, .vp-18, .vp-16, .vp-14, .vp-12, .vp-10, .vp-8, .vp-6, .vp-4, .vp-2, .vp1, .vp3, .vp5, .vp7, .vp9, .vp11, .vp13, .vp15, .vp17, .vp19 {top: 1889px}
.vp-19, .vp-17, .vp-15, .vp-13, .vp-11, .vp-9, .vp-7, .vp-5, .vp-3, .vp-1, .vp2, .vp4, .vp6, .vp8, .vp10, .vp12, .vp14, .vp16, .vp18, .vp20 {top: 1938px}
+.vp-21 {top: 1912px; left: 117px}
+.vp21 {top: 1912px; left: 1182px}
+
.vp-20 {left: 165px}
.vp-19 {left: 189px}
.vp-18 {left: 214px}
@@ -308,46 +385,302 @@ left: 660px} .romania {top: 1063px; left: 1012px}
.bulgaria {top: 1578px; left: 720px}
-.times_held {position: absolute; top: -10px; left: 10px}
+.times_held {
+ position: absolute;
+ font-family: 'Open Sans';
+ font-size: 20px;
+ font-weight: bold;
+ top: -18px;
+ left: 8px
+}
+
+.outlined_text {
+ text-shadow:
+ 1px 1px 0 #ffffff, /* Right bottom */
+ -1px 1px 0 #ffffff, /* Left bottom */
+ 1px -1px 0 #ffffff, /* Right top */
+ -1px -1px 0 #ffffff; /* Left top */
+}
+/* ============= EVENT MARKERS ========== */
-/* =========== CARDS ================= */
+.event-marker {
+ display: none;
+ position: absolute;
+ height: 30px;
+ width: 30px;
+ transition: transform 0.3s ease;
+}
-.playedCard {
+.event-marker:hover {
+ cursor: pointer;
+ transform: scale(2);
+ z-index: 1;
+}
+
+.event-marker.aside {
+ border: solid black 1.5px;
+}
+
+#turn_info {
display: flex;
- margin: auto;
- height: 300px;
+ flex-direction: column;
+ align-items: flex-start;
}
+#turn_info > div {
+ display: flex;
+ margin-bottom: 8px;
+ gap: 4px;
+}
-.hand_card:hover {
- cursor: pointer;
+#turn_info > img {
+ display: block;
+
}
+#eco_glasnost {
+ position: relative;
+ /*top: 1500px;
+ left: 1050px;*/
+}
+
+#helsinki_final_act {
+ position: relative;
+ display: flex;
+}
+#solidarity_legalised {
+ top: 216px;
+ left: 612px;
+}
+
+#st_nicholas_church {
+ position: relative;
+ /*top: 181px;
+ left: 320px;*/
+}
+
+#systematization {
+ height: 65px;
+ width: 65px;
+}
+
+#the_tyrant_is_gone {
+ height: 40px;
+ width: 40px;
+}
+
+#the_wall {
+ top: 143px;
+ left: 170px;
+}
+
+#we_are_the_people {
+ position: relative;
+}
+
+
+/* =========== CARDS ================= */
+/*
+.playedCard {
+ display: flex;
+ margin: auto;
+ height: 300px;
+}*/
.hand_card {
background-size: contain;
height: 250px;
- padding: 10px;
- box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* White glowing effect */
+ margin: 10px;
border-radius: 5px;
+ transition: transform .3s ease 0.5s;
+}
+
+.hand_card:hover {
+ cursor: pointer;
+ /*transform: scale(1.75);*/
}
+.zoom {
+ transform: scale(1.75)
+}
.power_card {
background-size: contain;
height: 250px;
- padding: 10px;
+ margin: 10px;
+ border-radius: 5px;
+}
+
+.discard_card, .event_card {
+ background-size: contain;
+ height: 150px;
+ padding: 5px;
border-radius: 5px;
+ transition: transform .3s ease;
}
+.discard_card:hover, .event_card:hover {
+ cursor: pointer;
+ transform: scale(2);
+}
-.selected {
+.selected.space-area {
background-color: #0002;
outline: solid white 2px;
- box-shadow: 0 0 4px white;
- border-radius: 18px 18px 0 0;
+ /*box-shadow: 0 0 4px white; */
+ border-radius: 10px 10px 0 0;
+}
+
+.space-area.tip {
+ background-color: #ff08;
+ outline: solid white 2px;
+ box-shadow: 0 0 8px #ff08;
+ border-radius: 10px 10px 0 0;
+}
+
+.selected.hand_card {
+ outline: solid silver 3px;
+ /*box-shadow: 0 0 4px white; */
+ border-radius: 18px;
+}
+
+
+.selected.power_card {
+ outline: solid silver 3px;
+ /*box-shadow: 0 0 4px white; */
+ border-radius: 18px;
}
/* =============== OTHER ===============*/
#space-characteristics {display: none}
+
+/* =============== CARD IMAGES =========*/
+
+#tooltip {
+ position: fixed;
+ pointer-events: none;
+ z-index: 600;
+ right: 240px;
+ top: 60px;
+}
+
+.card {
+ background-size: cover;
+ background-repeat: no-repeat;
+ width: 250px;
+ height: 350px;
+ border-radius: 16px;
+ box-shadow: 1px 2px 4px #0004;
+}
+
+.card_1 {background-image: url(cards/e1.gif)}
+.card_2 {background-image: url(cards/e2.gif)}
+.card_3 {background-image: url(cards/e3.gif)}
+.card_4 {background-image: url(cards/e4.gif)}
+.card_5 {background-image: url(cards/e5.gif)}
+.card_6 {background-image: url(cards/e6.gif)}
+.card_7 {background-image: url(cards/e7.gif)}
+.card_8 {background-image: url(cards/e8.gif)}
+.card_9 {background-image: url(cards/e9.gif)}
+.card_10 {background-image: url(cards/e10.gif)}
+.card_11 {background-image: url(cards/e11.gif)}
+.card_12 {background-image: url(cards/e12.gif)}
+.card_13 {background-image: url(cards/e13.gif)}
+.card_14 {background-image: url(cards/e14.gif)}
+.card_15 {background-image: url(cards/e15.gif)}
+.card_16 {background-image: url(cards/e16.gif)}
+.card_17 {background-image: url(cards/e17.gif)}
+.card_18 {background-image: url(cards/e18.gif)}
+.card_19 {background-image: url(cards/e19.gif)}
+.card_20 {background-image: url(cards/e20.gif)}
+.card_21 {background-image: url(cards/e21.gif)}
+.card_22 {background-image: url(cards/e22.gif)}
+.card_23 {background-image: url(cards/e23.gif)}
+.card_24 {background-image: url(cards/e24.gif)}
+.card_25 {background-image: url(cards/e25.gif)}
+.card_26 {background-image: url(cards/e26.gif)}
+.card_27 {background-image: url(cards/e27.gif)}
+.card_28 {background-image: url(cards/e28.gif)}
+.card_29 {background-image: url(cards/e29.gif)}
+.card_30 {background-image: url(cards/e30.gif)}
+.card_31 {background-image: url(cards/e31.gif)}
+.card_32 {background-image: url(cards/e32.gif)}
+.card_33 {background-image: url(cards/e33.gif)}
+.card_34 {background-image: url(cards/e34.gif)}
+.card_35 {background-image: url(cards/e35.gif)}
+.card_36 {background-image: url(cards/e36.gif)}
+.card_37 {background-image: url(cards/e37.gif)}
+.card_38 {background-image: url(cards/e38.gif)}
+.card_39 {background-image: url(cards/e39.gif)}
+.card_40 {background-image: url(cards/e40.gif)}
+.card_41 {background-image: url(cards/e41.gif)}
+.card_42 {background-image: url(cards/e42.gif)}
+.card_43 {background-image: url(cards/e43.gif)}
+.card_44 {background-image: url(cards/e44.gif)}
+.card_45 {background-image: url(cards/e45.gif)}
+.card_46 {background-image: url(cards/e46.gif)}
+.card_47 {background-image: url(cards/e47.gif)}
+.card_48 {background-image: url(cards/e48.gif)}
+.card_49 {background-image: url(cards/e49.gif)}
+.card_50 {background-image: url(cards/e50.gif)}
+.card_51 {background-image: url(cards/e51.gif)}
+.card_52 {background-image: url(cards/e52.gif)}
+.card_53 {background-image: url(cards/e53.gif)}
+.card_54 {background-image: url(cards/e54.gif)}
+.card_55 {background-image: url(cards/e55.gif)}
+.card_56 {background-image: url(cards/e56.gif)}
+.card_57 {background-image: url(cards/e57.gif)}
+.card_58 {background-image: url(cards/e58.gif)}
+.card_59 {background-image: url(cards/e59.gif)}
+.card_60 {background-image: url(cards/e60.gif)}
+.card_61 {background-image: url(cards/e61.gif)}
+.card_62 {background-image: url(cards/e62.gif)}
+.card_63 {background-image: url(cards/e63.gif)}
+.card_64 {background-image: url(cards/e64.gif)}
+.card_65 {background-image: url(cards/e65.gif)}
+.card_66 {background-image: url(cards/e66.gif)}
+.card_67 {background-image: url(cards/e67.gif)}
+.card_68 {background-image: url(cards/e68.gif)}
+.card_69 {background-image: url(cards/e69.gif)}
+.card_70 {background-image: url(cards/e70.gif)}
+.card_71 {background-image: url(cards/e71.gif)}
+.card_72 {background-image: url(cards/e72.gif)}
+.card_73 {background-image: url(cards/e73.gif)}
+.card_74 {background-image: url(cards/e74.gif)}
+.card_75 {background-image: url(cards/e75.gif)}
+.card_76 {background-image: url(cards/e76.gif)}
+.card_77 {background-image: url(cards/e77.gif)}
+.card_78 {background-image: url(cards/e78.gif)}
+.card_79 {background-image: url(cards/e79.gif)}
+.card_80 {background-image: url(cards/e80.gif)}
+.card_81 {background-image: url(cards/e81.gif)}
+.card_82 {background-image: url(cards/e82.gif)}
+.card_83 {background-image: url(cards/e83.gif)}
+.card_84 {background-image: url(cards/e84.gif)}
+.card_85 {background-image: url(cards/e85.gif)}
+.card_86 {background-image: url(cards/e86.gif)}
+.card_87 {background-image: url(cards/e87.gif)}
+.card_88 {background-image: url(cards/e88.gif)}
+.card_89 {background-image: url(cards/e89.gif)}
+.card_90 {background-image: url(cards/e90.gif)}
+.card_91 {background-image: url(cards/e91.gif)}
+.card_92 {background-image: url(cards/e92.gif)}
+.card_93 {background-image: url(cards/e93.gif)}
+.card_94 {background-image: url(cards/e94.gif)}
+.card_95 {background-image: url(cards/e95.gif)}
+.card_96 {background-image: url(cards/e96.gif)}
+.card_97 {background-image: url(cards/e97.gif)}
+.card_98 {background-image: url(cards/e98.gif)}
+.card_99 {background-image: url(cards/e99.gif)}
+.card_100 {background-image: url(cards/e100.gif)}
+.card_101 {background-image: url(cards/e101.gif)}
+.card_102 {background-image: url(cards/e102.gif)}
+.card_103 {background-image: url(cards/e103.gif)}
+.card_104 {background-image: url(cards/e104.gif)}
+.card_105 {background-image: url(cards/e105.gif)}
+.card_106 {background-image: url(cards/e106.gif)}
+.card_107 {background-image: url(cards/e107.gif)}
+.card_108 {background-image: url(cards/e108.gif)}
+.card_109 {background-image: url(cards/e109.gif)}
+.card_110 {background-image: url(cards/e110.gif)}
|