diff --git a/src/app/example/example.component.scss b/src/app/example/example.component.scss index 2a93948..cd83aaa 100644 --- a/src/app/example/example.component.scss +++ b/src/app/example/example.component.scss @@ -1,3 +1,12 @@ +.example-actions { + width: 50%; + display: flex; + gap: 20px; + @media (max-width: 800px) { + width: 100%; + } +} + .lang-label { display: block; margin-bottom: 10px; diff --git a/src/styles.scss b/src/styles.scss index 447007d..cc9840b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -23,22 +23,10 @@ html { body { min-height: 100vh; color: var(--color-text); - transition: - color 0.5s, - background-color 0.5s; + transition: color 0.5s, background-color 0.5s; line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - Oxygen, - Ubuntu, - Cantarell, - "Fira Sans", - "Droid Sans", - "Helvetica Neue", + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 15px; text-rendering: optimizeLegibility; @@ -60,9 +48,7 @@ body:after { height: 20px; background: var(--primary); background: linear-gradient(90deg, var(--primary) 50%, var(--secondary) 100%); - box-shadow: - 0 0 0 1px rgba(255, 255, 255, 0.6), - 0 0 20px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 20px rgba(0, 0, 0, 0.4); } body.modal-active { @@ -80,11 +66,7 @@ body.darkmode { } .material-symbols-outlined { - font-variation-settings: - "FILL" 0, - "wght" 400, - "GRAD" 0, - "opsz" 24; + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } .darkmode-button { @@ -109,9 +91,7 @@ h2 { margin: 1rem; border-radius: 10px; border: 1px solid var(--vtl-background); - box-shadow: - 0 0 0 1px rgba(255, 255, 255, 0.2), - 0 10px 20px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); } .content-actions { @@ -124,7 +104,6 @@ h2 { @media (max-width: 620px) { flex-direction: column; - .button-voicecapture-example, .language { width: 100%; margin-top: 0; @@ -164,18 +143,11 @@ h2 { } } -.button-voicecapture-example { - background: var(--primary); - color: #fff; - margin-top: 1rem; - margin-left: 0; - padding: 1rem; -} - .button-voicecapture-example { display: inline-flex; align-items: center; padding: 0.5rem 1rem; + min-height: 70px; white-space: nowrap; .material-symbols-outlined { margin-right: 0.5rem; @@ -216,15 +188,13 @@ h2 { align-items: center; } - @media (max-width: 620px) { .button-modal { margin-left: 0; margin-top: 1rem; } - .button-modal, - .button-voicecapture-example { + .button-modal { justify-content: start; } }