GithubHelp home page GithubHelp logo

discordstyles / slate Goto Github PK

View Code? Open in Web Editor NEW
219.0 5.0 194.0 1.52 MB

An optimized, consistent, and functional theme for @discord based on GitHub's design language.

Home Page: https://discordstyles.github.io/slate-theme

License: MIT License

SCSS 99.88% JavaScript 0.12%
theme customization discord discord-theme discord-mod discord-themes discord-customization powercord betterdiscord

slate's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

slate's Issues

Inbox server icons too big and cut-off

Describe the bug
The server icons in the inbox are too big and cut off

To Reproduce
Usually this happens with just Slate.

Screenshots
image
image

Infomation
Discord channel: PTB
OS: Windows
Mod: BetterDiscord
Discord language: English (US)

Additional context
I don't think these icons should that big.

Magnifier icon overlap "search" text in the searchbar

Describe the bug
Magnifier icon overlap "search" text in the searchbar

To Reproduce
Just have slate theme and look at search bar in the top right of any server

Screenshots
Immagine

Infomation (please complete the following information):
Discord channel: Stable
OS: Windows 10 20h2
Mod: BetterDiscord
Discord language: italian

top control bar clips into channel name when in a call

image
when in a dms call, the top discord bar controls cut into the title of whichever dm/group you are in.
my screen resolution is 1366 x 768, i am using the latest version of slate, discord, and betterdiscord. this has been an issue since the update where we had to reinstall the theme from the betterdiscordlibary. if any more information is needed, just shoot me a message on discord - 「ディラン」 ✿#1

Can't scroll in audit log, members list, or bans list, member list severe lag

Cannot scroll down in the audit log, member list, or ban list, and opening the member list on a server with 200~ ish members causes the ui to freeze entirely for a few seconds, whereas it's instant with Slate disabled.

To Reproduce
Open server settings and attempt to scroll in the aforementioned tabs

Stable
Win10
BD

small inputs, missing cursor pointer on nav items/buttons, font sizes

im really liking this theme so far but there are several inputs that are to small in height and several buttons (and nav items) dont have a pointer cursor.

image
should be
image
edit (cursor): --cursor: pointer; fixes the pointer issue
edit (input size):

:root {
    --spacing: 12px;
    --input-height: 32px;
    --avatar-size-sm: 28px;
}

enlarges the buttons and inputs a bit

also there are some sections that needs some margins and font adjustments
image
image

Conflict with Hide Servers / Channels Plugin

First of all, thanks for your hard work. This theme looks great!

As the title suggests, this isn't a bug with the theme per se, but I hope you could point me in the right direction to solve the conflict with this plugin.

The plugin provides buttons in the UI and keybindings to collapse the channel list / server list. Both buttons appear correctly with and without Slate, and the button/keybinding to hide the servers works with and without Slate as expected. However, the button/keybinding to hide the channel list causes the channel list to briefly collapse and then reopen (the plugin does work without Slate).

I've looked at the code for both Slate and the plugin in question, but my CSS/JS-Fu is essentially nonexistent and I wasn't able to make them play nice together. I decided to open this issue in the hope that you could fix the conflict or at least help me figure out how to fix it myself.

Thanks!

Buttons and some labels are just rectangles

Buttons including upload and home as well as "bot" tags are all gray rectangles.

Temp-2021-03-25_17-03
temp-2021-03-25_17-04

Also inspecting these elements I noticed...
temp-css-2021-03-25_17-06

Other Info
Discord Version: 0.0.13 Stable
OS: GNU/Linux
Mod: BandgedBetterDiscord

Additional context
I force downgraded to 0.0.13 from 0.0.14 by editing build_info.json (BetterDiscord isn't patched for the new version yet)

Full screen leaves a weird bar

Describe the bug
When going into full screen view in a voice channel, there's a bar on the left that stays and takes up a considerable amount of the screen.

To Reproduce
Go into full screen in a voice channel

Screenshots
image
image

Infomation (please complete the following information):
Discord channel: Stable
OS: Windows
Mod: BetterDiscord
Discord language: English

Additional context
My first thought is that it might be an issue with one of my plugins, but this doesn't happen with any other theme.

Titlebar colour cannot be modified?

The title bar cannot be affected by any "background-___" variables, at least for the ones currently listed on the wiki. Based on the original theme I was hoping that it would automatically match with the server bar colour.

Discord channel: Stable
OS: Windows 10 20H2
Mod: BetterDiscord
Discord language: English

Base.ccs doesn't show up

The theme itself doesn't load on discord (AdjustableServerWidth does but that's a different repo), and when going to the base.css URL the file doesn't seem to be present

Screenshot

Discord channel: PTB
OS: Windows
Mod: Betterdiscord
Discord language: English

Chat is lowered

image
Chat looks weird, looked fine yesterday.

edit:
downloaded new file, just to verify, and it still looks the same as above.

RadialStatus issues

Describe the bug
RadialStatus outlines are off on the avatar icon on the bottom panel
And the hover icon becomes bigger.

To Reproduce
Have Slate theme with RadialStatus

