Working on dialog editor, on dialogs, on phone

2026-06-05 21:17:51 +03:00
1 parent 0e27521bea
commit 8f7797789d
@@ -0,0 +1,185 @@
+.panel {
+  width: 220px;
+  min-width: 220px;
+  background: #181825;
+  border-right: 1px solid #313244;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.header {
+  padding: 12px 12px 6px;
+  border-bottom: 1px solid #313244;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #cdd6f4;
+  display: block;
+}
+
+.fileName {
+  font-size: 10px;
+  color: #6c7086;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileButtons {
+  display: flex;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #313244;
+}
+
+.btn {
+  flex: 1;
+  background: #313244;
+  color: #cdd6f4;
+  border: none;
+  border-radius: 4px;
+  padding: 5px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn:hover {
+  background: #45475a;
+}
+
+.btnSave {
+  background: #1e66f5;
+  color: #fff;
+}
+
+.btnSave:hover {
+  background: #2779e4;
+}
+
+.btnNew {
+  background: #40a02b;
+  color: #fff;
+}
+
+.btnNew:hover {
+  background: #37872b;
+}
+
+.errorMsg {
+  background: #2a0e14;
+  color: #f38ba8;
+  font-size: 11px;
+  padding: 6px 10px;
+  border-top: 1px solid #f38ba8;
+}
+
+.list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.emptyMsg {
+  padding: 16px 12px;
+  color: #6c7086;
+  font-size: 12px;
+  text-align: center;
+}
+
+.dialogueItem {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 1px 4px;
+  transition: background 0.1s;
+}
+
+.dialogueItem:hover {
+  background: #313244;
+}
+
+.dialogueItem.active {
+  background: #1e3a5f;
+}
+
+.dialogueId {
+  flex: 1;
+  font-size: 11px;
+  font-family: monospace;
+  color: #cdd6f4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.errDot { color: #f38ba8; font-size: 9px; }
+.warnDot { color: #f9e2af; font-size: 9px; }
+.mobileDot { font-size: 10px; }
+
+.copyBtn {
+  background: none;
+  border: none;
+  color: #6c7086;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0 2px;
+  flex-shrink: 0;
+}
+
+.copyBtn:hover {
+  color: #89b4fa;
+}
+
+.deleteBtn {
+  background: none;
+  border: none;
+  color: #6c7086;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 2px;
+  flex-shrink: 0;
+}
+
+.deleteBtn:hover {
+  color: #f38ba8;
+}
+
+.footer {
+  padding: 8px;
+  border-top: 1px solid #313244;
+}
+
+.createForm {
+  display: flex;
+  gap: 4px;
+}
+
+.createInput {
+  flex: 1;
+  background: #313244;
+  border: 1px solid #45475a;
+  border-radius: 4px;
+  color: #cdd6f4;
+  font-size: 11px;
+  padding: 4px 6px;
+  min-width: 0;
+  font-family: monospace;
+}
+
+.createInput:focus {
+  outline: none;
+  border-color: #89b4fa;
+}