Working on dialog editor, on dialogs, on phone
This commit is contained in:
Vladislav Khorev committed
1 parent
0e27521bea
commit
8f7797789d
63 files changed
+9502
-1459
No files matched your search
@@ -0,0 +1,244 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: #1e1e2e;
|
||||
border: 1px solid #313244;
|
||||
border-radius: 12px;
|
||||
width: 520px;
|
||||
max-width: 90vw;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6c7086;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.closeBtn:hover {
|
||||
color: #f38ba8;
|
||||
}
|
||||
|
||||
.speakerRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.portraitBox {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 8px;
|
||||
background: #313244;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.portraitFallback {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #6c7086;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.speakerName {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #89b4fa;
|
||||
}
|
||||
|
||||
/* Main character (Бекзат) — blue tones */
|
||||
.speakerRowMain { border-left: 3px solid #1e66f5; padding-left: 10px; }
|
||||
.portraitMain { border: 2px solid #1e66f5; }
|
||||
.speakerMain { color: #89b4fa; }
|
||||
.textBoxMain { border-left: 3px solid #1e66f5; }
|
||||
|
||||
/* Other speakers — green tones */
|
||||
.speakerRowOther { border-left: 3px solid #40a02b; padding-left: 10px; }
|
||||
.portraitOther { border: 2px solid #40a02b; }
|
||||
.speakerOther { color: #a6e3a1; }
|
||||
.textBoxOther { border-left: 3px solid #40a02b; }
|
||||
|
||||
.textBox {
|
||||
background: #11111b;
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #cdd6f4;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.nextBtn {
|
||||
background: #1e66f5;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.nextBtn:hover {
|
||||
background: #2779e4;
|
||||
}
|
||||
|
||||
.noNextWarning {
|
||||
color: #f9e2af;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.choiceList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.choiceBtn {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 11px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.choiceBtn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.choiceMain {
|
||||
background: #1e66f5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.choiceOptional {
|
||||
background: #313244;
|
||||
color: #cdd6f4;
|
||||
border: 1px solid #45475a;
|
||||
}
|
||||
|
||||
.autoAdvance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.conditionInfo {
|
||||
color: #cba6f7;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.conditionClauses {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.clausePill {
|
||||
background: #313244;
|
||||
color: #a6adc8;
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.cutsceneBox {
|
||||
background: #11111b;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cutsceneLabel {
|
||||
font-size: 11px;
|
||||
color: #6c7086;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.cutsceneId {
|
||||
font-size: 15px;
|
||||
color: #a6adc8;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.endBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.endMsg {
|
||||
font-size: 16px;
|
||||
color: #6c7086;
|
||||
}
|
||||
|
||||
.debugBar {
|
||||
border-top: 1px solid #313244;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.debugLabel {
|
||||
font-size: 10px;
|
||||
color: #45475a;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.debugFlagPill {
|
||||
background: rgba(137, 180, 250, 0.12);
|
||||
color: #6c7086;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
font-size: 10px;
|
||||
font-family: monospace;
|
||||
}
|
||||
Reference in new issue
Block a user