diff --git a/src/App.scss b/src/App.scss
index 50645ec8..8c9df0ba 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -381,6 +381,12 @@ main-router {
font-size: 1.3em;
}
+ .faint {
+ background-color: transparent;
+ color: $fallback--faint;
+ color: var(--panelFaint, $fallback--faint);
+ }
+
.alert {
white-space: nowrap;
text-overflow: ellipsis;
@@ -509,6 +515,27 @@ nav {
flex-grow: 0;
}
}
+.badge {
+ display: inline-block;
+ border-radius: 99px;
+ min-width: 22px;
+ max-width: 22px;
+ min-height: 22px;
+ max-height: 22px;
+ font-size: 15px;
+ line-height: 22px;
+ text-align: center;
+ vertical-align: middle;
+ white-space: nowrap;
+ padding: 0;
+
+ &.badge-notification {
+ background-color: $fallback--cRed;
+ background-color: var(--badgeNotification, $fallback--cRed);
+ color: white;
+ color: var(--badgeNotificationText, white);
+ }
+}
.alert {
margin: 0.35em;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3f22b690..87c89f6a 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,23 +4,6 @@
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
- .unseen-count {
- display: inline-block;
- background-color: $fallback--cRed;
- background-color: var(--badgeNotification, $fallback--cRed);
- border-radius: 99px;
- min-width: 22px;
- max-width: 22px;
- min-height: 22px;
- max-height: 22px;
- color: white;
- color: var(--badgeNotificationText, white);
- font-size: 15px;
- line-height: 22px;
- text-align: center;
- vertical-align: middle
- }
-
.loadmore-error {
color: $fallback--text;
color: var(--text, $fallback--text);
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index eb6c4dd0..64f18720 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,7 +4,7 @@
{{$t('notifications.notifications')}}
- {{unseenCount}}
+ {{unseenCount}}
{{$t('timeline.error_fetching')}}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8682d996..0edc7b71 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -471,6 +471,7 @@
.avatar {
width: 48px;
height: 48px;
+ box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
overflow: hidden;
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 9c4f4ecd..2c33224b 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -163,11 +163,32 @@
background-size: cover;
background-position: 50% 50%;
+ .separator {
+ margin: 1em;
+ border-bottom: 1px solid;
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border);
+ }
+
+ .panel-heading {
+ .badge, .alert, .btn, .faint {
+ margin-left: 1em;
+ }
+ .flex-spacer {
+ flex: 1;
+ }
+ }
+ .checkbox {
+ display: inline-flex;
+ align-items: baseline;
+ margin-right: 1em;
+ }
+
.btn {
margin-left: 0;
- margin-top: 1em;
+ padding: 0 1em;
+ min-width: 3em;
min-height: 30px;
- width: 10em;
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index a444c6a7..2a7756ed 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -46,27 +46,80 @@
v-model="keepRoundness">
+
+
+
+
{{$t('settings.style.switcher.save_load_hint')}}
-
Preview
+
+ {{$t('settings.style.preview.header')}}
+
+ 99
+
+
+ {{$t('settings.style.preview.error')}}
+
+
+
+
+ {{$t('settings.style.preview.header_faint')}}
+
+
( ͡° ͜ʖ ͡°)
Content
+
- A bunch of more content and
-
a nice lil' link
+
+
+
+ {{$t('settings.style.preview.link')}}
+
+
+
+
-
+
+
+
+
+ {{$t('settings.style.preview.error')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{$t('settings.style.preview.faint_link')}}
+
+
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 39f1b5bc..b69a09fd 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -58,10 +58,7 @@
.timeline {
.loadmore-text {
- opacity: 0.8;
- background-color: transparent;
- color: $fallback--faint;
- color: var(--panelFaint, $fallback--faint);
+ opacity: 1;
}
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c70c488c..0530b66d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -170,6 +170,7 @@
"keep_shadows": "Keep shadows",
"keep_opacity": "Keep opacity",
"keep_roundness": "Keep roundness",
+ "keep_fonts": "Keep fonts",
"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.",
"reset": "Reset",
"clear_all": "Clear all",
@@ -250,6 +251,18 @@
"size": "Size (in px)",
"weight": "Weight (boldness)",
"custom": "Custom"
+ },
+ "preview": {
+ "header": "Preview of header",
+ "error": "Example error",
+ "button": "Button",
+ "text": "A bunch of more content and {0}",
+ "input": "Just landed in L.A.",
+ "faint_link": "helpful manual",
+ "fine_print": "Read our {0} to learn nothing useful!",
+ "header_faint": "This is fine",
+ "checkbox": "I have skimmed over terms and conditions",
+ "link": "a nice lil' link"
}
}
},