diff --git a/NotAnotherAnimeTheme.theme.css b/NotAnotherAnimeTheme.theme.css index cd74f63e..9fbc60e3 100644 --- a/NotAnotherAnimeTheme.theme.css +++ b/NotAnotherAnimeTheme.theme.css @@ -21,7 +21,9 @@ /* Theme Background */ - --theme-background-image: url(https://i.imgur.com/j1Z6HVc.jpg); + --theme-background-image: url(https://i.imgur.com/j1Z6HVc.jpg); /*The main image that applies over all of Discord*/ + --theme-background-image-size: cover; + --theme-background-image-position: cover; /*Change to something like 50% 50% if the image is offcenter, then play with both values until it fits.*/ /* Main Theme Color @@ -30,33 +32,44 @@ /* Main Theme Transparency + + This is a color that is placed over your background image. + It's best to keep this as black, as it will darken the BG image + and make messages easier to read. + + Change the 4th value higher for a darker image, or lower for lighter. */ --theme-transparency: rgba(0, 0, 0, 0.8); + /* + Server Listing Width + Single Column: 72px + Double Column: 126px + Triple Column: 184px + Quad Column: 242px + */ + --server-listing-width: 126px; + /* Home Icon Image + + Takes the place of the Discord icon in the top left. */ --home-icon-image: url(https://i.imgur.com/63g6Em8.jpg); /* - Change your friends icon image position + Change your home icon image position + + You can change it to something like "cover" if the + home icon is misaligned or doesn't fit. */ --home-icon-image-position: center center; /* - Change your friends icon image zoom + Change your home icon image zoom */ --home-icon-image-zoom: 100%; - /* - Server Listing Width - Single Column: 72px - Double Column: 126px - Triple Column: 184px - Quad Column: 242px - */ - --server-listing-width: 126px; - /* Font Size */ @@ -65,9 +78,9 @@ /* Mention colors */ - --mention-color: rgba(250, 166, 26, 0.05); - --mention-sider: rgba(250, 166, 26, 1); - --mention-hover-color: rgba(250, 166, 26, 0.08); + --mention-color: rgba(250, 166, 26, 0.05); /*Messages that mention you will be highlighted in this color*/ + --mention-sider: rgba(250, 166, 26, 1); /*The small bar on the left side of a message that mentions you*/ + --mention-hover-color: rgba(250, 166, 26, 0.08); /*Messages that mention you will be highlighted in this color when you're hovering over them.*/ /* Server category hover color @@ -95,17 +108,21 @@ /* Small User Popout + + The window that appears when you click on someone in the members list. */ --small-user-popout-background-image: var(--theme-background-image); --small-user-popout-background-transparency: rgba(0, 0, 0, 0.6); - --small-user-popout-background-image-position: center; + --small-user-popout-background-image-position: cover; /* Big User Popout + + The window that appears when you right click a user and select "Profile" */ --big-user-popout-background-image: var(--theme-background-image); --big-user-popout-background-transparency: rgba(0, 0, 0, 0.6); - --big-user-popout-background-image-position: center; + --big-user-popout-background-image-position: cover; /* Code Markup @@ -119,7 +136,7 @@ --message-box-transparency: rgba(0, 0, 0, 0.6); /* - Embed Background Transparency + Embed Background Transparency/Color */ --embed-background-transparency: rgba(0, 0, 0, 0.6); @@ -129,7 +146,9 @@ --message-hover-buttons-background: rgba(200, 200, 200, 0.1); /* - Context Menu Transparency + Context Menu Transparency/Color + + The menu that appears when right-clicking */ --context-menu-transparency: rgba(15, 15, 15, 0.8); @@ -140,7 +159,9 @@ --add-discover-icon-color: #43b581; /* - Channel Limit Number Color + Voice Channel Limit Number Color + + The small bubble over a voice channel with a maximum number of users */ --channel-limit-count-color: var(--channels-default); --channel-limit-background-left: rgba(200, 200, 200, 0.1); @@ -201,4 +222,23 @@ --reaction-emoji-border-color: 1px solid transparent; --reaction-emoji-hover-background-color: rgba(255, 255, 255, 0.1); --reaction-emoji-hover-border-color: rgba(255, 255, 255, 0.2); -} \ No newline at end of file +} + + +/*INSERT CUSTOM CODE BELOW*/ + +/* + * Custom font + + * Remove the comment below to enable a custom font + * This will add a font to your *entire* Discord + + * You can change the link to the font in the @import + * to get your own. See https://github.com/puckzxz/NotAnotherAnimeTheme/issues/184#issuecomment-1008341747 + * for more details. +**/ + +/* +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap'); +* {font-family: 'Raleway', sans-serif;} +*/ \ No newline at end of file diff --git a/css/v3/naat.v3.css b/css/v3/naat.v3.css index 73915ba2..ff4a8415 100644 --- a/css/v3/naat.v3.css +++ b/css/v3/naat.v3.css @@ -10,7 +10,8 @@ .appMount-2yBXZl { background-image: var(--theme-background-image); - background-size: cover; + background-size: var(--theme-background-image-size); + background-position: var(--theme-background-image-position); } .tutorialContainer-2sGCg9 .wrapper-28eC3z .childWrapper-1j_1ub { @@ -930,6 +931,6 @@ html { margin-top: 0px; } -.container-3XgAHv { +.container-3XgAHv, .contentWidth-3aWel5 .header-JUTO-g { background: transparent; -} +} \ No newline at end of file