Crowdship MUI tweaks by rickwoodcock

/* ==UserStyle==
@name         Crowdship MUI tweaks
@version      20240319.12.43
@namespace    https://userstyles.world/user/andrebu
@description  Crowdship MUI tweaks for new version
@author       andrebu
@license      No License
==/UserStyle== */

@-moz-document domain("retailer-dev-v2.crowdship.io"), domain("app.crowdship.io") {
/* ==UserStyle==
@name         Crowdship MUI tweaks
@description  Crowdship MUI tweaks for new version
@namespace    crowdship.io
@author       rickwoodcock
@version      0.1.0
@preprocessor stylus
==/UserStyle== */



/* Site wide tweaks */



/* vars */
:root {
    --th-font-size: 12px;
}



/* images */
.css-mzcald {
    position: relative;
    width: 263px;
    /* height: auto; */
    overflow: hidden;
    background-color: rgb(31, 34, 35);
    border-radius: 8px;
    margin-bottom: 24px;
}
.css-bas0ze {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    margin: 0 auto;
    /* border-radius: 8px; */
}
.css-mzcald:after {
    content: "";
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    padding-top: 100%;
}





/* login screen - font size */
.css-14bvpoe *:not(h6):not(h4):not(.css-1k33q06),
.css-gfvypj {
    font-size: 12px !important;
}







/* Text and Typography tweaks */

/* Site wide - Text and Typography */
body {
    font-weight: normal !important;
    font-size: 1.05rem;
    line-height: 1.375;
    font-family: Montserrat, sans-serif !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
}


/* Page heading - Text and Typography */
.css-1hf4cvq, 
/* Page heading DARK MODE - Text and Typography - smaller and less padding*/
.css-1nj8c10 {
    font-size: 1.25rem;
}
.css-vtu75f {
    padding: 20px 24px 0px;
}
.css-a3rprv {
    padding-bottom: 20px;
}


/* Sales Order stats boxes - text - DARK MODE */
.css-b9anqt, .css-mlql9e {
    color: #fff;
}


/* no background on images */
/* Marketplace List and My Products */
.css-1a02km9, 
/* Marketplace List and My Products -- dark mode */
.css-12q3iik, 
/* Marketplace Grid */ 
.css-dob9hr, 
/* Marketplace Grid - Dark mode */ 
.css-1adzd91,
/* Marketplace - Product details - main image */
.css-15qhsyf, 
/* Marketplace - Product details - thumbnail images - odd rows */
.css-c3wvhx, 
/* Marketplace - Product details - thumbnail images - even rows */
.css-1xa8azu, 
/* Import List */ 
.css-1iqznpf, 
/* Order details */
.css-8ygusu, 
/* Order details - Dark */ 
.css-sascqv 
{
    background: none;
}




/* Marketplace - grid view - grid gap */
.css-qn8z78 {
    gap: 16px 16px;
}





/* Dark Mode */ 

/* Theme color - Darkest */
.css-13ozw02 {
    background-color: rgb(7, 7, 41);
}
/* Theme color - Main dark */
/* Theme color - Main dark - left vertical nav */
.css-13waw2u .MuiDrawer-paper, 
/* Theme color - Main dark - top horizontal nav */
.css-fek0ns, 
/* Theme color - Main dark - table head */
.css-1axpj6f {
    background-color: rgb(7, 7, 57);
}











/* left vertical nav width attempt */
@media (min-width: 1200px) {
    /* top nav left padding */
    .css-zy8xzl, 
    /* top nav left padding - DARK MODE */ 
    .css-fek0ns {
        left: calc(15rem + env(safe-area-inset-left));
    } 
    /* left nav width */
    .css-zy8xzl, 
    /* left nav width DARK MODE */ 
    .css-fek0ns {
        width: 100vw - calc(15rem + constant(safe-area-inset-left));
        width: 100vw - calc(15rem + env(safe-area-inset-left));
    }
    /* main area left and top padding */
    .css-jmq9rd {
        padding-left: calc(15rem + env(safe-area-inset-left));
        padding-top: 56px;
    }
    /* left nav width */
    .css-y9w94q .MuiDrawer-paper, 
    /* left nav width - DARK MODE */
    .css-13waw2u .MuiDrawer-paper {
        max-width: 15rem;
        max-width: 240px;
        max-width: calc(15rem + constant(safe-area-inset-left));
        max-width: calc(15rem + env(safe-area-inset-left));
    }
}






/* Left Vertical Nav Menu */

/* Left Vertical Nav Menu Logo - resposition to the top left */
.css-m6b3zt,
.css-m6b3zt {
    padding-top: 1rem;
}
.css-b0ga68 {
    padding-left: 24px;
}
/* divider */ 
.css-1xjp29m, .css-1o64opv {
    margin: 13px 0 10px;
}
/* divider color */ 
.css-1xjp29m {
    border-color: rgb(43, 48, 71);
}
/* Left Vertical Nav Menu Logo - new logo -- Temporary */
/* new logo */
.css-m6b3zt img,
.css-b0ga68 {
    width: 200px;
    height: 27px;
    box-sizing:border-box;
    padding-left: 200px;
    background: url(https://admin-dev.crowdship.io/static/images/Crowdship-logo-v4-text-logo-white.png) 24px top / contain no-repeat;
    background-image: url(https://crowdship.io/wp-content/uploads/2023/05/Crowdship-logo-v3-with-text.png);   
    filter: contrast(0.5) invert(1);
}



/* Left Vertical Nav Menu items - align items left */
.css-m6b3zt, .css-1mdm4ig {
    display: flex;
    flex-direction: column;
    -webkit-box-align: inherit;
    align-items: inherit;
    -webkit-box-pack: inherit;
    justify-content: inherit;
}
/* Left Vertical Nav Menu items - remove top padding */
.css-1e4fkl0,
.css-1ontqvh {
    padding: 0;
}
/* Left Vertical Nav Menu items - more padding for arrows on the right */
.css-1ns11q3, .css-1rn7m2i {
    padding: 9px 24px 9px 24px;
}


/* Left Vertical Nav Menu items - remove border radius on the left side */
.css-1ns11q3, 
.css-zsn6td,
.css-1hwy9o5, 
.css-x69hho, 
.css-gbj1ut, 
.css-qpo9oo { 
    border-radius: 0 8px 8px 0; 
}


/* Left Vertical Nav Menu Settings link - full width hover */
.css-4p3zqw {
    width: 98%;
}

/* Left Vertical Nav Menu Settings link - DARK MODE text color */
.css-4p3zqw .css-odlcug .css-76tsaz {
    color: #fff;
}
/* Left Vertical Nav Menu Settings link - set container height */
.css-1e4fkl0 {
    height: calc(100vh - 131px);
    margin: 0;
}
/* Left Vertical Nav Menu Settings link - vertically center position */
.css-4p3zqw {
    padding: 10px 0;
}


/* left vertical nav - hide POs link */ 
.css-147do2x:nth-of-type(5) .css-wp2dp li:nth-of-type(1) {
    display: none;
}


/* left vertical nav - line up sub-menu items */
.css-1hwy9o5, .css-x69hho {
    padding: 9px 12px 9px 52px;
}




/* Attempt to hide custom scroll bar until hover */
.css-1dzr8cf {
    overflow-y: hidden;
}
.css-1dzr8cf:hover {
    overflow-y: auto;
}







/* Top Horizontal Header Nav - lower height */
.css-mw1tq7 {
    min-height: 56px;
}
/* Top Horizontal Header Nav - box shadow */
.css-zy8xzl, .css-fek0ns {
    box-shadow: 0rem 0.0625rem 0.0625rem #1f21241a;
}

/* Right Vertical More Filters Menu - raise position and height to meet shorter Top Horizontal Nav  */
.css-45qmq8 .MuiDrawer-paper {
    height: calc(100vh - 56px);
    margin-top: 56px;
}
/* Right Vertical More Filters Menu - Clear button text color */
.css-1e7eqzp {
    color: #fff;
}










/* content area title */

/* content area title - padding */
.css-2amgce {
    padding: 24px 24px 0px;
}
.css-1e40co {
    padding-bottom: 24px;
}
.css-zpnhu4, .css-1nj8c10 {
    height: 40px;
    line-height: 40px;
}

















/* Product tables - Table shadow - allow overflow to show shadow on left and right sides */
.css-kge0eu {
    overflow: inherit; 
}
/* Table shadow - top */
.css-1gjqc4z, 
/* Table shadow - DARK MODE */
.css-1axpj6f 
{
    box-shadow: 0rem -0.125rem 0.25rem #1f21241a, 0rem -0.0625rem 0.375rem #1f21240d;
    box-shadow: 0rem -0.0625rem 0.375rem #1f21240d;
}
/* Table shadow - bottom */
.css-102m77e + .css-kge0eu > .css-31aecb,
/* Table shadow - bottom - DARK MODE */
.css-1nhznbt + .css-kge0eu > .css-4h5b6e
{
    box-shadow: 0rem 0.125rem 0.25rem #1f21241a, 0rem 0.0625rem 0.375rem #1f21240d;
}



/* Table rounded corners - top */
.css-1gjqc4z,
/* Table rounded corners - top - DARK MODE */
.css-1axpj6f 
{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
/* Table rounded corners - bottom */
.css-31aecb, 
.css-kge0eu, 
.css-kge0eu tr:last-child,
/* Table rounded corners - bottom - DARK MODE */
.css-4h5b6e 
{
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.css-kge0eu tr:last-child td {
    border-bottom: none;
}
.css-kge0eu tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem;
}
.css-kge0eu tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem;
}



/* Product tables - Text and Typography */

/* Search, filters, and actions - Text and Typography - less container padding */
.css-1gjqc4z, 
/* Search, filters, and actions Dark Mode - Text and Typography DARK MODE */
.css-1axpj6f 
{
    padding: 15px 18px;
}

/* Search, filters, and actions - Text and Typography - smaller text size */
.css-d4vqwt, .css-5qfucg, .css-1e6b50g, 
/* Search, filters, and actions Dark Mode - Text and Typography DARK MODE */
.css-nzysml, .css-1hgn4fg, .css-emfefa, 
/* Table column headings */
.css-2jw6f2, .css-aytey5
{
    font-size: 0.75rem;
    font-size: var(--th-font-size);
}

/* Search, filters, and actions - Text and Typography - less padding on Export button */
.css-471aq0, 
/* Search, filters, and actions Dark Mode - Text and Typography DARK MODE */
.css-bofxym 
{
    padding: 6px 20px;
}

/* Search, filters, and actions - Text and Typography - Export button shadow */
.css-17cylm7, .css-471aq0 {
    outline: 0.0625rem solid #0000;
    box-shadow: 0rem 0.0625rem 0.0625rem #1f21241a;
}
/* Search, filters, and actions - Text and Typography - Export button shadow DARK MODE */
.css-nxfpgj, .css-bofxym {
    outline: 0.0625rem solid #0000;
    box-shadow: 0rem 0.0625rem 0.0625rem #5e90da1a;
}
/* Search, filters, and actions - Text and Typography - Export button hover background */
.css-1o81jgk:hover {
    background: #f1f2f4;
    border-color: rgb(230, 232, 240);
}
/* Search, filters, and actions - Text and Typography - Export button hover outline */
.css-5qfucg:hover .MuiOutlinedInput-notchedOutline.css-17cylm7,
/* Search, filters, and actions - Text and Typography - Export button hover outline DARK MODE */
.css-5qfucg:hover .Mu...