mirror of
https://github.com/siddharthvaddem/openscreen.git
synced 2026-11-03 06:04:11 +08:00
105 lines
2.4 KiB
CSS
105 lines
2.4 KiB
CSS
.glassContainer {
|
|
background: linear-gradient(145deg, rgba(13, 14, 17, 0.94) 0%, rgba(8, 9, 12, 0.9) 100%);
|
|
backdrop-filter: blur(24px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(150%);
|
|
border-radius: 24px;
|
|
corner-shape: squircle;
|
|
/*
|
|
Removed box-shadow here because electron doesn't round corners of the shadow, thereby leaving a square border shadow conflicting with the rounded corners of the SourceSelector.
|
|
The result is easily visible when you place a white window just behind the SourceSelector
|
|
*/
|
|
/* box-shadow:
|
|
0 0px 16px 0 rgba(0, 0, 0, 0.32),
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.18) inset; */
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.sourceCard {
|
|
corner-shape: squircle;
|
|
border-radius: 13px;
|
|
background: rgba(255, 255, 255, 0.045);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
|
transition:
|
|
box-shadow 0.2s ease,
|
|
border-color 0.2s ease,
|
|
background-color 0.2s ease,
|
|
transform 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sourceCard:hover {
|
|
background: rgba(255, 255, 255, 0.065);
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.selected {
|
|
border-color: rgba(52, 178, 123, 0.68);
|
|
background: linear-gradient(145deg, rgba(52, 178, 123, 0.13), rgba(255, 255, 255, 0.045));
|
|
box-shadow:
|
|
0 0 0 1px rgba(52, 178, 123, 0.18) inset,
|
|
0 12px 28px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
.selected:hover {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
.name {
|
|
font-size: 0.72rem;
|
|
color: #e4e4e7;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.cardText {
|
|
color: #a1a1aa;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Checkmark badge */
|
|
.checkBadge {
|
|
width: 17px;
|
|
height: 17px;
|
|
background: #34b27b;
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/* scrollbar */
|
|
|
|
.sourceGridScroll::-webkit-scrollbar {
|
|
width: 3px;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-track {
|
|
background: rgba(30, 30, 38, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb {
|
|
background: rgba(52, 178, 123, 0.5);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(52, 178, 123, 0.6);
|
|
cursor: grab;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb:active {
|
|
background: rgba(52, 178, 123, 0.8);
|
|
cursor: grabbing;
|
|
}
|