diff --git a/css/apps/files.scss b/css/apps/files.scss index 1566636..9f139f1 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -365,6 +365,16 @@ table.files-filestable { #app-content-vue { + + // Override favorite marker stroke color + .favorite-marker-icon svg { + color: var(--color-favorite) !important; + + path{ + stroke: var(--color-favorite) !important; + } + } + .files-list__header { margin-block: 0.8rem; margin-inline: 2.5rem; @@ -630,12 +640,12 @@ table.files-filestable { &.folder-icon, &.folder-open-icon { - width: 45px; - height: 36px; + width: 150px; + height: 120px; svg { - width: 45px; - height: 36px; + width: 150px; + height: 120px; color: var(--nmc-ods-blue-active); path { @@ -719,6 +729,7 @@ table.files-filestable { } } + img { overflow: hidden; width: var(--icon-preview-size) !important; @@ -1033,52 +1044,70 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; + transition: all 0.15s ease-in-out; .button-vue__icon { background-image: var(--icon-shared-dark); background-size: 16px 16px; width: 16px; height: 16px; + transition: filter 0.15s ease-in-out; } - &.button-vue--icon-and-text { - border-color: var(--nmc-ods-blue-primary); - background-color: var(--nmc-ods-blue-primary); + .button-vue__text { + transition: color 0.15s ease-in-out; } - &:hover { + // Active/existing share state - when file is shared + &.active, + &[aria-pressed="true"], + &.button-vue--icon-and-text { border: none; - background-color: var(--nmc-ods-blue-active); + background-color: var(--nmc-ods-blue-primary) !important; .button-vue__icon { filter: brightness(0); } + .button-vue__text { + color: var(--nmc-color-text-and-icon-black); + } + [data-themes*=dark] & { - background-color: var(--nmc-ods-blue-hover); + .button-vue__icon { + filter: brightness(0); + } } } - &:active { + &.button-vue--icon-and-text { + border-color: var(--nmc-ods-blue-primary); + background-color: var(--nmc-ods-blue-primary); + } + + &:hover { border: none; - background-color: var(--nmc-ods-blue-pressed); + background-color: var(--nmc-ods-blue-active); .button-vue__icon { filter: brightness(0); } [data-themes*=dark] & { - .button-vue__icon { - filter: brightness(0); - } + background-color: var(--nmc-ods-blue-hover); } } - // Active/existing share state - &.active, - &[aria-pressed="true"] { + // When shared, maintain blue on hover with lighter shade + &.active:hover, + &[aria-pressed="true"]:hover, + &.button-vue--icon-and-text:hover { + background-color: var(--nmc-ods-blue-hover) !important; + } + + &:active { border: none; - background-color: var(--nmc-ods-blue-primary); + background-color: var(--nmc-ods-blue-pressed); .button-vue__icon { filter: brightness(0); @@ -1093,17 +1122,20 @@ table.files-filestable { &:focus, &:focus-visible { - border: none; - background-color: var(--nmc-ods-blue-primary); outline: 2px solid var(--color-main-text); outline-offset: 2px; - .button-vue__icon { - filter: brightness(0); + // Only apply blue bg on focus if not already shared + &:not(.active):not([aria-pressed="true"]):not(.button-vue--icon-and-text) { + border: none; + background-color: var(--nmc-ods-blue-primary); + + .button-vue__icon { + filter: brightness(0); + } } [data-themes*=dark] & { - .button-vue__icon { filter: brightness(0); } diff --git a/css/apps/sharing.scss b/css/apps/sharing.scss index 3dd1baa..9f8626c 100644 --- a/css/apps/sharing.scss +++ b/css/apps/sharing.scss @@ -366,6 +366,10 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { } } +.sharingPopup__or { + background-color:var(--color-main-background) !important; +} + .sharingPopup__success { padding: 1rem; diff --git a/css/components/ncselect.scss b/css/components/ncselect.scss index 3342a23..b332548 100644 --- a/css/components/ncselect.scss +++ b/css/components/ncselect.scss @@ -21,6 +21,7 @@ height: 2rem !important; margin: 6px 2px !important; min-height: 2rem !important; + background: var(--nmc-ods-blue-primary) !important; .option { font-size: 14px; @@ -30,6 +31,16 @@ display: none; } } + + &__lineone { + color: var(--nmc-color-text-and-icon-black) !important; + } + } + + .vs__deselect { + svg { + fill: var(--nmc-color-text-and-icon-black) !important; + } } } } diff --git a/css/nmcdefault.scss b/css/nmcdefault.scss index a527bf8..524f5a8 100644 --- a/css/nmcdefault.scss +++ b/css/nmcdefault.scss @@ -58,7 +58,7 @@ --color-border-success: var(--color-element-success); --color-text-error: var(--color-element-error); --color-text-success: var(--color-element-success); - --color-favorite: var(--colours-basic-background); + --color-favorite: #FFD43B; --color-loading-light: var(--mode-shades-neutral-shades-300); --color-loading-dark: var(--mode-shades-neutral-shades-700);