servercolumns
This commit is contained in:
Mirco Wittrien
parent
b1d52cbe57
commit
5bdd72afa5
|
|
@ -1,6 +1,7 @@
|
|||
:root {
|
||||
--vcolumns: var(--columns, 2);
|
||||
--vguildsize: var(--guildsize, 50);
|
||||
--vguildgap: var(--guildgap, 4);
|
||||
--valigndms: var(--aligndms, 1);
|
||||
}
|
||||
.container-2lgZY8 {
|
||||
|
|
@ -21,47 +22,47 @@
|
|||
.wrapper-1Rf91z.foldercontent.foldercontentopen,
|
||||
.wrapper-1Rf91z .unreadMentionsIndicatorTop-gA6RCh,
|
||||
.wrapper-1Rf91z .unreadMentionsIndicatorBottom-BXS58x {
|
||||
width: calc(1px * ((var(--vguildsize) + 10) * var(--vcolumns) + 35 - 25)) !important;
|
||||
width: calc(1px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) + 35 - 25)) !important;
|
||||
}
|
||||
.titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
||||
padding-right: calc(1px * ((var(--vguildsize) + 10) * var(--vcolumns) - 50)) !important;
|
||||
padding-right: calc(1px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) - 50)) !important;
|
||||
}
|
||||
body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP,
|
||||
body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
||||
width: calc(2px * ((var(--vguildsize) + 10) * var(--vcolumns) + 35 - 25)) !important;
|
||||
width: calc(2px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) + 35 - 25)) !important;
|
||||
}
|
||||
body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
||||
padding-right: calc(1px * ((var(--vguildsize) + 10) * var(--vcolumns) * 2 - 40)) !important;
|
||||
padding-right: calc(1px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) * 2 - 40)) !important;
|
||||
}
|
||||
.titleBar-AC4pGV.typeMacOS-3EmCyP.typeMacOSWithFrame-3R_i5S .macButtons-2MuSAC {
|
||||
margin-top: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.wrapper-1Rf91z .scrollerWrap-1IAIlv {
|
||||
width: calc(1px * ((var(--vguildsize) + 10) * var(--vcolumns) + 35 - 10)) !important;
|
||||
width: calc(1px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) + 35)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z,
|
||||
.wrapper-1Rf91z .scrollerWrap-1IAIlv {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.wrapper-1Rf91z .scrollerWrap-1IAIlv .scroller-2TZvBN {
|
||||
padding: 0 0 10px 10px !important;
|
||||
padding: 0 0 calc(10px * var(--vguildsize)/50) calc(10px * var(--vguildsize)/50) !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
flex-flow: row wrap !important;
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
.wrapper-1Rf91z .listItem-2P_4kh {
|
||||
margin: 4px 13px 4px 0 !important;
|
||||
margin: calc(1px * var(--vguildgap)) calc(1px * (10 * var(--vguildsize)/50)) calc(1px * var(--vguildgap)) 0 !important;
|
||||
}
|
||||
.wrapper-1Rf91z #server-search {
|
||||
margin: 4px calc(1px * (((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2)) !important;
|
||||
margin: calc(1px * var(--vguildgap)) calc(1px * (((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .listItem-2P_4kh:first-child .listItemWrapper-3X98Pc {
|
||||
margin: 0 calc(1px * (((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2)) 4px calc(1px * ((((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2))) !important;
|
||||
margin: 0 calc(1px * (((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2)) calc(1px * var(--vguildgap)) calc(1px * ((((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2))) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .listItem-2P_4kh:first-child .pill-1m5BUr ~ .listItemWrapper-3X98Pc {
|
||||
margin: 0 calc(1px * ((((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))) 0 calc(1px * (((0 * var(--valigndms)) + ((((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))))) !important;
|
||||
margin: 0 calc(1px * ((((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))) 0 calc(1px * (((0 * var(--valigndms)) + ((((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))))) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .blobContainer-239gwq,
|
||||
.wrapper-1Rf91z .circleButtonMask-2VNJsN,
|
||||
|
|
@ -97,23 +98,23 @@ body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
|||
transform: translate(calc(-1.5px * ((50 - var(--vguildsize))/10)), calc(1.5px * ((50 - var(--vguildsize))/10))) scale(calc(var(--vguildsize)/50)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .wrapper-sa6paO {
|
||||
top: -5px !important;
|
||||
height: calc(1px * (var(--vguildsize) + 10)) !important;
|
||||
top: calc(-5px * var(--vguildsize)/50) !important;
|
||||
height: calc(1px * (var(--vguildsize) + 10 * var(--vguildsize)/50)) !important;
|
||||
transform: scale(calc(var(--vguildsize)/50)) !important;
|
||||
transform-origin: 0 50% !important;
|
||||
}
|
||||
.wrapper-1Rf91z .pill-2uzAFe {
|
||||
left: calc(1px * ((((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2) - 9)) !important;
|
||||
left: calc(1px * ((((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2) - 9)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .pill-1m5BUr {
|
||||
left: calc(1px * ((var(--valigndms) + ((((var(--vguildsize) + 10) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))) - 8)) !important;
|
||||
left: calc(1px * ((var(--valigndms) + ((((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1))/2) * (1 - var(--valigndms)))) - 8)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .pill-31IEus,
|
||||
.wrapper-1Rf91z .pill-3YxEhL {
|
||||
left: -9px !important;
|
||||
left: calc(-10px * var(--vguildsize)/50) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .guildSeparator-3s64Iy {
|
||||
width: calc(1px * ((var(--vguildsize) + 10) * var(--vcolumns) - 10)) !important;
|
||||
width: calc(1px * ((var(--vguildsize) + 10 * var(--vguildsize)/50) * var(--vcolumns) - (10 * var(--vguildsize)/50))) !important;
|
||||
margin: calc(1px * (var(--vguildsize)/10)) 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -138,14 +139,14 @@ body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
|||
.wrapper-1Rf91z #bd-pub-li,
|
||||
.wrapper-1Rf91z #sort-button,
|
||||
.wrapper-1Rf91z .RANbutton-frame {
|
||||
width: calc(1px * ((var(--vguildsize)*4/5) + 10)) !important;
|
||||
width: calc(1px * ((var(--vguildsize)*4/5) + 10 * var(--vguildsize)/50)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .friendsOnline-2JkivW,
|
||||
.wrapper-1Rf91z #bd-pub-li,
|
||||
.wrapper-1Rf91z #sort-button,
|
||||
.wrapper-1Rf91z .RANbutton-frame {
|
||||
text-align: center !important;
|
||||
margin: 4px calc(1px * (((var(--vguildsize) + 10) * (var(--vcolumns) - 1) - ((var(--vguildsize)*4/5) + 10) + var(--vguildsize))/2)) 4px calc(1px * (((var(--vguildsize) + 10) * (var(--vcolumns) - 1) - ((var(--vguildsize)*4/5) + 10) + var(--vguildsize))/2)) !important;
|
||||
margin: calc(1px * var(--vguildgap)) calc(1px * (((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1) - ((var(--vguildsize)*4/5) + 10 * var(--vguildsize)/50) + var(--vguildsize))/2)) calc(1px * var(--vguildgap)) calc(1px * (((var(--vguildsize) + 10 * var(--vguildsize)/50) * (var(--vcolumns) - 1) - ((var(--vguildsize)*4/5) + 10 * var(--vguildsize)/50) + var(--vguildsize))/2)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z #sort-button > div,
|
||||
.wrapper-1Rf91z #bd-pub-li #bd-pub-button,
|
||||
|
|
@ -163,7 +164,7 @@ body.foldercontentopened .titleBar-AC4pGV.typeMacOS-3EmCyP .macButtons-2MuSAC {
|
|||
}
|
||||
|
||||
.wrapper-1Rf91z .wrapper-21YSNc {
|
||||
margin: 4px 13px 4px 0 !important;
|
||||
margin: calc(1px * var(--vguildgap)) calc(1px * (10 * var(--vguildsize)/50)) calc(1px * var(--vguildgap)) 0 !important;
|
||||
width: calc(1px * var(--vguildsize)) !important;
|
||||
}
|
||||
.wrapper-1Rf91z .wrapper-21YSNc > .listItem-2P_4kh {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
//META{"name":"ServerColumns","description":"Changes the Server List to a gridlike container to allow servers to be displayed in columns. Amount of columns can be set in the .theme.css file.","author":"DevilBro","version":"1.0.5","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Themes/ServerColumns","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Themes/ServerColumns/ServerColumns.theme.css"}*//{}
|
||||
//META{"name":"ServerColumns","description":"Changes the Server List to a gridlike container to allow servers to be displayed in columns. Amount of columns can be set in the .theme.css file.","author":"DevilBro","version":"1.0.6","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Themes/ServerColumns","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Themes/ServerColumns/ServerColumns.theme.css"}*//{}
|
||||
|
||||
@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/ServerColumns/ServerColumns.css);
|
||||
|
||||
:root {
|
||||
--columns: 2; /* amount-servercolumns default: 2 */
|
||||
--guildsize: 50; /* pixel-serversize default: 50 */
|
||||
--aligndms: 0; /* should DMs be aligned in columns: 0 = no, 1 = yes */
|
||||
--columns: 3; /* default: 3 (amount of servercolumns) */
|
||||
|
||||
--guildsize: 50; /* default: 50 (serversize in pixel) */
|
||||
--guildgap: 4; /* default: 4 (top/bottom gap between servers in pixel) */
|
||||
|
||||
--aligndms: 0; /* default: 0 (should DMs be aligned in columns: 0 = no, 1 = yes) */
|
||||
}
|
||||
Loading…
Reference in New Issue