Update.
Started using classes instead of *= selectors. Switching to new status picker. Center avatar near status picker. Fix media embed width. Fix warning icon in profile.
This commit is contained in:
		
							parent
							
								
									9e11c79c46
								
							
						
					
					
						commit
						53ae934dd7
					
				
					 5 changed files with 49 additions and 34 deletions
				
			
		|  | @ -16,7 +16,7 @@ | ||||||
|   --input-background:     #1e1e1e; |   --input-background:     #1e1e1e; | ||||||
|   color: var(--header-primary); |   color: var(--header-primary); | ||||||
| 
 | 
 | ||||||
|   & [class*="close-"] { |   & .close-1mLglB { | ||||||
|     color: var(--interactive-normal); |     color: var(--interactive-normal); | ||||||
| 
 | 
 | ||||||
|     &:hover |     &:hover | ||||||
|  | @ -24,24 +24,22 @@ | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class^="layer-"] div.theme-light, | div.layer-1Ixpg3 div.theme-light, | ||||||
| div[class^="downloadApps-"] { | div.downloadApps-14IgKV { | ||||||
|   &:extend(.theme-dimmer all); |   &:extend(.theme-dimmer all); | ||||||
| 
 | 
 | ||||||
|   div[class*="root-"] { |   div.root-g14mjS { | ||||||
|     background-color: var(--background-secondary); |     background-color: var(--background-secondary); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   div[class*="footer-"] { |   div.footer-31IekZ { | ||||||
|     background-color: var(--background-primary); |     background-color: var(--background-primary); | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class^="downloadApps"] { | div.downloadApps-14IgKV { | ||||||
|   & { |  | ||||||
|   background-color: var(--background-secondary) !important; |   background-color: var(--background-secondary) !important; | ||||||
|   } |   h3, div.footer-2TRYcZ { | ||||||
|   h3, div[class*="footer-"] { |  | ||||||
|     color: var(--header-primary); |     color: var(--header-primary); | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,5 +1,5 @@ | ||||||
| // fix guild selector at left part | // fix guild selector at left part | ||||||
| ul[data-list-id="guildsnav"] div[class^="scroller-"] { | ul[data-list-id="guildsnav"] div.scroller-3X7KbA { | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-direction: column; |   flex-direction: column; | ||||||
|   overflow: hidden !important; |   overflow: hidden !important; | ||||||
|  | @ -30,7 +30,7 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] { | ||||||
|   margin-bottom: 8px; |   margin-bottom: 8px; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class^="messagesWrapper-"] div { | div.messagesWrapper-RpOMA3 > div { | ||||||
|   scrollbar-width: thin; |   scrollbar-width: thin; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | @ -42,18 +42,18 @@ div[class^="messagesWrapper-"] div { | ||||||
|     top: 0; bottom: 0; |     top: 0; bottom: 0; | ||||||
|     left: 0; right: 0; |     left: 0; right: 0; | ||||||
|   } |   } | ||||||
|   div[class^="wrapper-"] { |   div.wrapper-22rqw6 { | ||||||
|     top: 0; |     top: 0; | ||||||
|     border-radius: 8px; |     border-radius: 8px; | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class*="fullscreenOnMobile"] div[class^="flex"] * { | div.fullscreenOnMobile-ixj0e3 div.flex-3BkGQD * { | ||||||
|   // fix overflow |   // fix overflow | ||||||
|   overflow: hidden; |   overflow: hidden; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class*="templatesList-"] { | div.templatesList-uohY49 { | ||||||
|   // fix tempates list (it was removed) |   // fix tempates list (it was removed) | ||||||
|   height: 128px; |   height: 128px; | ||||||
| } | } | ||||||
|  | @ -80,3 +80,14 @@ div[class^="contentContainer-"] div[class*="stickyHeader-"] { | ||||||
|   padding-right: 0; |   padding-right: 0; | ||||||
|   margin: 0; |   margin: 0; | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | // media embed fixes | ||||||
|  | div.inlineMediaEmbed-1m3ApS { | ||||||
|  |   width: max-content; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | // in profile | ||||||
|  | .warningCircleIcon-mFju_m { | ||||||
|  |   position: fixed; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  |  | ||||||
|  | @ -22,6 +22,7 @@ div[class^="characterCount-"] div[class^="root-"], // at many characters | ||||||
| [class^="clickableSticker-"], // stickers | [class^="clickableSticker-"], // stickers | ||||||
| nav[class^="privateChannels-"] div div // Nitro tab at DM | nav[class^="privateChannels-"] div div // Nitro tab at DM | ||||||
|  [data-list-item-id$="nitro"], |  [data-list-item-id$="nitro"], | ||||||
|  | #account-style-your-profile, | ||||||
| { &:extend(.nitro); } | { &:extend(.nitro); } | ||||||
| 
 | 
 | ||||||
| #channels > ul { | #channels > ul { | ||||||
|  |  | ||||||
|  | @ -92,8 +92,10 @@ div[class^="banner"] { | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| div[class^="avatarWrapper-"] { | div.container-YkUktl div.avatarWrapper-1B9FTW { | ||||||
|   margin-right: auto; // make some space after avatar (sidebar at bottom) |   margin-right: auto; // make some space after avatar (sidebar at bottom) | ||||||
|  |   min-width: unset; | ||||||
|  |   padding: unset; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| // Redesigned profile page | // Redesigned profile page | ||||||
|  | @ -157,3 +159,12 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page | ||||||
|     .left-border(@round); |     .left-border(@round); | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | #account-info div.headerTop-3GPUSF { | ||||||
|  |   padding-top: 108px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | #account-avatar div.avatarWrapperNormal-ahVUaC { | ||||||
|  |   left: 35%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  |  | ||||||
|  | @ -193,22 +193,21 @@ div.popoutContainer-2wbmiM, | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| // status picker | // status picker | ||||||
| #status-picker > div { | #account-status-picker + div.layer-2aCOJ3 div.scroller-1bVxF5 { | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-flow: row wrap; |   flex-flow: row wrap; | ||||||
|   justify-content: space-around; |   justify-content: space-around; | ||||||
|   #status-picker-online, | 
 | ||||||
|   #status-picker-idle, |   & > div.item-1OdjEX { | ||||||
|   #status-picker-dnd, |  | ||||||
|   #status-picker-invisible { |  | ||||||
|     padding: 8px; |     padding: 8px; | ||||||
|  |     margin: 0; | ||||||
|  | 
 | ||||||
|     & > div { |     & > div { | ||||||
|       padding: 0; |       padding: 0; | ||||||
| 
 | 
 | ||||||
|       // & > because svg has status- div |       & > div.status-2xYiEF, | ||||||
|       & > div[class^="status-"], |       & > div.description-1Dd2kv, | ||||||
|       & > div[class^="description-"] { |       { &:extend(.hide); } | ||||||
|         display: none; |  | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|   svg { |   svg { | ||||||
|  | @ -217,11 +216,6 @@ div.popoutContainer-2wbmiM, | ||||||
|     margin-left: 4px; |     margin-left: 4px; | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   #status-picker-custom-status, |  | ||||||
|   div[class^="submenuContainer-"] { |  | ||||||
|     width: 100%; |  | ||||||
|   } |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| // new invite with splash style | // new invite with splash style | ||||||
| div[id^="message-accessories-"] { | div[id^="message-accessories-"] { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue