diff --git a/ghost/admin/app/components/gh-psm-visibility-input.hbs b/ghost/admin/app/components/gh-psm-visibility-input.hbs index 5696e967743..1c68f05e6f6 100644 --- a/ghost/admin/app/components/gh-psm-visibility-input.hbs +++ b/ghost/admin/app/components/gh-psm-visibility-input.hbs @@ -7,5 +7,5 @@ @update={{action "updateVisibility"}} @data-test-select="post-visibility" /> - {{svg-jar "arrow-down-small"}} + \ No newline at end of file diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css index 9680961464f..30a316139a1 100644 --- a/ghost/admin/app/styles/components/settings-menu.css +++ b/ghost/admin/app/styles/components/settings-menu.css @@ -179,14 +179,6 @@ /* Content /* ---------------------------------------------------------- */ -.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input:not([disabled]), -.settings-menu-container:not(.tag-settings) .gh-input:not([disabled]), -.settings-menu-pane .gh-date-time-picker-date, -.settings-menu-pane .gh-date-time-picker-time { - background: var(--white); - border: var(--input-border); -} - .settings-menu-container .ember-power-select-multiple-trigger input, .settings-menu-pane .gh-date-time-picker-date input, .settings-menu-pane .gh-date-time-picker-time input { @@ -256,12 +248,6 @@ height: 108px; } -.settings-menu-content textarea.gh-input { - font-size: 1.5rem; - line-height: 1.4em; - letter-spacing: 0; -} - .settings-menu-content .gh-cm-editor-textarea { min-height: 170px; } @@ -535,3 +521,88 @@ li.nav-list-item .for-switch.xs label { .settings-menu-email .disabled input { opacity: 0.5; } + +/* Form controls +/* ---------------------------------------------------------- */ +.settings-menu-container .gh-input, +.settings-menu-container select, +.settings-menu-container .gh-date-time-picker-date, +.settings-menu-container .gh-date-time-picker-time, +.settings-menu-container .ember-power-select-multiple-trigger { + min-height: 38px; + padding: 4px 12px; + font-size: 1.4rem; + color: var(--black); + background-color: var(--grey-150); + border: 1px solid transparent; + border-radius: 8px; + transition-property: color, background-color,border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-duration: .15s; +} + +.settings-menu-container .gh-input:hover, +.settings-menu-container select:hover, +.settings-menu-container .gh-date-time-picker-date:hover, +.settings-menu-container .gh-date-time-picker-time:hover, +.settings-menu-container .ember-power-select-multiple-trigger:hover { + background-color: var(--grey-100); +} + +.settings-menu-container .gh-input:focus, +.settings-menu-container .gh-input:focus-visible, +.settings-menu-container .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date, +.settings-menu-container .gh-date-time-picker-time:focus-within { + background-color: var(--white); + border: 1px solid var(--green); + box-shadow: 0 0 0 2px rgba(48,207,67,.25); + outline: none; +} + +.settings-menu-container textarea.gh-input { + padding-block: 8px; +} + +.settings-menu-container .gh-date-time-picker input { + font-size: 1.4rem; + color: var(--black); +} + +.settings-menu-container .gh-input-icon .gh-input { + padding-left: 32px; +} + +.settings-menu-container .ember-power-select-trigger[aria-expanded=true] { + border-color: transparent; +} + +.settings-menu-container .ember-power-select-multiple-trigger { + padding: 5px 8px; + border-radius: 8px !important; +} + +.settings-menu-container .ember-power-select-multiple-trigger:has(.ember-power-select-multiple-option) { + padding-left: 6px !important; +} + +.settings-menu-container .ember-power-select-multiple-option { + height: 24px; +} + +.settings-menu-container .ember-power-select-status-icon { + border-color: var(--black); +} + +.settings-menu-container .gh-date-time-picker-timezone { + font-size: 1.2rem; + margin-left: 0; +} + +.settings-menu-container .ember-power-select-dropdown { + padding: 0 !important; + border: 0 !important; + border-radius: 8px; + --tw-shadow: 0 0 7px rgba(0, 0, 0, .08), 0 2.1px 2.2px -5px rgba(0, 0, 0, .011), 0 5.1px 5.3px -5px rgba(0, 0, 0, .016), 0 9.5px 10px -5px rgba(0, 0, 0, .02), 0 17px 17.9px -5px rgba(0, 0, 0, .024), 0 31.8px 33.4px -5px rgba(0, 0, 0, .029), 0 76px 80px -5px rgba(0, 0, 0, .04); + --tw-shadow-colored: 0 0 7px var(--tw-shadow-color), 0 2.1px 2.2px -5px var(--tw-shadow-color), 0 5.1px 5.3px -5px var(--tw-shadow-color), 0 9.5px 10px -5px var(--tw-shadow-color), 0 17px 17.9px -5px var(--tw-shadow-color), 0 31.8px 33.4px -5px var(--tw-shadow-color), 0 76px 80px -5px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); +}