rwt-file-tabs.css

/* Copyright (c) 2021 Read Write Tools. Legal use subject to the File Tabs DOM Component Software License Agreement. */
:host{--pure-black:#000;--nav-black:#111;--light-black:#171717;--medium-black:#222;--black:#333;--dark-gray:#555;--gray:#777;--white:#ccc;--pure-white:#fff;--js-blue:#76afe8;--title-blue:#42affa;--yellow:#ffffa4;--red:#ff3d3d;--color:var(--white);--accent-color1:var(--pure-white);--background:var(--black);--accent-background1:var(--pure-black);--accent-background2:var(--nav-black);--accent-background3:var(--medium-black);--accent-background4:var(--gray);--width:100%;--height:2rem;--nav-button-size:calc(var(--height) - 8px);--font-family:'Source Sans Pro',sans-serif;--font-weight:normal;--letter-spacing:0px;--text-align:left;--min-width:2rem;--max-width:6rem;--navbox-width:calc(var(--nav-button-size)*2 + 8px)}
#shell{position:relative;width:var(--width);height:var(--height);margin:0;padding:0;font-family:var(--font-family);font-size:1rem;color:var(--color);background-color:var(--background);border-bottom:1px solid var(--accent-background1)}
#shell *{box-sizing:border-box}
#tab-box{position:absolute;top:0;left:0;width:calc(var(--width) - var(--navbox-width));height:var(--height);overflow:hidden}
#nav-box{position:absolute;top:0;right:0;width:var(--navbox-width);height:var(--height)}
#nav-left,#nav-right{position:absolute;top:calc((var(--height) - var(--nav-button-size))/ 2);width:var(--nav-button-size);height:var(--nav-button-size);line-height:0;text-align:center;color:var(--color);background-color:var(--accent-background3);border:1px solid var(--accent-background1)}
#nav-left{left:4px}
#nav-right{right:4px;border-left:none}
#nav-left:hover,#nav-right:hover{color:var(--accent-color1);background-color:var(--accent-background2)}
#nav-left:active,#nav-right:active{color:var(--pure-black);background-color:var(--dark-gray)}
#scroll-box{display:inline-block;white-space:nowrap;position:absolute;top:0;height:var(--height)}
.tab-button,::slotted(.tab-button){position:relative;height:calc(var(--height) - 5px);min-width:var(--min-width);max-width:var(--max-width);padding:2px 6px;margin-top:4px;margin-bottom:0;margin-left:4px;margin-right:4px;font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);text-align:var(--text-align);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--color);background-color:var(--accent-background3);border-width:1px 1px 0 1px;border-style:solid solid none solid;border-color:var(--accent-background1);border-top-left-radius:10px;border-top-right-radius:10px;outline:0}
.tab-button:hover,::slotted(.tab-button:hover){color:var(--accent-color1);background-color:var(--accent-background2)}
.current-tab,::slotted(.current-tab){font-weight:600;color:var(--accent-color1);background-color:var(--accent-background2);border-color:var(--dark-gray);border-width:2px 2px 0 2px;box-shadow:0 -3px 8px var(--pure-black)}
.x-button{display:inline-block;color:var(--color);background-color:var(--background);border:1px solid var(--accent-background1);border-radius:4px;padding:0 4px;margin-right:10px}
.x-button:hover{color:var(--background);background-color:var(--color)}