style.css (2243B)
1 :root { 2 --text: #000; 3 --link: #00a; 4 } 5 6 body { 7 font-size:16px; 8 background: var(--bg); 9 color: var(--text); 10 margin: 0; 11 font-family: Courier, monospace; 12 word-wrap: break-word; 13 line-height: 1.5; 14 } 15 16 .flextable { 17 display: flex; 18 flex-direction: row; 19 flex-wrap: wrap; 20 } 21 22 img { 23 margin: 0; 24 } 25 26 .deck-box { 27 display: flex; 28 column-gap: 0.5rem; 29 flex-direction: row; 30 justify-content: space-between; 31 margin: 0.2rem; 32 padding: 0.2rem; 33 background: #eee; 34 } 35 36 @media only screen and (max-width: 767px) { 37 .deck-box { 38 flex-direction: column; 39 } 40 } 41 42 header { 43 font-size:1.4rem; 44 padding-left: 0.3rem; 45 border-bottom: 1px solid black; 46 } 47 footer { 48 border-top: 1px solid black; 49 text-align:right; 50 } 51 52 main { 53 padding: 0.3rem; 54 } 55 56 a { 57 color: var(--link); 58 } 59 a:hover { 60 text-decoration: none; 61 } 62 .hover_img a { position:relative; } 63 .hover_img a span { position:absolute; display:none; z-index:99; } 64 .hover_img a:hover span { display:block; } 65 66 .card-icon-wrapper { 67 display: inline-block; 68 margin-right: 0; 69 vertical-align: middle; 70 } 71 72 .card-icon-link { 73 text-decoration: none; 74 cursor: pointer; 75 display: inline-block; 76 } 77 78 .mtg-card-icon { 79 width: 14px; 80 height: 14px; 81 opacity: 0.6; 82 transition: opacity 0.2s; 83 } 84 85 .mtg-card-icon:hover { 86 opacity: 1; 87 } 88 89 .card-preview { 90 position: absolute; 91 left: 20px; 92 top: -10px; 93 display: none; 94 z-index: 100; 95 pointer-events: none; 96 box-shadow: 0 4px 8px rgba(0,0,0,0.3); 97 border-radius: 4px; 98 overflow: hidden; 99 } 100 101 .card-icon-link:hover .card-preview { 102 display: block; 103 } 104 105 .card-preview img { 106 width: 250px; 107 height: auto; 108 display: block; 109 } 110 111 .banned-icon { 112 display: inline-block; 113 margin-left: 0; 114 vertical-align: middle; 115 cursor: help; 116 } 117 118 .card-name-group { 119 display: inline-block; 120 white-space: nowrap; 121 } 122 123 @media only screen and (max-width: 600px) { 124 .hide-mobile { 125 display:none; 126 } 127 body { 128 font-size: 16px; 129 border: 0px; 130 } 131 } 132 133 .banned-cards-dense { 134 display: flex; 135 flex-wrap: wrap; 136 margin: 0; 137 padding: 0; 138 gap: 0; 139 } 140 141 .banned-cards-dense a { 142 display: block; 143 margin: 0; 144 padding: 0; 145 line-height: 0; 146 } 147 148 .banned-cards-dense img { 149 width: 120px; 150 height: auto; 151 margin: 0; 152 padding: 0; 153 border: none; 154 display: block; 155 } 156