diff --git a/src/App.scss b/src/App.scss index be6929f69..00a8e9547 100644 --- a/src/App.scss +++ b/src/App.scss @@ -21,7 +21,7 @@ } html { - font-size: var(--textSize, 14px); + font-size: var(--textSize, 1rem); --navbar-height: var(--navbarSize, 3.5rem); --emoji-size: var(--emojiSize, 32px); @@ -382,6 +382,10 @@ nav { font-family: sans-serif; font-family: var(--font); + &.-transparent { + backdrop-filter: blur(0.125em) contrast(60%); + } + &::-moz-focus-inner { border: none; } diff --git a/src/components/button.style.js b/src/components/button.style.js index ecbf54d9e..c32a232f4 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -64,6 +64,26 @@ export default { opacity: 0.5 } }, + { + component: 'Text', + parent: { + component: 'Button', + variant: 'transparent' + }, + directives: { + textColor: '--text' + } + }, + { + component: 'Icon', + parent: { + component: 'Button', + variant: 'transparent' + }, + directives: { + textColor: '--text' + } + }, { state: ['hover'], directives: { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index f9b306fb4..8e572d1d2 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -140,7 +140,7 @@ const EmojiPicker = { }, updateEmojiSize () { const css = window.getComputedStyle(this.$refs.popover.$el) - const fontSize = css.getPropertyValue('font-size') || '14px' + const fontSize = css.getPropertyValue('font-size') || '1rem' const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem' const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim() diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 6a8352b65..e0a62485c 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -12,13 +12,13 @@
diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 0f325ea7f..09b37aa14 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -245,8 +245,8 @@ margin-right: 0; .emoji { - width: 14px; - height: 14px; + width: 1em; + height: 1em; vertical-align: middle; object-fit: contain; } diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index ae2bdf206..040e32c0b 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -59,32 +59,6 @@ @click.prevent="toggleShowMore" > {{ toggleText }} -
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index fb08186b4..bab4f70a5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -24,7 +24,7 @@ /> -
+
diff --git a/src/modules/instance.js b/src/modules/instance.js index 93f81e4d8..7317debf8 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -108,7 +108,7 @@ const defaultState = { palette: null, style: null, emojiReactionsScale: 0.5, - textSize: '14px', + textSize: '1rem', emojiSize: '2.2rem', navbarSize: '3.5rem', panelHeaderSize: '3.2rem',