.updateBadge { display: none; } .tabsAside[updated] .updateBadge { width: 10px; height: 10px; background-color: #0078d7; border-radius: 5px; display: block; } /* Custom scrollbar */ .tabsAside ::-webkit-scrollbar { height: 6px; width: 6px; } .tabsAside ::-webkit-scrollbar-thumb { background: darkgray; border-radius: 3px; } .tabsAside ::-webkit-scrollbar-thumb:hover { background: gray; } .tabsAside { font-family: "SegoeUI", "SegoeMDL2Assets" !important; font-size: 14px; user-select: none; } /* Links style */ .tabsAside a { color: #0078d7; } .tabsAside a:hover { text-decoration: underline; cursor: pointer; } .tabsAside a:visited { color: #0078d7; } /* Buttons style */ .tabsAside button { width: 28px; height: 28px; font-size: 16px; background-color: transparent; border: none; cursor: pointer; outline: none !important; position: relative; } .tabsAside button:hover { background-color: #f2f2f2; } .tabsAside button:active { background-color: gray; } /* Context menus style */ .tabsAside .contextContainer { position: relative; } .tabsAside nav { user-select: none; position: absolute; width: 390px; font-size: 12px; box-shadow: 0px 4px 10px rgba(0,0,0,.25); background-color: white; border-radius: 5px; z-index: 10; visibility: hidden; padding: 4px 0px; } .tabsAside nav hr { border: none; height: 1px; background-color: rgba(0, 0, 0, .1); margin: 4px 0px } .tabsAside nav button { align-content: center; text-align: start; padding: 0px 12px; width: 100%; height: 32px; font-family: "SegoeUI"; font-size: 12px; display: grid; grid-template-columns: auto 1fr auto; grid-column-gap: 14px; } .tabsAside nav button:hover { background-color: #eeee; } .tabsAside nav button img:first-child { width: 16px; height: 16px; } .tabsAside nav button img:nth-child(3) { width: 12px; height: 12px; } .tabsAside nav button *:nth-child(3) { align-self: center; } .tabsAside button + nav:active, .tabsAside button:focus + nav { visibility: visible; } /* Icon buttons style */ .btn { background-repeat: no-repeat; background-size: 12px; background-position: center; font-family: "SegoeUI", "SegoeMDL2Assets"; } .control.checkbox { display: block; position: relative; padding: 8px 12px 8px 42px; box-sizing: border-box; cursor: pointer; min-height: 32px; } .control.checkbox:hover { background-color: #eeeeee; } .control.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; } .control.checkbox input + span { position: absolute; left: 12px; height: 16px; width: 16px; transition-property: background, border, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1); } .control.checkbox input + span::after { position: absolute; color: rgba(0, 0, 0, .4); font-family: "SegoeMDL2Assets"; content: "\E73E"; width: 16px; height: 16px; font-size: 16px; text-align: center; display: none; } .control.checkbox input:checked + span::after { display: block; color: black; } .control.checkbox:hover input + span::after { display: block; } @font-face { font-family: "SegoeUI"; src: local("Segoe UI"), url("../fonts/segoeui.ttf") format("truetype"), url("../fonts/segoeui.woff") format("woff") } @font-face { font-family: "SegoeMDL2Assets"; src: local("Segoe MDL2 Assets"), url("../fonts/segoemdl2.ttf") format("truetype"), url("../fonts/segoemdl2.woff") format("woff") }