Private
Public Access
ksmithandClaude Sonnet 5
8a9a4d6b7b
Splitting the builder into a preview column and a fields column still capped the mockup at half the dialog's width. Give it the full width of the modal instead (name field on top, preview below spanning the whole dialog, fields and the native-controls toggle underneath), and scale up CustomThemePreview's own fixed pixel dimensions (~1.4x: avatar, sidebar, paddings, font sizes) so the extra room reads as a genuinely bigger mockup rather than the same small one with more empty space around it. Modal width bumped from 820px to 960px to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
112 lines
2.0 KiB
CSS
112 lines
2.0 KiB
CSS
.custom-theme-preview {
|
|
display: flex;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
border: 1px solid var(--ds-border);
|
|
margin-bottom: var(--sp-3);
|
|
/* Sized for ThemeBuilderModal's wide dialog (its only caller) -- this used
|
|
to run at ~0.74rem/96px when it had to fit alongside the color fields in
|
|
a narrow modal; now that it gets the modal's full width, everything below
|
|
is scaled up ~1.4x so the extra room actually reads as bigger, not just
|
|
emptier. */
|
|
font-size: 1.02rem;
|
|
position: relative;
|
|
}
|
|
|
|
.ctp-hoverable {
|
|
cursor: default;
|
|
transition: box-shadow 0.1s ease;
|
|
}
|
|
|
|
.ctp-highlighted {
|
|
box-shadow: 0 0 0 2px #fbbf24, 0 0 8px 1px rgba(251, 191, 36, 0.6);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ctp-sidebar {
|
|
width: 132px;
|
|
flex: none;
|
|
padding: 11px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ctp-room-row {
|
|
padding: 7px 10px;
|
|
border-radius: 7px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ctp-room-row-quiet {
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.ctp-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 11px;
|
|
}
|
|
|
|
.ctp-message {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 9px;
|
|
}
|
|
|
|
.ctp-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
flex: none;
|
|
}
|
|
|
|
.ctp-message-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.ctp-mention {
|
|
border-radius: 5px;
|
|
padding: 0 5px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ctp-badge {
|
|
flex: none;
|
|
align-self: flex-start;
|
|
border-radius: var(--radius-pill);
|
|
padding: 2px 10px;
|
|
font-size: 0.88rem;
|
|
font-weight: 800;
|
|
color: #07080f;
|
|
}
|
|
|
|
.ctp-composer {
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 7px 11px;
|
|
}
|
|
|
|
.ctp-danger-btn {
|
|
align-self: flex-start;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 6px 11px;
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|