mleku
ddb74c61b2
- Add reckless mode checkbox to auto-approve signing requests - Implement whitelisted apps management page - Reckless mode logic: allow all if whitelist empty, otherwise only whitelisted hosts - Add shouldRecklessModeApprove() in background service worker - Update default avatar to Plebeian Market Account icon - Fix manifest version scripts to strip v prefix for browsers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
141 lines
2.8 KiB
SCSS
141 lines
2.8 KiB
SCSS
:host {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding-left: var(--size);
|
|
padding-right: var(--size);
|
|
|
|
.custom-header {
|
|
padding-top: var(--size);
|
|
padding-bottom: var(--size);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto;
|
|
align-items: center;
|
|
background: var(--background);
|
|
|
|
.button {
|
|
grid-column-start: 1;
|
|
grid-column-end: 2;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
justify-self: end;
|
|
}
|
|
|
|
.text {
|
|
grid-column-start: 1;
|
|
grid-column-end: 2;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
font-family: var(--font-heading);
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1rem;
|
|
justify-self: center;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
.reckless-mode-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
margin-bottom: 12px;
|
|
background: var(--background-light);
|
|
border-radius: 8px;
|
|
|
|
.reckless-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reckless-text {
|
|
font-size: 14px;
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.gear-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--muted-foreground);
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
|
|
&:hover {
|
|
color: var(--foreground);
|
|
background: var(--background-light-hover);
|
|
}
|
|
|
|
i {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.identity {
|
|
height: 56px;
|
|
min-height: 56px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-left: 12px;
|
|
padding-right: 8px;
|
|
background: var(--background-light);
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover {
|
|
background: var(--background-light-hover);
|
|
}
|
|
|
|
&.selected {
|
|
background: rgba(255, 62, 181, 0.15);
|
|
border: 1px solid var(--primary);
|
|
}
|
|
|
|
.avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
background: var(--muted);
|
|
}
|
|
|
|
.name {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|