Merge pull request #133 from menhera-org/devel-11.5.0

Changes in version 11.5.0

README.md

@@ -15,6 +15,8 @@ Chrome-like tab groups using isolated containers: The ultimate tab manager and g
 
 [About Container Tab Groups](https://www.menhera.org/container-tab-groups/)
 
+![Screenshot](./social-image.png)
+
 ## Features
 
 _Tab Group = Container_
@@ -140,3 +142,9 @@ Something missing you need? Please file a new feature request there.
 Copyright © 2022 Menhera.org contributors.
 
 Licensed under GNU GPL version 3 **or later**.
+
+### Used assets
+
+- Material Icons (Apache-2.0)
+- Icons from mozilla-central (MPL-2.0)
+- SVG Spinners (MIT)

dist/background.html

@@ -1,6 +1,6 @@
 <!-- vim: set ts=2 sw=2 et ai :
  Container Tab Groups
- Copyright (C) 2021 Menhera.org
+ Copyright (C) 2023 Menhera.org
 
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by

dist/components/container-editor.css

@@ -19,48 +19,10 @@
  along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
-@import '/theme.css';
+@import './modal-frame.css';
 
 @namespace url(http://www.w3.org/1999/xhtml);
 
-:host {
- display: block grid;
- position: fixed;
- top: 0;
- left: 0;
- inline-size: 100%;
- block-size: 100%;
- align-content: center;
- justify-items: center;
- z-index: 100;
- background-color: var(--secondary-background-color);
-}
-
-a, button {
- color: var(--button-text-color);
- background-color: transparent;
- border: none;
- appearance: none;
-}
-
-a:active, button:active {
- opacity: .75;
-}
-
-input:is([type="text"], [type="search"]), button, select, textarea {
- font: inherit;
- display: block;
- box-sizing: border-box;
- margin: 0;
- inline-size: 100%;
-}
-
-button {
- padding-inline: 1em;
- padding-block: .5em;
- text-align: start;
-}
-
 .input-box {
  display: block grid;
  grid-template-columns: max-content 1fr;
@@ -87,47 +49,3 @@ button {
  padding: .5rem;
  outline: none;
 }
-
-#modal-content {
- background-color: var(--background-color);
- overflow: hidden;
- inline-size: 100%;
- max-inline-size: 30rem;
- padding: 1rem;
-}
-
-#modal-title {
- margin-block: 1rem;
- margin-inline: 1rem;
- padding: 0;
- overflow-wrap: break-word;
- overflow: hidden;
-}
-
-#modal-actions {
- margin-block: 1em;
- display: block flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-around;
- row-gap: 1em;
-}
-
-#modal-actions > button {
- inline-size: max-content;
- border-radius: .25em;
-}
-
-#modal-actions > button:focus {
- box-shadow: 0 0 .25rem .25rem var(--accent-color);
- outline: none;
-}
-
-#modal-actions > button:disabled {
- display: none;
-}
-
-#modal-actions > button.button-default {
- background-color: #0033cc;
- color: #fff;
-}

dist/components/container-sorter.css

@@ -87,7 +87,7 @@
 
 .up, .down {
  background-color: var(--text-color);
- opacity: .5;
+ opacity: var(--opaque-opacity);
  appearance: none;
  border: none;
  padding: 0;

dist/components/ctg/ctg-bottom-navigation.css

@@ -0,0 +1,68 @@
+/* -*- indent-tabs-mode: nil; tab-width: 2; -*- */
+/* vim: set ts=2 sw=2 et ai : */
+
+/*
+ Container Tab Groups
+ Copyright (C) 2023 Menhera.org
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+@import '/theme.css';
+
+@namespace url(http://www.w3.org/1999/xhtml);
+
+:host {
+ display: block;
+ background-color: var(--background-color);
+ box-shadow: 0 0 .5rem var(--border-color);
+}
+
+.targets {
+ display: block flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-evenly;
+ overflow-inline: auto;
+ max-inline-size: 32rem;
+ margin: auto;
+}
+
+.navigation-target {
+ display: block;
+ text-align: center;
+ appearance: none;
+ border: none;
+ outline: none;
+ background-color: unset;
+ color: inherit;
+ padding-block: .5em;
+ padding-inline: .5em;
+ border-block-end: solid .25rem transparent;
+ opacity: var(--opaque-opacity);
+}
+
+.navigation-target.selected {
+ border-block-end-color: var(--accent-color);
+ opacity: 1;
+}
+
+.navigation-target > .icon {
+ display: block;
+ inline-size: 1.5em;
+ block-size: 1.5em;
+ background-color: var(--text-color);
+ margin: auto;
+ mask: url(/img/firefox-icons/defaultFavicon.svg) center / 75% no-repeat;
+}

dist/components/ctg/ctg-drawer.css

@@ -0,0 +1,110 @@
+/* -*- indent-tabs-mode: nil; tab-width: 2; -*- */
+/* vim: set ts=2 sw=2 et ai : */
+
+/*
+ Container Tab Groups
+ Copyright (C) 2023 Menhera.org
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+@import '/theme.css';
+
+@namespace url(http://www.w3.org/1999/xhtml);
+
+:host {
+ display: block;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ inline-size: 100%;
+ block-size: 100%;
+}
+
+:host([hidden]) {
+ display: none;
+}
+
+#scrim {
+ display: block;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ inline-size: 100%;
+ block-size: 100%;
+ background-color: var(--hover-color);
+ backdrop-filter: blur(.5rem);
+ z-index: 50;
+}
+
+#main {
+ display: block flex;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ inline-size: 90%;
+ max-inline-size: 20rem;
+ block-size: 100%;
+ z-index: 51;
+ flex-direction: column;
+ background-color: var(--background-color);
+}
+
+#header {
+ display: block flex;
+ flex-direction: row;
+ column-gap: .5em;
+ padding-inline: 1em;
+ padding-block-start: .5em;
+ padding-block-end: .5em;
+ align-items: center;
+}
+
+#close-button {
+ display: block;
+ margin: 0;
+ appearance: none;
+ border: none;
+ background-color: var(--text-color);
+ inline-size: 2em;
+ block-size: 2em;
+ mask: url(/img/firefox-icons/close.svg) center / 75% no-repeat;
+ opacity: var(--opaque-opacity);
+}
+
+#close-button:is(:hover, :active, :focus) {
+ opacity: 1;
+}
+
+#heading {
+ display: block;
+ margin: 0;
+ padding-inline: 1em;
+ padding-block: .5em;
+ flex: 1;
+ font-size: 100%;
+ min-inline-size: 0;
+ font-weight: normal;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#content {
+ display: block flex;
+ flex-direction: column;
+ flex: 1;
+ min-block-size: 0;
+ overflow: auto;
+}

dist/components/ctg/ctg-frame-layout.css

@@ -0,0 +1,29 @@
+/* -*- indent-tabs-mode: nil; tab-width: 2; -*- */
+/* vim: set ts=2 sw=2 et ai : */
+
+/*
+ Container Tab Groups
+ Copyright (C) 2023 Menhera.org
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+/* @import '/theme.css'; */
+
+@namespace url(http://www.w3.org/1999/xhtml);
+
+:host {
+ display: block flex;
+ flex-direction: column;
+}