From 8595bb49e89e451aad041a78f3669a8744e57123 Mon Sep 17 00:00:00 2001 From: Korbs Date: Fri, 7 Jun 2024 03:16:47 -0400 Subject: [PATCH] Add Feelback Styles --- src/styles/feelback.css | 264 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 src/styles/feelback.css diff --git a/src/styles/feelback.css b/src/styles/feelback.css new file mode 100644 index 0000000..f51118d --- /dev/null +++ b/src/styles/feelback.css @@ -0,0 +1,264 @@ +.feelback-container, +.feelback-style { + --highlight: + 0, + 0, + 0; + --highlight-opacity: 0.08; + --border-color: rgba(128, 128, 128, .5); + --max-width: unset; + --bg: #fff; + position: relative; + max-width: var(--max-width); +} +.feelback-container.feelback-pulse, +.feelback-style.feelback-pulse { + display: inline-block; +} +.feelback-container.feelback-reaction, +.feelback-style.feelback-reaction { + display: inline-block; +} +.feelback-container.feelback-message.layout-button-dialogue, +.feelback-container.feelback-tagged-message.layout-button-dialog, +.feelback-style.feelback-message.layout-button-dialogue, +.feelback-style.feelback-tagged-message.layout-button-dialog { + display: inline-block; +} +.feelback-container textarea, +.feelback-style textarea { + height: 120px; + width: 100%; + padding: 0.5rem; +} +.feelback-container input, +.feelback-style input { + width: 100%; +} +.feelback-container input[type=text], +.feelback-container input[type=email], +.feelback-style input[type=text], +.feelback-style input[type=email] { + padding: 0.5rem; +} +.feelback-container .popup, +.feelback-style .popup { + display: none; + position: absolute; + background-color: var(--theme-bg, var(--bg)); + border: 1px solid var(--border-color); + border-radius: 4px; + z-index: 2; +} +.feelback-container .dialog, +.feelback-style .dialog { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 99999; + background-color: rgba(0, 0, 66, 0.15); +} +.feelback-container .dialog > :first-child, +.feelback-style .dialog > :first-child { + margin: 10% auto; + max-width: 480px; +} +.feelback-container .dialog .content, +.feelback-style .dialog .content { + padding: 1.5rem; + border-radius: 6px; + border: 1px solid #7d8792; + background-color: #f3f9ff; +} +.feelback-container .hidden, +.feelback-style .hidden { + display: none; +} +.feelback-container.bordered .content, +.feelback-style.bordered .content { + border-radius: 1rem; + border: 1px solid var(--border-color); + padding: 0.5rem 0.75rem; +} +.feelback-container.width-md, +.feelback-style.width-md { + --max-width: 440px; + margin: 0 auto; +} +.feelback-container.width-sm, +.feelback-style.width-sm { + --max-width: 320px; + margin: 0 auto; +} +.feelback-container.align-center .feelback-q, +.feelback-style.align-center .feelback-q { + justify-content: center; +} +.feelback-q { + display: flex; + padding-inline: 0.4em; + gap: 1.2em; + align-items: center; +} +@media (max-width: 768px) { + .feelback-q { + justify-content: space-between; + } +} +.feelback-a { + padding-inline: 0.4em; + line-height: 32px; +} +.feelback-form > .content { + display: flex; + flex-direction: column; + gap: 0.3rem; +} +.feelback-form .form-title { + font-size: 1.1em; + font-weight: bold; +} +.feelback-buttons { + gap: 2px; + display: flex; + align-items: baseline; +} +.feelback-buttons.with-count { + gap: 6px; +} +.feelback-buttons.hide-zero .feelback-btn:has(.feelback-count:not([data-feelback-count-value]), .feelback-count[data-feelback-count-value="0"]), +.feelback-buttons.hide-zero .feelback-btn:not(:has(.feelback-count)) { + display: none; +} +.feelback-buttons.attached { + gap: 0; +} +.feelback-buttons.align-end { + flex-direction: row-reverse; +} +.feelback-buttons.large > .feelback-btn { + font-size: 1.25em; +} +.feelback-buttons .label { + font-size: 0.9em; + padding-inline: 0.25em; +} +.feelback-radio-group { + padding: 0; + margin: 0; + border: none; +} +.feelback-radio-item { + display: flex; + flex-direction: row; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + align-items: flex-start; +} +.feelback-radio-item input[type=radio] { + flex-shrink: 0; + width: unset; + display: inline-block; + margin: 0.5rem; +} +.feelback-radio-item label { + cursor: pointer; + display: block; +} +.feelback-radio-item .feelback-text { + font-size: 0.9em; +} +.feelback-icon { + display: flex; + line-height: 1em; +} +.feelback-count { + font-weight: bold; + padding-inline-start: 0.25em; +} +.feelback-count.hide-zero[data-feelback-count-value="0"], +.feelback-count.hide-zero:not([data-feelback-count-value]) { + display: none; +} +.feelback-btn { + min-width: 32px; + height: 32px; + padding: 0 0.4em; + display: flex; + cursor: pointer; + background-color: transparent; + border: 0; + font-size: 1em; + border-radius: 0.15em; + text-align: center; + justify-content: center; + align-items: center; +} +.feelback-btn.disabled { + cursor: default; +} +.feelback-btn.disabled > .feelback-icon { + opacity: 0.7; +} +.feelback-btn > .active { + display: none; +} +.feelback-btn.active { + background-color: rgba(var(--highlight), var(--highlight-opacity)); +} +.feelback-btn.active > .feelback-icon { + transform: scale(1.3); + opacity: 1; +} +.feelback-btn.active > .feelback-icon.inactive { + display: none; +} +.feelback-btn.active > .feelback-icon.active { + display: flex; +} +.feelback-btn:hover:not(.disabled) { + background-color: rgba(var(--highlight), calc(var(--highlight-opacity) * 2)); +} +.feelback-btn:hover:not(.disabled) > .feelback-icon { + transform: scale(1.3); + transition: all 350ms cubic-bezier(0.35, 1.23, 0.5, 1.37); +} +.feelback-btn.btn-reaction-picker { + border-radius: 100%; + background-color: rgba(var(--highlight), var(--highlight-opacity)); + border: 1px solid rgba(128, 128, 128, 0.5); +} +.feelback-btn.btn-reaction-picker .feelback-icon { + transform: scale(1.15); +} +.feelback-btn.btn-action { + min-width: 80px; + padding-inline: 0.5rem; + text-transform: uppercase; + font-size: 0.9em; + border: 1px solid currentColor; +} +.theme-dark .feelback-container, +.theme-dark .feelback-style, +html[data-theme=dark] .feelback-container, +html[data-theme=dark] .feelback-style, +html.dark .feelback-container, +html.dark .feelback-style { + --highlight: + 255, + 255, + 255; + --highlight-opacity: 0.15; + --bg: transparent; + --border-color: rgba(255, 255, 255, .4); +} +.theme-dark .feelback-container .dialog .content, +.theme-dark .feelback-style .dialog .content, +html[data-theme=dark] .feelback-container .dialog .content, +html[data-theme=dark] .feelback-style .dialog .content, +html.dark .feelback-container .dialog .content, +html.dark .feelback-style .dialog .content { + background: #111c29; +}