.tabsAside.background { z-index: 9999 !important; background-color: rgba(255, 255, 255, .5) !important; position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: 0 !important; transition: .2s !important; opacity: 0; } .tabsAside.pane { font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important; user-select: none !important; position: fixed !important; right: 0px !important; top: 0px !important; bottom: 0px !important; overflow: auto !important; width: 40%; min-width: 500px !important; background-color: #f7f7f7 !important; border: 1px solid rgba(100, 100, 100, .5) !important; border-width: 0px 0px 0px 1px !important; box-sizing: border-box !important; box-shadow: 6px 0px 12px black !important; font-size: small !important; transform: translateX(110%); /* Pane is hidden */ transition: .2s !important; text-align: initial !important; } .tabsAside.pane[opened] { transform: translateX(0px) !important; } /* Pane header*/ .tabsAside.pane > header { margin: 20px 40px !important; line-height: initial !important; height: initial !important; } .tabsAside.pane > header > div { display: grid !important; grid-template-columns: 1fr auto !important; } .tabsAside.pane > header > div > h1 { margin: 10px 0px !important; font-weight: normal !important; font-size: 21pt !important; direction: initial !important; color: inherit !important; line-height: initial !important; font-family: inherit !important; } .tabsAside.pane > header > div > button { margin: auto !important; } .tabsAside.pane > header > div > nav { top: 70px !important; right: 40px !important; } .tabsAside.pane > header > div > nav > div { box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5) !important; cursor: initial !important; overflow: hidden !important; } .tabsAside.pane > header > div > nav > p { margin: 10px !important; font-family: inherit !important; font-size: inherit !important; line-height: initial !important; } .tabsAside.pane > header > div > nav > p > small { font-size: inherit !important; font-family: inherit !important; } .tabsAside.pane > header > div > nav > p > a { text-decoration: none; font-size: inherit !important; border: none !important; } .tabsAside.pane > header > a { font-size: inherit; } .tabsAside.pane > header > hr { border: 1px solid #8a8a8a !important; direction: initial !important; color: inherit !important; height: initial !important; margin: 6.5px 0px !important; } .tabsAside.pane > section > h2 { margin: 0px 40px !important; font-weight: normal !important; } /* Collection header */ .tabsAside.pane > section > div { transition: .2s !important; } .tabsAside.pane > section > div > div:first-child { margin: 0px 20px !important; display: grid !important; grid-template-columns: auto 1fr auto auto auto !important; grid-column-gap: 10px !important; align-items: center !important; } .tabsAside.pane > section > div > div:first-child > small { color: gray !important; font-size: smaller !important; } .tabsAside.pane > section > div > div:first-child > span { font-weight: 600 !important; } .tabsAside.pane > section > div > div:first-child > a { font-size: 11pt !important; line-height: initial !important; } .tabsAside.pane > section > div > div:first-child > div { display: none !important; /* TODO: Implement this menu */ } .tabsAside.pane > section > div > div:first-child > div > nav { width: 200px !important; margin-top: 10px !important; right: 50px !important; } /* Tabs collection */ .tabsAside.pane > section > div > div:last-child { margin: 0px 0px 0px 20px !important; padding: 10px 40px 10px 20px !important; white-space: nowrap !important; overflow: auto !important; } .tabsAside.pane > section > div > div:last-child:hover::-webkit-scrollbar-thumb { visibility: visible !important; } .tabsAside.pane > section > div > div:last-child > div { width: 175px !important; height: 148px !important; margin: 5px !important; background-color: #c2c2c2 !important; background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png"); display: inline-grid !important; grid-template-rows: 1fr auto !important; box-shadow: 0px 0px 5px rgba(100, 100, 100, .5) !important; transition: .25s !important; cursor: pointer !important; } .tabsAside.pane > section > div > div:last-child > div:hover { filter: brightness(120%) !important; box-shadow: 0px 0px 15px rgba(100, 100, 100, .5) !important; } .tabsAside.pane > section > div > div:last-child > div > div { background-color: rgba(233, 233, 233, .75) !important; grid-row: 2 !important; display: grid !important; grid-template-columns: auto 1fr auto !important; } .tabsAside.pane > section > div > div:last-child > div > div > button { margin: auto !important; margin-right: 5px !important; display: none !important; } .tabsAside.pane > section > div > div:last-child > div:hover > div > button { display: initial !important; } .tabsAside.pane > section > div > div:last-child > div > div > div { width: 20px !important; height: 20px !important; margin: 10px !important; background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_icon.png"); background-size: 20px !important; } .tabsAside.pane > section > div > div:last-child > div > div > span { overflow: hidden !important; margin: auto 0px !important; margin-right: 10px !important; line-height: initial !important; } .tabsAside.pane > section > div > div:last-child > div:hover > div > span { margin-right: 5px !important; } @media only screen and (max-width: 500px) { .tabsAside.pane { width: initial !important; left: 0px !important; min-width: initial !important; } }