cobalt's UI corner

[cobalt phrase]

gonna keep all my UI mockups in one place for now at least

Spoiler for og bazaar suggestions pic:

Spoiler for visual indicators of how many more cards will fit in each hand (so you don't have to count):

would make it easier to see at a glance whether you'll get your quanta's worth out of a SoB, fractal, etc

several different ideas:

Spoiler for general notes:

• protected/silenced/singularity tints
  
  • increased the height from 263px to 272px so that they fully cover the card area (and have a 4px buffer on both the top and bottom instead of just the top)
  • increased the width from 66px to 70px in all but the "shelves" variant (mostly a personal aesthetic choice. i just think the narrower width looks awkward with a lot of the variants)
  • i guess in reality there wouldnt be box shadows on SoB and recoil in the silenced view, but it seemed pointless to remove them from the mockups since the effect tints are just there to show how they affect the visibility of the card slot indicators

• wireframes (matching existing ui)
  • corner "cradles" reminiscent of og elements
    
    
    
    
    
  • "trays"
    
    
    
    
    
  • "shelves"
    
    
    
    
    
• skeuomorphic "divots" for the cards to sit in
  
  • abstract (gradient "shadow")
    
    
    
    Spoiler for gradient deets:

    height: 28px;
    background-image: linear-gradient(hsla(30, 5%, 8%, 0), 85%, hsla(30, 5%, 8%, . 8) );
    
    
    
  • not sure how to make more realistic-looking ones except by editing the background image and i'm not really up to that task atm
    
    
    
• card "ghosts"
  
  Spoiler for this is the idea i thought of first and honestly i don't think it works too well:

  Spoiler for deets that apply to all three:

  e.g. for the very bottom card slot:
  <div class="inst handinst emptyslot" style="left: 100px; top: 500px;">
      <div></div>
  </div>
  
  
  .emptyslot {
      overflow: hidden;
  }
  
  .emptyslot:not([style*="top: 200px"], [style*="top: 500px"]) {
      height: 32px;
  }
  
  .emptyslot>div {
      height: 64px;
  }
  

  
  

  • i feel like cyan is a good color to represent "theoretical future cards"
    
    
    
    Spoiler for gradient deets:

    .emptyslot>div {
        background-image: linear-gradient(rgba(0, 255, 255, 0.4), 15%, rgba(0, 255, 255, 0) 60%);
    }
    
    
    
  • different style
    
    
    
    Spoiler for gradient/shadow deets:

    .emptyslot>div {
        box-shadow: inset 0 0 8px rgba(0, 255, 255, .3);
        background-image: linear-gradient(rgba(0, 255, 255, .2), 40%, rgba(0, 255, 255, 0));
    }
    
    
    
  • beige stands out better from the various effect backgrounds and also seems like a good color for "theoretical" cards
    
    
    
    Spoiler for gradient deets:

    .emptyslot>div {
        background-image: linear-gradient(hsla(45, 40%, 75%, 0.4), 15%, hsla(45, 40%, 75%, 0) 60%);
    }
    
    but, any single color is going to have the problem of blending in with certain cards, which is a major reason i think "wireframes" and "divots" work better than "ghosts". not to mention the tangent issue with the card backside art (could be fixed by adjusting the card spacing, but like, why)