From 9dc29c025229d2712a396b8a61bdd2c03a6e8fa9 Mon Sep 17 00:00:00 2001 From: Zacharie Date: Thu, 9 Jul 2020 16:48:10 +0200 Subject: [PATCH] Design fix and clean css * Add a dark mode to the tag manager * Change design of the select number tag per page to correspond to the tag manager * Small design fixes * Clean and reorder css files --- admin/themes/clear/theme.css | 9 +- admin/themes/default/js/group_list.js | 2 +- admin/themes/default/js/tags.js | 22 +- .../default/template/batch_manager_global.tpl | 4 +- .../default/template/batch_manager_unit.tpl | 4 +- admin/themes/default/template/tags.tpl | 33 +- admin/themes/default/theme.css | 1155 ++++++++--------- admin/themes/roma/theme.css | 66 +- 8 files changed, 659 insertions(+), 636 deletions(-) diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index 4404748a1..aacedb035 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -279,6 +279,7 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;} #batchManagerGlobal fieldset { margin: 0; margin-top: 30px; + border: none; } /* beta-test ends */ @@ -722,15 +723,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; } #filterList .ui-slider .ui-slider-range {background: rgba(255,166,70, 0.9); margin-top: -1px; border: 1px solid #ffaf58;} #filterList .ui-widget-content {border: 1px solid #EEE; background: #DDD;} -.navigationBar, .thumbnailsActionsNumber, .navigationBar a, -.navigationBar span, .thumbnailsActionsNumber a, .thumbnailsActionsNumber span { +.navigationBar, .navigationBar a, +.navigationBar span { background-color: #f9f9f9; border-radius: 10px; } -.navigationBar a:hover, .thumbnailsActionsNumber a:hover {background-color: #ffd2a1;} +.navigationBar a:hover {background-color: #ffd2a1;} #batchManagerGlobal option[disabled] {background-color: #EEE;} .dimension-cancel {background-color: #F8F8F8 !important;} .pageNumberSelected {color: #FFF !important; font-weight: bold;} -.navigationBar span, .thumbnailsActionsNumber span { +.navigationBar span { color: #BBB; } #batchManagerGlobal .ui-state-default, #batchManagerGlobal .ui-widget-content .ui-state-default,#batchManagerGlobal .ui-widget-header .ui-state-default { diff --git a/admin/themes/default/js/group_list.js b/admin/themes/default/js/group_list.js index fd1e0ad68..65105978a 100644 --- a/admin/themes/default/js/group_list.js +++ b/admin/themes/default/js/group_list.js @@ -151,7 +151,7 @@ var setupGroupBox = function (groupBox) { groupBox.find(".Group-checkbox input[type='checkbox']").attr("checked", false) /* Display the option on the click on "..." */ - groupBox.find(".group-dropdown-options").click(function GroupOptions() { + groupBox.find(".dropdown-option").click(function GroupOptions() { $(this).find("#GroupOptions").toggle(); }); diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js index cd0dbed90..b18f55dea 100644 --- a/admin/themes/default/js/tags.js +++ b/admin/themes/default/js/tags.js @@ -854,7 +854,7 @@ function promiseFinish() { } function updatePaginationMenu() { - $('.tag-pagination-container').html(''); + $('.pagination-item-container').html(''); actualPage = Math.min(actualPage, getNumberPages()); @@ -895,7 +895,7 @@ function createPaginationMenu() { function appendPaginationItem(page = null) { if (page != null) { let newTag = $(pageItem.replace(/%d/g, page)) - $('.tag-pagination-container').append(newTag); + $('.pagination-item-container').append(newTag); if (actualPage == page) { newTag.addClass('actual'); } @@ -904,21 +904,21 @@ function appendPaginationItem(page = null) { updatePaginationMenu(); }) } else { - $('.tag-pagination-container').append($(pageEllipsis)); + $('.pagination-item-container').append($(pageEllipsis)); } } function updateArrows() { if (actualPage == 1) { - $('.tag-pagination-arrow.left').addClass('unavailable'); + $('.pagination-arrow.left').addClass('unavailable'); } else { - $('.tag-pagination-arrow.left').removeClass('unavailable'); + $('.pagination-arrow.left').removeClass('unavailable'); } if (actualPage == getNumberPages()) { - $('.tag-pagination-arrow.rigth').addClass('unavailable'); + $('.pagination-arrow.rigth').addClass('unavailable'); } else { - $('.tag-pagination-arrow.rigth').removeClass('unavailable'); + $('.pagination-arrow.rigth').removeClass('unavailable'); } } @@ -997,11 +997,11 @@ function tagToDisplay() { .slice((actualPage-1)*per_page, (actualPage)*per_page); } -$('.tag-pagination-arrow.rigth').on('click', () => { +$('.pagination-arrow.rigth').on('click', () => { movePage(); }) -$('.tag-pagination-arrow.left').on('click', () => { +$('.pagination-arrow.left').on('click', () => { movePage(false); }) @@ -1013,8 +1013,8 @@ if (getNumberPages() > 1) { $('.tag-pagination').hide(); } -$('.tag-pagination-select input[type="radio"]').on('click',function () { - per_page = parseInt($(this).val()); +$('.pagination-per-page a').on('click',function () { + per_page = parseInt($(this).html()); updatePaginationMenu(); }) diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl index 9f51b706b..69d178541 100644 --- a/admin/themes/default/template/batch_manager_global.tpl +++ b/admin/themes/default/template/batch_manager_global.tpl @@ -593,8 +593,8 @@ UL.thumbnails SPAN.wrap2 {ldelim} {include file='navigation_bar.tpl'|@get_extent:'navbar'} -
- {'display'|@translate} +
+ {'display'|@translate} 20 50 100 diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index e355e96dd..28f197ac7 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -42,8 +42,8 @@ jQuery("a.preview-box").colorbox( {
{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
- {'photos per page'|@translate} : +
+ {'photos per page'|@translate} : 5 10 50 diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl index 60af4eec8..40e0834e4 100644 --- a/admin/themes/default/template/tags.tpl +++ b/admin/themes/default/template/tags.tpl @@ -164,24 +164,23 @@ var str_tag_found = '{'%d tag found'|@translate}';
{'No tag found'|@translate}
-
- + +
+
+ +
+
+
+
+ +
-
-
-
- -
-

{'Tags per page'}

-
- - - - - - - - +
+ Afficher + 100 + 200 + 500 + 1000
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index fb555b58e..0e53304cc 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -253,6 +253,8 @@ TABLE.doubleSelect SELECT.categoryList { width: 100%; max-width: 100%; overflow-x: auto; } +/* Search bar */ + .search-input{ padding: 10px; box-shadow: 0px 2px #00000024; @@ -297,6 +299,8 @@ TABLE.doubleSelect SELECT.categoryList { font-size: 18px; } +/* Dropdown */ + .dropdown { z-index: 100; padding: 5px 0px; @@ -352,6 +356,99 @@ TABLE.doubleSelect SELECT.categoryList { padding: 3px 7px; } +/* Pagination */ + +.pagination-container { + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.pagination-container * { + margin: 10px; +} + +.pagination-arrow { + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + margin: 5px; +} + +.pagination-arrow.rigth { + -moz-transform: scale(-1, 1); + -webkit-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +.pagination-arrow.unavailable { + opacity: 0.6; + pointer-events: none; + cursor: none; +} + +.pagination-item-container { + display: flex; + align-items: baseline; +} + +.pagination-item-container span { + font-size: 20px; + font-weight: bold; + opacity: 0.8; +} + +.pagination-item-container a { + font-size: 16px; + font-weight: bold; +} + +.pagination-item-container a.actual { + background-color: #FFA646; + border-radius: 15px; + pointer-events: none; + padding: 0px 10px; + color: #333 +} + +.pagination-per-page { + background-color: #f9f9f9; + border-radius: 10px; + display: flex; + font-size: 12px; + overflow: hidden; + font-weight: 700; + font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; + height: min-content; +} + +.pagination-per-page * { + padding: 8px 9px; +} + +.pagination-per-page span { + padding-left: 17px; + color: #BBB; + font-weight: bold; +} + +.pagination-per-page a { + border: none; + color: #3A3A3A; +} + +.pagination-per-page a:hover { + background-color: #ffd2a1; + color: #666; + text-decoration: none; +} + +/* Statistic Page */ + .stat-legend-container { display: inline-block; } @@ -1843,6 +1940,466 @@ a#showPermissions:hover {text-decoration: none;} #debug { margin-left: 227px; font-size:12px; } +.tag-header { + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-left: 30px; + max-width: calc(100% - 530px); + overflow: hidden; + padding: 10px; +} + +.tag-header #search-tag{ + position: absolute; + right: 240px; +} + +.tag-header #add-tag { + position: relative; + margin: 0; +} + +.tag-header #add-tag.hide { + display: none; +} + +.tag-header #add-tag .add-tag-label { + position: relative; + padding: 10px; + background-color: #fafafa; + box-shadow: 0px 2px #00000024; + border-radius: 5px; + font-weight: bold; + display: flex; + align-items: baseline; + cursor: pointer; +} + +.tag-header #add-tag.input-mode .add-tag-label { + background: none; + box-shadow: none; + cursor: auto; + padding: 0px +} + +.tag-header #add-tag .add-tag-label::before { + margin: auto; + font-size: 16px; + margin-right: 5px; +} + +.tag-header #add-tag.input-mode .add-tag-label::before { + display: none; +} + +.tag-header #add-tag .add-tag-label p{ + margin: 0; + white-space: nowrap; +} + +.tag-header #add-tag .add-tag-container { + display: none; +} + +.tag-header #add-tag.input-mode .add-tag-container { + display: flex; + margin-right: 35px; +} + +.tag-header #add-tag.input-mode .add-tag-container input { + padding: 9.5px; + margin-left: 10px; + border: solid 2px #ffa744; + background: none; + width: 100px; +} + +.tag-header #add-tag.input-mode .add-tag-container input:hover { + background-color: #f0f0f0 !important; +} + +.tag-header #add-tag span.icon-cancel-circled{ + display: none; + position: absolute; + right: 15px; + top: 50%; + transform: translate(15px, -53%); + z-index: 2; + font-size: 22px !important; + cursor: pointer; +} + +.tag-header #add-tag.input-mode .icon-cancel-circled { + display: block; +} + +.tag-header #add-tag span.icon-cancel-circled:hover { + color: #ff7700; +} + +.tag-header #add-tag.input-mode .icon-validate{ + display: block; + margin: auto 5px; + cursor: pointer; + background-color: #ffa744; + color: #3c3c3c; + font-size: 17px; + font-weight: 700; + padding: 7.5px 5.5px; +} + +.tag-header #add-tag span.icon-validate:hover { + background-color: #f70; + color: #000; + cursor: pointer; +} + +.tag-header .selection-controller { + display: none; + align-items: baseline; + height: 38px; + color: #777; + font-weight: bold; +} + +.tag-header .selection-controller.show { + display: flex; +} + +.tag-header .selection-controller p { + margin-right: 10px; +} + +.tag-header .selection-controller a { + margin: 0; + background-color: #f0f0f0; + padding: 10px; + color: #777; + font-weight: bold; + margin: 4px; + border-radius: 5px; +} + +.tag-header .selection-controller a:hover { + background-color: #ddd; + color: #3A3A3A; + text-decoration: none; +} + + +.tag-info { + height: 35px; + overflow: hidden; + border-radius: 20px; + display: flex; + padding: 0px 10px 0px 0px; + font-weight: bold; + margin-left: 10px; +} + +.tag-info.hide { + display: none; +} + +.tag-info p { + margin: auto; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: initial; +} + +.tag-info::before { + line-height: 35px; + margin: 0px 10px; + font-size: 16px; +} + +.tag-info.tag-warning { + color: #ee8800; + background-color:#ffdd99; +} + +.tag-info.tag-message { + color: #0a0; + background-color:#c2f5c2; + display: none; +} + +.tag-info.tag-error { + color: #f22; + background-color: #ffd5dc; + display: none; + animation-name: tag-error-appear ; + animation-duration: 0.4s; + animation-timing-function: ease; +} + +.tag-info a:hover { + color: white; +} + +@keyframes tag-error-appear { + 25% { transform: translateX(-10px)} + 50% { transform: translateX(10px)} + 75% { transform: translateX(-10px)} + 100% { transform: translateX(0px)} +} + +.tag-container { + display: flex; + padding: 10px 25px; + flex-flow: wrap; + padding-right: 223px; +} + +.tag-container .tag-box{ + display: inline-flex; + align-items: center; + padding: 5px 10px 5px 15px; + background-color: #fafafa; + margin: 7px 5px; + box-shadow: 0px 2px 1px #00000024; + border-radius: 18px; + position: relative; +} + +.tag-container.selection .tag-box { + opacity: 0.8; + cursor: pointer; +} + +.tag-container.selection .tag-box[data-selected='1'] { + opacity: 1; + background-color: #ffd7ad; +} + +.tag-container .tag-box p { + white-space: nowrap; + margin: 0; +} + +.tag-container .tag-box[data-selected='1'] p { + color: #333; +} + +.tag-container .tag-box.edit-name p { + display: none; +} + +.tag-container .tag-box .showOptions { + color: #aaa; +} + +.tag-container .tag-box.edit-name .showOptions { + display: none; +} + + +.tag-container.selection .showOptions { + display: none; +} + +.tag-container .tag-box .tag-dropdown-block { + display:none; + position: absolute; + top: 32px; + right: 0px; + transform: translateX(calc(50% - 23px)); +} + +.tag-container .tag-box .tag-dropdown-block .tag-dropdown-header { + white-space: nowrap; + display: flex; + margin: auto; + justify-content: space-between; + color: white; + border-bottom: solid 1px #ffffff3d; + padding: 5px 10px; + min-width: 150px; +} + +.tag-container .tag-box .tag-dropdown-header b { + font-weight: bold; + margin-right: 2px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.tag-container .tag-box .select-checkbox { + display: none; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px 0px; + margin-left: 3.4px; + border: solid #ffa646 2px; +} + +.tag-container.selection .tag-box .select-checkbox { + display: block; +} + +.tag-container .tag-box:hover .select-checkbox, +.tag-container .tag-box[data-selected='1'] .select-checkbox { + background-color: #ffa646; +} + +.tag-container .tag-box .select-checkbox.show { + display: block; +} + +.tag-container .tag-box .select-checkbox i { + display: none; + font-size: 14px; + transform: translate(-10px , -3px); + position: absolute; + color: #fafafa; + animation-name: icon-check-animation; + animation-duration: 0.4s; + animation-timing-function: ease-out; +} + +.tag-container .tag-box[data-selected='1'] .select-checkbox i { + display: inline; +} + +@keyframes icon-check-animation { + 0% { + transform: translate(-10px , -3px) scale(0); + } + 75% { + transform: translate(-10px , -3px) scale(1.3); + } + 100% { + transform: translate(-10px , -3px); + } +} + +.tag-container .tag-box .tag-rename { + display: none; +} + +.tag-container .tag-box.edit-name .tag-rename { + display: flex; +} + +.tag-container .tag-box .tag-rename .tag-name-editable { + text-align: left; + width: 100px; + color: #3c3c3c; + font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; + margin: 0px; + background-color: white; + border: 1px solid #d5d5d5; +} + +.tag-container .tag-box .tag-rename span:hover { + color: #ffa744; +} + + +.tag-container .tag-box .tag-rename span { + padding: 2px 3px; + margin: auto; + cursor: pointer; + color: #3A3A3A; +} + +.tag-selection .tag-selection-content { + margin-top: 90px; + padding: 5px; +} + +.tag-selection .tag-selection-content .selection-mode-tag{ + display: none; +} + + +.selection-mode-tag .tag-list { + margin: 10px; + text-align: start; + font-weight: 700; + font-size: 15px; + overflow: hidden; + max-height: 160px; +} + +.selection-mode-tag .tag-list p { + width: 85%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: #a0a0a0; + margin: 0; +} + +.selection-mode-tag .tag-list div { + display: flex; + margin: 10px; + text-align: start; +} + +.selection-mode-tag .selection-other-tags { + color: #ffa646; + font-weight: bold; + font-size: 15px; +} + +.tag-select-message { + background: #bce5f7; + height: 46px; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + display: none; + margin: 10px 243px 10px 32px; + color: #0051a5; + font-weight: 600; +} + +.tag-select-message a{ + font-weight: bold; + margin-left: 6px; + background-color: #0051a5; + color: white; + padding: 0px 4px; +} + +.tag-select-message a:hover { + color: white; + text-decoration: none; + background-color: #002e5f; +} + +.tag-pagination { + margin: auto; + display: flex; + margin-bottom: 20px; + margin-right: 223px; + padding: 0px 15px; + justify-content: space-between; + align-items: center; +} + +.pageLoad { + display: none; + text-align: center; + margin-right: 223px; + position: absolute; + left: 50%; + z-index: 100; + transform: translateY(50px); +} + +.pageLoad i { + font-size: 40px; + color: rgba(29, 29, 29, 0.226); +} + /* Album Properties */ #albumThumbnail { width:1%; @@ -3297,7 +3854,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .filterBlock li {width: 300px; height: auto;} #filter_dimension {width: 600px;} #filter_dimension .slider-choice, #filter_filesize .slider-choice {border-radius: 4px; padding: 2px 8px; margin: 0 3px;} -#checkActions a {background-color: #f0f0f0;padding: 5px;color: #777;font-weight: bold;margin: 4px;border-radius: 5px;} +#checkActions a {background-color: #f0f0f0;padding: 6px 10px;color: #777;font-weight: bold;margin: 4px;border-radius: 5px;} #filterList select {display: block; padding: 10px 18px; margin-bottom: 5px; width: 290px;} #filterList li {margin-left: 25px; margin-bottom: 15px;} #addFilter, #filter_tags .selectize-input.items.not-full.has-options, #filter_tags .selectize-input.items.not-full {padding: 10px 18px;} @@ -3352,21 +3909,21 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; #action_add_tags .selectize-input.items.not-full.has-options.focus.input-active.dropdown-active, .selectize-input.items.not-full { padding: 12px 10px; box-shadow: none; border-radius: 0px; border: 1px solid #787777a6; } -.navigationBar, .thumbnailsActionsNumber { +.navigationBar { border-radius: 5px; display: flex; font-size: 12px; font-weight: 700; font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; } .pageNumberSelected {background-color: #ffaf58 !important; border: none !important; border-radius: 0 !important;} -.navigationBar a, .navigationBar span, .thumbnailsActionsNumber a, .thumbnailsActionsNumber span { +.navigationBar a, .navigationBar span{ padding: 8px 9px; border: none; } -.navigationBar *:last-child, .thumbnailsActionsNumber *:last-child {padding-right: 17px;} -.thumbnailsActionsNumber *:first-child, .navigationBar *:first-child{padding-left: 17px;} -.navigationBar a:last-child:hover, .thumbnailsActionsNumber a:last-child:hover { +.navigationBar *:last-child {padding-right: 17px;} +.navigationBar *:first-child{padding-left: 17px;} +.navigationBar a:last-child:hover { border-bottom-right-radius: 10px; border-top-right-radius: 10px; } -.thumbnailsActionsNumber a:first-child:hover, .navigationBar a:first-child:hover { +.navigationBar a:first-child:hover { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } #batchManagerGlobal UL.thumbnails {display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: 30px;} @@ -3384,10 +3941,8 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; #batchManagerGlobal .thumbnails .wrap1 .icon-check-empty:before {content: '\E823';} #batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before {font-size: 17px; line-height: normal;} #batchManagerGlobal UL.thumbnails .wrap2 .icon-pencil:hover, #batchManagerGlobal UL.thumbnails .wrap2 .icon-zoom-square:hover {color: #fea744;} -#batchManagerGlobal .deleteDerivButtons a:hover, #batchManagerGlobal #checkActions a:hover { - background-color: #ffa646; color: initial; text-decoration: none; -} -.navigationBar a:hover, .thumbnailsActionsNumber a:hover { +#batchManagerGlobal .deleteDerivButtons a:hover, #batchManagerGlobal #checkActions a:hover {background-color: #ddd;color: #3A3A3A;text-decoration: none;} +.navigationBar a:hover { color: #666; text-decoration: none; border-radius: 0; } #batchManagerGlobal .thumbSelected img {opacity: 0.35; border: 1px solid #fea744 !important;} @@ -3436,581 +3991,3 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-color: transparent; } -.tag-header { - display: flex; - flex-wrap: nowrap; - align-items: center; - margin-left: 30px; - max-width: calc(100% - 530px); - overflow: hidden; - padding: 10px; -} - -.tag-header #search-tag{ - position: absolute; - right: 240px; -} - -.tag-header #add-tag { - position: relative; - margin: 0; -} - -.tag-header #add-tag.hide { - display: none; -} - -.tag-header #add-tag .add-tag-label { - position: relative; - padding: 10px; - background-color: #fafafa; - box-shadow: 0px 2px #00000024; - border-radius: 5px; - font-weight: bold; - display: flex; - align-items: baseline; - cursor: pointer; -} - -.tag-header #add-tag.input-mode .add-tag-label { - background: none; - box-shadow: none; - cursor: auto; - padding: 0px -} - -.tag-header #add-tag .add-tag-label::before { - margin: auto; - font-size: 16px; - margin-right: 5px; -} - -.tag-header #add-tag.input-mode .add-tag-label::before { - display: none; -} - -.tag-header #add-tag .add-tag-label p{ - margin: 0; - white-space: nowrap; -} - -.tag-header #add-tag .add-tag-container { - display: none; -} - -.tag-header #add-tag.input-mode .add-tag-container { - display: flex; - margin-right: 35px; -} - -.tag-header #add-tag.input-mode .add-tag-container input { - padding: 9.5px; - margin-left: 10px; - border: solid 2px #ffa744; - background: none; - width: 100px; -} - -.tag-header #add-tag.input-mode .add-tag-container input:hover { - background-color: #f0f0f0 !important; -} - -.tag-header #add-tag span.icon-cancel-circled{ - display: none; - position: absolute; - right: 15px; - top: 50%; - transform: translate(15px, -53%); - z-index: 2; - font-size: 22px !important; - cursor: pointer; -} - -.tag-header #add-tag.input-mode .icon-cancel-circled { - display: block; -} - -.tag-header #add-tag span.icon-cancel-circled:hover { - color: #ff7700; -} - -.tag-header #add-tag.input-mode .icon-validate{ - display: block; - margin: auto 5px; - cursor: pointer; - background-color: #ffa744; - color: #3c3c3c; - font-size: 17px; - font-weight: 700; - padding: 7.5px 5.5px; -} - -.tag-header #add-tag span.icon-validate:hover { - background-color: #ff7700; -} - -.tag-header .selection-controller { - display: none; - align-items: baseline; - height: 38px; - color: #777; - font-weight: bold; -} - -.tag-header .selection-controller.show { - display: flex; -} - -.tag-header .selection-controller p { - margin-right: 10px; -} - -.tag-header .selection-controller a { - margin: 0; - background-color: #f0f0f0; - padding: 10px; - color: #777; - font-weight: bold; - margin: 4px; - border-radius: 5px; -} - -.tag-header .selection-controller a:hover { - background-color: #ddd; - color: #3A3A3A; - text-decoration: none; -} - - -.tag-info { - height: 35px; - overflow: hidden; - border-radius: 20px; - display: flex; - padding: 0px 10px 0px 0px; - font-weight: bold; - margin-left: 10px; -} - -.tag-info.hide { - display: none; -} - -.tag-info p { - margin: auto; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - text-align: initial; -} - -.tag-info::before { - line-height: 35px; - margin: 0px 10px; - font-size: 16px; -} - -.tag-info.tag-warning { - color: #ee8800; - background-color:#ffdd99; -} - -.tag-info.tag-message { - color: #0a0; - background-color:#c2f5c2; - display: none; -} - -.tag-info.tag-error { - color: #f22; - background-color: #ffd5dc; - display: none; - animation-name: tag-error-appear ; - animation-duration: 0.4s; - animation-timing-function: ease; -} - -.tag-info a:hover { - color: white; -} - -@keyframes tag-error-appear { - 25% { transform: translateX(-10px)} - 50% { transform: translateX(10px)} - 75% { transform: translateX(-10px)} - 100% { transform: translateX(0px)} -} - -.tag-container { - display: flex; - padding: 10px 25px; - flex-flow: wrap; - padding-right: 223px; -} - -.tag-container .tag-box{ - display: inline-flex; - align-items: center; - padding: 5px 10px 5px 15px; - background-color: #fafafa; - margin: 7px 5px; - box-shadow: 0px 2px 1px #00000024; - border-radius: 18px; - position: relative; -} - -.tag-container.selection .tag-box { - opacity: 0.8; - cursor: pointer; -} - -.tag-container.selection .tag-box[data-selected='1'] { - opacity: 1; - background-color: #ffd7ad; -} - -.tag-container .tag-box p { - white-space: nowrap; - margin: 0; -} - -.tag-container .tag-box[data-selected='1'] p { - color: #333; -} - -.tag-container .tag-box.edit-name p { - display: none; -} - -.tag-container .tag-box .showOptions { - color: #aaa; -} - -.tag-container .tag-box.edit-name .showOptions { - display: none; -} - - -.tag-container.selection .showOptions { - display: none; -} - -.tag-container .tag-box .tag-dropdown-block { - display:none; - position: absolute; - top: 32px; - right: 0px; - transform: translateX(calc(50% - 23px)); -} - -.tag-container .tag-box .tag-dropdown-block .tag-dropdown-header { - white-space: nowrap; - display: flex; - margin: auto; - justify-content: space-between; - color: white; - border-bottom: solid 1px #ffffff3d; - padding: 5px 10px; - min-width: 150px; -} - -.tag-container .tag-box .tag-dropdown-header b { - font-weight: bold; - margin-right: 2px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.tag-container .tag-box .select-checkbox { - display: none; - width: 15px; - height: 15px; - border-radius: 100%; - margin: 2px 0px; - margin-left: 3.4px; - border: solid #ffa646 2px; -} - -.tag-container.selection .tag-box .select-checkbox { - display: block; -} - -.tag-container .tag-box:hover .select-checkbox, -.tag-container .tag-box[data-selected='1'] .select-checkbox { - background-color: #ffa646; -} - -.tag-container .tag-box .select-checkbox.show { - display: block; -} - -.tag-container .tag-box .select-checkbox i { - display: none; - font-size: 14px; - transform: translate(-10px , -3px); - position: absolute; - color: #fafafa; - animation-name: icon-check-animation; - animation-duration: 0.4s; - animation-timing-function: ease-out; -} - -.tag-container .tag-box[data-selected='1'] .select-checkbox i { - display: inline; -} - -@keyframes icon-check-animation { - 0% { - transform: translate(-10px , -3px) scale(0); - } - 75% { - transform: translate(-10px , -3px) scale(1.3); - } - 100% { - transform: translate(-10px , -3px); - } -} - -.tag-container .tag-box .tag-rename { - display: none; -} - -.tag-container .tag-box.edit-name .tag-rename { - display: flex; -} - -.tag-container .tag-box .tag-rename .tag-name-editable { - text-align: left; - width: 100px; - color: #3c3c3c; - font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; - margin: 0px; - background-color: white; - border: 1px solid #d5d5d5; -} - -.tag-container .tag-box .tag-rename span:hover { - color: #ffa744; -} - - -.tag-container .tag-box .tag-rename span { - padding: 2px 3px; - margin: auto; - cursor: pointer; - color: #3A3A3A; -} - -.tag-selection .tag-selection-content { - margin-top: 90px; - padding: 5px; -} - -.tag-selection .tag-selection-content .selection-mode-tag{ - display: none; -} - - -.selection-mode-tag .tag-list { - margin: 10px; - text-align: start; - font-weight: 700; - font-size: 15px; - overflow: hidden; - max-height: 160px; -} - -.selection-mode-tag .tag-list p { - width: 85%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - color: #a0a0a0; - margin: 0; -} - -.selection-mode-tag .tag-list div { - display: flex; - margin: 10px; - text-align: start; -} - -.selection-mode-tag .selection-other-tags { - color: #ffa646; - font-weight: bold; - font-size: 15px; -} - -.tag-select-message { - background: #bce5f7; - height: 46px; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - display: none; - margin: 10px 243px 10px 32px; - color: #0051a5; - font-weight: 600; -} - -.tag-select-message a{ - font-weight: bold; - margin-left: 6px; - background-color: #0051a5; - color: white; - padding: 0px 4px; -} - -.tag-select-message a:hover { - color: white; - text-decoration: none; - background-color: #002e5f; -} - -.tag-pagination { - margin: auto; - height: 40px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 223px; -} - -.tag-pagination-container { - display: flex; - align-items: baseline; -} - -.tag-pagination-container *{ - margin: 10px; - line-height: 30px; -} - -.tag-pagination-container a { - font-size: 16px; - font-weight: bold; -} - -.tag-pagination-container a.actual { - background-color: #FFA646; - border-radius: 15px; - pointer-events: none; - padding: 0px 10px; -} - -.tag-pagination-container span{ - font-size: 20px; - font-weight: bold; -} - -.tag-pagination-arrow { - font-size: 14px; - cursor: pointer; - display: flex; - align-items: center; - margin: 5px; -} - -.tag-pagination-arrow.unavailable { - pointer-events: none; - opacity: 0.6; -} - -.tag-pagination-arrow:hover { - color: #ffa744; -} - -.tag-pagination-arrow span { - font-size: 20px; -} - -.tag-pagination-arrow.rigth span { - -moz-transform: scale(-1, 1); - -webkit-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} - -.tag-pagination-select { - display:flex; - flex-direction: column-reverse; - position:relative; - width: 74px; - height: 40px; - margin: 10px; - font-size: 10px; - font-weight: bold; - color: #3A3A3A; -} - -.tag-pagination-select label { - padding: 0 20px 0 10px; - min-height: 35px; - display: flex; - align-items: center; - background: #ddd; - position: absolute; - width: 100%; - pointer-events: none; - order: 2; - z-index: 1; - transition: .2s ease-in-out; - box-sizing: border-box; - font-size: 14px; -} - -.tag-pagination-select label:hover { - background:#bbb; -} - -.tag-pagination-select:focus label { - position:relative; - pointer-events:all; -} - -.tag-pagination-select input { - opacity:0; - position:absolute; - left:-99999px; -} - -.tag-pagination-select input:checked + label { - order: 1; - z-index: 2; - background: #fafafa; - position: relative; - box-shadow: 0px 2px 1px #00000024; -} - -.tag-pagination-select input:checked + label:after { - content:''; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #777; - position:absolute; - right:10px; - top:calc(50% - 2.5px); - pointer-events:none; - z-index:3; -} - -.pageLoad { - display: none; - text-align: center; - margin-right: 223px; - position: absolute; - left: 50%; - z-index: 100; - transform: translateY(50px); -} - -.pageLoad i { - font-size: 40px; - color: rgba(29, 29, 29, 0.226); -} \ No newline at end of file diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 9e160ef8e..8144c435a 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -126,6 +126,30 @@ ul.actions, .content form#waiting {text-align:center;} color: #8d8d8d; } +/* Filter */ + +.search-input { + background-color: #333 !important; +} + +.search-input:hover { + background-color: #222 !important; +} + +/* Pagination */ + +.pagination-per-page { + background-color: #555; +} + +.pagination-per-page span { + color: #777; +} + +.pagination-per-page a:hover { + background-color: #888; color: #444; +} + /* jQuery tooltips */ .ui-tooltip { color: #eee; @@ -448,11 +472,6 @@ label>p.group_select { color:#c0c0c0; } -.groups #GroupPermission:hover, -.group-dropdown-option:hover{ - background-color:#393939; -} - /*Group manager buttons*/ .groups .manage-users, @@ -796,7 +815,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; color: #C0C0C0; border: none!important; } -#batchManagerGlobal fieldset {margin: 0; margin-top: 30px;} +#batchManagerGlobal fieldset {margin: 0; margin-top: 30px; border:none} #permitAction select {background: #3C3C3C; color: #C0C0C0;} #action_associate a:last-child {color: #C0C0C0; background-color: #464646;} #forbidAction, .selectionEmptyBlock {background-color: #f3f3f3;} @@ -807,17 +826,17 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; text-decoration: none; background-color: #ffa646 !important; color: initial; } #forbidAction, .selectionEmptyBlock {background-color: #5a5757; color: #c1c1c1;} -.navigationBar, .thumbnailsActionsNumber, .navigationBar a, -.navigationBar span, .thumbnailsActionsNumber a, .thumbnailsActionsNumber span { +.navigationBar, .navigationBar a, +.navigationBar span { background-color: #555; border-radius: 10px; } .pageNumberSelected {background-color: #b4b4b4;} -.navigationBar a:hover, .thumbnailsActionsNumber a:hover {background-color: #888; color: #444;} +.navigationBar a:hover {background-color: #888; color: #444;} #action_title .large, #action_author .large {background-color: #333; color: #fefefe;} #addFilter optgroup, #batchManagerGlobal option[disabled] {background-color: #555;} .dimension-cancel {background-color: #555 !important;} .pageNumberSelected {color: #777 !important; font-weight: bold;} -.navigationBar span, .thumbnailsActionsNumber span { +.navigationBar span { color: #777; } #batchManagerGlobal .ui-state-default, #batchManagerGlobal .ui-widget-content .ui-state-default,#batchManagerGlobal .ui-widget-header .ui-state-default { @@ -929,6 +948,33 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background: #333 !important; } +/* Tag Manager */ + +.tag-box, +.tag-header #add-tag:not(.input-mode) .add-tag-label, +.tag-header .selection-controller a{ + background-color: #333 !important; +} + +.tag-header #add-tag.input-mode .add-tag-container input:hover { + background-color: #222 !important; +} + +.tag-container.selection .tag-box[data-selected="1"] { + background-color: #f9852c !important; + box-shadow: none; +} + +.tag-select-message { + background: #0051a57d; + color: #bce5f7; +} + +.tag-select-message a { + background-color: #bce5f7; + color: #0051a5; +} + /* Icon colors*/ .icon-red {