Disable all animation Vivaldi UI

Tutorial how to disable all animation Vivaldi UI

Vivaldi Animations

Animation of Vivaldi UI make browser look slow for me, so I just want browser with no UI animations.
Vivaldi had internal setting for disable UI Animation, but some animations still there.

For example if you click on + new tab, extensions icon there still transform animation.


Example Video


Add Custom CSS

For disable Vivaldi UI animations, we need custom CSS to override default Vivaldi CSS. Here step-by-step for enabling custom.css

  1. Open vivaldi://experiments
  2. Check Allow for using CSS modifications.
  3. Open vivaldi://settings/appearance/
  4. New setting will be appeared Custom UI Modifications
  5. Choose the folder you want to use, for example:
    • $HOME/.config/vivaldi/CustomCSS
    • Documents/Vivaldi/CustomCSS
  6. Place CSS files inside it, for example:
    • $HOME/.config/vivaldi/CustomCSS/custom.css
    • Documents/Vivaldi/CustomCSS/custom.css

Disable UI Animations

After you enabling, Allow for using CSS modifications next step is add CSS to override default Vivaldi CSS. Just copy this line to custom.css and save, after that restart your Vivaldi browser.

/*** Disable UI Animations ***/
* {
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  animation: none !important;
  transform: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  transition: none !important;
}

/*** Make tab bar working ***/
.tab-position {
  transform: translateX(var(--PositionX)) translateY(var(--PositionY)) !important;
}

/*** Fix for audio icon ***/
.audioicon {
  transform: scale(0.5) translateZ(0) !important;
}

#browser:not(.alt-tabs)
  #tabs-container
  .tab:not(.pinned):not(.tab-small).audio-on
  .tab-audio,
#browser:not(.alt-tabs)
  #tabs-container
  .tab:not(.pinned):not(.tab-small).audio-muted
  .tab-audio,
#browser:not(.alt-tabs)
  #tabs-container
  .tab:not(.pinned):not(.tab-small).tab-captured
  .tab-audio {
  transition-delay: 50ms !important;
  transform: scale(1) !important;
}

/*** Quick commands ***/
#modal-bg {
  transform: translateX(-50%) !important;
}

If working, it looks like this.


Example Video


Bantu bagikan halaman ini ke:
Dibangun dengan Hugo
Tema Stack dirancang oleh Jimmy