diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 17bd5356ac..5ced4d45bb 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -364,7 +364,6 @@ groups: "グループ" createGroup: "グループを作成" ownedGroups: "所有グループ" joinedGroups: "参加しているグループ" -invite: "招待" invites: "招待" groupName: "グループ名" members: "メンバー" diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 9b17b18d45..f316427897 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -154,21 +154,17 @@ export default Vue.component('misskey-flavored-markdown', { url: token.node.props.url, rel: 'nofollow noopener', }, - attrs: { - style: 'color:var(--link);' - } })]; } case 'link': { return [createElement('a', { attrs: { - class: 'link', + class: 'link _link', href: token.node.props.url, rel: 'nofollow noopener', target: '_blank', title: token.node.props.url, - style: 'color:var(--link);' } }, genEl(token.children))]; } diff --git a/src/client/components/url.vue b/src/client/components/url.vue index 082e744001..3b0d814405 100644 --- a/src/client/components/url.vue +++ b/src/client/components/url.vue @@ -1,5 +1,5 @@ <template> -<component :is="hasRoute ? 'router-link' : 'a'" class="mk-url" :[attr]="hasRoute ? url.substr(local.length) : url" :rel="rel" :target="target"> +<component :is="hasRoute ? 'router-link' : 'a'" class="ieqqeuvs _link" :[attr]="hasRoute ? url.substr(local.length) : url" :rel="rel" :target="target"> <template v-if="!self"> <span class="schema">{{ schema }}//</span> <span class="hostname">{{ hostname }}</span> @@ -58,7 +58,7 @@ export default Vue.extend({ </script> <style lang="scss" scoped> -.mk-url { +.ieqqeuvs { word-break: break-all; > .icon { diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue index fb1efab77c..f9b92df80e 100644 --- a/src/client/pages/about.vue +++ b/src/client/pages/about.vue @@ -27,17 +27,17 @@ <div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div> <div>{{ $t('misskeyMembers') }}</div> <span class="members"> - <a href="https://github.com/syuilo" target="_blank">@syuilo</a> - <a href="https://github.com/AyaMorisawa" target="_blank">@AyaMorisawa</a> - <a href="https://github.com/mei23" target="_blank">@mei23</a> - <a href="https://github.com/acid-chicken" target="_blank">@acid-chicken</a> - <a href="https://github.com/tamaina" target="_blank">@tamaina</a> - <a href="https://github.com/rinsuki" target="_blank">@rinsuki</a> + <a href="https://github.com/syuilo" target="_blank" class="_link">@syuilo</a> + <a href="https://github.com/AyaMorisawa" target="_blank" class="_link">@AyaMorisawa</a> + <a href="https://github.com/mei23" target="_blank" class="_link">@mei23</a> + <a href="https://github.com/acid-chicken" target="_blank" class="_link">@acid-chicken</a> + <a href="https://github.com/tamaina" target="_blank" class="_link">@tamaina</a> + <a href="https://github.com/rinsuki" target="_blank" class="_link">@rinsuki</a> </span> <div style="margin-top: 1em;">{{ $t('misskeySource') }}</div> - <a href="https://github.com/syuilo/misskey" target="_blank" style="color: var(--link);">https://github.com/syuilo/misskey</a> + <mk-url url="https://github.com/syuilo/misskey"/> <div style="margin-top: 1em;">{{ $t('misskeyDonate') }}</div> - <a href="https://www.patreon.com/syuilo" target="_blank" style="color: var(--link);">https://www.patreon.com/syuilo</a> + <mk-url url="https://www.patreon.com/syuilo"/> </div> <div class="_content"> <span><mfm text="<motion>❤</motion>"/> {{ $t('patrons') }}</span> @@ -121,7 +121,6 @@ export default Vue.extend({ > ._content { > .members { > a { - color: var(--link); margin-right: 0.5em; } } diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue index 733c481aa6..40e7199dc2 100644 --- a/src/client/pages/my-groups/index.vue +++ b/src/client/pages/my-groups/index.vue @@ -8,8 +8,8 @@ <mk-container :body-togglable="true"> <template #header><fa :icon="faUsers"/> {{ $t('ownedGroups') }}</template> <mk-pagination :pagination="ownedPagination" #default="{items}" ref="owned"> - <div class="" v-for="group in items" :key="group.id"> - <router-link :to="`/my/groups/${ group.id }`">{{ group.name }}</router-link> + <div class="_frame" v-for="group in items" :key="group.id"> + <div class="_title"><router-link :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</router-link></div> </div> </mk-pagination> </mk-container> @@ -17,13 +17,13 @@ <mk-container :body-togglable="true"> <template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template> <mk-pagination :pagination="invitePagination" #default="{items}"> - <div class="" v-for="invite in items" :key="invite.id"> - <div class="name">{{ invite.group.name }}</div> - <x-avatars :user-ids="invite.group.userIds" style="margin-top:8px;"/> - <ui-horizon-group> - <ui-button @click="acceptInvite(invite)"><fa :icon="faCheck"/> {{ $t('accept') }}</ui-button> - <ui-button @click="rejectInvite(invite)"><fa :icon="faBan"/> {{ $t('reject') }}</ui-button> - </ui-horizon-group> + <div class="_frame" v-for="invite in items" :key="invite.id"> + <div class="_title">{{ invite.group.name }}</div> + <div class="_content"><x-avatars :user-ids="invite.group.userIds"/></div> + <div class="_footer"> + <mk-button @click="acceptInvite(invite)" primary inline><fa :icon="faCheck"/> {{ $t('accept') }}</mk-button> + <mk-button @click="rejectInvite(invite)" primary inline><fa :icon="faBan"/> {{ $t('reject') }}</mk-button> + </div> </div> </mk-pagination> </mk-container> @@ -31,8 +31,8 @@ <mk-container :body-togglable="true"> <template #header><fa :icon="faUsers"/> {{ $t('joinedGroups') }}</template> <mk-pagination :pagination="joinedPagination" #default="{items}"> - <div class="" v-for="group in items" :key="group.id"> - <div>{{ group.name }}</div> + <div class="_frame" v-for="group in items" :key="group.id"> + <div class="_title">{{ group.name }}</div> </div> </mk-pagination> </mk-container> diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue index 0affab27f3..8432bdb32d 100644 --- a/src/client/pages/settings/2fa.vue +++ b/src/client/pages/settings/2fa.vue @@ -46,8 +46,8 @@ <ol style="margin: 0; padding: 0 0 0 1em;"> <li> <i18n path="_2fa.step1" tag="span"> - <a href="https://authy.com/" rel="noopener" target="_blank" place="a" style="color: var(--link);">Authy</a> - <a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" place="b" style="color: var(--link);">Google Authenticator</a> + <a href="https://authy.com/" rel="noopener" target="_blank" place="a" class="_link">Authy</a> + <a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" place="b" class="_link">Google Authenticator</a> </i18n> </li> <li>{{ $t('_2fa.step2') }}<br><img :src="data.qr"></li> diff --git a/src/client/style.scss b/src/client/style.scss index 40d39fa639..5280717839 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -301,6 +301,37 @@ a { } } +._frame { + position: relative; + border: solid 1px var(--divider); + border-radius: var(--radius); + margin: var(--marginHalf); + + > ._title { + margin: 0; + padding: 16px; + border-bottom: solid 1px var(--divider); + font-weight: bold; + } + + > ._content { + padding: 16px; + + & + ._content { + border-top: solid 1px var(--divider); + } + } + + > ._footer { + border-top: solid 1px var(--divider); + padding: 16px; + } +} + +._link { + color: var(--link); +} + .zoom-enter-active, .zoom-leave-active { transition: opacity 0.5s, transform 0.5s !important; }