From cc02672e1451f28bcb85a0b34d34117567cc0802 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Apr 2018 03:22:03 +0300 Subject: [PATCH] made alerts use red with transparent theme red. some UI improvs --- src/App.scss | 22 +++++++++++- src/_variables.scss | 2 ++ src/components/login_form/login_form.vue | 8 +---- .../post_status_form/post_status_form.vue | 10 +----- src/components/registration/registration.vue | 9 +---- .../style_switcher/style_switcher.vue | 36 ++++++++++++++----- src/components/timeline/timeline.vue | 7 ---- src/components/user_finder/user_finder.vue | 11 +----- src/services/style_setter/style_setter.js | 2 ++ 9 files changed, 57 insertions(+), 50 deletions(-) diff --git a/src/App.scss b/src/App.scss index 942f5fb2..047cd333 100644 --- a/src/App.scss +++ b/src/App.scss @@ -99,6 +99,8 @@ input, textarea, .select { box-sizing: border-box; display: inline-block; position: relative; + height: 29px; + line-height: 16px; .icon-down-open { position: absolute; @@ -122,9 +124,11 @@ input, textarea, .select { margin: 0; color: $fallback--fg; color: var(--fg, $fallback--fg); - padding: 4px 3ch 3px 3px; + padding: 4px 2em 3px 3px; width: 100%; z-index: 1; + height: 29px; + line-height: 16px; } &[type=radio], @@ -371,6 +375,22 @@ nav { } } +.alert { + margin: 0.35em; + padding: 0.25em; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + color: $fallback--faint; + color: var(--faint, $fallback--faint); + min-height: 28px; + line-height: 28px; + + &.error { + background-color: $fallback--cAlertRed; + background-color: var(--cAlertRed, $fallback--cAlertRed); + } +} + @media all and (max-width: 959px) { .mobile-hidden { display: none; diff --git a/src/_variables.scss b/src/_variables.scss index 1f5d4b3e..d90a1d48 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -16,6 +16,8 @@ $fallback--cBlue: #0095ff; $fallback--cGreen: #0fa00f; $fallback--cOrange: orange; +$fallback--cAlertRed: rgba(211,16,20,.5); + $fallback--panelRadius: 10px; $fallback--checkBoxRadius: 2px; $fallback--btnRadius: 4px; diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 840ea1a4..67fa95a8 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -21,7 +21,7 @@
-
{{authError}}
+
{{authError}}
@@ -40,13 +40,7 @@ } .error { - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); text-align: center; - background-color: rgba(255, 48, 16, 0.65); - background-color: $fallback--cRed; - min-height: 28px; - line-height: 28px; } .register { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 929f81ee..a3b8acde 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -30,7 +30,7 @@ -
+
Error: {{ error }}
@@ -87,15 +87,7 @@ } .error { - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); text-align: center; - background-color: rgba(255, 48, 16, 0.65); - background-color: $fallback--cRed; - background-color: var(--cRed, $fallback--cRed); - padding: 0.25em; - margin: 0.35em; - display: flex; } .attachments { diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index b443024b..00f665af 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -46,7 +46,7 @@
-
{{error}}
+
{{error}}
@@ -105,14 +105,7 @@ } .error { - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); text-align: center; - margin: 0.5em 0.6em 0; - background-color: $fallback--cRed; - background-color: var(--cRed, $fallback--cRed); - min-height: 28px; - line-height: 28px; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index cfc2d83d..ef4a21bd 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -92,20 +92,23 @@ '--tooltipRadius': tooltipRadiusLocal + 'px', '--attachmentRadius': attachmentRadiusLocal + 'px' }"> -
+
Preview
+
+ ( ͡° ͜ʖ ͡°) +

Content


A bunch of more content and - a nice lil' link - - - - + a nice lil' link + + + +
-
-
And a scary alert
@@ -153,6 +156,10 @@ } } +.radius-item { + flex-basis: auto; +} + .theme-radius-rn, .theme-color-cl { border: 0; @@ -209,4 +216,17 @@ .theme-preview-content { padding: 20px; } + +.dummy { + .avatar { + background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); + color: black; + text-align: center; + height: 48px; + line-height: 48px; + width: 48px; + float: left; + margin-right: 1em; + } +} diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index adbbcd47..68439681 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -90,13 +90,6 @@ padding: 0 0.5em 0 0.5em; opacity: 0.8; } - - .error { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); - background-color: $fallback--cRed; - background-color: var(--cRed, $fallback--cRed); - } } .new-status-notification { diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 6a0df947..22d4bd77 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,6 +1,6 @@