3cb-data

Unnamed repository; edit this file 'description' to name the repository.
git clone git://git.alexwennerberg.com/3cb-data.git
Log | Files | Refs | README | LICENSE

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