tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Introduces new oficial color scheme. Begins modification of color variables.

This commit is contained in:
Mateus Machado Luna 2018-07-25 16:25:55 -03:00
parent 47bd72a37c
commit d1dc53c632
53 changed files with 322 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/advanced-search/advanced-search.vue
View File

@ -633,7 +633,7 @@
} }
.tainacan-input-disabled { .tainacan-input-disabled {
background-color: $gray; background-color: $gray3;
} }
} }

12
src/admin/components/edition/collection-edition-form.vue
View File

@ -818,7 +818,7 @@ export default {
.section-label { .section-label {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $blue5 !important;
line-height: 1.2em; line-height: 1.2em;
} }
@ -854,7 +854,7 @@ export default {
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: gray; color: $gray4;
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
font-size: 1.2rem; font-size: 1.2rem;
@ -892,7 +892,7 @@ export default {
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: gray; color: $gray4;
} }
.thumbnail-buttons-row { .thumbnail-buttons-row {
position: relative; position: relative;
@ -901,7 +901,7 @@ export default {
} }
} }
.selected-cover-page { .selected-cover-page {
border: 1px solid $tainacan-input-background; border: 1px solid $gray2;
padding: 8px; padding: 8px;
font-size: .75rem; font-size: .75rem;
.span { vertical-align: middle;} .span { vertical-align: middle;}
@ -915,11 +915,11 @@ export default {
padding: 4px 6px; padding: 4px 6px;
.icon { font-size: 20px; } .icon { font-size: 20px; }
&.disabled { &.disabled {
.icon { color: $tainacan-input-background; } .icon { color: $gray2; }
} }
} }
.moderators-empty-list { .moderators-empty-list {
color: gray; color: $gray4;
font-size: 0.85rem; font-size: 0.85rem;
} }

4
src/admin/components/edition/filter-edition-form.vue
View File

@ -264,8 +264,8 @@ export default {
form { form {
padding: 1.0em 2.0em; padding: 1.0em 2.0em;
border-top: 1px solid $draggable-border-color; border-top: 1px solid $gray2;
border-bottom: 1px solid $draggable-border-color; border-bottom: 1px solid $gray2;
margin-top: 1.0em; margin-top: 1.0em;
} }

6
src/admin/components/edition/importer-edition-form.vue
View File

@ -389,13 +389,13 @@ export default {
.section-label { .section-label {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $blue5 !important;
line-height: 1.2em; line-height: 1.2em;
} }
.source-metadatum { .source-metadatum {
padding: 2px 0; padding: 2px 0;
border-bottom: 1px solid $tainacan-input-background; border-bottom: 1px solid $gray2;
width: 100%; width: 100%;
margin-bottom: 6px; margin-bottom: 6px;
display: flex; display: flex;
@ -411,7 +411,7 @@ export default {
} }
.mapping-header-label { .mapping-header-label {
color: $gray-light; color: $gray4;
margin: 12px 0 6px 0; margin: 12px 0 6px 0;
} }

8
src/admin/components/edition/importer-mapping-form.vue
View File

@ -403,7 +403,7 @@ export default {
h1, h2 { h1, h2 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
a.back-link{ a.back-link{
@ -452,13 +452,13 @@ export default {
.section-label { .section-label {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $blue5 !important;
line-height: 1.2em; line-height: 1.2em;
} }
.source-metadatum { .source-metadatum {
padding: 2px 0; padding: 2px 0;
border-bottom: 1px solid $tainacan-input-background; border-bottom: 1px solid $gray2;
width: 100%; width: 100%;
margin-bottom: 6px; margin-bottom: 6px;
display: flex; display: flex;
@ -474,7 +474,7 @@ export default {
} }
.mapping-header-label { .mapping-header-label {
color: $gray-light; color: $gray4;
margin: 12px 0 6px 0; margin: 12px 0 6px 0;
} }

24
src/admin/components/edition/item-edition-form.vue
View File

@ -896,7 +896,7 @@ export default {
height: 36px; height: 36px;
width: 36px; width: 36px;
border: none; border: none;
background-color: $tainacan-input-background; background-color: $gray2;
color: $secondary; color: $secondary;
padding: 0px; padding: 0px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
@ -954,7 +954,7 @@ export default {
label { label {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $blue5 !important;
line-height: 1.2em; line-height: 1.2em;
} }
} }
@ -983,11 +983,11 @@ export default {
height: 72px; height: 72px;
width: 72px; width: 72px;
border: none; border: none;
background-color: $tainacan-input-background; background-color: $gray2;
color: $secondary; color: $secondary;
margin-bottom: 6px; margin-bottom: 6px;
&:hover { &:hover {
background-color: $primary-light; background-color: $turquoise2;
cursor: pointer; cursor: pointer;
} }
} }
@ -1001,12 +1001,12 @@ export default {
margin-right: 24px; margin-right: 24px;
.icon { .icon {
font-size: 18px !important; font-size: 18px !important;
color: $gray; color: $gray3;
} }
} }
} }
.section-attachments { .section-attachments {
border: 1px solid $draggable-border-color; border: 1px solid $gray2;
height: 250px; height: 250px;
max-width: 100%; max-width: 100%;
resize: vertical; resize: vertical;
@ -1069,7 +1069,7 @@ export default {
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: gray; color: $gray4;
top: 70px; top: 70px;
max-width: 90px; max-width: 90px;
} }
@ -1086,7 +1086,7 @@ export default {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
z-index: 999999; z-index: 999999;
background-color: $primary-lighter; background-color: $turquoise1;
width: 100%; width: 100%;
height: 65px; height: 65px;
display: flex; display: flex;
@ -1101,12 +1101,12 @@ export default {
} }
@keyframes blink { @keyframes blink {
from { color: $tertiary; } from { color: $blue5; }
to { color: $gray-light; } to { color: $gray4; }
} }
.update-warning { .update-warning {
color: $tertiary; color: $blue5;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-delay: 0.5s; animation-delay: 0.5s;
@ -1115,7 +1115,7 @@ export default {
} }
.update-info-section { .update-info-section {
color: $gray-light; color: $gray4;
margin-right: auto; margin-right: auto;
} }

4
src/admin/components/edition/metadatum-edition-form.vue
View File

@ -338,8 +338,8 @@
form.inCollapse { form.inCollapse {
padding: 1.0em 2.0em; padding: 1.0em 2.0em;
border-top: 1px solid $draggable-border-color; border-top: 1px solid $gray2;
border-bottom: 1px solid $draggable-border-color; border-bottom: 1px solid $gray2;
margin-top: 1.0em; margin-top: 1.0em;
} }

6
src/admin/components/edition/term-edition-form.vue
View File

@ -245,7 +245,7 @@
form { form {
padding: 2.0rem 0rem 1rem 3rem; padding: 2.0rem 0rem 1rem 3rem;
border-left: 1px solid $draggable-border-color; border-left: 1px solid $gray2;
margin-top: 1.0em; margin-top: 1.0em;
.tainacan-page-title { .tainacan-page-title {
@ -254,7 +254,7 @@
h2 { h2 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
hr{ hr{
@ -283,7 +283,7 @@
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: gray; color: $gray4;
} }
#button-delete-header, #button-delete-header,
#button-edit-header { #button-edit-header {

4
src/admin/components/lists/collections-list.vue
View File

@ -388,10 +388,10 @@ export default {
height: 40px; height: 40px;
.select-all { .select-all {
color: $gray-light; color: $gray4;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: $gray-light; color: $gray4;
} }
} }
} }

26
src/admin/components/lists/filters-list.vue
View File

@ -476,7 +476,7 @@ export default {
.page-title { .page-title {
border-bottom: 1px solid $secondary; border-bottom: 1px solid $secondary;
h2 { h2 {
color: $tertiary; color: $blue5;
font-weight: 500; font-weight: 500;
} }
margin: 1em 0em 2.0em 0em; margin: 1em 0em 2.0em 0em;
@ -532,7 +532,7 @@ export default {
padding-right: 6em; padding-right: 6em;
} }
.grip-icon { .grip-icon {
fill: $gray; fill: $gray3;
top: 2px; top: 2px;
position: relative; position: relative;
} }
@ -550,7 +550,7 @@ export default {
} }
.label-details { .label-details {
font-weight: normal; font-weight: normal;
color: $gray; color: $gray3;
} }
.not-saved { .not-saved {
font-style: italic; font-style: italic;
@ -574,8 +574,8 @@ export default {
form { form {
padding: 1.0em 2.0em; padding: 1.0em 2.0em;
border-top: 1px solid $draggable-border-color; border-top: 1px solid $gray2;
border-bottom: 1px solid $draggable-border-color; border-bottom: 1px solid $gray2;
margin-top: 1.0em; margin-top: 1.0em;
} }
&.not-sortable-item, &.not-sortable-item:hover { &.not-sortable-item, &.not-sortable-item:hover {
@ -583,7 +583,7 @@ export default {
background-color: white !important; background-color: white !important;
.handle .label-details, .handle .icon { .handle .label-details, .handle .icon {
color: $gray !important; color: $gray3 !important;
} }
} }
&.not-focusable-item, &.not-focusable-item:hover { &.not-focusable-item, &.not-focusable-item:hover {
@ -593,11 +593,11 @@ export default {
color: $secondary; color: $secondary;
} }
.handle .label-details, .handle .icon { .handle .label-details, .handle .icon {
color: $gray !important; color: $gray3 !important;
} }
} }
&.disabled-metadatum { &.disabled-metadatum {
color: $gray; color: $gray3;
} }
} }
.active-filter-item:hover:not(.not-sortable-item) { .active-filter-item:hover:not(.not-sortable-item) {
@ -630,7 +630,7 @@ export default {
} }
} }
.sortable-ghost { .sortable-ghost {
border: 1px dashed $draggable-border-color; border: 1px dashed $gray2;
display: block; display: block;
padding: 0.7em 0.9em; padding: 0.7em 0.9em;
margin: 4px; margin: 4px;
@ -638,7 +638,7 @@ export default {
position: relative; position: relative;
.grip-icon { .grip-icon {
fill: $gray; fill: $gray3;
top: 2px; top: 2px;
position: relative; position: relative;
} }
@ -678,12 +678,12 @@ export default {
line-height: 1.3em; line-height: 1.3em;
height: 40px; height: 40px;
position: relative; position: relative;
border: 1px solid $draggable-border-color; border: 1px solid $gray2;
border-radius: 1px; border-radius: 1px;
transition: left 0.2s ease; transition: left 0.2s ease;
.grip-icon { .grip-icon {
fill: $gray; fill: $gray3;
top: -3px; top: -3px;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -721,7 +721,7 @@ export default {
} }
&:before { &:before {
top: -1px; top: -1px;
border-color: transparent $draggable-border-color transparent transparent; border-color: transparent $gray2 transparent transparent;
border-right-width: 16px; border-right-width: 16px;
border-top-width: 20px; border-top-width: 20px;
border-bottom-width: 20px; border-bottom-width: 20px;

4
src/admin/components/lists/items-list.vue
View File

@ -607,10 +607,10 @@ export default {
height: 40px; height: 40px;
.select-all { .select-all {
color: $gray-light; color: $gray4;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: $gray-light; color: $gray4;
} }
} }
} }

20
src/admin/components/lists/metadata-list.vue
View File

@ -752,7 +752,7 @@ export default {
.page-title { .page-title {
border-bottom: 1px solid $secondary; border-bottom: 1px solid $secondary;
h2 { h2 {
color: $tertiary; color: $blue5;
font-weight: 500; font-weight: 500;
} }
margin: 1em 0em 2.0em 0em; margin: 1em 0em 2.0em 0em;
@ -818,7 +818,7 @@ export default {
padding-right: 6em; padding-right: 6em;
} }
.grip-icon { .grip-icon {
fill: $gray; fill: $gray3;
top: 2px; top: 2px;
position: relative; position: relative;
} }
@ -836,7 +836,7 @@ export default {
} }
.label-details { .label-details {
font-weight: normal; font-weight: normal;
color: $gray; color: $gray3;
} }
.not-saved { .not-saved {
font-style: italic; font-style: italic;
@ -863,7 +863,7 @@ export default {
background-color: white !important; background-color: white !important;
.handle .label-details, .handle .icon { .handle .label-details, .handle .icon {
color: $gray !important; color: $gray3 !important;
} }
} }
&.not-focusable-item, &.not-focusable-item:hover { &.not-focusable-item, &.not-focusable-item:hover {
@ -873,11 +873,11 @@ export default {
color: $secondary; color: $secondary;
} }
.handle .label-details, .handle .icon { .handle .label-details, .handle .icon {
color: $gray !important; color: $gray3 !important;
} }
} }
&.disabled-metadatum { &.disabled-metadatum {
color: $gray; color: $gray3;
} }
} }
.active-metadatum-item:hover:not(.not-sortable-item) { .active-metadatum-item:hover:not(.not-sortable-item) {
@ -910,7 +910,7 @@ export default {
} }
} }
.sortable-ghost { .sortable-ghost {
border: 1px dashed $draggable-border-color; border: 1px dashed $gray2;
display: block; display: block;
padding: 0.7em 0.9em; padding: 0.7em 0.9em;
margin: 4px; margin: 4px;
@ -956,12 +956,12 @@ export default {
line-height: 1.3em; line-height: 1.3em;
height: 40px; height: 40px;
position: relative; position: relative;
border: 1px solid $draggable-border-color; border: 1px solid $gray2;
border-radius: 1px; border-radius: 1px;
transition: left 0.2s ease; transition: left 0.2s ease;
.grip-icon { .grip-icon {
fill: $gray; fill: $gray3;
top: -3px; top: -3px;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -999,7 +999,7 @@ export default {
} }
&:before { &:before {
top: -1px; top: -1px;
border-color: transparent $draggable-border-color transparent transparent; border-color: transparent $gray2 transparent transparent;
border-right-width: 16px; border-right-width: 16px;
border-top-width: 20px; border-top-width: 20px;
border-bottom-width: 20px; border-bottom-width: 20px;

4
src/admin/components/lists/processes-list.vue
View File

@ -318,10 +318,10 @@
height: 40px; height: 40px;
.select-all { .select-all {
color: $gray-light; color: $gray4;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: $gray-light; color: $gray4;
} }
} }
} }

4
src/admin/components/lists/taxonomies-list.vue
View File

@ -275,10 +275,10 @@
height: 40px; height: 40px;
.select-all { .select-all {
color: $gray-light; color: $gray4;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: $gray-light; color: $gray4;
} }
} }
} }

6
src/admin/components/lists/terms-list.vue
View File

@ -383,7 +383,7 @@ export default {
margin-left: 30px; margin-left: 30px;
.gray-icon, .gray-icon .icon { .gray-icon, .gray-icon .icon {
color: $tainacan-placeholder-color !important; color: $gray4 !important;
} }
.gray-icon .icon i::before, .gray-icon i::before { .gray-icon .icon i::before, .gray-icon i::before {
font-size: 21px !important; font-size: 21px !important;
@ -415,7 +415,7 @@ export default {
} }
.label-details { .label-details {
font-weight: normal; font-weight: normal;
color: $gray; color: $gray3;
} }
.not-saved { .not-saved {
font-style: italic; font-style: italic;
@ -452,7 +452,7 @@ export default {
cursor: default; cursor: default;
.term-name { .term-name {
color: $primary; color: $turquoise3;
} }
} }

10
src/admin/components/navigation/primary-menu.vue
View File

@ -97,7 +97,7 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
#primary-menu { #primary-menu {
background-color: $primary; background-color: $turquoise4;
padding: 100px 0px 0px 0px; padding: 100px 0px 0px 0px;
-webkit-transition: max-width 0.2s linear; /* Safari */ -webkit-transition: max-width 0.2s linear; /* Safari */
transition: max-width 0.2s linear; transition: max-width 0.2s linear;
@ -113,7 +113,7 @@ export default {
} }
.separator { .separator {
height: 2px; height: 2px;
background-color: $separator-color; background-color: $turquoise5;
width: 100%; width: 100%;
margin: 24px 0; margin: 24px 0;
} }
@ -134,11 +134,11 @@ export default {
} }
a:hover, a.is-active { a:hover, a.is-active {
background-color: $primary; background-color: $turquoise4;
color: $tertiary; color: $blue5;
.activities-icon { .activities-icon {
fill: $tertiary; fill: $blue5;
} }
} }
a:focus { a:focus {

4
src/admin/components/navigation/tainacan-header.vue
View File

@ -205,7 +205,7 @@
border-width: 0 !important; border-width: 0 !important;
height: 27px; height: 27px;
font-size: 11px; font-size: 11px;
color: $gray-light; color: $gray4;
transition: width linear 0.15s; transition: width linear 0.15s;
-webkit-transition: width linear 0.15s; -webkit-transition: width linear 0.15s;
width: 160px; width: 160px;
@ -215,7 +215,7 @@
} }
.icon:not(.add-i) { .icon:not(.add-i) {
pointer-events: all; pointer-events: all;
color: $tertiary; color: $blue5;
cursor: pointer; cursor: pointer;
height: 27px; height: 27px;
font-size: 18px; font-size: 18px;

6
src/admin/components/navigation/tainacan-subheader.vue
View File

@ -212,7 +212,7 @@ export default {
// Tainacan Header // Tainacan Header
#tainacan-subheader { #tainacan-subheader {
background-color: $primary-lighter; background-color: $turquoise1;
height: $subheader-height; height: $subheader-height;
max-height: $subheader-height; max-height: $subheader-height;
width: 100%; width: 100%;
@ -252,7 +252,7 @@ export default {
h1 { h1 {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
line-height: 22px; line-height: 22px;
margin-bottom: 12px; margin-bottom: 12px;
max-width: 450px; max-width: 450px;
@ -281,7 +281,7 @@ export default {
-webkit-transition: height 0.5s linear, padding 0.5s linear; -webkit-transition: height 0.5s linear, padding 0.5s linear;
a { a {
color: $tertiary; color: $blue5;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

2
src/admin/components/navigation/tainacan-title.vue
View File

@ -149,7 +149,7 @@ export default {
h1, h2 { h1, h2 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
a.back-link{ a.back-link{

4
src/admin/components/other/available-importers-modal.vue
View File

@ -85,7 +85,7 @@ export default {
.importer-types-container { .importer-types-container {
.importer-type { .importer-type {
border-bottom: 1px solid $tainacan-input-background; border-bottom: 1px solid $gray2;
padding: 15px 8.3333333%; padding: 15px 8.3333333%;
cursor: pointer; cursor: pointer;
@ -96,7 +96,7 @@ export default {
border-bottom: none; border-bottom: none;
} }
&:hover { &:hover {
background-color: $tainacan-input-background; background-color: $gray2;
} }
} }
} }

4
src/admin/components/other/file-item.vue
View File

@ -110,7 +110,7 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: inline-block; display: inline-block;
background-color: $tainacan-input-background; background-color: $gray2;
&.rounded { &.rounded {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
@ -144,7 +144,7 @@ export default {
} }
figcaption { figcaption {
background-color: $tainacan-input-background; background-color: $gray2;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
padding: 8px 15px; padding: 8px 15px;

6
src/admin/components/other/help-button.vue
View File

@ -46,8 +46,8 @@ export default {
} }
.help-tooltip { .help-tooltip {
z-index: 99999999999999999999; z-index: 99999999999999999999;
color: $tertiary; color: $blue5;
background-color: $primary-light; background-color: $turquoise2;
border: none; border: none;
display: block; display: block;
border-radius: 5px; border-radius: 5px;
@ -86,7 +86,7 @@ export default {
border-style: solid; border-style: solid;
} }
&:before { &:before {
border-color: $primary-light transparent transparent transparent; border-color: $turquoise2 transparent transparent transparent;
border-right-width: 18px; border-right-width: 18px;
border-top-width: 12px; border-top-width: 12px;
border-left-width: 18px; border-left-width: 18px;

24
src/admin/components/other/processes-popup.vue
View File

@ -5,7 +5,7 @@
@click="showProcessesList = !showProcessesList" @click="showProcessesList = !showProcessesList"
class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span> class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span>
<a @click="showProcessesList = !showProcessesList"> <a @click="showProcessesList = !showProcessesList">
<span class="icon has-text-tertiary"> <span class="icon has-text-blue5">
<i <i
:class="{ 'mdi-menu-up': showProcessesList, :class="{ 'mdi-menu-up': showProcessesList,
'mdi-menu-down': !showProcessesList }" 'mdi-menu-down': !showProcessesList }"
@ -13,7 +13,7 @@
</span> </span>
</a> </a>
<a @click="$emit('closeProcessesPopup')"> <a @click="$emit('closeProcessesPopup')">
<span class="icon has-text-tertiary"> <span class="icon has-text-blue5">
<i class="mdi mdi-close"/> <i class="mdi mdi-close"/>
</span> </span>
</a> </a>
@ -86,7 +86,7 @@
<div class="popup-footer"> <div class="popup-footer">
<span <span
v-if="hasAnyProcessExecuting" v-if="hasAnyProcessExecuting"
class="icon has-text-tertiary"><i class="mdi mdi-18px mdi-autorenew"/></span> class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
<p class="footer-title"> <p class="footer-title">
{{ hasAnyProcessExecuting ? {{ hasAnyProcessExecuting ?
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')):
@ -187,8 +187,8 @@ export default {
.control.is-loading::after { .control.is-loading::after {
border: 2px solid $success; border: 2px solid $success;
border-right-color: $tainacan-input-background; border-right-color: $gray2;
border-top-color: $tainacan-input-background; border-top-color: $gray2;
} }
.processes-popup{ .processes-popup{
@ -205,7 +205,7 @@ export default {
.popup-header, .popup-footer { .popup-header, .popup-footer {
display: flex; display: flex;
align-items: center; align-items: center;
color: $tertiary; color: $blue5;
.header-title, .footer-title { .header-title, .footer-title {
margin-right: auto; margin-right: auto;
} }
@ -238,13 +238,13 @@ export default {
.popup-list-subheader { .popup-list-subheader {
background-color: white !important; background-color: white !important;
padding: 6px 12px 12px 12px; padding: 6px 12px 12px 12px;
color: $gray-light; color: $gray4;
font-size: 0.625rem; font-size: 0.625rem;
a { float: right; } a { float: right; }
} }
li:hover { li:hover {
background-color: $tainacan-input-background; background-color: $gray2;
.action-icon{ .action-icon{
visibility: visible; visibility: visible;
@ -255,7 +255,7 @@ export default {
display: none; display: none;
} }
.process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right { .process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right {
color: $gray !important; color: $gray3 !important;
} }
} }
@ -280,7 +280,7 @@ export default {
} }
.mdi-menu-left, .mdi-menu-right { .mdi-menu-left, .mdi-menu-right {
color: $primary-light; color: $turquoise2;
} }
} }
.action-icon { .action-icon {
@ -301,7 +301,7 @@ export default {
overflow: hidden; overflow: hidden;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
font-size: 0.625rem; font-size: 0.625rem;
color: $gray-light; color: $gray4;
animation-name: expand; animation-name: expand;
animation-duration: 0.3s; animation-duration: 0.3s;
} }
@ -318,7 +318,7 @@ export default {
border-style: solid; border-style: solid;
} }
&:before { &:before {
border-color: transparent transparent $primary-light transparent; border-color: transparent transparent $turquoise2 transparent;
border-right-width: 8px; border-right-width: 8px;
border-bottom-width: 8px; border-bottom-width: 8px;
border-left-width: 8px; border-left-width: 8px;

2
src/admin/pages/lists/available-importers-page.vue
View File

@ -66,7 +66,7 @@ export default {
flex: wrap; flex: wrap;
.importer-type { .importer-type {
border: 1px solid $tainacan-input-background; border: 1px solid $gray2;
padding: 15px; padding: 15px;
margin: 20px; margin: 20px;
cursor: pointer; cursor: pointer;

2
src/admin/pages/lists/collections-page.vue
View File

@ -87,7 +87,7 @@
v-if="status == undefined || status == ''" v-if="status == undefined || status == ''"
id="button-create-collection" id="button-create-collection"
tag="button" tag="button"
class="button is-primary" class="button is-secondary"
:to="{ path: $routerHelper.getNewCollectionPath() }"> :to="{ path: $routerHelper.getNewCollectionPath() }">
{{ $i18n.getFrom('collections', 'new_item') }} {{ $i18n.getFrom('collections', 'new_item') }}
</router-link> </router-link>

16
src/admin/pages/lists/items-page.vue
View File

@ -548,7 +548,7 @@
v-if="!hasFiltered && (status == undefined || status == '')" v-if="!hasFiltered && (status == undefined || status == '')"
id="button-create-item" id="button-create-item"
tag="button" tag="button"
class="button is-primary" class="button is-secondary"
:to="{ path: $routerHelper.getNewItemPath(collectionId) }"> :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
{{ $i18n.getFrom('items', 'add_new') }} {{ $i18n.getFrom('items', 'add_new') }}
</router-link> </router-link>
@ -1033,7 +1033,7 @@
h1 { h1 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1050,7 +1050,7 @@
h1 { h1 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
@ -1119,7 +1119,7 @@
.icon { .icon {
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
color: $tertiary; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 18px !important;
height: 2rem !important; height: 2rem !important;
@ -1151,8 +1151,8 @@
height: 21px; height: 21px;
width: 23px; width: 23px;
border: none; border: none;
background-color: $primary-lighter; background-color: $turquoise1;
color: $tertiary; color: $blue5;
padding: 0; padding: 0;
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
@ -1204,7 +1204,7 @@
} }
.gray-icon, .gray-icon .icon { .gray-icon, .gray-icon .icon {
color: $tainacan-placeholder-color !important; color: $gray4 !important;
padding-right: 10px; padding-right: 10px;
} }
.gray-icon .icon i::before, .gray-icon i::before { .gray-icon .icon i::before, .gray-icon i::before {
@ -1254,7 +1254,7 @@
.icon { .icon {
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
color: $tertiary; color: $blue5;
height: 27px; height: 27px;
font-size: 18px !important; font-size: 18px !important;
height: 2rem !important; height: 2rem !important;

2
src/admin/pages/lists/taxonomies-page.vue
View File

@ -58,7 +58,7 @@
v-if="status == undefined || status == ''" v-if="status == undefined || status == ''"
id="button-create-taxonomy" id="button-create-taxonomy"
tag="button" tag="button"
class="button is-primary" class="button is-secondary"
:to="{ path: $routerHelper.getNewTaxonomyPath() }"> :to="{ path: $routerHelper.getNewTaxonomyPath() }">
{{ $i18n.getFrom('taxonomies', 'new_item') }} {{ $i18n.getFrom('taxonomies', 'new_item') }}
</router-link> </router-link>

18
src/admin/pages/singles/item-page.vue
View File

@ -273,7 +273,7 @@
height: 36px; height: 36px;
width: 36px; width: 36px;
border: none; border: none;
background-color: $tainacan-input-background; background-color: $gray2;
color: $secondary; color: $secondary;
padding: 0px; padding: 0px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
@ -333,7 +333,7 @@
} }
.field { .field {
border-bottom: 1px solid $draggable-border-color; border-bottom: 1px solid $gray2;
padding: 10px 25px; padding: 10px 25px;
.label { .label {
@ -352,7 +352,7 @@
label { label {
font-size: 16px !important; font-size: 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $tertiary !important; color: $blue5 !important;
line-height: 1.2em; line-height: 1.2em;
} }
} }
@ -381,11 +381,11 @@
height: 72px; height: 72px;
width: 72px; width: 72px;
border: none; border: none;
background-color: $tainacan-input-background; background-color: $gray2;
color: $secondary; color: $secondary;
margin-bottom: 6px; margin-bottom: 6px;
&:hover { &:hover {
background-color: $primary-light; background-color: $turquoise2;
cursor: pointer; cursor: pointer;
} }
} }
@ -404,12 +404,12 @@
.icon { .icon {
font-size: 18px !important; font-size: 18px !important;
color: $gray; color: $gray3;
} }
} }
} }
.section-attachments { .section-attachments {
border: 1px solid $draggable-border-color; border: 1px solid $gray2;
height: 250px; height: 250px;
max-width: 100%; max-width: 100%;
resize: vertical; resize: vertical;
@ -443,7 +443,7 @@
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
color: gray; color: $gray4;
top: 70px; top: 70px;
max-width: 90px; max-width: 90px;
} }
@ -454,7 +454,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
z-index: 999999; z-index: 999999;
background-color: $primary-lighter; background-color: $turquoise1;
width: 100%; width: 100%;
height: 65px; height: 65px;

8
src/admin/scss/_buttons.scss
View File

@ -14,7 +14,7 @@
background: $secondary !important; background: $secondary !important;
} }
&.is-primary:hover, &.is-primary:focus { &.is-primary:hover, &.is-primary:focus {
background: $primary !important; background: $turquoise3 !important;
} }
&.is-success:hover, &.is-success:focus { &.is-success:hover, &.is-success:focus {
background: $success !important; background: $success !important;
@ -29,7 +29,7 @@
&.is-outlined { &.is-outlined {
color: #150e38 !important; color: #150e38 !important;
background-color: white !important; background-color: white !important;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
&:focus { &:focus {
outline: 0px; outline: 0px;
@ -37,8 +37,8 @@
&[disabled], &:hover[disabled] { &[disabled], &:hover[disabled] {
border: none !important; border: none !important;
cursor: not-allowed !important; cursor: not-allowed !important;
color: $gray-light !important; color: $gray4 !important;
background-color: $tainacan-input-background !important; background-color: $gray2 !important;
} }
&.is-white[disabled] { &.is-white[disabled] {
background-color: white !important; background-color: white !important;

6
src/admin/scss/_checkboxes.scss
View File

@ -10,7 +10,7 @@
flex-shrink: 0; flex-shrink: 0;
border-radius: 0; border-radius: 0;
display: inline-block; display: inline-block;
border: 1px solid $gray-light; border: 1px solid $gray4;
transition: background 150ms ease-out; transition: background 150ms ease-out;
box-shadow: none !important; box-shadow: none !important;
} }
@ -19,10 +19,10 @@
&:active input[type="checkbox"] + .check, &:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check { &:hover input[type="checkbox"] + .check {
box-shadow: none !important; box-shadow: none !important;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
input[type="checkbox"]:checked + .check { input[type="checkbox"]:checked + .check {
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
} }

14
src/admin/scss/_dropdown-and-autocomplete.scss
View File

@ -28,9 +28,9 @@
label { margin-bottom: 0; } label { margin-bottom: 0; }
&.control { font-size: 13px !important; } &.control { font-size: 13px !important; }
.b-checkbox { width: 100% }; .b-checkbox { width: 100% };
&:hover { background-color: $primary-lighter; } &:hover { background-color: $turquoise1; }
.is-small { color: gray; } .is-small { color: $gray4; }
&.is-active { background-color: $primary-light; } &.is-active { background-color: $turquoise2; }
} }
} }
} }
@ -45,7 +45,7 @@
.input { margin-bottom: 0px !important; } .input { margin-bottom: 0px !important; }
.input.has-selected, .input:focus, .input:active { .input.has-selected, .input:focus, .input:active {
background-color: white; background-color: white;
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
} }
.tag { .tag {
background: white; background: white;
@ -53,7 +53,7 @@
padding-left: 0.5em; padding-left: 0.5em;
&.is-delete { &.is-delete {
color: $gray-light; color: $gray4;
&::after { &::after {
height: 30% !important; height: 30% !important;
width: 1px !important; width: 1px !important;
@ -71,7 +71,7 @@
} }
.selected-list-box { .selected-list-box {
padding: 4px 0px; padding: 4px 0px;
border: 1px solid $tainacan-input-background; border: 1px solid $gray2;
background-color: white; background-color: white;
display: flex; display: flex;
font-size: 12px; font-size: 12px;
@ -85,7 +85,7 @@
padding-left: 0.5em; padding-left: 0.5em;
&.is-delete { &.is-delete {
color: $gray-light; color: $gray4;
&::after { &::after {
height: 30% !important; height: 30% !important;
width: 1px !important; width: 1px !important;

6
src/admin/scss/_inputs.scss
View File

@ -7,10 +7,10 @@
&:focus, &:active { &:focus, &:active {
box-shadow: none !important; box-shadow: none !important;
background-color: white; background-color: white;
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
} }
&[disabled] { &[disabled] {
color: $tainacan-placeholder-color; color: $gray4;
background-color: $tainacan-input-background; background-color: $gray2;
} }
} }

22
src/admin/scss/_modals.scss
View File

@ -7,7 +7,7 @@
h1, h2 { h1, h2 {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: $tertiary; color: $blue5;
display: inline-block; display: inline-block;
} }
a.back-link{ a.back-link{
@ -45,7 +45,7 @@
background-color: rgba(0, 0, 0, 0.70); background-color: rgba(0, 0, 0, 0.70);
} }
.modal-card { .modal-card {
background-color: $modal-backgound-color; background-color: $turquoise2;
color: $secondary; color: $secondary;
border-radius: 10px; border-radius: 10px;
flex-wrap: wrap; flex-wrap: wrap;
@ -54,7 +54,7 @@
margin: 0 auto !important; margin: 0 auto !important;
.modal-card-head, .modal-card-body, .modal-card-foot { .modal-card-head, .modal-card-body, .modal-card-foot {
background-color: $modal-backgound-color; background-color: $turquoise2;
color: $secondary; color: $secondary;
border: none; border: none;
padding-bottom: 12px; padding-bottom: 12px;
@ -102,8 +102,8 @@
} }
.button:not(.is-success) { .button:not(.is-success) {
background-color: white; background-color: white;
color: $tertiary; color: $blue5;
border: 1px solid $gray-light; border: 1px solid $gray4;
} }
} }
} }
@ -146,7 +146,7 @@
// h1, h2 { // h1, h2 {
// font-size: 20px; // font-size: 20px;
// font-weight: 500; // font-weight: 500;
// color: $tertiary; // color: $blue5;
// display: inline-block; // display: inline-block;
// margin-bottom: 3px; // margin-bottom: 3px;
// } // }
@ -158,7 +158,7 @@
// border-top: none; // border-top: none;
// border-left: none; // border-left: none;
// border-right: none; // border-right: none;
// border-bottom: 3px solid $primary; // border-bottom: 3px solid $turquoise3;
// } // }
// } // }
@ -179,11 +179,11 @@
// padding: 12px; // padding: 12px;
// } // }
// .attachment.details { // .attachment.details {
// box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $primary-light; // box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $turquoise2;
// } // }
// .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check { // .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
// background-color: $primary-light; // background-color: $turquoise2;
// box-shadow: 0 0 0 1px #fff,0 0 0 2px $primary-light; // box-shadow: 0 0 0 1px #fff,0 0 0 2px $turquoise2;
// } // }
// } // }
// .media-sidebar { // .media-sidebar {
@ -222,7 +222,7 @@
// cursor: default; // cursor: default;
// } // }
// .media-button.button-secondary { // .media-button.button-secondary {
// color: $tertiary; // color: $blue5;
// border-color: #999; // border-color: #999;
// background: white; // background: white;
// box-shadow: none; // box-shadow: none;

4
src/admin/scss/_notices.scss
View File

@ -4,8 +4,8 @@
box-shadow: none; box-shadow: none;
&.is-dark { &.is-dark {
background-color: $tainacan-input-background; background-color: $gray2;
color: $gray-light; color: $gray4;
} }
&.is-warning { &.is-warning {
background-color: #e7dede; background-color: #e7dede;

12
src/admin/scss/_pagination.scss
View File

@ -4,14 +4,14 @@
align-items: center; align-items: center;
font-size: 0.85em !important; font-size: 0.85em !important;
font-weight: normal !important; font-weight: normal !important;
border-top: 1px solid $gray; border-top: 1px solid $gray3;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-left: $page-side-padding; margin-left: $page-side-padding;
margin-right: $page-side-padding; margin-right: $page-side-padding;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
color: $gray-light; color: $gray4;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
flex-wrap: wrap; flex-wrap: wrap;
@ -41,7 +41,7 @@
.label { .label {
font-size: 1em !important; font-size: 1em !important;
font-weight: normal !important; font-weight: normal !important;
color: $gray-light; color: $gray4;
} }
} }
select { select {
@ -62,7 +62,7 @@
} }
a[disabled="disabled"] { a[disabled="disabled"] {
color: $gray-light; color: $gray4;
} }
.pagination-link, .pagination-previous, .pagination-next { .pagination-link, .pagination-previous, .pagination-next {
background-color: transparent; background-color: transparent;
@ -70,11 +70,11 @@
border: none; border: none;
} }
.pagination-link.is-current { .pagination-link.is-current {
color: $gray-light; color: $gray4;
} }
.pagination-link::after:not(:last-child) { .pagination-link::after:not(:last-child) {
content: ','; content: ',';
color: $gray-light; color: $gray4;
} }
.mdi-chevron-left::before { .mdi-chevron-left::before {
content: "\F40A"; content: "\F40A";

4
src/admin/scss/_radios.scss
View File

@ -3,7 +3,7 @@
input[type="radio"] + .check { input[type="radio"] + .check {
width: 13px !important; width: 13px !important;
height: 13px !important; height: 13px !important;
border: 1px solid $gray-light !important; border: 1px solid $gray4 !important;
} }
input[type="radio"] + .check::before { input[type="radio"] + .check::before {
background: black !important; background: black !important;
@ -16,7 +16,7 @@
box-shadow: none !important; box-shadow: none !important;
} }
input[type="radio"]:checked + .check { input[type="radio"]:checked + .check {
border-color: $gray-light !important; border-color: $gray4 !important;
} }
&:focus input[type="radio"]:checked + .check { &:focus input[type="radio"]:checked + .check {
box-shadow: none !important; box-shadow: none !important;

2
src/admin/scss/_selects.scss
View File

@ -11,7 +11,7 @@
margin-bottom: 0px !important; margin-bottom: 0px !important;
color: $tainacan-input-color; color: $tainacan-input-color;
option:checked, option:hover { option:checked, option:hover {
background-color: $primary-lighter !important; background-color: $turquoise1 !important;
} }
&:focus, &:active { &:focus, &:active {
box-shadow: none !important; box-shadow: none !important;

10
src/admin/scss/_switches.scss
View File

@ -1,8 +1,8 @@
.switch { .switch {
input[type="checkbox"] + .check { input[type="checkbox"] + .check {
background-color: $gray-light; background-color: $gray4;
border: 2px solid $gray-light; border: 2px solid $gray4;
width: 2.7em; width: 2.7em;
height: 1.7em; height: 1.7em;
transition: none; transition: none;
@ -13,7 +13,7 @@
} }
} }
&:hover input[type="checkbox"]:checked + .check { &:hover input[type="checkbox"]:checked + .check {
background-color: $primary-light; background-color: $turquoise2;
} }
input[type="checkbox"]:checked + .check { input[type="checkbox"]:checked + .check {
@ -26,7 +26,7 @@
} }
} }
&:hover input[type="checkbox"] + .check { &:hover input[type="checkbox"] + .check {
background-color: $gray-light; background-color: $gray4;
} }
&:focus input[type="checkbox"] + .check, &:focus input[type="checkbox"] + .check,
@ -38,7 +38,7 @@
font-size: 9px; font-size: 9px;
input[type="checkbox"] + .check { input[type="checkbox"] + .check {
border: 1.5px solid $gray-light; border: 1.5px solid $gray4;
width: 2.55em; width: 2.55em;
height: 1.7em; height: 1.7em;

26
src/admin/scss/_tables.scss
View File

@ -45,7 +45,7 @@
} }
// Only to be used in case we can implement Column resizing // Only to be used in case we can implement Column resizing
// th:not(:last-child) { // th:not(:last-child) {
// border-right: 1px solid $tainacan-input-background !important; // border-right: 1px solid $gray2 !important;
// } // }
.thumbnail-cell { .thumbnail-cell {
@ -57,7 +57,7 @@
min-width: 80px; min-width: 80px;
max-width: 80px; max-width: 80px;
p { p {
color: $gray-light; color: $gray4;
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
@ -66,7 +66,7 @@
min-width: 80px; min-width: 80px;
max-width: 160px; max-width: 160px;
p { p {
color: $gray-light; color: $gray4;
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
@ -75,7 +75,7 @@
min-width: 120px; min-width: 120px;
max-width: 200px; max-width: 200px;
p { p {
color: $gray-light; color: $gray4;
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
@ -84,7 +84,7 @@
min-width: 120px; min-width: 120px;
max-width: 240px; max-width: 240px;
p { p {
color: $gray-light; color: $gray4;
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
@ -109,7 +109,7 @@
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
background-color: white; background-color: white;
border-bottom: 1px solid $tainacan-input-background; border-bottom: 1px solid $gray2;
top: 0px; top: 0px;
z-index: 9; z-index: 9;
padding: 10px; padding: 10px;
@ -117,7 +117,7 @@
.th-wrap { .th-wrap {
font-size: 12px !important; font-size: 12px !important;
color: $gray-light; color: $gray4;
font-weight: normal !important; font-weight: normal !important;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
@ -130,9 +130,9 @@
background-color: transparent; background-color: transparent;
&.selected-row { &.selected-row {
background-color: $primary-lighter; background-color: $turquoise1;
.checkbox-cell .checkbox, .actions-cell .actions-container { .checkbox-cell .checkbox, .actions-cell .actions-container {
background-color: $primary-lighter-hover; background-color: $turquoise2;
} }
} }
td { td {
@ -187,21 +187,21 @@
} }
&:hover { &:hover {
background-color: $tainacan-input-background !important; background-color: $gray1 !important;
cursor: pointer; cursor: pointer;
.checkbox-cell { .checkbox-cell {
position: sticky !important; position: sticky !important;
position: -webkit-sticky !important; position: -webkit-sticky !important;
background-color: $gray-hover; background-color: $gray2;
.checkbox { .checkbox {
background-color: $gray-hover !important; background-color: $gray2 !important;
} }
} }
.actions-cell { .actions-cell {
.actions-container { .actions-container {
background: $gray-hover !important; background: $gray2 !important;
} }
} }

4
src/admin/scss/_tabs.scss
View File

@ -9,7 +9,7 @@
} }
} }
li.is-active a { li.is-active a {
border-bottom: 5px solid $primary; border-bottom: 5px solid $turquoise5;
color: $primary; color: $turquoise5;
} }
} }

4
src/admin/scss/_tags.scss
View File

@ -1,5 +1,5 @@
.tags { .tags {
border: solid 1px $tainacan-input-background !important; border: solid 1px $gray2 !important;
border-radius: 20px; border-radius: 20px;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-bottom: 0.375rem !important; margin-bottom: 0.375rem !important;
@ -8,7 +8,7 @@
overflow: hidden; overflow: hidden;
&:hover{ &:hover{
background-color: $tainacan-input-background; background-color: $gray2;
} }
.tag { .tag {

10
src/admin/scss/_tainacan-form.scss
View File

@ -25,14 +25,14 @@
overflow: hidden; overflow: hidden;
} }
.required-metadatum-asterisk { .required-metadatum-asterisk {
color: $gray; color: $gray3;
&.is-danger { &.is-danger {
color: $danger; color: $danger;
} }
} }
.input, .textarea { .input, .textarea {
background-color: white; background-color: white;
border: 1px solid $tainacan-input-background; border: 1px solid $gray2;
color: $tainacan-input-color; color: $tainacan-input-color;
transition: background-color 0.1s; transition: background-color 0.1s;
@ -70,9 +70,9 @@
select { select {
color: $tainacan-input-color; color: $tainacan-input-color;
background-color: white !important; background-color: white !important;
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
&:focus>option:checked, &:focus>option:hover { &:focus>option:checked, &:focus>option:hover {
background-color: $primary-lighter !important; background-color: $turquoise1 !important;
} }
} }
} }
@ -82,7 +82,7 @@
.button { .button {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 2px 14px 2px 18px !important padding: 2px 14px 2px 18px !important
} }

6
src/admin/scss/_tooltips.scss
View File

@ -9,8 +9,8 @@
} }
.tooltip-inner { .tooltip-inner {
background: $primary-lighter; background: $turquoise1;
color: $gray-light; color: $gray4;
font-size: 11px; font-size: 11px;
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
@ -24,7 +24,7 @@
border-style: solid; border-style: solid;
position: absolute; position: absolute;
margin: 5px; margin: 5px;
border-color: $primary-lighter; border-color: $turquoise1;
z-index: 1; z-index: 1;
} }
&[x-placement^="top"] { &[x-placement^="top"] {

125
src/admin/scss/_variables.scss
View File

@ -2,38 +2,72 @@
@import "../../../node_modules/bulma/sass/utilities/initial-variables"; @import "../../../node_modules/bulma/sass/utilities/initial-variables";
@import "../../../node_modules/bulma/sass/utilities/functions"; @import "../../../node_modules/bulma/sass/utilities/functions";
// Tainacan custom colors // NEW TAINACAN CUSTOM COLORS ------------------
$primary: #2cb4c1; // Blue, used mainly for repository
$primary-invert: findColorInvert($primary); $blue1: #e6f4ff;
$secondary: #298596; $blue1-invert: findColorInvert($blue1);
$secondary-invert: findColorInvert($secondary); $blue2: #cce3f2;
$tertiary: #01295c; $blue2-invert: findColorInvert($blue2);
$tertiary-invert: findColorInvert($tertiary); $blue3: #44638e;
$blue3-invert: findColorInvert($blue3);
$primary-light:#c1dae0; $blue4: #284472;
$primary-lighter: #e6f6f8; $blue4-invert: findColorInvert($blue4);
$primary-lighter-hover: #d1e6e6; $blue5: #01295c;
$primary-dark: #55A0AF; $blue5-invert: findColorInvert($blue5);
$primary-darker: darken($primary-dark, 5%); // Turquoise, used mainly for collection level
$turquoise1: #e6f6f8;
$success: #25a189; $turquoise1-invert: findColorInvert($turquoise1);
$success-invert: findColorInvert($success); $turquoise2: #ceedef;
$turquoise2-invert: findColorInvert($turquoise2);
$modal-backgound-color: #bfd8dd; $turquoise3: #76c6cc;
$separator-color: #2b98a4; $turquoise3-invert: findColorInvert($turquoise3);
$turquoise4: #4ea2ad;
$turquoise4-invert: findColorInvert($turquoise4);
$turquoise5: #298596;
$turquoise5-invert: findColorInvert($turquoise5);
// Gray, used mostyl for information
$gray1: #f2f2f2;
$gray1-invert: findColorInvert($gray1);
$gray2: #dbdbdb;
$gray2-invert: findColorInvert($gray2);
$gray3: #cbcbcb;
$gray3-invert: findColorInvert($gray3);
$gray4: #898d8f;
$gray4-invert: findColorInvert($gray4);
$gray5: #454647;
$gray5-invert: findColorInvert($gray5);
// Red, used for error messages
$red1: #eadadc;
$red1-invert: findColorInvert($red1);
$red2: #a23939;
$red2-invert: findColorInvert($red2);
// Green, used for success buttons
$green1: #daece6;
$green1-invert: findColorInvert($green1);
$green2: #25a189;
$green2-invert: findColorInvert($green2);
// Warning, used for warning messages
$yellow1: #fcebd9;
$yellow1-invert: findColorInvert($yellow1);
$yellow2: #e69810;
$yellow2-invert: findColorInvert($yellow2);
// Text, no quite black
$tainacan-input-color: #1d1d1d; $tainacan-input-color: #1d1d1d;
$tainacan-input-background: #e5e5e5;
$tainacan-placeholder-color: #898d8f;
$draggable-border-color: #d8d8d8;
$gray-hover: #dcdcdc;
$gray: #b1b1b1;
$gray-invert: findColorInvert($gray);
$gray-light: #898d8f;
$gray-light-invert: findColorInvert($gray-light);
$danger: #a23939; // Maps some of bulma's colors to custom variables
$primary: $turquoise3;
$primary-invert: findColorInvert($turquoise3);
$secondary: $turquoise5;
$secondary-invert: findColorInvert($turquoise5);
$success: $green2;
$success-invert: findColorInvert($success);
$danger: $red2;
$danger-invert: findColorInvert($danger); $danger-invert: findColorInvert($danger);
$warning: $yellow2;
$warning-invert: findColorInvert($warning);
$gray: $gray4;
$gray-invert: findColorInvert($gray4);
@import "../../../node_modules/bulma/sass/utilities/derived-variables.sass"; @import "../../../node_modules/bulma/sass/utilities/derived-variables.sass";
@ -43,17 +77,36 @@ $colors: (
"black": ($black, $white), "black": ($black, $white),
"light": ($light, $light-invert), "light": ($light, $light-invert),
"dark": ($dark, $dark-invert), "dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert), "primary": ($turquoise3, $turquoise3-invert),
"secondary": ($secondary, $secondary-invert), "secondary": ($turquoise5, $turquoise5-invert),
"info": ($info, $info-invert), "info": ($info, $info-invert),
"success": ($success, $success-invert), "success": ($success, $success-invert),
"warning": ($warning, $warning-invert), "warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert) "danger": ($danger, $danger-invert)
); );
$addColors: ( $addColors: (
"gray": ($gray, $gray-invert), "gray": ($gray4, $gray-invert),
"gray-light": ($gray-light, $gray-light-invert), "blue1": ($blue1, $blue1-invert),
"tertiary": ($tertiary, $tertiary-invert), "blue2": ($blue2, $blue2-invert),
"blue3": ($blue3, $blue3-invert),
"blue4": ($blue4, $blue4-invert),
"blue5": ($blue5, $blue5-invert),
"turquoise1": ($turquoise1, $turquoise1-invert),
"turquoise2": ($turquoise2, $turquoise2-invert),
"turquoise3": ($turquoise3, $turquoise3-invert),
"turquoise4": ($turquoise4, $turquoise4-invert),
"turquoise5": ($turquoise5, $turquoise5-invert),
"gray1": ($gray1, $gray1-invert),
"gray2": ($gray2, $gray2-invert),
"gray3": ($gray3, $gray3-invert),
"gray4": ($gray4, $gray4-invert),
"gray5": ($gray5, $gray5-invert),
"red1": ($red1, $red1-invert),
"red2": ($red2, $red2-invert),
"green1": ($green1, $green1-invert),
"green2": ($green2, $green2-invert),
"yellow1": ($yellow1, $yellow1-invert),
"yellow2": ($yellow2, $yellow2-invert)
); );
$colors: map-merge($colors, $addColors); $colors: map-merge($colors, $addColors);
@ -84,13 +137,13 @@ $link-invert: $secondary;
$link-focus-border: $secondary; $link-focus-border: $secondary;
// Placeholder // Placeholder
$text-light: $tainacan-placeholder-color; $text-light: $gray4;
// Table // Table
$table-head-cell-color: $gray-light; $table-head-cell-color: $gray4;
$table-head-cell-border-width: 0 0 1px !important; $table-head-cell-border-width: 0 0 1px !important;
$table-row-active-color: #e5e5e5; $table-row-active-color: #e5e5e5;
$table-foot-cell-color: $gray-light; $table-foot-cell-color: $gray4;
$table-foot-cell-border-width: 1px 0 0 !important; $table-foot-cell-border-width: 1px 0 0 !important;
$table-cell-padding: 1.0em 0.75em; $table-cell-padding: 1.0em 0.75em;

12
src/admin/scss/_view-mode-cards.scss
View File

@ -8,9 +8,9 @@
justify-content: center; justify-content: center;
.selected-card { .selected-card {
background-color: $primary-lighter; background-color: $turquoise1;
.metadata-title { .metadata-title {
background-color: $primary-lighter-hover; background-color: $turquoise2;
} }
} }
@ -29,7 +29,7 @@
} }
&:hover { &:hover {
background-color: $tainacan-input-background !important; background-color: $gray2 !important;
} }
.card-checkbox { .card-checkbox {
@ -56,7 +56,7 @@
.card-line { .card-line {
height: 1px; height: 1px;
background-color: $tainacan-input-background; background-color: $gray2;
margin-left: -44px; margin-left: -44px;
margin-right: -44px; margin-right: -44px;
opacity: 0; opacity: 0;
@ -87,7 +87,7 @@
} }
} }
&:hover .metadata-title { &:hover .metadata-title {
background-color: $gray-hover !important; background-color: $gray3 !important;
} }
.media { .media {
@ -97,7 +97,7 @@
padding: 0.75rem 1.375rem; padding: 0.75rem 1.375rem;
flex: 1; flex: 1;
font-size: 0.6875rem; font-size: 0.6875rem;
color: gray; color: $gray4;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 172px; height: 172px;

8
src/admin/scss/_view-mode-grid.scss
View File

@ -8,7 +8,7 @@
justify-content: center; justify-content: center;
.selected-grid-item { .selected-grid-item {
background-color: $primary-lighter; background-color: $turquoise1;
} }
.tainacan-grid-item { .tainacan-grid-item {
@ -18,7 +18,7 @@
text-align: center; text-align: center;
&:hover { &:hover {
background-color: $tainacan-input-background; background-color: $gray2;
} }
.grid-item-checkbox { .grid-item-checkbox {
@ -37,7 +37,7 @@
padding: 8px; padding: 8px;
transition: visibility 0.2s, opacity 0.2s; transition: visibility 0.2s, opacity 0.2s;
margin-top: -43px; margin-top: -43px;
background-color: $tainacan-input-background; background-color: $gray2;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
@ -51,7 +51,7 @@
} }
&.selected-grid-item { &.selected-grid-item {
.actions-area { .actions-area {
background-color: $primary-lighter; background-color: $turquoise1;
} }
} }

14
src/admin/scss/_view-mode-records.scss
View File

@ -8,9 +8,9 @@
justify-content: center; justify-content: center;
.selected-record { .selected-record {
background-color: $primary-lighter; background-color: $turquoise1;
.metadata-title { .metadata-title {
background-color: $primary-lighter-hover; background-color: $turquoise2;
} }
} }
@ -29,7 +29,7 @@
} }
&:hover { &:hover {
background-color: $tainacan-input-background !important; background-color: $gray2 !important;
} }
.record-checkbox { .record-checkbox {
@ -56,7 +56,7 @@
.record-line { .record-line {
height: 1px; height: 1px;
background-color: $tainacan-input-background; background-color: $gray2;
margin-left: -44px; margin-left: -44px;
margin-right: -44px; margin-right: -44px;
opacity: 0; opacity: 0;
@ -87,7 +87,7 @@
} }
} }
&:hover .metadata-title { &:hover .metadata-title {
background-color: $gray-hover !important; background-color: $gray3 !important;
} }
.media { .media {
@ -97,7 +97,7 @@
padding: 0.75rem 1.375rem; padding: 0.75rem 1.375rem;
flex: 1; flex: 1;
font-size: 0.6875rem; font-size: 0.6875rem;
color: gray; color: $gray4;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -108,7 +108,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-weight: 500; font-weight: 500;
color: $gray-light; color: $gray4;
} }
.metadata-value { .metadata-value {

4
src/admin/scss/tainacan-admin.scss
View File

@ -56,10 +56,10 @@ a:hover {
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
color: $tainacan-input-background !important; color: $gray2 !important;
.icon { .icon {
color: $tainacan-input-background !important; color: $gray2 !important;
} }
} }
} }

24
src/admin/theme-items-list.vue
View File

@ -70,7 +70,7 @@ export default {
background: $secondary !important; background: $secondary !important;
} }
&.is-primary:hover, &.is-primary:focus { &.is-primary:hover, &.is-primary:focus {
background: $primary !important; background: $turquoise3 !important;
} }
&.is-success:hover, &.is-success:focus { &.is-success:hover, &.is-success:focus {
background: $success !important; background: $success !important;
@ -85,7 +85,7 @@ export default {
&.is-outlined { &.is-outlined {
color: #150e38 !important; color: #150e38 !important;
background-color: white; background-color: white;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
&:focus { &:focus {
outline: 0px; outline: 0px;
@ -102,7 +102,7 @@ export default {
} }
.input, .textarea { .input, .textarea {
font-size: 14px; font-size: 14px;
border: 1px solid $tainacan-input-background; border: 1px solid $gray2;
border-radius: 1px !important; border-radius: 1px !important;
background-color: white; background-color: white;
box-shadow: none !important; box-shadow: none !important;
@ -110,7 +110,7 @@ export default {
&:focus, &:active { &:focus, &:active {
box-shadow: none !important; box-shadow: none !important;
background-color: white; background-color: white;
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
} }
} }
.dropdown { .dropdown {
@ -134,7 +134,7 @@ export default {
height: 1.0em; height: 1.0em;
flex-shrink: 0; flex-shrink: 0;
border-radius: 0; border-radius: 0;
border: 1px solid $gray-light; border: 1px solid $gray4;
transition: background 150ms ease-out; transition: background 150ms ease-out;
box-shadow: none !important; box-shadow: none !important;
} }
@ -143,11 +143,11 @@ export default {
&:active input[type="checkbox"] + .check, &:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check { &:hover input[type="checkbox"] + .check {
box-shadow: none !important; box-shadow: none !important;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
input[type="checkbox"]:checked + .check { input[type="checkbox"]:checked + .check {
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
border-color: $gray-light !important; border-color: $gray4 !important;
} }
} }
.b-radio.radio { .b-radio.radio {
@ -155,7 +155,7 @@ export default {
input[type="radio"] + .check { input[type="radio"] + .check {
width: 13px !important; width: 13px !important;
height: 13px !important; height: 13px !important;
border: 1px solid $gray-light !important; border: 1px solid $gray4 !important;
} }
input[type="radio"] + .check::before { input[type="radio"] + .check::before {
background: black !important; background: black !important;
@ -168,7 +168,7 @@ export default {
box-shadow: none !important; box-shadow: none !important;
} }
input[type="radio"]:checked + .check { input[type="radio"]:checked + .check {
border-color: $gray-light !important; border-color: $gray4 !important;
} }
&:focus input[type="radio"]:checked + .check { &:focus input[type="radio"]:checked + .check {
box-shadow: none !important; box-shadow: none !important;
@ -197,8 +197,8 @@ export default {
} }
} }
li.is-active a { li.is-active a {
border-bottom: 5px solid $primary; border-bottom: 5px solid $turquoise3;
color: $primary; color: $turquoise3;
} }
} }
@ -237,7 +237,7 @@ export default {
.search-control { .search-control {
.gray-icon, .gray-icon .icon { .gray-icon, .gray-icon .icon {
color: $tainacan-placeholder-color !important; color: $gray4 !important;
i::before { i::before {
font-size: 21px; font-size: 21px;
} }

4
src/classes/filter-types/tainacan-filter-item.vue
View File

@ -196,7 +196,7 @@
transform: none; transform: none;
margin-top: -0.6em; margin-top: -0.6em;
right: 0.95em; right: 0.95em;
color: $primary; color: $turquoise3;
} }
} }
@ -221,7 +221,7 @@
border: none !important; border: none !important;
} }
input, input:active, input:focus { input, input:active, input:focus {
border: 1px solid $tainacan-input-background !important; border: 1px solid $gray2 !important;
} }
.control.has-icons-left .icon { .control.has-icons-left .icon {
top: 0px !important; top: 0px !important;

4
src/classes/metadata-types/tainacan-form-item.vue
View File

@ -218,7 +218,7 @@
} }
.field { .field {
border-bottom: 1px solid $draggable-border-color; border-bottom: 1px solid $gray2;
padding: 10px 25px; padding: 10px 25px;
.label { .label {
@ -230,7 +230,7 @@
.metadata-type { .metadata-type {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: $gray; color: $gray3;
top: -0.2em; top: -0.2em;
position: relative; position: relative;
} }

12
src/theme-helper/view-mode-cards.vue
View File

@ -99,13 +99,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$primary-lighter: #e6f6f8; $turquoise1: #e6f6f8;
$primary-lighter-hover: #d1e6e6; $turquoise2: #d1e6e6;
$tainacan-input-color: #1d1d1d; $tainacan-input-color: #1d1d1d;
$tainacan-input-background: #e5e5e5; $gray2: #e5e5e5;
$tainacan-placeholder-color: #898d8f; $gray4: #898d8f;
$gray-hover: #dcdcdc; $gray3: #dcdcdc;
$gray-light: #898d8f; $gray4: #898d8f;
@import "../../src/admin/scss/_view-mode-cards.scss"; @import "../../src/admin/scss/_view-mode-cards.scss";

12
src/theme-helper/view-mode-records.vue
View File

@ -96,13 +96,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$primary-lighter: #e6f6f8; $turquoise1: #e6f6f8;
$primary-lighter-hover: #d1e6e6; $turquoise2: #d1e6e6;
$tainacan-input-color: #1d1d1d; $tainacan-input-color: #1d1d1d;
$tainacan-input-background: #e5e5e5; $gray2: #e5e5e5;
$tainacan-placeholder-color: #898d8f; $gray4: #898d8f;
$gray-hover: #dcdcdc; $gray3: #dcdcdc;
$gray-light: #898d8f; $gray4: #898d8f;
@import "../../src/admin/scss/_view-mode-records.scss"; @import "../../src/admin/scss/_view-mode-records.scss";