add new styles

web_src/css/group.css

@@ -0,0 +1,91 @@
+@import "./repo_group/header.css";
+
+.repo-group.new.group form {
+  margin: auto;
+}
+
+.repo-group.new.group form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .repo-group.new.group form {
+    width: 800px !important;
+  }
+  .repo-group.new.group form .header {
+    padding-left: 280px !important;
+  }
+  .repo-group.new.group form .inline.field > label {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  .repo-group.new.group form .help {
+    margin-left: 265px !important;
+  }
+  .repo-group.new.group form .optional .title {
+    margin-left: 250px !important;
+  }
+  .repo-group.new.group form .inline.field > input,
+  .repo-group.new.group form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .repo-group.new.group form .optional .title {
+    margin-left: 15px;
+  }
+  .repo-group.new.group form .inline.field > label {
+    display: block;
+  }
+}
+
+.repo-group.new.group form .header {
+  padding-left: 0 !important;
+  text-align: center;
+}
+
+.expandable-menu-item label + div.menu-expandable-content > .menu-expandable-content-inner {
+  overflow: hidden;
+}
+.expandable-menu-item label + div.menu-expandable-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: all 0.2s cubic-bezier(.86,0,.07,1);
+}
+
+.expandable-menu-item label:has(input.toggle:checked) + div.menu-expandable-content {
+  grid-template-rows: 1fr;
+}
+.expandable-menu-item label > .collapse-icon {
+  position: relative;
+  top: 2px;
+  display: none;
+}
+
+.expandable-menu-item label.has-children > .collapse-icon {
+  display: inline-block;
+}
+.expandable-menu-item label {
+  display: flex;
+  align-items: center;
+}
+
+label.has-children:has(input.toggle:checked) > .collapse-icon {
+  transform: rotate(90deg);
+}
+ul:has(.expandable-menu-item), ul:has(.expandable-menu-item) .collapse-icon {
+  transition: all 0.2s ease;
+}
+ul:has(.expandable-menu-item) {
+  list-style: none;
+  overflow: hidden;
+}
+li.expandable-menu-item.item:only-child, li.expandable-menu-item.item:last-child, li.expandable-menu-item.item:first-child {
+  padding-bottom: 0;
+}
+ul.expandable-menu ul li.expandable-menu-item {
+  margin-top: 1rem;
+}
+

web_src/css/index.css

@@ -58,6 +58,7 @@
 @import "./base.css";
 @import "./home.css";
 @import "./install.css";
+@import "./group.css";
 
 @import "./repo.css";
 @import "./repo/release-tag.css";

web_src/css/modules/button.css

@@ -346,6 +346,11 @@
   padding: 0;
 }
 
+.btn:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
 .btn:hover,
 .btn:active {
   background: none;

web_src/css/modules/menu.css

@@ -1,4 +1,4 @@
-.ui.menu {
+.ui.menu, .ui.popup {
   display: flex;
   flex-shrink: 0;
   margin: 1rem 0;

web_src/css/org.css

@@ -2,38 +2,38 @@
   margin-top: 5px;
 }
 
-.page-content.organization .org-avatar {
+.page-content.organization .org-avatar, .page-content.repo-group .avatar {
   margin-right: 15px;
 }
 
-.page-content.organization #org-info .ui.header {
+.page-content.organization #org-info .ui.header, .page-content.repo-group #repo-group-info .ui.header {
   display: flex;
   align-items: center;
   font-size: 36px;
   margin-bottom: 0;
 }
 
-.page-content.organization #org-info .desc {
+.page-content.organization #org-info .desc, .page-content.repo-group #repo-group-info .desc {
   font-size: 16px;
   margin-bottom: 10px;
 }
 
-.page-content.organization #org-info .meta {
+.page-content.organization #org-info .meta, .page-content.repo-group #repo-group-info .meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }
 
-.page-content.organization .ui.top.header .ui.right {
+.page-content.organization .ui.top.header .ui.right, .page-content.repo-group .ui.top.header .ui.right {
   margin-top: 0;
 }
 
-.page-content.organization .teams .item {
+.page-content.organization .teams .item, .page-content.repo-group .teams .item {
   padding: 10px 15px;
 }
 
-.page-content.organization .members .ui.avatar {
+.page-content.organization .members .ui.avatar, .page-content.repo-group .members .ui.avatar {
   margin-right: 5px;
   margin-bottom: 5px;
 }

web_src/css/repo_group/header.css

@@ -0,0 +1,28 @@
+.repo-group-header {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 4px;
+  align-items: center;
+}
+
+.repo-group-header .flex-item {
+  padding: 0;
+}
+
+.repo-group-header .flex-item-main {
+  flex: 0;
+  flex-basis: unset;
+}
+
+.repo-group-header .flex-item-trailing {
+  flex-wrap: nowrap;
+}
+.repo-group-buttons {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  word-break: keep-all;
+  gap: 0.25em;
+}