diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 273 |
1 files changed, 267 insertions, 6 deletions
@@ -232,21 +232,31 @@ body.shift .block.known:hover { .simple-labels .hit .block.highlight { border-color: black; } .columbia-labels .block { - width: 56px; - height: 56px; + width: 60px; + height: 60px; border: 3px solid #363639; box-shadow: 0 0 2px 1px #0002; - border-radius: 6px; + border-radius: 8px; } +/* RED + OCHRE */ .columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); } -.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); } -.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); } - .columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); } +.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); } .columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); } +.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); } .columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); } +/* BROWN + GREEN */ +/* +.columbia-labels .block.Caesar { background-color: hsl(25, 50%, 40%); } +.columbia-labels .block.Caesar { border-color: hsl(25, 50%, 30%); } +.columbia-labels .block.Pompeius { background-color: hsl(150, 95%, 30%); } +.columbia-labels .block.Pompeius { border-color: hsl(150, 95%, 23%); } +.columbia-labels .block.Cleopatra { background-color: hsl(206, 75%, 45%); } +.columbia-labels .block.Cleopatra { border-color: hsl(206, 75%, 35%); } +*/ + .columbia-labels .block.highlight { border-color: white; } .columbia-labels .block.selected { border-color: yellow; } .columbia-labels .hit .block.highlight { border-color: black; } @@ -288,3 +298,254 @@ body.shift .block.known:hover { #replay_panel { background-color: tan; } + +/* COLUMBIA BLOCKS */ + +.columbia-labels .known.block { background-size: 360px 360px; } +.columbia-labels .Cleopatra.known.block { background-size: 60px 60px; } + +.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.1x.webp); } +.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.1x.webp); } +.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.1x.webp); } + +@media (min-resolution: 97dpi) { +.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.2x.webp); } +.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.2x.webp); } +.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.2x.webp); } +} + +body.shift .columbia-labels .Caesar.known.block:hover { background-image: url(blocks_caesar.2x.webp); } +body.shift .columbia-labels .Cleopatra.known.block:hover { background-image: url(blocks_cleopatra.2x.webp); } +body.shift .columbia-labels .Pompeius.known.block:hover { background-image: url(blocks_pompeius.2x.webp); } + +.columbia-labels .known.block_1_1{background-position:0px 0px} +.columbia-labels .known.block_1_2{background-position:-60px 0px} +.columbia-labels .known.block_1_3{background-position:-120px 0px} +.columbia-labels .known.block_1_4{background-position:-180px 0px} +.columbia-labels .known.block_1_5{background-position:-240px 0px} +.columbia-labels .known.block_1_6{background-position:-300px 0px} +.columbia-labels .known.block_2_1{background-position:0px -60px} +.columbia-labels .known.block_2_2{background-position:-60px -60px} +.columbia-labels .known.block_2_3{background-position:-120px -60px} +.columbia-labels .known.block_2_4{background-position:-180px -60px} +.columbia-labels .known.block_2_5{background-position:-240px -60px} +.columbia-labels .known.block_2_6{background-position:-300px -60px} +.columbia-labels .known.block_3_1{background-position:0px -120px} +.columbia-labels .known.block_3_2{background-position:-60px -120px} +.columbia-labels .known.block_3_3{background-position:-120px -120px} +.columbia-labels .known.block_3_4{background-position:-180px -120px} +.columbia-labels .known.block_3_5{background-position:-240px -120px} +.columbia-labels .known.block_3_6{background-position:-300px -120px} +.columbia-labels .known.block_4_1{background-position:0px -180px} +.columbia-labels .known.block_4_2{background-position:-60px -180px} +.columbia-labels .known.block_4_3{background-position:-120px -180px} +.columbia-labels .known.block_4_4{background-position:-180px -180px} +.columbia-labels .known.block_4_5{background-position:-240px -180px} +.columbia-labels .known.block_4_6{background-position:-300px -180px} +.columbia-labels .known.block_5_1{background-position:0px -240px} +.columbia-labels .known.block_5_2{background-position:-60px -240px} +.columbia-labels .known.block_5_3{background-position:-120px -240px} +.columbia-labels .known.block_5_4{background-position:-180px -240px} +.columbia-labels .known.block_5_5{background-position:-240px -240px} +.columbia-labels .known.block_5_6{background-position:-300px -240px} +.columbia-labels .known.block_6_1{background-position:0px -300px} +.columbia-labels .known.block_6_2{background-position:-60px -300px} +.columbia-labels .known.block_6_3{background-position:-120px -300px} +.columbia-labels .known.block_6_4{background-position:-180px -300px} +.columbia-labels .known.block_6_5{background-position:-240px -300px} +.columbia-labels .known.block_6_6{background-position:-300px -300px} + +/* SIMPLE BLOCKS */ + +.simple-labels .block.known { + background-image: url('blocks_simple.webp'); + background-repeat: no-repeat; + background-size: 600% 3100%; +} + +.simple-labels .block_0.r0{background-position:0% 0%} +.simple-labels .block_0.r1{background-position:0% 3.3333333333333335%} +.simple-labels .block_0.r2{background-position:0% 6.666666666666667%} +.simple-labels .block_1.r0{background-position:0% 10%} +.simple-labels .block_1.r1{background-position:0% 13.333333333333334%} +.simple-labels .block_2.r0{background-position:0% 16.666666666666668%} +.simple-labels .block_2.r1{background-position:0% 20%} +.simple-labels .block_2.r2{background-position:0% 23.333333333333332%} +.simple-labels .block_3.r0{background-position:0% 26.666666666666664%} +.simple-labels .block_3.r1{background-position:0% 29.999999999999996%} +.simple-labels .block_3.r2{background-position:0% 33.33333333333333%} +.simple-labels .block_4.r0{background-position:0% 36.666666666666664%} +.simple-labels .block_4.r1{background-position:0% 40%} +.simple-labels .block_4.r2{background-position:0% 43.333333333333336%} +.simple-labels .block_5.r0{background-position:0% 46.66666666666667%} +.simple-labels .block_5.r1{background-position:0% 50.00000000000001%} +.simple-labels .block_5.r2{background-position:0% 53.33333333333334%} +.simple-labels .block_6.r0{background-position:0% 56.66666666666668%} +.simple-labels .block_6.r1{background-position:0% 60.000000000000014%} +.simple-labels .block_6.r2{background-position:0% 63.33333333333335%} +.simple-labels .block_7.r0{background-position:0% 66.66666666666669%} +.simple-labels .block_7.r1{background-position:0% 70.00000000000001%} +.simple-labels .block_7.r2{background-position:0% 73.33333333333334%} +.simple-labels .block_8.r0{background-position:0% 76.66666666666667%} +.simple-labels .block_8.r1{background-position:0% 80%} +.simple-labels .block_8.r2{background-position:0% 83.33333333333333%} +.simple-labels .block_9.r0{background-position:0% 86.66666666666666%} +.simple-labels .block_9.r1{background-position:0% 89.99999999999999%} +.simple-labels .block_9.r2{background-position:0% 93.33333333333331%} +.simple-labels .block_10.r0{background-position:0% 96.66666666666664%} +.simple-labels .block_10.r1{background-position:0% 99.99999999999997%} +.simple-labels .block_10.r2{background-position:20% 0%} +.simple-labels .block_11.r0{background-position:20% 3.3333333333333335%} +.simple-labels .block_11.r1{background-position:20% 6.666666666666667%} +.simple-labels .block_11.r2{background-position:20% 10%} +.simple-labels .block_12.r0{background-position:20% 13.333333333333334%} +.simple-labels .block_12.r1{background-position:20% 16.666666666666668%} +.simple-labels .block_12.r2{background-position:20% 20%} +.simple-labels .block_12.r3{background-position:20% 23.333333333333332%} +.simple-labels .block_13.r0{background-position:20% 26.666666666666664%} +.simple-labels .block_13.r1{background-position:20% 29.999999999999996%} +.simple-labels .block_13.r2{background-position:20% 33.33333333333333%} +.simple-labels .block_13.r3{background-position:20% 36.666666666666664%} +.simple-labels .block_14.r0{background-position:20% 40%} +.simple-labels .block_14.r1{background-position:20% 43.333333333333336%} +.simple-labels .block_14.r2{background-position:20% 46.66666666666667%} +.simple-labels .block_14.r3{background-position:20% 50.00000000000001%} +.simple-labels .block_15.r0{background-position:20% 53.33333333333334%} +.simple-labels .block_15.r1{background-position:20% 56.66666666666668%} +.simple-labels .block_15.r2{background-position:20% 60.000000000000014%} +.simple-labels .block_15.r3{background-position:20% 63.33333333333335%} +.simple-labels .block_16.r0{background-position:20% 66.66666666666669%} +.simple-labels .block_16.r1{background-position:20% 70.00000000000001%} +.simple-labels .block_16.r2{background-position:20% 73.33333333333334%} +.simple-labels .block_16.r3{background-position:20% 76.66666666666667%} +.simple-labels .block_17.r0{background-position:20% 80%} +.simple-labels .block_17.r1{background-position:20% 83.33333333333333%} +.simple-labels .block_17.r2{background-position:20% 86.66666666666666%} +.simple-labels .block_18.r0{background-position:20% 89.99999999999999%} +.simple-labels .block_18.r1{background-position:20% 93.33333333333331%} +.simple-labels .block_19.r0{background-position:20% 96.66666666666664%} +.simple-labels .block_19.r1{background-position:20% 99.99999999999997%} +.simple-labels .block_20.r0{background-position:40% 0%} +.simple-labels .block_20.r1{background-position:40% 3.3333333333333335%} +.simple-labels .block_20.r2{background-position:40% 6.666666666666667%} +.simple-labels .block_21.r0{background-position:40% 10%} +.simple-labels .block_21.r1{background-position:40% 13.333333333333334%} +.simple-labels .block_21.r2{background-position:40% 16.666666666666668%} +.simple-labels .block_21.r3{background-position:40% 20%} +.simple-labels .block_22.r0{background-position:40% 23.333333333333332%} +.simple-labels .block_22.r1{background-position:40% 26.666666666666664%} +.simple-labels .block_22.r2{background-position:40% 29.999999999999996%} +.simple-labels .block_22.r3{background-position:40% 33.33333333333333%} +.simple-labels .block_23.r0{background-position:40% 36.666666666666664%} +.simple-labels .block_23.r1{background-position:40% 40%} +.simple-labels .block_23.r2{background-position:40% 43.333333333333336%} +.simple-labels .block_24.r0{background-position:40% 46.66666666666667%} +.simple-labels .block_24.r1{background-position:40% 50.00000000000001%} +.simple-labels .block_24.r2{background-position:40% 53.33333333333334%} +.simple-labels .block_25.r0{background-position:40% 56.66666666666668%} +.simple-labels .block_25.r1{background-position:40% 60.000000000000014%} +.simple-labels .block_26.r0{background-position:40% 63.33333333333335%} +.simple-labels .block_26.r1{background-position:40% 66.66666666666669%} +.simple-labels .block_27.r0{background-position:40% 70.00000000000001%} +.simple-labels .block_27.r1{background-position:40% 73.33333333333334%} +.simple-labels .block_28.r0{background-position:40% 76.66666666666667%} +.simple-labels .block_28.r1{background-position:40% 80%} +.simple-labels .block_29.r0{background-position:40% 83.33333333333333%} +.simple-labels .block_29.r1{background-position:40% 86.66666666666666%} +.simple-labels .block_30.r0{background-position:40% 89.99999999999999%} +.simple-labels .block_30.r1{background-position:40% 93.33333333333331%} +.simple-labels .block_31.r0{background-position:40% 96.66666666666664%} +.simple-labels .block_31.r1{background-position:40% 99.99999999999997%} +.simple-labels .block_31.r2{background-position:60% 0%} +.simple-labels .block_31.r3{background-position:60% 3.3333333333333335%} +.simple-labels .block_32.r0{background-position:60% 6.666666666666667%} +.simple-labels .block_32.r1{background-position:60% 10%} +.simple-labels .block_32.r2{background-position:60% 13.333333333333334%} +.simple-labels .block_33.r0{background-position:60% 16.666666666666668%} +.simple-labels .block_33.r1{background-position:60% 20%} +.simple-labels .block_33.r2{background-position:60% 23.333333333333332%} +.simple-labels .block_34.r0{background-position:60% 26.666666666666664%} +.simple-labels .block_34.r1{background-position:60% 29.999999999999996%} +.simple-labels .block_35.r0{background-position:60% 33.33333333333333%} +.simple-labels .block_35.r1{background-position:60% 36.666666666666664%} +.simple-labels .block_35.r2{background-position:60% 40%} +.simple-labels .block_35.r3{background-position:60% 43.333333333333336%} +.simple-labels .block_36.r0{background-position:60% 46.66666666666667%} +.simple-labels .block_36.r1{background-position:60% 50.00000000000001%} +.simple-labels .block_36.r2{background-position:60% 53.33333333333334%} +.simple-labels .block_36.r3{background-position:60% 56.66666666666668%} +.simple-labels .block_37.r0{background-position:60% 60.000000000000014%} +.simple-labels .block_37.r1{background-position:60% 63.33333333333335%} +.simple-labels .block_37.r2{background-position:60% 66.66666666666669%} +.simple-labels .block_38.r0{background-position:60% 70.00000000000001%} +.simple-labels .block_38.r1{background-position:60% 73.33333333333334%} +.simple-labels .block_38.r2{background-position:60% 76.66666666666667%} +.simple-labels .block_39.r0{background-position:60% 80%} +.simple-labels .block_39.r1{background-position:60% 83.33333333333333%} +.simple-labels .block_39.r2{background-position:60% 86.66666666666666%} +.simple-labels .block_40.r0{background-position:60% 89.99999999999999%} +.simple-labels .block_40.r1{background-position:60% 93.33333333333331%} +.simple-labels .block_40.r2{background-position:60% 96.66666666666664%} +.simple-labels .block_41.r0{background-position:60% 99.99999999999997%} +.simple-labels .block_41.r1{background-position:80% 0%} +.simple-labels .block_41.r2{background-position:80% 3.3333333333333335%} +.simple-labels .block_42.r0{background-position:80% 6.666666666666667%} +.simple-labels .block_42.r1{background-position:80% 10%} +.simple-labels .block_42.r2{background-position:80% 13.333333333333334%} +.simple-labels .block_43.r0{background-position:80% 16.666666666666668%} +.simple-labels .block_43.r1{background-position:80% 20%} +.simple-labels .block_43.r2{background-position:80% 23.333333333333332%} +.simple-labels .block_44.r0{background-position:80% 26.666666666666664%} +.simple-labels .block_44.r1{background-position:80% 29.999999999999996%} +.simple-labels .block_44.r2{background-position:80% 33.33333333333333%} +.simple-labels .block_45.r0{background-position:80% 36.666666666666664%} +.simple-labels .block_45.r1{background-position:80% 40%} +.simple-labels .block_45.r2{background-position:80% 43.333333333333336%} +.simple-labels .block_45.r3{background-position:80% 46.66666666666667%} +.simple-labels .block_46.r0{background-position:80% 50.00000000000001%} +.simple-labels .block_46.r1{background-position:80% 53.33333333333334%} +.simple-labels .block_46.r2{background-position:80% 56.66666666666668%} +.simple-labels .block_47.r0{background-position:80% 60.000000000000014%} +.simple-labels .block_47.r1{background-position:80% 63.33333333333335%} +.simple-labels .block_47.r2{background-position:80% 66.66666666666669%} +.simple-labels .block_47.r3{background-position:80% 70.00000000000001%} +.simple-labels .block_48.r0{background-position:80% 73.33333333333334%} +.simple-labels .block_48.r1{background-position:80% 76.66666666666667%} +.simple-labels .block_48.r2{background-position:80% 80%} +.simple-labels .block_49.r0{background-position:80% 83.33333333333333%} +.simple-labels .block_49.r1{background-position:80% 86.66666666666666%} +.simple-labels .block_50.r0{background-position:80% 89.99999999999999%} +.simple-labels .block_50.r1{background-position:80% 93.33333333333331%} +.simple-labels .block_50.r2{background-position:80% 96.66666666666664%} +.simple-labels .block_50.r3{background-position:80% 99.99999999999997%} +.simple-labels .block_51.r0{background-position:100% 0%} +.simple-labels .block_51.r1{background-position:100% 3.3333333333333335%} +.simple-labels .block_51.r2{background-position:100% 6.666666666666667%} +.simple-labels .block_52.r0{background-position:100% 10%} +.simple-labels .block_52.r1{background-position:100% 13.333333333333334%} +.simple-labels .block_53.r0{background-position:100% 16.666666666666668%} +.simple-labels .block_53.r1{background-position:100% 20%} +.simple-labels .block_53.r2{background-position:100% 23.333333333333332%} +.simple-labels .block_53.r3{background-position:100% 26.666666666666664%} +.simple-labels .block_54.r0{background-position:100% 29.999999999999996%} +.simple-labels .block_54.r1{background-position:100% 33.33333333333333%} +.simple-labels .block_54.r2{background-position:100% 36.666666666666664%} +.simple-labels .block_54.r3{background-position:100% 40%} +.simple-labels .block_55.r0{background-position:100% 43.333333333333336%} +.simple-labels .block_55.r1{background-position:100% 46.66666666666667%} +.simple-labels .block_55.r2{background-position:100% 50.00000000000001%} +.simple-labels .block_56.r0{background-position:100% 53.33333333333334%} +.simple-labels .block_56.r1{background-position:100% 56.66666666666668%} +.simple-labels .block_56.r2{background-position:100% 60.000000000000014%} +.simple-labels .block_57.r0{background-position:100% 63.33333333333335%} +.simple-labels .block_57.r1{background-position:100% 66.66666666666669%} +.simple-labels .block_58.r0{background-position:100% 70.00000000000001%} +.simple-labels .block_58.r1{background-position:100% 73.33333333333334%} +.simple-labels .block_59.r0{background-position:100% 76.66666666666667%} +.simple-labels .block_59.r1{background-position:100% 80%} +.simple-labels .block_60.r0{background-position:100% 83.33333333333333%} +.simple-labels .block_60.r1{background-position:100% 86.66666666666666%} +.simple-labels .block_61.r0{background-position:100% 89.99999999999999%} +.simple-labels .block_61.r1{background-position:100% 93.33333333333331%} +.simple-labels .block_62.r0{background-position:100% 96.66666666666664%} +.simple-labels .block_62.r1{background-position:100% 99.99999999999997%} |