Discord Minimise by jordy3d

/* ==UserStyle==
@name         Discord Minimise
@version      20220623.14.33
@namespace    userstyles.world/user/jordy3d
@description  Discord, friendly on very small displays (or very small windows)!
@author       jordy3d
@license      No License
==/UserStyle== */

@-moz-document domain("discord.com") {
@media only screen and (max-width: 600px) {
  .canvas-3XuBXe { width: 500px !important; height: 240px !important; }

  .image-2jyRAK.loaded-3PtF_J { opacity: .1; }

  /*Bye bye big header Icons*/
  [aria-label="Add Friends to DM"] { display: none; }
  [aria-label="Inbox"] { display: none; }
  [href="https://support.discord.com"] { display: none; }
  [aria-label="Channel header"] > div:first-child > div:first-child { display: none; }
  [aria-label="Notification Settings"] { display: none; }
  [aria-label="Threads"] { display: none; }

  [aria-label="Send a gift"] { display: none; }

  /*Shrinkify Search Bar*/
  [aria-label="Channel header"] [class*="searchBar-"] { width: 25px; }
  [aria-label="Channel header"] [class*="searchBar-"]:focus-within { width: 100px; }

  /*Left-side online indicator
  [class*="status-"] { position: absolute; left: 0px; }
  [aria-label="Channel header"] > div:first-child > h3 { margin-left: 15px; }
  */


  /*Maximise Messages*/
  [class*="message-"] { padding-right: 10px !important; }
  [class*="embed-"] { width: 100%; max-width: 100% !important; }
  [id*="message-accessories-"] { width: 100%; max-width: 100% !important; }
  [class*="clickableWrapper-"] img { width: 100%; max-width: 100% !important; height: auto !important; position: relative; }
  [class*="clickableWrapper-"] { height: fit-content; width: 100%; }
  [class*="embed-"] > [class*="clickable-"] { width: 100% !important; }
  [id*="message-accessories-"] [class*="messageAttachment-"] { width: 95% !important; }
  [id*="message-accessories-"] > div > [class*="clickable-"] { width: 100% !important; }
  
  [id*="message-accessories"] > [class*="userSelectNone-"] { width: 100%; }
  @media only screen and (max-width: 500px) {
    [id*="message-accessories"] > [class*="userSelectNone-"] button { width: 30px !important; }
    [id*="message-accessories"] > [class*="userSelectNone-"] button > div { overflow: visible; }
  }
  [class*="guildNameWrapper"] { width: 100%; }
  [class*="embedTitle-"] { width: 95%; }
  [class*="embedVideo-"]:not([src*="tenor"]) { width: 100% !important; height: auto !important;/*aspect-ratio: 16 / 9;*/ }
  [class*="embedProvider"], [class*="embedTitle"], [class*="embedDescription"] { width: 100%; }
  [class*="embedMedia"]:not([src*="tenor"]) { width: 100% !important; height: fit-content !important;}
  [class*="embedMedia"][src*="tenor"] { width: 100% !important; height: fit-content !important;}
  
  [class*="wrapperPaused"], [class*="wrapperPlaying"], [class*="wrapperControls"] { width: 100% !important; height: 100% !important; }
  [class*="embedVideo-"] > [class*="imageWrapper"] { width: 100% !important; height: 100% !important; }
  
  [class*="embedMedia"][src*="tenor"] { aspect-ratio: unset !important;}

  /*Status Bar*/
  [aria-label="Channel header"] [class*="status-"] { position: absolute; height: 45px; left: 0px; border-left: 4px solid magenta; }
  [aria-label="Channel header"] [class*="status-"] svg { display: none; }
  [aria-label="Channel header"] > div:first-child {overflow-y: visible; position: initial; }
  [aria-label="Offline"] { border-color: #747f8d !important; }
  [aria-label="Online"] { border-color: #3ba55d !important; }
  [aria-label="Idle"] { border-color: #faa81a !important; }
  [aria-label="Do Not Disturb"] { border-color: #ed4245 !important; }

  /*Mini Sidebar*/
  [class*="sidebar"] { width: 15px; transition: width .1s; }
  [class*="sidebar"]:hover { width: 240px; transition: width var(--transition-speed); }

  /*Independant Sidebar*/
  [aria-label="Channel header"] { z-index: 2000; }
  [class*="sidebar"]
  {
    width: var(--sidebar-width);
    background: #2f3136;
    z-index: 1000;

    box-shadow: 0 0 4px 2px #202225cc;
  }
  [class*="sidebar"]:hover { z-index: 3000 !important; }
  [class*="sidebar"] [class*="avatarWrapper"] { opacity: 0; }
  [class*="sidebar"]:hover [class*="avatarWrapper"] { opacity: 1; transition: opacity var(--transition-speed); }

  [class*="content-"] > [class*="chat-"]
  {
    position: absolute;
    height: 100%;
    width: 100%;
    left: var(--sidebar-width);
  }

  /*Sidebar shade*/
  [class*="sidebar"] { box-shadow: 0 0 4px 2px #202225cc; }
  [class*="sidebar"]:hover { box-shadow: 0 0 0px 5000px #202225cc, 0 0 10px 5px #202225cc; animation: shade .3s  }

  @keyframes shade {
    from { box-shadow: 0 0 0px 5000px #0000, 0 0 10px 5px #0000; }
    to { box-shadow: 0 0 0px 5000px #202225cc, 0 0 10px 5px #202225cc; }
  }

  [class*="layerContainer-"] { z-index: 4000; }
  
  /*Shifted Popout*/
  [id*="popout_"] { left: 12px !important; }
  [id*="popout_"] div::after { left: 30% !important; }
  
  
  /*Keep QR on mini*/
  [class*="qrLogin"] { display: flex; }
}

/*Miniaturised Server List*/
[aria-label="Servers"] { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: 7px; }
[aria-label="Servers"] > [class*="listItem-"], [aria-label="Servers"] [class*="wrapper-"] { width: var(--server-icon-size); height: var(--server-icon-size); margin: 0 0 8px;  }
[aria-label="Servers"] [class*="listItem-"] > div:nth-child(2) { width: 100%; height: 100%; }
[aria-label="Servers"] [class*="listItem-"] > div:nth-child(2) div { width: 100%; height: 100%; }
[aria-label="Servers"] [class*="listItem-"] > div:nth-child(2) div svg { width: 100%; height: 100%; }

[aria-label="Servers"] [class*="listItem-"] [class*="pill-"] { overflow: visible; margin: 0; }

[aria-label="Servers"] > [class*="wrapper-"] { min-height: var(--server-icon-size); min-width: var(--server-icon-size); height: fit-content; width: fit-content; }
[aria-label="Servers"] > [class*="wrapper-"] > [class*="listItem-"] { min-height: var(--server-icon-size); height: var(--server-icon-size); width: 100%; margin: 0; }
[id*="folder-items-"] > [class*="listItem-"] { width: var(--server-icon-size); height: var(--server-icon-size); }

[aria-label="Servers"] [class*="listItem-"] [class*="wrapper-"] { min-width: var(--server-icon-size); min-height: var(--server-icon-size); }

[aria-label="Servers"] [class*="listItem-"] [class*="item-"][style*="height: "] 
{  
  width: 28%;
  height: 28% !important;
  border: 2px solid white !important;
  position: relative;
  border-radius: 50%;
  left: 1px;
}
[aria-label="Servers"] [class*="listItem-"] [class*="item-"][style*="height: 40"] 
{  
  width: 100%;
  height: 100% !important;
  border: 2px solid white !important;
  position: relative;
  border-radius: 13%;
  left: 2px;
}
[aria-label="Servers"] [class*="listItem-"] [class*="item-"][style*="height: 8"] 
{  
  width: 8%;
  height: 8% !important;
  border: 2px solid white !important;
  position: relative;
  border-radius: 50%;
  left: 0px;
}

[class*="expandedFolderBackground"] { width: 62px; border-radius: 5px; left: -2px; }
ul[id*="folder-items-"] 
{ 
  height: fit-content !important;
  display: flex;
  gap: 0 4px;
  width: 100%;
  flex-wrap: wrap;
}

/*Server Icon Badges - Shrinkified*/
[class*="upperBadge"], [class*="upperBadge"] > div, [aria-label="Servers"] [class*="lowerBadge"], [aria-label="Servers"] [class*="lowerBadge"] > div
{
  min-height: 10px;
  min-width: 10px;
  width: 6px !important;
  height: 6px !important;
}
[aria-label="Servers"] [class*="numberBadge"] { font-size: 7pt;}

/*Server threads view and sidebar hover conflict fix*/
[class*="animatorRight"] > [class*="popout"] 
{
  left: 73px;
  top: 28px;
}

/*Remove the Navigate Servers button*/
[data-list-id="guildsnav"] [class*="scroller"] > div:nth-child(5) { display: none !important; }
/*Remove Download App button*/
[data-list-id="guildsnav"] [class*="scroller"] > div:nth-child(7) { display: none !important; }

/*===== Variables =====*/

:root
{
  --transition-speed: .2s;
  --sidebar-width: 12px;
  
  --server-icon-size: 26px;
}
}