diff --git a/front/scripts/fix-fomantic-css.py b/front/scripts/fix-fomantic-css.py
index 0cdb4b5fff53ff73d94978c96d2d80a5c85ea584..0e9f51771089653979272fe8635103b3c4eecbd5 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 a35614a23527b0eda33904a753eefd5dc68e8f4e..961213ec14b35b6566f36bdde0f64fe2a15e05f3 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 96fecc200f8c0e2f8b166b4d3c66c16b7d957102..81103879d7fde8124deac1a4168056beb4ba8061 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 3e862ef9e5781eab79f0a174225739eca938f51e..0878e4edf8f3fc3c9a29669cd807048c35019a47 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 fa57aefde3616b12b3c93464af53d129b1add578..794124cdb1a2bd9b0b0cb95f632b4524e8091d73 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 b9fd35764d54f78dc977ef485b99fcc267094618..af7c82d1afb6a8d91966ea77b7f3c00b767577cc 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 46f183364645d60af7f79f71d8e82d7f5631cbf7..3790d92e0e26ddb83c7e811f885b0175f1f5745b 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 f0b1276b36bafbb45099909458edd4e6399f070c..e3d487774486bd32214e92963fc9b2dc24a6fff6 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 a9a36b5ac8381917226b0cf040fcbddab3d20e9b..d44558da920d7ed73e0123141df02f54f03631ac 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 974a2176e8a0eb37fb9d94764ecba9f72eec84b2..cdcb7e1bf984e1eed3e52f8e34d745edbe0d45cc 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 c0cb75fcc6b45cf7f516c7dfd4a335f4a37a6248..c613c496800c1cc327fecf6557d8162553093819 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 c3210010adac6c0f47fef735ffb805bc869fe844..049c31e54ef1f612db291705000f35470fb75f05 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 2d574c68b99573c44048cc87de6e6a113d5247cf..dba9c2eefb76d7648708e501c56093d3fd90718d 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 e7f562e9fefd24376afb88d8c1f2dd3fa541082a..0b9e0fb46841635dfbb815c6f17d59cf0d484675 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 d90b36bea36605b4f0158f51327b628c9a071026..d1a07da37e3e90a8151140ab4de0a60592f9515b 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 c6e64b2afed8c1a04357990e981ee88e0fd4d78a..751e75b22af9f1f9df55be3a73c1d3783d912f61 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 1e7cd35bfdb68971387dcdc66f1dadc27946de56..82f5e80b80a3e0686ca792f62fe84c74c938a364 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 55d8a1aa2d72bf62b8f048514aa5e0356df8864a..a820573c08d3558f5f7305844c7e68f42c0ff141 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 ea338b05f22936139b4c4c05958a771b402b4a23..e10f29acd98ef055e767bdd4593cf61f959eac5c 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 aead3f1cc03ac0c947a130ff28fdea2718326ebb..b04910205b179cb627cf15e51177392d8c111806 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 e8414ed2cb38beb29e8f92e390ed3ec78273a35b..9bf5468b086adcac49192a3e146a9bd38e83c43d 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"