@discreted/vue-browser-tabs
Version:
A browser-like tabs component for Vue3
2 lines (1 loc) • 9.57 kB
CSS
.browser-tabs[data-v-1533fbb2]{width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box}.tab-header-title[data-v-1533fbb2]{display:flex;align-items:center;justify-content:flex-start;gap:5px;flex:1;min-width:0;overflow:hidden}.tab-list[data-v-1533fbb2]{display:flex;align-items:center;max-width:calc(100% - 95px);overflow:hidden;padding:0 10px;height:42px;margin-top:8px}.tab-header-icon[data-v-1533fbb2]{width:18px;height:18px;min-width:18px}.tab-header-content[data-v-1533fbb2]{display:flex;align-items:center;justify-content:space-between;width:100%;line-height:26px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:24px;gap:5px}.tabs-bar[data-v-1533fbb2]{display:flex;align-items:center;background:#d3e3fd;padding:0 150px 0 40px;height:50px;-webkit-user-select:none;user-select:none;position:relative}.tab-item[data-v-1533fbb2]{display:flex;align-items:center;justify-content:space-between;padding:0 10px 8px 8px;line-height:34px;height:42px;background:#d3e3fd;cursor:pointer;position:relative;color:#000;flex:1 1 0;overflow:visible;min-width:30px;max-width:300px;width:300px;gap:5px;box-sizing:border-box}.tab-item.narrow[data-v-1533fbb2]:not(.active){justify-content:center}.tab-item.narrow.active[data-v-1533fbb2]{justify-content:center}.tab-item:not(.active):hover .tab-header-content[data-v-1533fbb2]{border-radius:12px;background:#a8c7fa;line-height:30px;z-index:12}.tab-item.active[data-v-1533fbb2]{color:#191919;background:#fff;z-index:2;font-weight:500;border-radius:8px 8px 0 0}.tab-icon[data-v-1533fbb2]{flex-shrink:0;display:flex;align-items:center}.tab-title[data-v-1533fbb2]{flex-grow:1;flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-close[data-v-1533fbb2]{flex-shrink:0;height:12px;display:flex;align-items:center;justify-content:center;border-radius:8px}.tab-close[data-v-1533fbb2]{font-size:20px;color:#474747;cursor:pointer;transition:all .2s;margin-top:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.tab-close[data-v-1533fbb2]:hover{opacity:1;color:#474747;background:#dcdcdd;border-radius:50%}.tab-item[data-v-1533fbb2]:not(:first-child):before{content:"";position:absolute;left:0;top:17px;transform:translateY(-50%);width:2px;height:18px;background:#a8c7fa;opacity:1;transition:opacity .2s;z-index:20}.tab-item[data-v-1533fbb2]:hover:before,.tab-item.active[data-v-1533fbb2]:before{opacity:0}.tab-item:hover+.tab-item[data-v-1533fbb2]:before,.tab-item.active+.tab-item[data-v-1533fbb2]:before{opacity:0}.tab-arc[data-v-1533fbb2]{position:absolute;bottom:0;z-index:10;overflow:hidden;pointer-events:none;width:15px;height:15px}.tab-arc .dot[data-v-1533fbb2]{content:"";height:24px;width:24px;border-radius:999px;background:#d3e3fd;position:absolute;z-index:10;bottom:0}.arc-left[data-v-1533fbb2]{left:-15px;transform:rotate(90deg)}.arc-left .dot[data-v-1533fbb2]{right:0}.arc-right[data-v-1533fbb2]{right:-15px;transform:rotate(180deg)}.arc-right .dot[data-v-1533fbb2]{left:0}.tab-add[data-v-1533fbb2]{background:none;border:none;font-size:20px;color:#000;cursor:pointer;height:28px;line-height:28px;width:28px;border-radius:50%;transition:background .2s;display:flex;justify-content:center}.tab-add[data-v-1533fbb2]:hover{background:#a8c7fa}.tab-content[data-v-1533fbb2]{flex:1;background:#fff;min-height:0;overflow:auto}.empty-content[data-v-1533fbb2]{padding:20px;text-align:center;color:#999}.window-controls[data-v-1533fbb2]{display:flex;align-items:center;position:absolute;height:50px;right:0;top:0;z-index:200}.window-btn[data-v-1533fbb2]{width:60px;height:50px;border:none;background:#d3e3fd;color:#000;fill:#000;font-size:18px;cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;padding:0}.window-btn.max svg[data-v-1533fbb2]{background:#d3e3fd}.window-btn[data-v-1533fbb2]:hover{background:#bdcce3}.window-btn.close[data-v-1533fbb2]:hover{background:#e81123;fill:#fff}.dropdown.dropdown-left[data-v-1533fbb2]{position:absolute;left:0;top:0;z-index:201;height:50px;display:flex;align-items:center}.dropdown-btn[data-v-1533fbb2]{font-size:20px;width:35px;height:35px;background:#ecf3fe;border:none;color:#000;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;border-radius:12px;position:absolute;z-index:50;top:8px;left:8px}[data-v-1533fbb2] .tiny-popover.tiny-popper{padding:0}.dropdown-btn[data-v-1533fbb2]:hover{background:#a8c7fa}.dropdown-menu[data-v-1533fbb2]{position:absolute;left:0;top:100%;background:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 8px #00000014;min-width:100px;z-index:999}.dropdown-item[data-v-1533fbb2]{padding:8px 16px;cursor:pointer;white-space:nowrap}.dropdown-item[data-v-1533fbb2]:hover{background:#f5f5f5}.tab-dropdown-menu[data-v-1533fbb2]{min-width:280px;max-height:340px;overflow-y:auto;padding:0;border-radius:12px;box-shadow:0 4px 24px #00000021;background:#fff;border:1px solid #e0e0e0}.dropdown-search[data-v-1533fbb2]{position:relative;display:flex;align-items:center;padding:8px 8px 4px;background:#fff}.dropdown-search-icon[data-v-1533fbb2]{position:absolute;left:16px;width:16px;height:16px;display:flex;align-items:center;pointer-events:none}.dropdown-search-input[data-v-1533fbb2]{padding-left:36px;width:100%;height:40px}.dropdown-search-divider[data-v-1533fbb2]{height:1px;background:#e0e0e0;margin:0 8px}.dropdown-tab-list[data-v-1533fbb2]{max-height:270px;overflow-y:auto;padding-bottom:6px}.dropdown-tab-item[data-v-1533fbb2]{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;cursor:pointer;transition:background .2s;border-radius:6px;margin:6px}.dropdown-tab-item.active[data-v-1533fbb2]{background:#e3f0fd}.dropdown-tab-item[data-v-1533fbb2]:hover{background:#f5f5f5}.dropdown-tab-icon[data-v-1533fbb2]{width:20px;height:20px;margin-right:10px;flex-shrink:0}.dropdown-tab-info[data-v-1533fbb2]{display:flex;flex-direction:column;min-width:0}.dropdown-tab-title[data-v-1533fbb2]{font-size:14px;color:#222;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.dropdown-tab-url[data-v-1533fbb2]{font-size:12px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.dropdown-tab-close[data-v-1533fbb2]{margin-left:12px;color:#888;font-size:16px;cursor:pointer;border-radius:50%;line-height:14px;transition:background .2s,color .2s;display:flex;justify-content:center;align-items:center;width:16px;height:16px}.dropdown-tab-close[data-v-1533fbb2]:hover{background:#88888854}.dropdown-tab-item[data-v-1533fbb2]{position:relative}.tab-dropdown-menu[data-v-1533fbb2]::-webkit-scrollbar-button,.dropdown-tab-list[data-v-1533fbb2]::-webkit-scrollbar-button{width:0;height:0;display:none;background:transparent}.tab-dropdown-menu[data-v-1533fbb2]::-webkit-scrollbar-button:single-button,.dropdown-tab-list[data-v-1533fbb2]::-webkit-scrollbar-button:single-button{display:none;width:0;height:0}.tab-dropdown-menu[data-v-1533fbb2],.dropdown-tab-list[data-v-1533fbb2]{scrollbar-width:thin;scrollbar-color:#c1c1c1 #fff}.tab-dropdown-menu[data-v-1533fbb2]::-webkit-scrollbar,.dropdown-tab-list[data-v-1533fbb2]::-webkit-scrollbar{width:7px;background:#f5f5f5;border-radius:8px}.tab-dropdown-menu[data-v-1533fbb2]::-webkit-scrollbar-thumb,.dropdown-tab-list[data-v-1533fbb2]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:8px}.tab-dropdown-menu[data-v-1533fbb2]::-webkit-scrollbar-thumb:hover,.dropdown-tab-list[data-v-1533fbb2]::-webkit-scrollbar-thumb:hover{background:#a8c7fa}.address-bar[data-v-1533fbb2]{display:flex;align-items:center;background:#fff;height:58px;position:relative}.address-url[data-v-1533fbb2]{flex:1;display:flex;position:relative;align-items:center}.address-left[data-v-1533fbb2]{display:flex;align-items:center;justify-content:space-between;margin-left:9px}.address-right[data-v-1533fbb2]{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.nav-btn[data-v-1533fbb2]{width:32px;height:32px;border:none;background:transparent;color:#333;font-size:18px;cursor:pointer;margin-right:4px;border-radius:999px;transition:background .2s;display:flex;align-items:center;justify-content:center}.nav-btn[data-v-1533fbb2]:disabled{color:#bbb;cursor:not-allowed}.nav-btn[data-v-1533fbb2]:hover:not(:disabled){background:#e0e0e0}.address-input[data-v-1533fbb2]{flex:1;height:42px;border-radius:999px;padding:0 40px;color:#000;font-size:15px;background:#edf2fa;margin-right:8px;text-overflow:ellipsis;border:none;outline:none}.star-btn[data-v-1533fbb2]{font-size:18px;border:none;background:transparent;color:#aaa;cursor:pointer;transition:color .2s;position:absolute;display:flex;align-items:center;right:20px}.star-btn.starred[data-v-1533fbb2]{fill:#0b57d0}.addressbar-btn[data-v-1533fbb2]{width:32px;height:32px;border:none;background:transparent;color:#888;cursor:pointer;margin-left:6px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}.addressbar-btn[data-v-1533fbb2]:hover{background:#e0e0e0}.address-site-icon[data-v-1533fbb2]{width:30px;height:30px;display:flex;align-items:center;justify-content:center;position:absolute;left:6px;background:#fff;border-radius:999px}.address-site-icon img[data-v-1533fbb2]{width:18px;height:18px;display:block}.addressbar-btn-tool[data-v-1533fbb2]{position:relative}.delivider[data-v-1533fbb2]{width:2px;height:20px;margin:0 5px;background:#a8c7fa}