mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-08 08:22:53 +00:00
* beginnings of app directory * settings mostly good * colocate way more components * flatten components folder * reexport QueryClientProvider from client * move CodeBlock back to interface * colocate Explorer, KeyManager + more * goddamn captialisation * get toasts out of components * please eslint * no more src directory * $ instead of : * added back RowHeader component * fix settings modal padding * more spacing, less margin * fix sidebar locations button * fix tags sidebar link * clean up back button * added margin to explorer context menu to prevent contact with edge of viewport * don't export QueryClientProvider from @sd/client * basic guidelines * import interface correctly * remove old demo data * fix onboarding layout * fix onboarding navigation * fix key manager settings button --------- Co-authored-by: Jamie Pine <ijamespine@me.com>
190 lines
3.2 KiB
SCSS
190 lines
3.2 KiB
SCSS
a,
|
|
button {
|
|
cursor: default !important;
|
|
}
|
|
|
|
body {
|
|
// font-family: 'InterVariable', sans-serif;
|
|
}
|
|
|
|
.app-background {
|
|
@apply bg-app;
|
|
}
|
|
|
|
.has-blur-effects {
|
|
.app-background {
|
|
// adjust macOS blur intensity here
|
|
// @apply bg-app/[0.88];
|
|
@apply bg-app;
|
|
}
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
scrollbar-width: none; /* for Firefox */
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.custom-scroll {
|
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
scrollbar-width: none; /* for Firefox */
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.explorer-scroll {
|
|
&::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 6px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply mt-[53px] rounded-[6px] bg-[#00000000];
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply rounded-[6px] bg-transparent;
|
|
}
|
|
&:hover {
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-app-divider/20;
|
|
}
|
|
}
|
|
}
|
|
.default-scroll {
|
|
&::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 8px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply rounded-[6px] bg-transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-app-box rounded-[6px];
|
|
}
|
|
}
|
|
.page-scroll {
|
|
&::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 8px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply my-[10px] rounded-[6px] bg-transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-app-box rounded-[6px];
|
|
}
|
|
}
|
|
.inspector-scroll {
|
|
// overflow: overlay;
|
|
&::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 5px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply my-[8px] bg-transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-app/70 rounded-[6px] opacity-0;
|
|
}
|
|
&:hover {
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
.overlay-scroll {
|
|
// overflow: overlay;
|
|
&::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 5px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply my-[5px] bg-transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply w-[5px] rounded-[6px] bg-black/70 opacity-0;
|
|
}
|
|
&:hover {
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slide-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-50px);
|
|
transform: translateY(-50px);
|
|
}
|
|
}
|
|
@keyframes slide-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-50px);
|
|
transform: translateY(-50px);
|
|
}
|
|
}
|
|
|
|
.dialog-overlay[data-state='open'] {
|
|
animation: fadeIn 200ms ease-out forwards;
|
|
}
|
|
.dialog-overlay[data-state='closed'] {
|
|
animation: fadeIn 200ms ease-out forwards;
|
|
}
|
|
.dialog-content[data-state='open'] {
|
|
-webkit-animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
}
|
|
.dialog-content[data-state='closed'] {
|
|
animation: bounceDown 100ms ease-in forwards;
|
|
}
|
|
|
|
.picker {
|
|
position: relative;
|
|
}
|
|
|
|
.swatch {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popover {
|
|
position: absolute;
|
|
top: calc(100% + 2px);
|
|
left: 0;
|
|
border-radius: 9px;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
}
|