refactor css
This commit is contained in:
Julian Freeman
@@ -72,3 +72,217 @@ const emit = defineEmits<{
|
||||
</button>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 16px 14px;
|
||||
min-height: 0;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.7));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.sidebar-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 2px 2px 8px;
|
||||
}
|
||||
|
||||
.sidebar-title-group {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-title-group h1 {
|
||||
margin: 0;
|
||||
font-size: 1.34rem;
|
||||
line-height: 1.04;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.refresh-icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.refresh-icon-button:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(100, 116, 139, 0.36);
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border: 1.8px solid #334155;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.refresh-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -3px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 1.8px solid #334155;
|
||||
border-right: 1.8px solid #334155;
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.browser-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 2px 2px 0 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.browser-nav::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.browser-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 9px 10px;
|
||||
border-radius: 14px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.54);
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.browser-nav-item:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--panel-border);
|
||||
}
|
||||
|
||||
.browser-nav-item.active {
|
||||
background: var(--accent-soft);
|
||||
border-color: rgba(47, 111, 237, 0.18);
|
||||
}
|
||||
|
||||
.browser-nav-item.chrome.active {
|
||||
background: rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.browser-nav-item.edge.active {
|
||||
background: rgba(8, 145, 178, 0.12);
|
||||
}
|
||||
|
||||
.browser-nav-item.brave.active {
|
||||
background: rgba(234, 88, 12, 0.12);
|
||||
}
|
||||
|
||||
.browser-nav-item.utility.active {
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
border-color: rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.browser-nav-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.08em;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.browser-nav-icon img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 30px;
|
||||
max-height: 30px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sidebar-utility-nav {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.browser-nav-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.browser-nav-body strong {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.sidebar-empty {
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
border: 1px dashed rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.sidebar-empty p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user