DIM Item Card Refinements by tehtrav

/* ==UserStyle==
@name         DIM Item Card Refinements
@version      20220616.13.31
@namespace    userstyles.world/user/tehtrav
@description  This is a slight adjustment to DIM for Destiny 2. It rearranges the item tiles to be a bit more organized and also styles the Keep and Favorite tags to look like Vanguard and Crucible flags for categorizing items as PVE and PVP. Please note that things may break when DIM receives updates. 
@author       tehtrav
@license      No License
==/UserStyle== */

@-moz-document domain("destinyitemmanager.com") {
body {
  font-family: -apple-system,  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* item shadow */
.item {
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* overall item border */
.item-img {
    border-width: 2px;
}

/* item power level number */
.BadgeInfo-m_badge-SLO2oppG {
    font-size: calc((var(--item-size) * .17));
    font-weight: 800;
}

/* masterwork overlay */
.ItemIcon-m_iconOverlay-F9dGwKBh  {
    top: 2px;
    left: 2px;
    height: calc(var(--item-size) - 4px);
    width: calc(var(--item-size) - 4px);
}

/* masterwork overlay */
.ItemIcon-m_backgroundOverlay-F9dGwKBh {
    top: 2px;
    left: 2px;
    height: calc(var(--item-size) - 4px);
    width: calc(var(--item-size) - 4px);
}

/* seasonal icon */
.ItemIcon-m_iconOverlay-F9dGwKBh {
    height: calc(var(--item-size) * .6);
    width: calc(var(--item-size) * .6);
}

/* thumbs up icon and deepsight */
.BadgeInfo-m_summaryIcon-hztpx {
    position: absolute;
    bottom: calc(((var(--item-size) / 5) + 5px));
    left: 2px;
}

.BadgeInfo-m_shapedIcon-pUWnXIPG {
    left: 2px;
    bottom: 18px;
    position: absolute;
    padding: 80px 80px 4px 4px;
    background: linear-gradient(35deg, #fd58298a, #ff2a0000 30%, #ff2a0000 0%);
}

/* thumbs up icon */
.item .fa-thumbs-up,
.item .fa-thumbs-down{
    color: #ffffff3b;
}

/* thumbs up icon background gradient */
.RatingIcon-m_icon-xnqJD {
    padding: 80px 80px 4px 4px;
}

/* thumbs down icon background gradient */
.RatingIcon-m_icon-xnqJD.fa-thumbs-down  {
    padding: 80px 80px 4px 4px;
}

/* make the icon container static */
/*.InventoryItem-m_icons-TRM0_ {
    position: static;
}*/

/* remove shadow from icons */
.InventoryItem-m_icon-a5PkxlJx {
    filter: none;
}

/* position of the lock icon */
.InventoryItem-m_icons-TRM0_BvX .fa-lock {
    position: absolute;
    top: -42px;
    right: -64px;
    color: rgba(255,255,255,1);
    text-shadow: 0 0 7px rgba(0,0,0,.4);
    opacity: .5;
    font-size: 10px;
}


/* Make icons look like marker */
.InventoryItem-m_icons-TRM0_BvX .fa-tag,
.InventoryItem-m_icons-TRM0_BvX .fa-heart,
.InventoryItem-m_icons-TRM0_BvX .fa-bolt {
    position: absolute;
    left: 0px;
    top: -48px;
    background-size: 100% 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    width: 14px;
    height: 24px;
    filter: drop-shadow(2px 2px 4px #442859);
    /*z-index: 99;*/
}

/* Make Fave icon look like Crucible */
.InventoryItem-m_icons-TRM0_BvX .fa-heart {
    background-image: 
        linear-gradient(red, transparent), 
        url('https://www.bungie.net/common/destiny2_content/icons/869f3e571c609340cc28c312faaa17d9.png')
    ;
}

/* Make Keep icon look like Vanguard */
.InventoryItem-m_icons-TRM0_BvX .fa-tag {
    background-image: 
        linear-gradient(#00d5ff, transparent),
        url('https://www.bungie.net/common/destiny2_content/icons/2b45736defd02d9171e70525cab9b547.png')
    ;
}

/* Make Infuse icon look */
.InventoryItem-m_icons-TRM0_BvX .fa-bolt {
    background-image: 
        linear-gradient(yellow, transparent 70%),
        url('https://www.bungie.net/common/destiny2_content/icons/684a6a204259dcf6927c3529f720c817.png')
    ;
}

/* swap out font awesome icons for destiny image */
.InventoryItem-m_icons-TRM0_BvX .fa-heart:before,
.InventoryItem-m_icons-TRM0_BvX .fa-tag:before,
.InventoryItem-m_icons-TRM0_BvX .fa-bolt:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 14px;
}

.InventoryItem-m_icons-TRM0_BvX .fa-heart:before {
    background: url('https://www.bungie.net/common/destiny2_content/icons/f20d6cc709b3d39f415ef32029ca847d.png') no-repeat;
    background-size: cover;
    content: " ";
}

.InventoryItem-m_icons-TRM0_BvX .fa-bolt:before {
    background: url('https://www.bungie.net/common/destiny2_content/icons/d9eefb11599fa7ea617757b3c31b4b05.png') no-repeat;
    background-size: cover;
    content: " ";
}

.InventoryItem-m_icons-TRM0_BvX .fa-tag:before {
    background: url('https://www.bungie.net/common/destiny2_content/icons/5215216e431ef319c43c1e7a5d95554a.png') no-repeat;
    background-size: cover;
    content: " ";
}


.InventoryItem-m_icons-TRM0_BvX .fa-archive:before {
    background-size: cover;
    bottom: -16.5px;
    left: 0px;
    position: absolute;
    color: #2f1065;
    font-size: 9px;
    text-shadow: none;
    filter: none;
}

.InventoryItem-m_icons-TRM0_BvX .fa-ban:before {
    background-size: cover;
    bottom: -17px;
    left: 0px;
    position: absolute;
    color: red;
    font-size: 10px;
    text-shadow: none;
    filter: none;
}

/* hide the sticky note*/
.InventoryItem-m_icons-TRM0_BvX .fa-sticky-note {
    position: absolute;
    bottom: -34px;
    left: 1px;
    font-size: 9px;
    color: #46295c59;
    filter: none;
}

/* Energy Capacity on Armor */
.BadgeInfo-m_energyCapacity-XvpsTGeC {
    position: absolute;
    bottom: 18px;
    right: 2px;
    width: 10px;
    background: #000000b0;
    padding: 2px 4px 2px 13px;
    color: white;
    font-size: 8px;
    border-radius: 4px 0 0 0;
    line-height: 1;
}

/* make element icon smaller */
.BadgeInfo-m_energyCapacityIcon-xlBEWFxG {
    transform: scale(.8);
    position: absolute;
    bottom: 19px;
    right: 15px;
}

/* light level font weight */
.BadgeInfo-m_badge-SLO2oppG {
    /*margin-top: 0;*/
    font-weight: 500;
}

/* New Item Marker */
.NewItemIndicator-m_newItem-q_BtCwjv,
.NewItemIndicator-m_newItem-q_BtCwjv.NewItemIndicator-m_alwaysShow-Y9dRu {
    position: absolute;
    left: 2px;
    bottom: 3px;
    top: auto;
    border: 2px solid #ffffff;
    background: #ff1f2d;
    width: 8px;
    height: 8px;
    filter: none;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%) inset;
}


.PageWithMenu-m_menuButton-xuLrE span:not(.app-icon) {
    text-transform: none !important;
}

.Loadouts-m_menu-rpbuz {
    width: 350px !important;
}


.Loadouts-m_menu-rpbuz>div {
    width: 330px !important;
}
}