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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -10,7 +10,7 @@
flex-shrink: 0;
border-radius: 0;
display: inline-block;
border: 1px solid $gray-light;
border: 1px solid $gray4;
transition: background 150ms ease-out;
box-shadow: none !important;
}
@ -19,10 +19,10 @@
&:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check {
box-shadow: none !important;
border-color: $gray-light !important;
border-color: $gray4 !important;
}
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;
border-color: $gray-light !important;
border-color: $gray4 !important;
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,38 +2,72 @@
@import "../../../node_modules/bulma/sass/utilities/initial-variables";
@import "../../../node_modules/bulma/sass/utilities/functions";
// Tainacan custom colors
$primary: #2cb4c1;
$primary-invert: findColorInvert($primary);
$secondary: #298596;
$secondary-invert: findColorInvert($secondary);
$tertiary: #01295c;
$tertiary-invert: findColorInvert($tertiary);
$primary-light:#c1dae0;
$primary-lighter: #e6f6f8;
$primary-lighter-hover: #d1e6e6;
$primary-dark: #55A0AF;
$primary-darker: darken($primary-dark, 5%);
$success: #25a189;
$success-invert: findColorInvert($success);
$modal-backgound-color: #bfd8dd;
$separator-color: #2b98a4;
// NEW TAINACAN CUSTOM COLORS ------------------
// Blue, used mainly for repository
$blue1: #e6f4ff;
$blue1-invert: findColorInvert($blue1);
$blue2: #cce3f2;
$blue2-invert: findColorInvert($blue2);
$blue3: #44638e;
$blue3-invert: findColorInvert($blue3);
$blue4: #284472;
$blue4-invert: findColorInvert($blue4);
$blue5: #01295c;
$blue5-invert: findColorInvert($blue5);
// Turquoise, used mainly for collection level
$turquoise1: #e6f6f8;
$turquoise1-invert: findColorInvert($turquoise1);
$turquoise2: #ceedef;
$turquoise2-invert: findColorInvert($turquoise2);
$turquoise3: #76c6cc;
$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-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);
$warning: $yellow2;
$warning-invert: findColorInvert($warning);
$gray: $gray4;
$gray-invert: findColorInvert($gray4);
@import "../../../node_modules/bulma/sass/utilities/derived-variables.sass";
@ -43,17 +77,36 @@ $colors: (
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"secondary": ($secondary, $secondary-invert),
"primary": ($turquoise3, $turquoise3-invert),
"secondary": ($turquoise5, $turquoise5-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert)
);
$addColors: (
"gray": ($gray, $gray-invert),
"gray-light": ($gray-light, $gray-light-invert),
"tertiary": ($tertiary, $tertiary-invert),
"gray": ($gray4, $gray-invert),
"blue1": ($blue1, $blue1-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);
@ -84,13 +137,13 @@ $link-invert: $secondary;
$link-focus-border: $secondary;
// Placeholder
$text-light: $tainacan-placeholder-color;
$text-light: $gray4;
// Table
$table-head-cell-color: $gray-light;
$table-head-cell-color: $gray4;
$table-head-cell-border-width: 0 0 1px !important;
$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-cell-padding: 1.0em 0.75em;

View File

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

View File

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

View File

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

View File

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

View File

@ -70,7 +70,7 @@ export default {
background: $secondary !important;
}
&.is-primary:hover, &.is-primary:focus {
background: $primary !important;
background: $turquoise3 !important;
}
&.is-success:hover, &.is-success:focus {
background: $success !important;
@ -85,7 +85,7 @@ export default {
&.is-outlined {
color: #150e38 !important;
background-color: white;
border-color: $gray-light !important;
border-color: $gray4 !important;
}
&:focus {
outline: 0px;
@ -102,7 +102,7 @@ export default {
}
.input, .textarea {
font-size: 14px;
border: 1px solid $tainacan-input-background;
border: 1px solid $gray2;
border-radius: 1px !important;
background-color: white;
box-shadow: none !important;
@ -110,7 +110,7 @@ export default {
&:focus, &:active {
box-shadow: none !important;
background-color: white;
border: 1px solid $tainacan-input-background !important;
border: 1px solid $gray2 !important;
}
}
.dropdown {
@ -134,7 +134,7 @@ export default {
height: 1.0em;
flex-shrink: 0;
border-radius: 0;
border: 1px solid $gray-light;
border: 1px solid $gray4;
transition: background 150ms ease-out;
box-shadow: none !important;
}
@ -143,11 +143,11 @@ export default {
&:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check {
box-shadow: none !important;
border-color: $gray-light !important;
border-color: $gray4 !important;
}
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;
border-color: $gray-light !important;
border-color: $gray4 !important;
}
}
.b-radio.radio {
@ -155,7 +155,7 @@ export default {
input[type="radio"] + .check {
width: 13px !important;
height: 13px !important;
border: 1px solid $gray-light !important;
border: 1px solid $gray4 !important;
}
input[type="radio"] + .check::before {
background: black !important;
@ -168,7 +168,7 @@ export default {
box-shadow: none !important;
}
input[type="radio"]:checked + .check {
border-color: $gray-light !important;
border-color: $gray4 !important;
}
&:focus input[type="radio"]:checked + .check {
box-shadow: none !important;
@ -197,8 +197,8 @@ export default {
}
}
li.is-active a {
border-bottom: 5px solid $primary;
color: $primary;
border-bottom: 5px solid $turquoise3;
color: $turquoise3;
}
}
@ -237,7 +237,7 @@ export default {
.search-control {
.gray-icon, .gray-icon .icon {
color: $tainacan-placeholder-color !important;
color: $gray4 !important;
i::before {
font-size: 21px;
}

View File

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

View File

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

View File

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

View File

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