Vivaldi tweak for Arc theme

arc-window-controls.css

.window-buttongroup button {
  background-color: rgba(0,0,0,0) !important;
  width: 30px !important;
}

.window-buttongroup button:hover {
  background-color: rgba(0,0,0,0) !important;
}

.window-buttongroup button:active {
  background-color: rgba(0,0,0,0) !important;
}

.toggle-trash {
  margin-right: 30px !important;
}

.minimize-icon {
  content: url('../resources/titlebutton-minimize-dark.png');
}

.minimize-icon:hover {
  content: url('../resources/titlebutton-minimize-hover-dark.png');
}

.minimize-icon:hover:active {
  content: url('../resources/titlebutton-minimize-active-dark.png');
}

.maximize-icon {
  content: url('../resources/titlebutton-maximize-dark.png');
}

.maximize-icon:hover {
  content: url('../resources/titlebutton-maximize-hover-dark.png');
}

.maximize-icon:hover:active {
  content: url('../resources/titlebutton-maximize-active-dark.png');
}

.close-icon {
  content: url('../resources/titlebutton-close-dark.png');
}

.close-icon:hover {
  content: url('../resources/titlebutton-close-hover-dark.png');
}

.close-icon:hover:active {
  content: url('../resources/titlebutton-close-active-dark.png');
}

arc-window-controls.js

[
  'window-minimize',
  'window-maximize',
  'window-close',
].forEach(className => {
  waitUntilReady(
    () => document.getElementsByClassName(className).length !== 0,
    () => {
      const elements = document.getElementsByClassName(className);
      const button = elements[0];
      const withoutWindow = className.slice(7);
      button.innerHTML = `<img
        class="${withoutWindow}-icon"
        src="../resources/titlebutton-${withoutWindow}-dark.png"
      />`;
    }
  );
});

function waitUntilReady(check, callback) {
  if (check()) callback();
  else setTimeout(() => waitUntilReady(check, callback), 1000);
}