• Browser
  • Mail
  • News
  • Community
  • About
Register Login
HomeBlogsForumThemesContributeSocial

Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    We will be doing maintenance work on Vivaldi Translate on the 11th of May starting at 03:00 (UTC) (see the time in your time zone).
    Some downtime and service disruptions may be experienced.
    Thanks in advance for your patience.

    1. Home
    2. Desktop
    3. Archive
    4. VSCode Style Hidden Addressbar

    VSCode Style Hidden Addressbar

    Archive
    css customize mod
    3
    3
    874
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • tsfreddie
      T
      tsfreddie
      last edited by

      screenshot

      Not sure why would anybody need this, but I made it anyway.

      #tabs-container {
          background-image: none !important;
      }
      
      .toolbar-addressbar {
          transition: none !important;
      }
      
      .addressfield {
          min-width: 0px !important;
          max-width: 600px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          background-color: var(--colorBg) !important;
          height: 37px !important;
          padding: 6px !important;
          box-shadow: 0px 0px 8px #000000 !important;
          margin-top: -4px !important;
      }
      
      .urlfield {
          border: solid 0.5px var(--colorBorderHighlight) !important;
          background-color: var(--colorAccentBg) !important;
          height: 24px !important;
      }
      
      .siteinfo-symbol {
          margin-left: 0px !important;
          margin-top: 0px !important;
      }
      
      .button-addressfield {
          height: 24px !important;
          width: 24px !important;
      }
      
      .urlSearch {
          margin-top: 10px !important;
          background-color: var(--colorBg) !important;
          box-shadow: 0px 4px 8px #000000 !important;
          min-width: 0px !important;
          max-width: 600px !important;
          margin-left: 0px !important;
          margin-right: 0px !important;
      }
      
      .toolbar-statusbar {
          background-color: var(--colorHighlightBg) !important;
      }
      
      #switch {
          background-color: var(--colorAccentBg) !important;
      }
      
      .pageload-indicator {
          height: 100% !important;
      }
      

      Colors: BG #252526, FG #fbfbfb, HL #007acc, AC #3c3c3c

      Hide address bar, and use keyboard shortcut (default F8\Ctrl+L) to summon the address bar.

      1 Reply Last reply Reply Quote 7
      • luetage
        L
        luetage Supporters Soprano
        last edited by

        The blue status bar is a nice touch, looks a lot like vscode.

        github ◊ vfm

        1 Reply Last reply Reply Quote 0
        • OwOGoodMan
          O
          OwOGoodMan
          last edited by

          Thanks 🙂

          1 Reply Last reply Reply Quote 0
          • pafflick
            P
            pafflick moved this topic from Modifications on
          Loading More Posts
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes
          Reply
          • Reply as topic
          Log in to reply
          • 1 / 1
          • First post
            Last post

          Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.

          Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status