feat(WikiEditor): tweak dialog styles

This commit is contained in:
alistair3149 2023-06-03 19:07:14 -04:00
parent 2d425d8276
commit 572bca1467
No known key found for this signature in database
3 changed files with 48 additions and 8 deletions

View file

@ -264,7 +264,7 @@
border-color: var( --color-primary );
background-color: var( --color-primary );
box-shadow: none;
color: white;
color: #fff;
&:hover {
border-color: var( --color-primary--hover );

View file

@ -296,14 +296,38 @@
}
}
.wikieditor-toolbar-field-wrapper > label + input {
margin-top: var( --space-xxs );
.wikiEditor-toolbar-dialog {
.ui-dialog-content {
padding: var( --space-md ) !important;
}
.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
.ui-dialog-buttonpane {
border-top-color: var( --border-color-base ) !important;
}
.wikieditor-toolbar-field-wrapper {
/* Input field label */
> label {
color: var( --color-base--subtle );
font-size: 0.8125rem;
letter-spacing: 0.05em;
~ input,
~ select {
margin-top: var( --space-xxs );
}
}
/* Checkbox text */
> input + label {
margin-left: var( --space-xs );
color: var( --color-base );
font-size: inherit;
letter-spacing: inherit;
}
}
}
.skin-citizen-dark {
.wikiEditor-ui-toolbar .tabs span.tab a::before {
filter: invert( 1 );

View file

@ -29,12 +29,29 @@
font-family: var( --font-family-base );
font-size: 0.875rem;
/* Align with Codex styles */
input,
select,
textarea {
border-color: var( --border-color-base--darker );
// Show background when hovered
background-color: transparent;
color: var( --color-base--emphasized );
padding: var(--space-xxs) var(--space-xs);
/* FIXME: Replace with line-height-small when we import Codex line height */
line-height: var( --line-height-sm );
&:hover {
border-color: var( --color-primary--hover );
background-color: var( --color-surface-0 );
}
&:focus {
border-color: var( --color-primary );
background-color: var( --color-surface-0 );
box-shadow: inset 0 0 0 1px var( --color-primary );
outline: 0;
}
}
input,
@ -52,12 +69,11 @@
}
&-header {
border-color: var( --border-color-base );
background: var( --color-surface-2--hover );
color: var(--color-base--emphasized);
font-weight: var( --font-weight-semibold );
font-size: 1rem;
border-width: 0 0 1px 0;
border: 0;
}
}
}