Cookies Enhanced by egirlcatnip

/* ==UserStyle==
@name         Cookies Enhanced
@version      1.0
@namespace    https://userstyles.world/user/egirlcatnip
@description  Use together with Cookie Clicker - Compact.Removes top bar, edits few elemets for convenience.
@author       egirlcatnip
@license      No License
==/UserStyle== */
@-moz-document url-prefix("https://orteil.dashnet.org/cookieclicker/"),
url-prefix("http://orteil.dashnet.org/cookieclicker/") {

  * {
    scrollbar-width: none;
  }

  #topBar,
  #storeTitle,
  #upgrades::before,
  #products::before,
  #techUpgrades:before,
  #toggleUpgrades:before,
  #vaultUpgrades:before {
    display: none;
  }

  #bakeryNameAnchor {
    top: 4%;
  }

  #cookies {
    top: 4%;
  }


  .onWeb #game {
    top: 0;
  }

  #versionNumber {
    opacity: 0;
    transition: ease-in-out 0.2s;
  }

  #versionNumber:hover {
    opacity: 1;
    transition: ease-in-out 0.2s;
  }

  #sectionMiddle {
    width: 59% !important;
  }

  #prefsButton:hover > .subButton,
  .subButton {
    box-shadow: none;
  }

  #prefsButton:hover {
    background-position: 0px -96px;
  }
  #legacyButton:hover {
    background-position: -100px -144px;
  }

  .productButtons:hover {
    opacity: 1;
    transition: ease-in-out 0.2s;
  }

  .productButtons {
    opacity: 0;
    transition: ease-in-out 0.2s;
  }

  #sectionRight {
    background-color: #1f0b04;
    width: 315px !important;
  }
  .product .content .owned {
    right: 24px;
  }
  .storePre {
    background: transparent !important;
  }

  #sectionRight {
    right: -320px;
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/panelVertical.png?v=2);
    background-color: #1f0b04c7;
    background-repeat: repeat-y;
    background-origin: padding-box;
    padding-left: 15px;

    transition: right .1s;

    width: 320px;

    z-index: 10000;
  }

  .storeSection {
    width: 320px;
  }
  .product {
    width: 100%;
    background-size: cover !important;
    background-position: 0px 135px !important;
  }

  .product .content .owned {
    right: 20px;
  }

  .separatorRight {
    right: 0;
    opacity: 0;
  }

  #sectionMiddle {
    width: calc(69% - 20px);
  }

  #sectionRight:hover,
  .separatorRight:hover ~ #sectionRight {
    right: -15px;

    transition: right .1s;
  }

  #tooltip,
  #tooltip > div {
    min-width: 250px !important;
    width: 250px !important;
  }
  #tooltip > div {
    padding: 0 10px 0px 0px !important;
  }

  /* Enlarged Left Side */
  #sectionLeft {
    width: 40%;
  }
  .separatorLeft {
    left: 40%;
  }
  #sectionMiddle {
    left: 40%;
    width: calc(59% - 20px);
    margin: 0;
  }
}