Help With Google Drive CSS

Hello. So Google Is going through, in my opinion, ugly style changes. It would be nice to have a style code to revert the pilled look back to the blocky look. I would do this myself but I can't seem to Inspect the code in Google Drive to see what I need to do to fix it.
If anyone knows or can see the CSS Google Drive uses can you please make something to revert back the appearance from the new pilled look to the previous blocky look?

Comments

  • Something like this?
    (Current default style)

    Shift+right click would suffice for inspection.
    649 x 252 - 49K
  • I believe so. More so looking to change back to the old look as much as possible. The newer look is on the right and the old on the left. I managed to find how to bring up inspect without right-clicking. Been playing with the code for a bit.
  • Nice, though, shift+right-click seems to be efficient.
  • oh wow, thanks didn't see that as an alternative to bring up the option. I can't seem to make it boxed again, but did manage to edit the spacing and background so the top bar doesn't blend into the folders and files box. The code isn't very pretty, but I guess if someone or you want it to play with it I'll post it.
    Google Drive look without styles vs. the styles i just fiddled with.
    It's not perfect so would still be up for suggestions
  • edited May 12 Firefox
    Have you tried the basic:
    button.RTMQvb:nth-child(1) {
    border-radius: 3px !important;
    }

    ?

    If the selector doesn't work, you can go like:
    body > div:nth-child(1) > div::nth-child(2) > div:nth-child(1) > div > div > div:nth-child(3) > div:nth-child(1) > div > button {border-radius: 3px !important;}


    Obviously, talking 'bout https://drive.google.com/
  • They seem to have added new values to the css
    .a-D-gc-wKOTTc .a-ec-Gd button.RTMQvb {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 1px 3px 1px rgba(60, 64, 67, 0.149);
    align-items: center;
    background-color: #fff;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 24px;
    color: #3c4043;
    display: inline-flex;
    font-family: 'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    height: 48px;
    letter-spacing: .15px;
    line-height: 22px;
    margin: 0;
    min-width: 120px;
    padding: 0 24px 0 0;
    text-transform: none;
    width: inherit
    }

    It seems ok now for me though I can get over the buttons and folders being more rounded and pill-shaped as long as i can see them better.

    Not sure if i should add in comment texts and post it as a simple base css for others to fiddle with as they see fit.
  • edited May 12 Firefox
    I see that it's the exact same class though (.RTMQvb).
    Have you tried using the first script code i typed?
  • I have. It doesn't work as you had it on it's own, but i can edit the radius to 3px in the code i sent to give it the rounded box look.

    Thank you.
  • edited May 12 Firefox
    It'll be my pleasure to help, when you actually make it work in the editor.
    Here's a complete working script for this specific button screenshot.
    Check the bottom option "Applies to".
    479 x 651 - 106K
Sign In or Register to comment.