quickSnote

browser-extension/popup.css

@@ -0,0 +1,115 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  width: 340px;
+  margin: 0;
+  padding: 0.75rem;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.logo {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+}
+
+#user {
+  flex: 1;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.82rem;
+  border: 1px solid #45475a;
+  border-radius: 6px;
+  background: #313244;
+  color: #cdd6f4;
+}
+
+textarea {
+  width: 100%;
+  height: 150px;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #45475a;
+  border-radius: 6px;
+  background: #181825;
+  color: #cdd6f4;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  resize: vertical;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+textarea:focus {
+  outline: 2px solid #cba6f7;
+  outline-offset: -1px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.spacer {
+  flex: 1;
+}
+
+button {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  border: 1px solid #45475a;
+  border-radius: 6px;
+  background: #313244;
+  color: #cdd6f4;
+  cursor: pointer;
+}
+
+button:hover:not(:disabled) {
+  background: #45475a;
+}
+
+button.primary {
+  background: #cba6f7;
+  color: #1e1e2e;
+  border-color: #cba6f7;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.status {
+  margin-top: 0.5rem;
+  font-size: 0.78rem;
+  min-height: 1.1rem;
+}
+
+.status.ok { color: #a6e3a1; }
+.status.err { color: #f38ba8; }
+
+.footer {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #313244;
+  text-align: right;
+}
+
+.footer a {
+  color: #6c7086;
+  font-size: 0.72rem;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  color: #a6adc8;
+}