From cf495360dedb0dd6a5c0cb2f0f5c356d76120d0f Mon Sep 17 00:00:00 2001 From: Agate <me@agate.blue> Date: Mon, 22 Jun 2020 16:46:43 +0200 Subject: [PATCH] Replaced teal by accent color --- front/scripts/fix-fomantic-css.py | 5 +++++ front/src/components/Sidebar.vue | 8 ++++---- front/src/components/audio/EmbedWizard.vue | 2 +- front/src/components/common/CopyInput.vue | 2 +- front/src/components/manage/ChannelsTable.vue | 2 +- front/src/components/manage/library/AlbumsTable.vue | 2 +- front/src/components/manage/library/ArtistsTable.vue | 2 +- front/src/components/manage/library/LibrariesTable.vue | 2 +- front/src/components/manage/library/TracksTable.vue | 2 +- front/src/components/manage/library/UploadsTable.vue | 2 +- front/src/components/manage/moderation/AccountsTable.vue | 2 +- front/src/components/tags/List.vue | 2 +- front/src/style/_vars.scss | 6 +++++- front/src/views/admin/ChannelDetail.vue | 2 +- front/src/views/admin/library/AlbumDetail.vue | 2 +- front/src/views/admin/library/ArtistDetail.vue | 2 +- front/src/views/admin/library/LibraryDetail.vue | 2 +- front/src/views/admin/library/TrackDetail.vue | 2 +- front/src/views/admin/library/UploadDetail.vue | 2 +- front/src/views/admin/moderation/AccountsDetail.vue | 2 +- front/src/views/admin/moderation/Base.vue | 4 ++-- 21 files changed, 33 insertions(+), 24 deletions(-) diff --git a/front/scripts/fix-fomantic-css.py b/front/scripts/fix-fomantic-css.py index 0cdb4b5fff..0e9f517710 100755 --- a/front/scripts/fix-fomantic-css.py +++ b/front/scripts/fix-fomantic-css.py @@ -37,6 +37,11 @@ GLOBAL_REPLACES = [ ("#e76b00", "var(--vibrant-active-color)"), ("#e55b00", "var(--vibrant-focus-color)"), ("#f17000", "var(--vibrant-focus-color)"), + (".teal", ".accent"), + ("#00B5AD", "var(--accent-color)"), + ("#009c95", "var(--accent-hover-color)"), + ("#00827c", "var(--accent-active-color)"), + ("#008c86", "var(--accent-focus-color)"), (".green", ".success"), ("#21BA45", "var(--success-color)"), ("#2ECC40", "var(--success-color)"), diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index a35614a235..961213ec14 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -18,7 +18,7 @@ <i class="wrench icon"></i> <div v-if="moderationNotifications > 0" - :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div> + :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div> <div class="menu"> <div class="header"> <translate translate-context="Sidebar/Admin/Title/Noun">Administration</translate> @@ -31,7 +31,7 @@ <div v-if="$store.state.ui.notifications.pendingReviewEdits > 0" :title="labels.pendingReviewEdits" - :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']"> + :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"> {{ $store.state.ui.notifications.pendingReviewEdits }}</div> <translate translate-context="*/*/*/Noun">Library</translate> </router-link> @@ -42,7 +42,7 @@ <div v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests> 0" :title="labels.pendingReviewReports" - :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div> + :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div> <translate translate-context="*/Moderation/*">Moderation</translate> </router-link> <router-link @@ -70,7 +70,7 @@ <router-link class="item" v-if="$store.state.auth.authenticated" :title="labels.notifications" :to="{name: 'notifications'}"> <i class="bell icon"></i><div v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0" - :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div> + :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div> </router-link> <div class="item"> <div class="ui user-dropdown dropdown" > diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue index 96fecc200f..81103879d7 100644 --- a/front/src/components/audio/EmbedWizard.vue +++ b/front/src/components/audio/EmbedWizard.vue @@ -27,7 +27,7 @@ </template> </div> <div class="field"> - <button @click="copy" class="ui right teal labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button> + <button @click="copy" class="ui right accent labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button> <label for="embed-width"><translate translate-context="Popup/Embed/Input.Label/Noun">Embed code</translate></label> <p><translate translate-context="Popup/Embed/Paragraph">Copy/paste this code in your website HTML</translate></p> <textarea ref="textarea" :value="embedCode" rows="5" readonly> diff --git a/front/src/components/common/CopyInput.vue b/front/src/components/common/CopyInput.vue index 3e862ef9e5..0878e4edf8 100644 --- a/front/src/components/common/CopyInput.vue +++ b/front/src/components/common/CopyInput.vue @@ -14,7 +14,7 @@ export default { props: { value: {type: String}, - buttonClasses: {type: String, default: 'teal'}, + buttonClasses: {type: String, default: 'accent'}, id: {type: String, default: 'copy-input'}, }, data () { diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue index fa57aefde3..794124cdb1 100644 --- a/front/src/components/manage/ChannelsTable.vue +++ b/front/src/components/manage/ChannelsTable.vue @@ -70,7 +70,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.attributed_to.domain)" :title="scope.obj.attributed_to.domain">{{ scope.obj.attributed_to.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue index b9fd35764d..af7c82d1af 100644 --- a/front/src/components/manage/library/AlbumsTable.vue +++ b/front/src/components/manage/library/AlbumsTable.vue @@ -61,7 +61,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue index 46f1833646..3790d92e0e 100644 --- a/front/src/components/manage/library/ArtistsTable.vue +++ b/front/src/components/manage/library/ArtistsTable.vue @@ -65,7 +65,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue index f0b1276b36..e3d4877744 100644 --- a/front/src/components/manage/library/LibrariesTable.vue +++ b/front/src/components/manage/library/LibrariesTable.vue @@ -71,7 +71,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue index a9a36b5ac8..d44558da92 100644 --- a/front/src/components/manage/library/TracksTable.vue +++ b/front/src/components/manage/library/TracksTable.vue @@ -69,7 +69,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue index 974a2176e8..cdcb7e1bf9 100644 --- a/front/src/components/manage/library/UploadsTable.vue +++ b/front/src/components/manage/library/UploadsTable.vue @@ -95,7 +95,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue index c0cb75fcc6..c613c49680 100644 --- a/front/src/components/manage/moderation/AccountsTable.vue +++ b/front/src/components/manage/moderation/AccountsTable.vue @@ -55,7 +55,7 @@ </router-link> <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> </template> - <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)"> + <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate> </span> diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue index c3210010ad..049c31e54e 100644 --- a/front/src/components/tags/List.vue +++ b/front/src/components/tags/List.vue @@ -8,7 +8,7 @@ :key="tag"> #{{ tag|truncate(truncateSize) }} </router-link> - <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted teal label" v-if="showMore && toDisplay.length < tags.length"> + <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted accent label" v-if="showMore && toDisplay.length < tags.length"> <translate translate-context="Content/*/Button/Label/Verb" :translate-params="{count: tags.length - toDisplay.length}" :translate-n="tags.length - toDisplay.length" translate-plural="Show %{ count } more tags">Show 1 more tag</translate> </div> </div> diff --git a/front/src/style/_vars.scss b/front/src/style/_vars.scss index 2d574c68b9..dba9c2eefb 100644 --- a/front/src/style/_vars.scss +++ b/front/src/style/_vars.scss @@ -12,7 +12,6 @@ $success-hover-color: #16ab39 !default; $success-active-color: #198f35 !default; $success-focus-color: var(--$success-hover-color) !default; - $primary-color: #2185D0 !default; $primary-hover-color: #1678c2 !default; $primary-active-color: #1a69a4 !default; @@ -28,6 +27,11 @@ $danger-hover-color: #ff392b !default; $danger-active-color: #b21e1e !default; $danger-focus-color: var(--danger-hover-color) !default; +$accent-color: #00B5AD !default; +$accent-hover-color: #009c95 !default; +$accent-active-color: #00827c !default; +$accent-focus-color: var(--accent-hover-color) !default; + $link-color: #4183C4 !default; $link-text-decoration: none !default; $link-hover-color: #1e70bf !default; diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue index e7f562e9fe..0b9e0fb468 100644 --- a/front/src/views/admin/ChannelDetail.vue +++ b/front/src/views/admin/ChannelDetail.vue @@ -15,7 +15,7 @@ {{ object.artist.name | truncate(100) }} <div class="sub header"> <template v-if="object.artist.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue index d90b36bea3..d1a07da37e 100644 --- a/front/src/views/admin/library/AlbumDetail.vue +++ b/front/src/views/admin/library/AlbumDetail.vue @@ -15,7 +15,7 @@ {{ object.title | truncate(100) }} <div class="sub header"> <template v-if="object.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue index c6e64b2afe..751e75b22a 100644 --- a/front/src/views/admin/library/ArtistDetail.vue +++ b/front/src/views/admin/library/ArtistDetail.vue @@ -15,7 +15,7 @@ {{ object.name | truncate(100) }} <div class="sub header"> <template v-if="object.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue index 1e7cd35bfd..82f5e80b80 100644 --- a/front/src/views/admin/library/LibraryDetail.vue +++ b/front/src/views/admin/library/LibraryDetail.vue @@ -14,7 +14,7 @@ {{ object.name | truncate(100) }} <div class="sub header"> <template v-if="object.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue index 55d8a1aa2d..a820573c08 100644 --- a/front/src/views/admin/library/TrackDetail.vue +++ b/front/src/views/admin/library/TrackDetail.vue @@ -15,7 +15,7 @@ {{ object.title | truncate(100) }} <div class="sub header"> <template v-if="object.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue index ea338b05f2..e10f29acd9 100644 --- a/front/src/views/admin/library/UploadDetail.vue +++ b/front/src/views/admin/library/UploadDetail.vue @@ -15,7 +15,7 @@ {{ displayName(object) | truncate(100) }} <div class="sub header"> <template v-if="object.is_local"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> </span> diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue index aead3f1cc0..b04910205b 100644 --- a/front/src/views/admin/moderation/AccountsDetail.vue +++ b/front/src/views/admin/moderation/AccountsDetail.vue @@ -14,7 +14,7 @@ {{ object.full_username }} <div class="sub header"> <template v-if="object.user"> - <span class="ui tiny teal label"> + <span class="ui tiny accent label"> <i class="home icon"></i> <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate> </span> diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue index e8414ed2cb..9bf5468b08 100644 --- a/front/src/views/admin/moderation/Base.vue +++ b/front/src/views/admin/moderation/Base.vue @@ -7,7 +7,7 @@ <translate translate-context="*/Moderation/*/Noun">Reports</translate> <div v-if="$store.state.ui.notifications.pendingReviewReports > 0" - :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div> + :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div> </router-link> <router-link class="ui item" @@ -15,7 +15,7 @@ <translate translate-context="*/Moderation/*/Noun">User Requests</translate> <div v-if="$store.state.ui.notifications.pendingReviewRequests > 0" - :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div> + :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div> </router-link> <router-link class="ui item" -- GitLab