diff options
| -rw-r--r-- | src/App.scss | 22 | ||||
| -rw-r--r-- | src/_variables.scss | 2 | ||||
| -rw-r--r-- | src/components/login_form/login_form.vue | 8 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 10 | ||||
| -rw-r--r-- | src/components/registration/registration.vue | 9 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 36 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 7 | ||||
| -rw-r--r-- | src/components/user_finder/user_finder.vue | 11 | ||||
| -rw-r--r-- | 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 @@ </div> </div> <div v-if="authError" class='form-group'> - <div class='error'>{{authError}}</div> + <div class='alert error'>{{authError}}</div> </div> </form> </div> @@ -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 @@ <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button> </div> - <div class='error' v-if="error"> + <div class='alert error' v-if="error"> Error: {{ error }} <i class="icon-cancel" @click="clearError"></i> </div> @@ -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 @@ </div> </div> <div v-if="error" class='form-group'> - <div class='error'>{{error}}</div> + <div class='alert error'>{{error}}</div> </div> </form> </div> @@ -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' }"> - <div class="panel"> + <div class="panel dummy"> <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> + <div class="avatar" :style="{ + 'border-radius': avatarRadiusLocal + 'px' + }"> + ( ͡° ͜ʖ ͡°) + </div> <h4>Content</h4> <br> A bunch of more content and - <a :style="{ 'color': linkColorLocal }">a nice lil' link</a> - <i :style="{ 'color': blueColorLocal }" class="icon-reply"/> - <i :style="{ 'color': greenColorLocal }" class="icon-retweet"/> - <i :style="{ 'color': redColorLocal }" class="icon-cancel"/> - <i :style="{ 'color': orangeColorLocal }" class="icon-star"/> + <a :style="{ color: linkColorLocal }">a nice lil' link</a> + <i :style="{ color: blueColorLocal }" class="icon-reply"/> + <i :style="{ color: greenColorLocal }" class="icon-retweet"/> + <i :style="{ color: redColorLocal }" class="icon-cancel"/> + <i :style="{ color: orangeColorLocal }" class="icon-star"/> <br> - <br> - <div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div> <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button> </div> </div> @@ -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; + } +} </style> 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 @@ <template> <span class="user-finder-container"> - <span class="finder-error" v-if="error"> + <span class="alert error" v-if="error"> <i class="icon-cancel user-finder-icon" @click="dismissError"/> {{$t('finder.error_fetching_user')}} </span> @@ -28,13 +28,4 @@ padding: 0.1em 0.2em 0.2em 0.2em; } -.finder-error { - background-color: rgba(255, 48, 16, 0.65); - margin: 0.35em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - padding: 0.25em; - color: $fallback--faint; - color: var(--faint, $fallback--faint); -} </style> diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 2010fdfd..532af1ba 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -90,6 +90,8 @@ const setColors = (col, commit) => { colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b) colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b) + colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)` + console.log('OMGGGG') console.log(JSON.stringify(col)) radii.btnRadius = col.btnRadius |