125 lines
2.1 KiB
CSS
125 lines
2.1 KiB
CSS
/* Dark theme matching the Electron app */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 320px;
|
|
background: #1e1e1e;
|
|
color: #e0e0e0;
|
|
font: 14px/1.4 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
|
|
}
|
|
|
|
.popup-container { padding: 16px; }
|
|
|
|
h1 {
|
|
margin: 0 0 12px;
|
|
color: #0e7afe;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tab-info,
|
|
.pairing-info {
|
|
margin-bottom: 10px;
|
|
padding: 9px 11px;
|
|
border: 1px solid #3c3c3c;
|
|
border-radius: 4px;
|
|
background: #2d2d30;
|
|
color: #aaa;
|
|
font-size: 13px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.tab-info.detected,
|
|
.pairing-info.paired {
|
|
border-color: #4caf50;
|
|
color: #7bd67e;
|
|
}
|
|
|
|
.tab-info.not-detected,
|
|
.pairing-info.unpaired {
|
|
border-color: #f0a33a;
|
|
color: #ffc36d;
|
|
}
|
|
|
|
.action-buttons { display: grid; gap: 8px; }
|
|
|
|
.primary-btn,
|
|
.secondary-btn,
|
|
.link-btn {
|
|
width: 100%;
|
|
padding: 10px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.primary-btn {
|
|
border: 0;
|
|
background: #0e7afe;
|
|
color: #fff;
|
|
}
|
|
|
|
.secondary-btn {
|
|
border: 1px solid #0e7afe;
|
|
background: #2d2d30;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.link-btn {
|
|
margin: -2px 0 10px;
|
|
padding: 5px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #75afff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.primary-btn:hover:not(:disabled) { background: #0a5fd9; }
|
|
.secondary-btn:hover:not(:disabled) { background: #0e7afe; }
|
|
|
|
.primary-btn:disabled,
|
|
.secondary-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
|
|
.status-msg {
|
|
display: none;
|
|
margin-top: 10px;
|
|
padding: 8px 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-msg.success,
|
|
.status-msg.error,
|
|
.status-msg.info { display: block; }
|
|
|
|
.status-msg.success {
|
|
border-color: #4caf50;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
color: #7bd67e;
|
|
}
|
|
|
|
.status-msg.error {
|
|
border-color: #f44336;
|
|
background: rgba(244, 67, 54, 0.1);
|
|
color: #ff7b72;
|
|
}
|
|
|
|
.status-msg.info {
|
|
border-color: #0e7afe;
|
|
background: rgba(14, 122, 254, 0.1);
|
|
color: #75afff;
|
|
}
|
|
|
|
[hidden] { display: none !important; }
|