zen-realigned/src/zen/library/zen-library.css

103 lines
2.1 KiB
CSS

#zen-library {
order: -1;
z-index: 1;
pointer-events: none;
position: fixed;
left: -200%;
&[open='true'] {
display: flex;
pointer-events: all;
position: relative;
left: 0;
}
}
#zen-library-sidebar {
height: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 0.6rem;
box-shadow: var(--zen-big-shadow);
-moz-window-dragging: drag;
border-right: 1px solid var(--zen-colors-border);
#zen-library-sidebar-buttons {
justify-content: center;
gap: 12px;
}
& .zen-library-sidebar-button {
transition: background-color 0.1s;
padding: 0.8rem 0.7rem;
border-radius: 6px;
background: transparent;
justify-content: center;
align-items: center;
flex-direction: column;
appearance: none;
gap: 0.5rem;
border-radius: 6px !important;
&:hover,
&[active='true'] {
background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
}
}
#zen-library-sidebar-footer {
justify-content: space-between;
& toolbarbutton {
appearance: none;
}
}
}
#zen-library-content {
transition: width 0.15s;
width: 20vw;
overflow-x: auto;
&[size='big'] {
width: 60vw;
}
& > * {
height: 100%;
}
& > [content='workspaces'] {
justify-content: center;
align-items: center;
gap: 2rem;
padding: 6rem;
& .zen-workspace-item {
width: 16rem;
padding: 0.7rem;
border-radius: var(--zen-border-radius);
box-shadow: var(--zen-big-shadow);
background: var(--zen-workspace-gradient);
border: 1px solid light-dark(
rgba(255, 255, 255, 0.2),
rgba(0, 0, 0, 0.2)
);
height: 100%;
&::before {
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: hard-light;
width: 60%;
height: 60%;
pointer-events: none;
top: 50%;
border-radius: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
content: '';
position: absolute;
}
}
}
}