From 7de384bf9c192292cbc726085eedfadddfa7ca7d Mon Sep 17 00:00:00 2001 From: maTh <1645099+math-GH@users.noreply.github.com> Date: Thu, 13 Mar 2025 23:10:48 +0100 Subject: Mark as read button: config for the size (#7314) * settings * i18n: mark_read_button * big, small, none * fix * Fixes * make fix-all --------- Co-authored-by: Alexandre Alapetite --- p/themes/Alternative-Dark/adark.css | 2 +- p/themes/Alternative-Dark/adark.rtl.css | 2 +- p/themes/Ansum/_components.css | 234 +++++++++++++++++++++ p/themes/Ansum/_components.rtl.css | 234 +++++++++++++++++++++ p/themes/Ansum/_components.scss | 2 +- p/themes/Ansum/ansum.css | 2 +- p/themes/Ansum/ansum.rtl.css | 2 +- p/themes/Dark-pink/pinkdark.css | 2 +- p/themes/Dark-pink/pinkdark.rtl.css | 2 +- p/themes/Flat/flat.css | 2 +- p/themes/Flat/flat.rtl.css | 2 +- p/themes/Mapco/_components.css | 250 +++++++++++++++++++++++ p/themes/Mapco/_components.rtl.css | 250 +++++++++++++++++++++++ p/themes/Mapco/_components.scss | 2 +- p/themes/Mapco/mapco.css | 2 +- p/themes/Mapco/mapco.rtl.css | 2 +- p/themes/Nord/nord.css | 2 +- p/themes/Nord/nord.rtl.css | 2 +- p/themes/Origine-compact/origine-compact.css | 2 +- p/themes/Origine-compact/origine-compact.rtl.css | 2 +- p/themes/Origine/origine.css | 2 +- p/themes/Origine/origine.rtl.css | 2 +- p/themes/Pafat/pafat.css | 2 +- p/themes/Pafat/pafat.rtl.css | 2 +- p/themes/Swage/swage.css | 12 +- p/themes/Swage/swage.rtl.css | 12 +- p/themes/Swage/swage.scss | 2 +- p/themes/base-theme/base.css | 2 +- p/themes/base-theme/base.rtl.css | 2 +- p/themes/base-theme/frss.css | 8 +- p/themes/base-theme/frss.rtl.css | 8 +- 31 files changed, 1015 insertions(+), 39 deletions(-) create mode 100644 p/themes/Ansum/_components.css create mode 100644 p/themes/Ansum/_components.rtl.css create mode 100644 p/themes/Mapco/_components.css create mode 100644 p/themes/Mapco/_components.rtl.css (limited to 'p/themes') diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 2367772a5..bc507625b 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -924,7 +924,7 @@ kbd { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { background: var(--background-color-dark); color: var(--font-color-contrast); text-align: center; diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index d5ce7cc45..1c611a6e0 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -924,7 +924,7 @@ kbd { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { background: var(--background-color-dark); color: var(--font-color-contrast); text-align: center; diff --git a/p/themes/Ansum/_components.css b/p/themes/Ansum/_components.css new file mode 100644 index 000000000..90f2eaf14 --- /dev/null +++ b/p/themes/Ansum/_components.css @@ -0,0 +1,234 @@ +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + padding: 0.1rem 0; +} +.horizontal-list > .item:first-child { + padding-left: 0.5rem; +} + +/*=== Dropdown */ +.dropdown .dropdown-target:target + .btn { + background-color: #e4d8cc; +} + +.dropdown-menu { + margin: 9px 0 0 0; + padding: 0.5rem 0 1rem 0; + background: #fcfaf8; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: left; +} +.dropdown-menu::after { + border: none; + right: 17px; +} +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; + font-weight: bold; + text-align: left; + color: #766556; + text-transform: uppercase; + letter-spacing: 1px; +} +.dropdown-menu .item { + transition: all 0.075s ease-in-out; +} +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { + padding: 0 2rem; + color: #363330; + font-size: inherit; + line-height: 2.5em; +} +.dropdown-menu .item > a span.icon, +.dropdown-menu .item > span span.icon, +.dropdown-menu .item > .as-link span.icon { + padding: 0 0.25rem !important; +} +.dropdown-menu .item > a:not(.addItem):hover, +.dropdown-menu .item > .as-link:not(.addItem):hover { + background: #ca7227; + color: #fff; +} +.dropdown-menu .item > a:not(.addItem):hover .icon, +.dropdown-menu .item > .as-link:not(.addItem):hover .icon { + filter: grayscale(100%) brightness(2.5); +} +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #f5f0ec; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link { + padding-left: 2rem; +} +.dropdown-menu .item:not(.addItem) > a:hover, +.dropdown-menu .item:not(.addItem) button:hover { + background: #ca7227; + color: #fff; +} +.dropdown-menu .item:not(.addItem) > a:hover .icon, +.dropdown-menu .item:not(.addItem) button:hover .icon { + filter: brightness(3); +} +.dropdown-menu .item[aria-checked=true] a::before { + margin: 0 0 0 -14px; + font-weight: bold; +} +.dropdown-menu .item ~ .dropdown-header { + margin-top: 0.75rem; + padding-top: 1.75rem; + border-top-color: #f5f0ec; +} +.dropdown-menu .item.separator { + margin-top: 0.75rem; + border-top-color: #f5f0ec; +} +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #363330; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #ca7227; +} + +/*=== Alerts */ +.alert { + background: #fcfaf8; + color: #766556; + font-size: 1rem; + border: 1px solid #d9ccbf; + border-radius: 3px; + text-shadow: 0 0 1px #f5f0ec; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; +} + +.alert-success { + background: #cffdef; + color: #0c7556; + border: 1px solid #0c755633; +} + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; +} + +/*=== Pagination */ +.pagination { + background: #f5f0ec; + color: #363330; +} +.pagination .item a { + color: #363330; +} + +#load_more.loading, +#load_more.loading:hover { + background: url("loader.gif") center center no-repeat #34495e; +} + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); +} +.box .box-title { + background: #f5f0ec; + color: #363330; + border-radius: 2px 2px 0 0; +} +.box .box-content { + padding-left: 30px; +} +.box .box-content .item { + padding: 0.5rem 0; + color: #363330; + font-size: 1rem; + border-bottom: 1px solid #f5f0ec; + line-height: 1.7em; +} +.box .box-content .item:last-child { + border-bottom: none; +} +.box .configure { + margin-right: 0.5rem; + padding: 0.25rem; + border-radius: 3px; +} +.box .configure .icon { + vertical-align: middle; +} +.box .configure:hover { + border-radius: 2px; + background-color: #ca7227; +} +.box .configure:hover .icon { + filter: brightness(3); +} + +/*=== "Load more" part */ +#bigMarkAsRead.big { + text-align: center; + text-decoration: none; + background: #fdf6ef; + color: #ca7227; + transition: all 0.15s ease-in-out; +} +#bigMarkAsRead.big:hover { + background: #ca7227; + color: #fff; +} +#bigMarkAsRead.big:hover .bigTick { + filter: brightness(7); +} +#bigMarkAsRead.big .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; +} \ No newline at end of file diff --git a/p/themes/Ansum/_components.rtl.css b/p/themes/Ansum/_components.rtl.css new file mode 100644 index 000000000..90844a63a --- /dev/null +++ b/p/themes/Ansum/_components.rtl.css @@ -0,0 +1,234 @@ +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + padding: 0.1rem 0; +} +.horizontal-list > .item:first-child { + padding-right: 0.5rem; +} + +/*=== Dropdown */ +.dropdown .dropdown-target:target + .btn { + background-color: #e4d8cc; +} + +.dropdown-menu { + margin: 9px 0 0 0; + padding: 0.5rem 0 1rem 0; + background: #fcfaf8; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: right; +} +.dropdown-menu::after { + border: none; + left: 17px; +} +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; + font-weight: bold; + text-align: right; + color: #766556; + text-transform: uppercase; + letter-spacing: 1px; +} +.dropdown-menu .item { + transition: all 0.075s ease-in-out; +} +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { + padding: 0 2rem; + color: #363330; + font-size: inherit; + line-height: 2.5em; +} +.dropdown-menu .item > a span.icon, +.dropdown-menu .item > span span.icon, +.dropdown-menu .item > .as-link span.icon { + padding: 0 0.25rem !important; +} +.dropdown-menu .item > a:not(.addItem):hover, +.dropdown-menu .item > .as-link:not(.addItem):hover { + background: #ca7227; + color: #fff; +} +.dropdown-menu .item > a:not(.addItem):hover .icon, +.dropdown-menu .item > .as-link:not(.addItem):hover .icon { + filter: grayscale(100%) brightness(2.5); +} +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #f5f0ec; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link { + padding-right: 2rem; +} +.dropdown-menu .item:not(.addItem) > a:hover, +.dropdown-menu .item:not(.addItem) button:hover { + background: #ca7227; + color: #fff; +} +.dropdown-menu .item:not(.addItem) > a:hover .icon, +.dropdown-menu .item:not(.addItem) button:hover .icon { + filter: brightness(3); +} +.dropdown-menu .item[aria-checked=true] a::before { + margin: 0 -14px 0 0; + font-weight: bold; +} +.dropdown-menu .item ~ .dropdown-header { + margin-top: 0.75rem; + padding-top: 1.75rem; + border-top-color: #f5f0ec; +} +.dropdown-menu .item.separator { + margin-top: 0.75rem; + border-top-color: #f5f0ec; +} +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #363330; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #ca7227; +} + +/*=== Alerts */ +.alert { + background: #fcfaf8; + color: #766556; + font-size: 1rem; + border: 1px solid #d9ccbf; + border-radius: 3px; + text-shadow: 0 0 1px #f5f0ec; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; +} + +.alert-success { + background: #cffdef; + color: #0c7556; + border: 1px solid #0c755633; +} + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; +} + +/*=== Pagination */ +.pagination { + background: #f5f0ec; + color: #363330; +} +.pagination .item a { + color: #363330; +} + +#load_more.loading, +#load_more.loading:hover { + background: url("loader.gif") center center no-repeat #34495e; +} + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); +} +.box .box-title { + background: #f5f0ec; + color: #363330; + border-radius: 2px 2px 0 0; +} +.box .box-content { + padding-right: 30px; +} +.box .box-content .item { + padding: 0.5rem 0; + color: #363330; + font-size: 1rem; + border-bottom: 1px solid #f5f0ec; + line-height: 1.7em; +} +.box .box-content .item:last-child { + border-bottom: none; +} +.box .configure { + margin-left: 0.5rem; + padding: 0.25rem; + border-radius: 3px; +} +.box .configure .icon { + vertical-align: middle; +} +.box .configure:hover { + border-radius: 2px; + background-color: #ca7227; +} +.box .configure:hover .icon { + filter: brightness(3); +} + +/*=== "Load more" part */ +#bigMarkAsRead.big { + text-align: center; + text-decoration: none; + background: #fdf6ef; + color: #ca7227; + transition: all 0.15s ease-in-out; +} +#bigMarkAsRead.big:hover { + background: #ca7227; + color: #fff; +} +#bigMarkAsRead.big:hover .bigTick { + filter: brightness(7); +} +#bigMarkAsRead.big .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; +} \ No newline at end of file diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss index fa9f34c44..b49a4e2da 100644 --- a/p/themes/Ansum/_components.scss +++ b/p/themes/Ansum/_components.scss @@ -263,7 +263,7 @@ } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: variables.$main-first-light; diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css index 86c97756e..43c4cac06 100644 --- a/p/themes/Ansum/ansum.css +++ b/p/themes/Ansum/ansum.css @@ -410,7 +410,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #fdf6ef; diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css index a0788dc12..4262ae7ba 100644 --- a/p/themes/Ansum/ansum.rtl.css +++ b/p/themes/Ansum/ansum.rtl.css @@ -410,7 +410,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #fdf6ef; diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css index 80024e673..8df5a7f23 100644 --- a/p/themes/Dark-pink/pinkdark.css +++ b/p/themes/Dark-pink/pinkdark.css @@ -72,7 +72,7 @@ box-shadow: 0 2px 5px #ffb6c1; } -#bigMarkAsRead { +#bigMarkAsRead.big { color: #787394; } diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css index 4ad1e8c3d..9a790cf68 100644 --- a/p/themes/Dark-pink/pinkdark.rtl.css +++ b/p/themes/Dark-pink/pinkdark.rtl.css @@ -72,7 +72,7 @@ box-shadow: 0 2px 5px #ffb6c1; } -#bigMarkAsRead { +#bigMarkAsRead.big { color: #787394; } diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index c71e26942..2241f5156 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -834,7 +834,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #ecf0f1; diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css index 6aba2b15b..d824c4e4a 100644 --- a/p/themes/Flat/flat.rtl.css +++ b/p/themes/Flat/flat.rtl.css @@ -834,7 +834,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #ecf0f1; diff --git a/p/themes/Mapco/_components.css b/p/themes/Mapco/_components.css new file mode 100644 index 000000000..6e5a8c34c --- /dev/null +++ b/p/themes/Mapco/_components.css @@ -0,0 +1,250 @@ +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + padding: 0.1rem 0; +} +.horizontal-list > .item:first-child { + padding-left: 0.5rem; +} + +/*=== Dropdown */ +.dropdown .dropdown-target:target + .btn { + background-color: #d5d8db; +} + +.dropdown-menu { + margin: 9px 0 0 0; + padding: 0.5rem 0 1rem 0; + background: #f9fafb; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: left; +} +.dropdown-menu::after { + border: none; + right: 18px; +} +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; + font-weight: bold; + text-align: left; + color: #5b6871; + text-transform: uppercase; + letter-spacing: 1px; +} +.dropdown-menu .item { + transition: all 0.075s ease-in-out; +} +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { + padding: 0 2rem; + color: #303136; + font-size: inherit; + line-height: 2.5em; +} +.dropdown-menu .item > a span.icon, +.dropdown-menu .item > span span.icon, +.dropdown-menu .item > .as-link span.icon { + padding: 0 0.25rem !important; +} +.dropdown-menu .item > a:not(.addItem):hover, +.dropdown-menu .item > .as-link:not(.addItem):hover { + background: #36c; + color: #fff; +} +.dropdown-menu .item > a:not(.addItem):hover .icon, +.dropdown-menu .item > .as-link:not(.addItem):hover .icon { + filter: brightness(3); +} +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #eff0f2; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link { + padding-left: 2rem; +} +.dropdown-menu .item[aria-checked=true] a::before { + margin: 0 0 0 -14px; + font-weight: bold; +} +.dropdown-menu .item ~ .dropdown-header { + margin-top: 0.75rem; + padding-top: 1.75rem; + border-top-color: #eff0f2; +} +.dropdown-menu .item.separator { + margin-top: 0.75rem; + border-top-color: #eff0f2; +} +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #303136; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #36c; +} + +/*=== Alerts */ +.alert { + background: #f9fafb; + color: #5b6871; + font-size: 1rem; + border: 1px solid #c5ced3; + border-radius: 3px; + text-shadow: 0 0 1px #eff0f2; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; +} + +.alert-success { + background: #cffde7; + color: #0c7540; + border: 1px solid #0c754033; +} + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; +} + +/*=== Pagination */ +.pagination { + background: #eff0f2; + color: #303136; +} +.pagination .item a { + color: #303136; +} + +#load_more.loading, +#load_more.loading:hover { + background: url("loader.gif") center center no-repeat #34495e; +} + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); +} +.box .box-title { + background: #eff0f2; + color: #303136; + border-radius: 2px 2px 0 0; +} +.box .box-title .configure { + padding: 5px; +} +.box .box-title:hover .configure .icon { + vertical-align: middle; +} +.box .box-title:hover .configure:hover { + background-color: #36c; +} +.box .box-title:hover .configure:hover .icon { + filter: brightness(3); +} +.box .box-title form input { + width: 85%; +} +.box .box-title form .dropdown { + float: right; +} +.box .box-title form .dropdown a.dropdown-toggle { + padding: 0; + border-radius: 0; + background-image: url(icons/more.svg); + background-repeat: no-repeat; + background-position: right 8px; +} +.box .box-title form .dropdown a.dropdown-toggle img { + display: none; +} +.box .box-content { + padding-left: 30px; +} +.box .box-content .item { + padding: 0.25rem 0; + color: #303136; + font-size: 1rem; + border-bottom: 1px solid #eff0f2; + line-height: 1.7em; +} +.box .box-content .item .configure { + padding: 5px; +} +.box .box-content .item .configure .icon { + vertical-align: middle; +} +.box .box-content .item .configure:hover { + background-color: #36c; +} +.box .box-content .item .configure:hover .icon { + filter: brightness(3); +} +.box .box-content .item:last-child { + border-bottom: none; +} + +/*=== "Load more" part */ +#bigMarkAsRead.big { + text-align: center; + text-decoration: none; + background: #effcfd; + color: #36c; + transition: all 0.15s ease-in-out; +} +#bigMarkAsRead.big:hover { + background: #36c; + color: #fff; +} +#bigMarkAsRead.big:hover .bigTick { + filter: brightness(5); +} +#bigMarkAsRead.big .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; +} \ No newline at end of file diff --git a/p/themes/Mapco/_components.rtl.css b/p/themes/Mapco/_components.rtl.css new file mode 100644 index 000000000..333c0eafc --- /dev/null +++ b/p/themes/Mapco/_components.rtl.css @@ -0,0 +1,250 @@ +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + padding: 0.1rem 0; +} +.horizontal-list > .item:first-child { + padding-right: 0.5rem; +} + +/*=== Dropdown */ +.dropdown .dropdown-target:target + .btn { + background-color: #d5d8db; +} + +.dropdown-menu { + margin: 9px 0 0 0; + padding: 0.5rem 0 1rem 0; + background: #f9fafb; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: right; +} +.dropdown-menu::after { + border: none; + left: 18px; +} +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; + font-weight: bold; + text-align: right; + color: #5b6871; + text-transform: uppercase; + letter-spacing: 1px; +} +.dropdown-menu .item { + transition: all 0.075s ease-in-out; +} +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { + padding: 0 2rem; + color: #303136; + font-size: inherit; + line-height: 2.5em; +} +.dropdown-menu .item > a span.icon, +.dropdown-menu .item > span span.icon, +.dropdown-menu .item > .as-link span.icon { + padding: 0 0.25rem !important; +} +.dropdown-menu .item > a:not(.addItem):hover, +.dropdown-menu .item > .as-link:not(.addItem):hover { + background: #36c; + color: #fff; +} +.dropdown-menu .item > a:not(.addItem):hover .icon, +.dropdown-menu .item > .as-link:not(.addItem):hover .icon { + filter: brightness(3); +} +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #eff0f2; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link { + padding-right: 2rem; +} +.dropdown-menu .item[aria-checked=true] a::before { + margin: 0 -14px 0 0; + font-weight: bold; +} +.dropdown-menu .item ~ .dropdown-header { + margin-top: 0.75rem; + padding-top: 1.75rem; + border-top-color: #eff0f2; +} +.dropdown-menu .item.separator { + margin-top: 0.75rem; + border-top-color: #eff0f2; +} +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #303136; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, +.tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; +} +.tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #36c; +} + +/*=== Alerts */ +.alert { + background: #f9fafb; + color: #5b6871; + font-size: 1rem; + border: 1px solid #c5ced3; + border-radius: 3px; + text-shadow: 0 0 1px #eff0f2; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; +} + +.alert-success { + background: #cffde7; + color: #0c7540; + border: 1px solid #0c754033; +} + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; +} + +/*=== Pagination */ +.pagination { + background: #eff0f2; + color: #303136; +} +.pagination .item a { + color: #303136; +} + +#load_more.loading, +#load_more.loading:hover { + background: url("loader.gif") center center no-repeat #34495e; +} + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); +} +.box .box-title { + background: #eff0f2; + color: #303136; + border-radius: 2px 2px 0 0; +} +.box .box-title .configure { + padding: 5px; +} +.box .box-title:hover .configure .icon { + vertical-align: middle; +} +.box .box-title:hover .configure:hover { + background-color: #36c; +} +.box .box-title:hover .configure:hover .icon { + filter: brightness(3); +} +.box .box-title form input { + width: 85%; +} +.box .box-title form .dropdown { + float: left; +} +.box .box-title form .dropdown a.dropdown-toggle { + padding: 0; + border-radius: 0; + background-image: url(icons/more.svg); + background-repeat: no-repeat; + background-position: left 8px; +} +.box .box-title form .dropdown a.dropdown-toggle img { + display: none; +} +.box .box-content { + padding-right: 30px; +} +.box .box-content .item { + padding: 0.25rem 0; + color: #303136; + font-size: 1rem; + border-bottom: 1px solid #eff0f2; + line-height: 1.7em; +} +.box .box-content .item .configure { + padding: 5px; +} +.box .box-content .item .configure .icon { + vertical-align: middle; +} +.box .box-content .item .configure:hover { + background-color: #36c; +} +.box .box-content .item .configure:hover .icon { + filter: brightness(3); +} +.box .box-content .item:last-child { + border-bottom: none; +} + +/*=== "Load more" part */ +#bigMarkAsRead.big { + text-align: center; + text-decoration: none; + background: #effcfd; + color: #36c; + transition: all 0.15s ease-in-out; +} +#bigMarkAsRead.big:hover { + background: #36c; + color: #fff; +} +#bigMarkAsRead.big:hover .bigTick { + filter: brightness(5); +} +#bigMarkAsRead.big .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; +} \ No newline at end of file diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss index a0fdf1b94..ac5dd390d 100644 --- a/p/themes/Mapco/_components.scss +++ b/p/themes/Mapco/_components.scss @@ -291,7 +291,7 @@ } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: variables.$main-first-light; diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index deae7ed5d..cc8edfb53 100644 --- a/p/themes/Mapco/mapco.css +++ b/p/themes/Mapco/mapco.css @@ -425,7 +425,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #effcfd; diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 7400c1beb..5ebd049f7 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/p/themes/Mapco/mapco.rtl.css @@ -425,7 +425,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: #effcfd; diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css index 9b9df2d3f..907aa4dd9 100644 --- a/p/themes/Nord/nord.css +++ b/p/themes/Nord/nord.css @@ -940,7 +940,7 @@ li.item.active { background-color: var(--main-background); } -#bigMarkAsRead { +#bigMarkAsRead.big { text-decoration: none; } diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css index 7bb2c47ba..6354afd73 100644 --- a/p/themes/Nord/nord.rtl.css +++ b/p/themes/Nord/nord.rtl.css @@ -940,7 +940,7 @@ li.item.active { background-color: var(--main-background); } -#bigMarkAsRead { +#bigMarkAsRead.big { text-decoration: none; } diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css index 94705d90b..f1a68b1c1 100644 --- a/p/themes/Origine-compact/origine-compact.css +++ b/p/themes/Origine-compact/origine-compact.css @@ -134,7 +134,7 @@ padding: 0.5rem 3rem 0.5rem 0.5rem; } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { font-size: 1.2em; } diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css index 83ca78153..ee299153b 100644 --- a/p/themes/Origine-compact/origine-compact.rtl.css +++ b/p/themes/Origine-compact/origine-compact.rtl.css @@ -134,7 +134,7 @@ padding: 0.5rem 0.5rem 0.5rem 3rem; } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { font-size: 1.2em; } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 353b231dd..1a48d9f04 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -979,7 +979,7 @@ a:hover .icon { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { color: var(--font-color-grey); text-align: center; text-decoration: none; diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index d797649b3..7ee35795d 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -979,7 +979,7 @@ a:hover .icon { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { color: var(--font-color-grey); text-align: center; text-decoration: none; diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index 1aa41ed05..be8d366c9 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -946,7 +946,7 @@ a.signin { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { background-color: var(--background-color-grey-light); color: var(--font-color-grey); text-align: center; diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css index 768f3c255..95d98e0db 100644 --- a/p/themes/Pafat/pafat.rtl.css +++ b/p/themes/Pafat/pafat.rtl.css @@ -946,7 +946,7 @@ a.signin { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { background-color: var(--background-color-grey-light); color: var(--font-color-grey); text-align: center; diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 28c6a8644..60c20efe2 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -812,16 +812,16 @@ form th { .notification.bad a.close:hover { background-color: var(--color-background-bad); } -.notification .close { +.notification a.close { display: none; } -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: var(--color-background-light-darker); } -#bigMarkAsRead:hover { +#bigMarkAsRead.big:hover { background-color: var(--color-background-aside); color: var(--color-text-light); } @@ -1027,15 +1027,15 @@ a.signin { .notification { width: 100%; } - .notification .close { + .notification a.close { background: transparent; display: block; left: 0; } - .notification .close:hover { + .notification a.close:hover { opacity: 0.5; } - .notification .close .icon { + .notification a.close .icon { display: none; } #nav_entries { diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index 705beae31..5894f5698 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -812,16 +812,16 @@ form th { .notification.bad a.close:hover { background-color: var(--color-background-bad); } -.notification .close { +.notification a.close { display: none; } -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: var(--color-background-light-darker); } -#bigMarkAsRead:hover { +#bigMarkAsRead.big:hover { background-color: var(--color-background-aside); color: var(--color-text-light); } @@ -1027,15 +1027,15 @@ a.signin { .notification { width: 100%; } - .notification .close { + .notification a.close { background: transparent; display: block; right: 0; } - .notification .close:hover { + .notification a.close:hover { opacity: 0.5; } - .notification .close .icon { + .notification a.close .icon { display: none; } #nav_entries { diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index 2048b5cf5..fe6d4d0a2 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -1053,7 +1053,7 @@ form { } } -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; background: var(--color-background-light-darker); diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css index ea60eaacb..b5d37c4f5 100644 --- a/p/themes/base-theme/base.css +++ b/p/themes/base-theme/base.css @@ -606,7 +606,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; } diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css index aec8ac341..e2160a13f 100644 --- a/p/themes/base-theme/base.rtl.css +++ b/p/themes/base-theme/base.rtl.css @@ -606,7 +606,7 @@ th { } /*=== "Load more" part */ -#bigMarkAsRead { +#bigMarkAsRead.big { text-align: center; text-decoration: none; } diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 67656b1cf..f5d49a5d4 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -1878,7 +1878,7 @@ a.website:hover .favicon { font-size: 0; } -#bigMarkAsRead { +#bigMarkAsRead.big { margin: 0 0 100% 0; margin: 0 0 100vh 0; padding: 1em 0 50px 0; @@ -1888,10 +1888,14 @@ a.website:hover .favicon { font-size: 1.25rem; } -.bigTick { +#bigMarkAsRead.big .bigTick { font-size: 4rem; } +#bigMarkAsRead.small .bigTick { + font-size: 2rem; +} + /*=== Statistiques */ .box .box-title .btn { position: absolute; diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 291ee4f77..ca5f75d95 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -1878,7 +1878,7 @@ a.website:hover .favicon { font-size: 0; } -#bigMarkAsRead { +#bigMarkAsRead.big { margin: 0 0 100% 0; margin: 0 0 100vh 0; padding: 1em 0 50px 0; @@ -1888,10 +1888,14 @@ a.website:hover .favicon { font-size: 1.25rem; } -.bigTick { +#bigMarkAsRead.big .bigTick { font-size: 4rem; } +#bigMarkAsRead.small .bigTick { + font-size: 2rem; +} + /*=== Statistiques */ .box .box-title .btn { position: absolute; -- cgit v1.2.3