8 files changed, 546 insertions, 0 deletions
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
new file mode 100644
index 00000000..9da5fe6a
--- /dev/null
+++ b/web_src/css/repo/header.css
@@ -0,0 +1,68 @@
+.repository .secondary-nav {
+  padding-top: 12px;
+}
+
+.repository .secondary-nav .fork-flag {
+  margin-top: 0.5rem;
+  font-size: 12px;
+}
+
+.repo-header {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 4px;
+}
+
+.repo-header .flex-item {
+  padding: 0;
+}
+
+.repo-header .flex-item-main {
+  flex: 0;
+  flex-basis: unset;
+}
+
+.repo-header .flex-item-trailing {
+  flex-wrap: nowrap;
+}
+
+.repo-buttons {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  word-break: keep-all;
+}
+
+.repo-buttons .ui.labeled.button > .label:hover {
+  color: var(--color-primary-light-2);
+  background: var(--color-light);
+}
+
+.repo-buttons button[disabled] ~ .label {
+  opacity: var(--opacity-disabled);
+  color: var(--color-text-dark);
+  background: var(--color-light-mimic-enabled) !important;
+}
+
+.repo-buttons button[disabled] ~ .label:hover {
+  color: var(--color-primary-dark-1);
+}
+
+.repo-buttons .ui.labeled.button.disabled {
+  pointer-events: inherit !important;
+}
+
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: var(--color-text-dark);
+  background: var(--color-light-mimic-enabled) !important;
+}
+
+.repo-buttons .ui.labeled.button.disabled > .label:hover {
+  color: var(--color-primary-dark-1);
+}
+
+.repo-buttons .ui.labeled.button.disabled > .button {
+  pointer-events: none !important;
+}
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
new file mode 100644
index 00000000..fb832bd0
--- /dev/null
+++ b/web_src/css/repo/issue-card.css
@@ -0,0 +1,40 @@
+.issue-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: stretch;
+  border-radius: var(--border-radius);
+  padding: 8px 10px;
+  border: 1px solid var(--color-secondary);
+  background: var(--color-card);
+}
+
+.issue-card-icon,
+.issue-card-unpin {
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+
+.issue-card-title {
+  flex: 1;
+  font-size: 14px;
+}
+
+.issue-card.sortable-chosen .issue-card-title {
+  cursor: inherit;
+}
+
+.issue-card-bottom {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 0.25em;
+}
+
+.issue-card-assignees {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  justify-content: end;
+  flex-wrap: wrap;
+}
diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css
new file mode 100644
index 00000000..9b4b144a
--- /dev/null
+++ b/web_src/css/repo/issue-label.css
@@ -0,0 +1,52 @@
+.issue-label-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.issue-label-list .item {
+  border-bottom: 1px solid var(--color-secondary);
+  display: flex;
+  padding: 1em 0;
+  margin: 0;
+}
+
+.issue-label-list .item:first-child {
+  padding-top: 0;
+}
+
+.issue-label-list .item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.issue-label-list .item .label-title {
+  width: 33%;
+}
+
+.issue-label-list .item .label-issues {
+  width: 33%;
+}
+
+.issue-label-list .item .label-operation {
+  width: 33%;
+}
+
+.issue-label-list .item a {
+  font-size: 12px;
+  padding-right: 10px;
+  color: var(--color-text-light);
+}
+
+.issue-label-list .item.org-label {
+  opacity: 0.7;
+}
+
+.label-operation .label {
+  height: fit-content;
+}
+
+.archived-label-hint {
+  float: right;
+  margin: -12px;
+}
diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
new file mode 100644
index 00000000..9143b013
--- /dev/null
+++ b/web_src/css/repo/issue-list.css
@@ -0,0 +1,112 @@
+.issue-list-toolbar {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.issue-list-toolbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.issue-list-toolbar-right .filter.menu {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.issue-list-new.button {
+  margin-right: 0;
+}
+
+.list-header-issues {
+  min-height: var(--repo-header-issue-min-height);
+}
+
+@media (max-width: 767.98px) {
+  .issue-list-navbar {
+    order: 0;
+  }
+  .issue-list-new {
+    order: 1;
+    margin-left: auto !important;
+  }
+  .issue-list-search {
+    order: 2 !important;
+  }
+  /* Don't use flex wrap on mobile as it takes too much vertical space.
+   * Only set overflow properties on mobile screens, because while the
+   * CSS trick to pop out from overflowing works on desktop screen, it
+   * has a massive flaw that it cannot inherited any max width from it's 'real'
+   * parent and therefor ends up taking more vertical space than is desired.
+   **/
+  .issue-list-toolbar-right .filter.menu {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  /* The following few CSS was created with care and built with the information
+   * from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/
+  */
+
+  /* It's important that every element up to .issue-list-toolbar-right doesn't
+   * have a position set, such that element that wants to pop out will use
+   * .issue-list-toolbar-right as 'clip parent' and thereby avoids the
+   * overflow-y: hidden.
+  */
+  .issue-list-toolbar-right .filter.menu > .dropdown.item {
+    position: initial;
+  }
+  /* It's important that this element and not an child has `position` set.
+   * Set width so that overflow-x knows where to stop overflowing.
+  */
+  .issue-list-toolbar-right {
+    position: relative;
+    width: 100%;
+  }
+}
+
+#issue-list .flex-item-body .branches {
+  display: inline-flex;
+}
+
+#issue-list .flex-item-body .branches .branch {
+  background-color: var(--color-secondary-alpha-50);
+  border-radius: var(--border-radius);
+  padding: 0 4px;
+}
+
+#issue-list .flex-item-body .branches .truncated-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+#issue-list .flex-item-body .checklist progress {
+  margin-left: 2px;
+  width: 80px;
+  height: 6px;
+  display: inline-block;
+}
+
+#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
+  background-color: var(--color-secondary-dark-4);
+}
+
+#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
+  background-color: var(--color-secondary-dark-4);
+}
+
+.archived-label-filter {
+  margin-left: 10px;
+  font-size: 12px;
+  display: flex !important;
+  margin-bottom: 8px;
+  min-width: fit-content;
+}
diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
new file mode 100644
index 00000000..d32899a0
--- /dev/null
+++ b/web_src/css/repo/linebutton.css
@@ -0,0 +1,19 @@
+.code-view .lines-num:hover,
+.file-preview .lines-num:hover {
+  color: var(--color-text-dark) !important;
+}
+
+.code-line-button {
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  padding: 1px 4px !important;
+  position: absolute;
+  font-family: var(--fonts-regular);
+  left: 0;
+  transform: translateX(calc(-50% + 6px));
+  cursor: pointer;
+}
+
+.code-line-button:hover {
+  background: var(--color-secondary) !important;
+}
diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css
new file mode 100644
index 00000000..304cfbc1
--- /dev/null
+++ b/web_src/css/repo/list-header.css
@@ -0,0 +1,58 @@
+.list-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+
+.list-header-sort {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.list-header-search {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  min-width: 200px; /* to enable flexbox wrapping on mobile */
+}
+
+.list-header-search .input {
+  flex: 1;
+}
+
+.small-menu-items {
+  min-height: 35.4px !important; /* match .small.button in height */
+  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
+}
+
+.small-menu-items .item {
+  background: var(--color-menu) !important;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
+.small-menu-items .item:hover {
+  background: var(--color-hover) !important;
+}
+
+.small-menu-items .item.active {
+  background: var(--color-active) !important;
+}
+
+@media (max-width: 767.98px) {
+  .list-header-search {
+    order: 0;
+  }
+  .list-header-toggle {
+    order: 1;
+  }
+  .list-header-sort {
+    order: 2;
+    margin-left: auto;
+  }
+}
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
new file mode 100644
index 00000000..429a4690
--- /dev/null
+++ b/web_src/css/repo/release-tag.css
@@ -0,0 +1,125 @@
+.repository.releases #release-list {
+  margin-top: 12px;
+  padding-top: 12px;
+  padding-left: 0;
+}
+
+.repository.releases #release-list .release-list-title {
+  font-size: 2rem;
+  font-weight: var(--font-weight-normal);
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  margin: 0;
+}
+
+.repository.releases #release-list > li .meta {
+  padding-top: 25px;
+  position: relative;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.repository.releases #release-list > li .detail {
+  padding-bottom: 20px;
+  border-left: 1px solid var(--color-secondary);
+}
+
+.repository.releases #release-list > li .detail .author img {
+  margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
+}
+
+.repository.releases #release-list > li .detail .download .list {
+  padding-left: 0;
+}
+
+.repository.releases #release-list > li .detail .download .list li {
+  background: var(--color-light);
+  border: 1px solid var(--color-secondary);
+  border-top: none;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.repository.releases #release-list > li .detail .download .list :is(li:first-child, .start-gap + hr + li) {
+  border-top: 1px solid var(--color-secondary);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.repository.releases #release-list > li .detail .download .list :is(li:last-child, .start-gap) {
+  border-bottom: 1px solid var(--color-secondary);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.repository.releases #release-list > li .detail .download .list hr {
+  height: 8px;
+  margin: 0;
+}
+
+.repository.releases #release-list > li .detail .dot {
+  width: 10px;
+  height: 10px;
+  background-color: var(--color-secondary-dark-3);
+  position: absolute;
+  left: -5.5px;
+  top: 30px;
+  border-radius: var(--border-radius-full);
+  border: 2.5px solid var(--color-body);
+}
+
+.repository.tags #tags-table .tag {
+  padding: 8px 12px;
+}
+
+.repository.tags #tags-table .release-tag-name {
+  font-size: 18px;
+  font-weight: var(--font-weight-normal);
+}
+
+.repository.new.release .target {
+  min-width: 500px;
+}
+
+.repository.new.release .target #tag-name {
+  margin-top: -4px;
+}
+
+.repository.new.release .target .at {
+  margin-left: -5px;
+  margin-right: 5px;
+}
+
+.repository.new.release .target .selection.dropdown {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.repository.new.release .prerelease.field {
+  margin-bottom: 0;
+}
+
+@media (max-width: 438px) {
+  .repository.new.release .field button,
+  .repository.new.release .field input {
+    width: 100%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .repository.new.release .field button {
+    margin-bottom: 1em;
+  }
+}
+
+.repository.new.release .field .attachment_edit {
+  max-width: 48em;
+}
+
+.repository.new.release .markup {
+  min-height: 240px;
+}
diff --git a/web_src/css/repo/wiki.css b/web_src/css/repo/wiki.css
new file mode 100644
index 00000000..ba502d32
--- /dev/null
+++ b/web_src/css/repo/wiki.css
@@ -0,0 +1,72 @@
+.repository.wiki .wiki-pages-list tr:hover {
+  background-color: var(--color-hover);
+}
+
+.repository.wiki .wiki-pages-list .wiki-git-entry {
+  margin-left: 10px;
+  display: none;
+}
+
+.repository.wiki .wiki-pages-list tr:hover .wiki-git-entry {
+  display: inline-block;
+}
+
+.repository.wiki .markup {
+  overflow: visible;
+}
+
+.repository.wiki .markup[data-tab-panel="markdown-previewer"] {
+  min-height: 340px; /* This height matches the markdown editor's height */
+}
+
+.repository.wiki .wiki-content-parts .markup {
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  padding: 1em;
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+.repository.wiki .wiki-content-main.with-sidebar {
+  float: left;
+  width: 80%;
+  max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
+}
+
+.repository.wiki .wiki-content-sidebar {
+  float: right;
+  width: calc(20% - 1em);
+  min-width: 150px;
+}
+
+.repository.wiki .wiki-content-sidebar .ui.message.unicode-escape-prompt p {
+  display: none;
+}
+
+.repository.wiki .wiki-content-footer {
+  margin-top: 1em;
+}
+
+.repository.wiki .wiki-content-toc ul {
+  margin: 0;
+  list-style: none;
+  padding: 5px 0 5px 1em;
+}
+
+.repository.wiki .wiki-content-toc ul ul {
+  border-left:  1px var(--color-secondary);
+  border-left-style: dashed;
+}
+
+@media (max-width: 767.98px) {
+  .repository.wiki .clone-panel #repo-clone-url {
+    width: 160px;
+  }
+  .repository.wiki .wiki-content-main.with-sidebar,
+  .repository.wiki .wiki-content-sidebar {
+    float: none;
+    width: 100%;
+    min-width: unset;
+    max-width: unset;
+  }
+}