diff --git a/app/Resources/static/themes/material/css/dark_theme.scss b/app/Resources/static/themes/material/css/dark_theme.scss index b521de907..8a95679f2 100644 --- a/app/Resources/static/themes/material/css/dark_theme.scss +++ b/app/Resources/static/themes/material/css/dark_theme.scss @@ -60,7 +60,7 @@ #article article h6, .dropdown-content li > a, .nav-panels .input-field input:focus, - .results a, + .results-item, .side-nav li > a, .side-nav li > a > i.material-icons { color: #dfdfdf; diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss index 37764cf8c..ab36f9fbe 100644 --- a/app/Resources/static/themes/material/css/entries.scss +++ b/app/Resources/static/themes/material/css/entries.scss @@ -2,40 +2,72 @@ * Entries * ========================================================================== */ -.mass-buttons { - margin: 10px 5px 10px 20px; +.mass-action-toggle { + display: inline-flex; + background-color: transparent; + border: none; + cursor: pointer; - #selectAll { - position: relative; - opacity: initial; - left: 0; - } - - span { - padding: 3px; - } - - button { - i { - font-size: 15px; - } - - height: 24px; - line-height: 24px; - padding: 0 0.5rem; - margin-right: 0.75rem; + &:focus { + background-color: transparent; } } -.card-stacked { - input[type="checkbox"] { - position: relative; - opacity: initial; - left: 0; - } +.mass-action { + margin: 10px 5px 10px 20px; +} - .entry-checkbox { - margin-right: 10px; +.mass-action-group { + display: flex; + padding: 3px; + gap: 10px; +} + +.mass-action-button { + height: 24px; + line-height: 24px; + padding: 0 0.5rem; + + i { + font-size: 1rem; + } +} + +.entry-checkbox { + margin: 10px 15px 10px 5px; + + .card & { + float: right; + margin-right: 0; + padding: 10px; + } +} + +.entries .entry-checkbox-input, +.mass-action .entry-checkbox-input { + position: relative; + left: 0; + width: 20px; + min-height: 25px; + height: 100%; + vertical-align: middle; + opacity: initial; +} + +.toggle-checkbox:not(:checked) + .mass-action, +.toggle-checkbox:not(:checked) + .mass-action-tags, +.toggle-checkbox:not(:checked) ~ .entries .entry-checkbox, +.toggle-checkbox:checked ~ .entries .card-preview { + display: none; +} + +.mass-action-tags { + display: flex; + align-items: center; + gap: 10px; + + .mass-action-tags-input { + margin: 0; } } @@ -62,10 +94,10 @@ .nb-results { display: inline-flex; } +} - a { - color: #444; - } +.results-item { + color: #444; } .pagination { @@ -138,3 +170,11 @@ footer { margin-bottom: 10px; } } + +@media screen and (min-width: 993px) { + .mass-action { + display: flex; + align-items: center; + gap: 30px; + } +} diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss index 5f60d20fd..a16d90ee8 100644 --- a/app/Resources/static/themes/material/css/icons.scss +++ b/app/Resources/static/themes/material/css/icons.scss @@ -21,6 +21,7 @@ word-wrap: normal; white-space: nowrap; direction: ltr; + user-select: none; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; diff --git a/src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig b/src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig index d35d8db13..503be8ae2 100644 --- a/src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig @@ -1,3 +1,3 @@
- +
diff --git a/src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig b/src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig index efd8d03e9..f05e289d3 100644 --- a/src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig @@ -1,6 +1,7 @@
+ {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}