Screenshots
image
image

Desktop (please complete the following information):
Discord channel: Stable
OS: Windows
Mod: BetterDiscord

Missing emotes in replies

There's no emotes in reply menu
Slate (ok, I tweaked it little bit but I checked and this doesn't affect the outcome):
image

No theme:
image

Other theme:
image

Setup:
Discord channel: Stable
OS: Windows 10
Mod: BetterDiscord

The problem disappeared after I added this at the end of my config:

#app-mount .repliedMessage-VokQwo img.replyAvatar-1K9Wmr {
  /*On screenshot it'll be display: block; since I want avatars*/
  display: none;
}

#app-mount .repliedMessage-VokQwo img.emoji {
  display: inline;
}

After the fix (again just in case: avatar is visible because I wanted it):
image

I'll try to fix it on my own in pull request. I opened this issue to get you all possible information if I get stuck, forgot about it or smth else

"Upload to #channel" window not themed, cropped text

Describe the bug
"Upload to #channel" window not themed, cropped text

To Reproduce
Drag and drop a file onto the Discord window

Screenshots
2021-04-05_12-39-22

Desktop:
Discord channel: Stable
OS: Windows
Mod: BetterDiscord

Additional context
n/a

UI is tiny at high resolution

On a 4k monitor, a lot of the UI appears very small, including both sidebars and all messages. The chat font scale option in discord settings does not scale the font, so there's no way to fix this as a user.

Many icons missing

All of the icons that are slate-specific are gone. This includes:

  • The BBD settings icons (The discord settings icons are all just gears
  • The connection button icon
  • The home button icon
  • The discord logo icon
  • The attachment icon
  • The gif, sticker and emoji icons

Public servers button too low

The public servers button is cut off into the divider line. (See screenshots)

Screenshots
image
image

Desktop
Discord channel: Stable
OS: OSX
Mod: BetterDiscord

Additional context
I resolved this issue by adding: --toolbar-height: 30px;

Embeds are too wide

Describe the bug
Embeds are very wide for some reason

To Reproduce
Post an image. (more noticeable as a spoiler)

Screenshots
image

Infomation (please complete the following information):
Discord channel: Stable
OS: Windows 8.1 64-bit
Mod: BetterDiscord
Discord language: English (US)

Theme breaks with Horiz Serverlist

A part of the interface is cut off when Horizontal Server List is applied. The reason I find this a problem is because Gibbu works on this, and made the Horizontal Server List Mini-Theme. Please make the theme either adjust for this, or create a separate version for it, or something of the sort, thank you.

Online icon doesn't reflect if online on mobile or not

The status icons are always the same circular shape instead of distinctive shapes, just colored differently according to the online status. This is the case everywhere in the UI. The only place where the actual online status, including shape and mobile indicator, is shown, is in the DM header.

There have been instances where the mobile icon does show up in the UI, but that seems to be a bug instead of intentional behavior, as it only shows up if the online status of someone changes while viewing the list they are contained in, or if the said person's online status is loaded after the theme is, for example when scrolling the list.

Spotify Rich Presence in user modal

Describe the bug
When someone has a Spotify account connect and they are listening to music it shows as a status in the user modal. But with this theme I don't even know what is happening.

To Reproduce
Connect a Spotify Account
Play a song
Open your user modal

Screenshots

image

Infomation (please complete the following information):
Discord channel: Stable
OS: Windows 10
Mod: BetterDiscord
Discord language: US English

No LGBT palette

I think it's an oversight by the developers (hopefully) that they haven't made an LGBT palette for Slate yet. Maybe have the palette animate through all the colors, or just use rainbow as the primary "color" throughout. I hope you will consider this matter.

Messed-up compact mode look

Messages in compact mode do not look great.
Previously, they looked like this:
image
Now, they look like this (this screenshot has some empty space in it, which is unintentional):
Screen Shot 2020-10-31 at 4 55 36 PM
Could they please be fixed to be on one line?
Thanks for looking at this issue.

Add roles in user modal

Describe the bug
*When a user has a rich presence, the add button on the user modal is not in the right place *

To Reproduce

  • Have manage roles
    Open a user modal who has a rich presence activity, the add button is placed high*

Screenshots
image

Infomation (please complete the following information):
Discord channel: Stable
OS: Windows 10
Mod: BetterDiscord
Discord language: US English

Discord logo missing from titlebar

Describe the bug
The discord logo is completely missing from the titlebar, other icons work.

To Reproduce
It happens when you install Slate by default.

Screenshots
image

Desktop (please complete the following information):
Discord channel: PTB
OS: Windows
Mod: BetterDiscord

Additional context
This can be somewhat fixed by adding this CSS:

.typeWindows-1za-n7:before {
  content: '';
  position: fixed;
  background: url('https://discord.com/assets/28174a34e77bb5e5310ced9f95cb480b.png') center/cover no-repeat;
  width: 20px;
  height: 20px;
  left: 12px;
  top: 4px;
}

Connections Logos gone

Since I installed slate the connections logos of everyone are gone.
It looks like on the screenshot below.
Untitled

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.