diff --git a/css/pb.css b/css/pb.css
new file mode 100644
index 0000000000000000000000000000000000000000..99ef383b56b07145288dcc5d56f4219510bc9594
--- /dev/null
+++ b/css/pb.css
@@ -0,0 +1,924 @@
+/* WIP: Move from the style tags. */
+
+/* <Filter> */
+.filter__summary {
+ padding: 0;
+ cursor: pointer;
+}
+[open] .filter__summary {
+ padding-bottom: 0.95rem;
+}
+.filter__heading {
+ margin-top: 0;
+ display: inline;
+ font-size: 1rem;
+ padding: 0 0.5rem;
+}
+.filter__checkbox-label {
+ display: block;
+ padding: 5px 0;
+}
+.filter__checkbox {
+ margin-right: 10px;
+ margin-left: 10px;
+}
+.filter__fieldset {
+ border: none;
+}
+.filter__checkbox-label:hover,
+.filter__checkbox:hover {
+ cursor: pointer;
+}
+
+/* <ImageCarousel> */
+.image-carousel__carousel {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 400px;
+}
+.image-carousel__slider-image {
+ min-width: 650px;
+ min-height: 400px;
+ margin: 10px;
+}
+
+.image-carousel__slide-btn--right {
+ transform: rotate(180deg);
+}
+.image-carousel__slide-btn {
+ margin: 0 10px;
+ cursor: pointer;
+}
+.image-carousel__slide-btn:disabled {
+ opacity: 0.5;
+ cursor: inherit;
+}
+.image-carousel__slide-btn > img {
+ background: transparent;
+ border: none;
+ width: 50px;
+ height: 59px;
+}
+@media only screen and (max-width: 600px) {
+ .image-carousel__slider-image {
+ min-width: 60%;
+ min-height: 60%;
+ }
+}
+
+/* <Loading> */
+.loading__ajax-progress {
+ display: inline-block;
+}
+
+.absolute {
+ position: absolute !important;
+}
+
+.ajax-progress__throbber {
+ box-sizing: border-box;
+ width: 1.125rem;
+ height: 1.125rem;
+ animation: pb-throbber 0.75s linear infinite;
+ border: 2px solid #003cc5;
+ border-right: 2px dotted transparent;
+ border-radius: 50%;
+}
+
+.ajax-progress--fullscreen {
+ position: fixed;
+ z-index: 1000;
+ top: 50%;
+ left: 50%;
+ box-sizing: border-box;
+ width: 3.5rem; /* 56px */
+ height: 3.5rem;
+ margin: -1.75rem;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 3.5rem;
+ background: #fff;
+ box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+}
+
+.ajax-progress__throbber--fullscreen {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1.75rem; /* 28px */
+ height: 1.75rem; /* 28px */
+ margin: -0.875rem;
+ content: "";
+ border: 3px solid #003cc5;
+ border-right: 3px dotted transparent;
+}
+
+@keyframes pb-throbber {
+ 0% {
+ transform: rotateZ(0);
+ }
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
+
+/* <ModulePage> */
+.module-page__wrapper {
+ display: flex;
+ text-align: start;
+}
+.module-page__sidebar {
+ flex: 1;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+}
+.module-page__main {
+ flex: 4;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+.module-page__action-button-wrapper {
+ margin: 20px;
+}
+.module-page__divider {
+ border: 1px solid #000000;
+}
+.module-page__categories-label {
+ font-weight: bold;
+}
+.module-page__module-details-grid {
+ display: grid;
+ grid-template-columns: 0.5fr 2fr;
+ line-height: 20px;
+ margin-top: 10px;
+}
+
+.module-page__module-details-grid > *:nth-child(odd) {
+ margin: 10% 20% 0 40%;
+}
+
+.module-page__module-details-grid > *:nth-child(even) {
+ margin: 5px 15px;
+}
+.module-page__category-list {
+ margin: 0.25em 0 0.25em 0;
+ padding: 0;
+ display: inline-block;
+ width: 100%;
+ height: 20px;
+ cursor: pointer;
+}
+.module-page__category-list-item {
+ list-style: none;
+ display: inline-block;
+ margin-top: 5px;
+ margin-bottom: 2px;
+ margin-inline-start: 7px;
+ padding: 2px 9px;
+ border-radius: 25px;
+ background-color: #e5e5e5;
+ font-size: 0.9em;
+ font-weight: 600;
+ color: #4f4f4f;
+}
+.module-page__project-logo {
+ min-height: 200px;
+}
+.module-page__carousel-wrapper {
+ margin: 20px 0;
+}
+.module-page--back-to-browsing {
+ text-decoration: none;
+}
+@media only screen and (max-width: 600px) {
+ .module-page__wrapper {
+ flex-direction: column;
+ }
+}
+
+/* <PagerItem> */
+.pager__link--forward::after {
+ margin-inline-start: 0.5rem;
+}
+.pager__link--backward::before {
+ margin-inline-end: 0.5rem;
+}
+
+/* <Pagination> */
+.pagination__pager {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.pagination__num-projects {
+ margin: 0 10px;
+}
+@media only screen and (max-width: 32rem) {
+ .pagination__pager {
+ flex-direction: column;
+ }
+}
+
+/* <ProjectBrowser> */
+.project-browser__toggle {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ margin-bottom: 1.5em;
+ font-family: inherit;
+ color: #232429;
+ background-color: #d3d4d9;
+ width: 80.41px;
+ height: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ border: none;
+}
+
+.project-browser__list-icon,
+.project-browser__grid-icon {
+ pointer-events: none;
+}
+.project-browser__toggle:first-child {
+ margin-inline-start: auto;
+}
+.project-browser__toggle-buttons {
+ display: flex;
+ margin-inline-end: 25px;
+ font-weight: bold;
+}
+.project-browser__toggle:focus {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
+.project-browser__toggle.project-browser__list-button {
+ margin-inline-end: 5px;
+ border-radius: 2px 0 0 2px;
+ cursor: pointer;
+}
+.project-browser__toggle.project-browser__grid-button {
+ border-radius: 0 2px 2px 0;
+ cursor: pointer;
+ margin-inline-end: 5px;
+}
+.project-browser__selected-tab {
+ background-color: #adaeb3;
+}
+.search-results {
+ font-weight: bold;
+ margin-inline-start: 10px;
+ margin-bottom: 5px;
+}
+.project-browser__install-warning {
+ border: 1px solid red;
+ padding: 1em;
+}
+.project-browser__warning {
+ margin: 0.5em 0;
+}
+.project-browser__warning-header {
+ color: red;
+}
+.search-results-wrapper {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #dee2e6;
+}
+#output {
+ display: inline-block;
+ font-family: sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ margin-left: 20px;
+}
+
+@media (forced-colors: active) {
+ .project-browser__toggle {
+ border: 1px solid;
+ }
+ @media (prefers-color-scheme: dark) {
+ .project-browser__list-icon {
+ filter: invert(1);
+ }
+ .project-browser__grid-icon {
+ filter: invert(1);
+ }
+ }
+}
+
+/* <ProjectGrid> */
+.projects-list {
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ margin: 0;
+}
+
+.project-browser__aside {
+ flex: 1;
+}
+.project-browser__main {
+ flex: 4;
+}
+
+@media (min-width: 700px) {
+ .project-browser__container {
+ display: flex;
+ }
+}
+/* Stack cards below category filter on smaller screens */
+@media screen and (max-width: 900px) {
+ .project-browser__container {
+ flex-direction: column;
+ }
+}
+
+/* <Tabs> */
+.tabs__tab {
+ border: 0;
+ cursor: pointer;
+}
+.tabs__tab:focus {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+}
+.project-browser__plugin-tabs {
+ display: flex;
+}
+.project-browser__plugin-tab {
+ margin-right: 5px;
+ margin-left: 5px;
+ height: auto;
+ min-height: 30px;
+ cursor: pointer;
+}
+.project-browser__plugin-tabs .project-browser__toggle {
+ margin-inline-start: 0;
+}
+
+/* <Project/ActionButton> */
+.action-button__wrapper {
+ padding: 0.5em 0;
+ margin-inline-start: auto;
+}
+
+.action-button__unicode {
+ color: #228572;
+}
+
+/* <Project/Categories> */
+.categories {
+ clear: both;
+ margin-top: 1em;
+ position: center;
+}
+.categories__list {
+ margin: 0.25em 0 0.25em 0;
+ padding: 0;
+ display: inline-block;
+ width: 100%;
+ height: 20px;
+}
+.categories__category {
+ list-style: none;
+ display: inline-block;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ padding: 2px 9px;
+ border-radius: 25px;
+ background-color: #e5e5e5;
+ font-size: 0.9em;
+ font-weight: 600;
+ color: #4f4f4f;
+}
+.categories__category:not(:first-child, .categories__category--extra) {
+ margin-inline-start: 4px;
+}
+.categories .categories__category--extra {
+ background-color: transparent;
+ border: 1px solid #bbb;
+}
+.categories__list--grid {
+ text-align: center;
+}
+@media (forced-colors: active) {
+ .categories__category {
+ border: 1px solid;
+ }
+}
+
+/* <Project/Image> */
+.image-carousel__slider-image,
+.project__logo-image {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+ object-fit: scale-down;
+}
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+ .image-carousel__slider-image,
+ .project__logo-image {
+ display: block;
+ width: auto;
+ border-radius: 5px;
+ height: 100px;
+ }
+ .image-carousel__slider,
+ .project__logo {
+ margin-top: 20px;
+ }
+}
+
+/* <Project/LoadingEllipsis> */
+.loading-ellipsis {
+ position: relative;
+}
+
+.loading-ellipsis:after {
+ position: absolute;
+ overflow: hidden;
+ display: inline-block;
+ vertical-align: bottom;
+ -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+ animation: ellipsis steps(4, end) 900ms infinite;
+ content: "\2026"; /* ascii code for the ellipsis character */
+ width: 0;
+}
+
+@keyframes ellipsis {
+ to {
+ width: 20px;
+ }
+}
+
+@-webkit-keyframes ellipsis {
+ to {
+ width: 20px;
+ }
+}
+
+/* <Project/Project> */
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 53.75rem) {
+ .project--grid .project__logo {
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ }
+ .project--list .project__logo {
+ margin-top: -20px;
+ display: flex;
+ align-items: center;
+ }
+ .project--list.project {
+ padding: 0 2rem;
+ }
+}
+
+/* One column card view */
+@media screen and (max-width: 75rem) {
+ .project--grid.project {
+ width: 100%;
+ }
+}
+
+/* Two column card view (laptops/desktops, 1200px and up) */
+@media only screen and (min-width: 75rem) {
+ .project--grid.project {
+ width: 49%;
+ }
+ .project--list.project {
+ width: 100%;
+ padding: 0 2rem;
+ }
+}
+
+@media only screen and (min-width: 87.5rem) {
+ .project--grid.project {
+ width: 32%;
+ }
+}
+
+.project {
+ position: relative;
+}
+.project--grid.project {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 2em;
+ border: 1px solid rgba(212, 212, 218, 0.8);
+ border-radius: 2px;
+ box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+ margin-inline-end: 0.5vw;
+}
+
+.project--grid .project__title {
+ margin-top: 0.25em;
+ text-align: center;
+}
+
+.project__link {
+ text-decoration: none;
+ color: black;
+}
+.project__link:hover {
+ color: #003ecc;
+ text-decoration: underline;
+}
+
+.project--grid .project__main {
+ display: flex;
+ background: white;
+ position: relative;
+ padding: 1em 1em;
+ flex-direction: column;
+}
+
+.project--grid .project__body {
+ text-align: center;
+}
+
+.project--grid .project__icons {
+ display: flex;
+ margin-top: auto;
+ padding: 1em 1em;
+ height: 3em;
+}
+.project__body {
+ font-size: 15px;
+}
+.project--list.project {
+ display: grid;
+ grid-template-columns: 20% 1fr;
+ grid-template-rows: 1fr;
+ grid-template-areas:
+ "aside main"
+ "aside footer";
+}
+
+.project--list .project__image {
+ padding-inline-start: 4em;
+}
+
+.project--list .project__icons {
+ grid-area: footer;
+}
+
+.project--list .project__logo {
+ grid-area: aside;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ padding-inline: 0 2rem;
+}
+.project--list .project__main {
+ grid-area: main;
+}
+.project--list .project__title {
+ padding-top: 10px;
+}
+.project--list.project {
+ margin-bottom: 2em;
+ background: #ffffff;
+ border: 0.5px solid #a4a2a2;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+.project--list .project__icons {
+ display: flex;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ padding-inline: 0 1em;
+}
+.project__icons p {
+ display: inline;
+}
+.project__icons.warnings {
+ display: block;
+}
+.project__icons.warnings span {
+ display: list-item;
+}
+.project__icons.warnings img {
+ display: inline;
+ width: 1.2rem;
+ position: relative;
+ bottom: -0.25rem;
+}
+.warnings + .action {
+ margin-inline-end: 1em;
+ margin-bottom: 1em;
+}
+.project__project-usage-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.project__status-icon {
+ width: 2.4em;
+ margin-inline-end: 0.5em;
+ display: block;
+}
+.project__install-count {
+ margin-inline-start: 10px;
+ font-size: 13px;
+}
+.project__active-installs-text {
+ font-size: 13px;
+}
+
+/* <Project/ProjectButtonBase> */
+.project_button--primary {
+ margin: 0 !important;
+ border-width: 0 !important;
+ box-shadow: none;
+ color: #fff;
+ height: 24px;
+ font-size: 12.65px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ white-space: nowrap;
+}
+@media (forced-colors: active) {
+ .project_button--primary {
+ border: 1px solid !important;
+ }
+}
+
+/* <Project/ProjectIcon> */
+.pb-icon--project-listing {
+ width: 2.4em;
+}
+.pb-icon--module-details {
+ width: 25px;
+}
+
+@media (forced-colors: active) and (prefers-color-scheme: dark) {
+ .pb-icon--usage {
+ filter: invert(1);
+ }
+}
+
+/* <Project/ProjectStatusIndicator> */
+.project_status-indicator {
+ font-weight: bold;
+ text-decoration: none;
+}
+
+/* <Search/FilterApplied> */
+.filter-applied {
+ word-wrap: break-word;
+ font-size: 0.875rem;
+ color: white;
+ display: inline-flex;
+ align-items: center;
+ border-radius: 25px;
+ background: #013cc5;
+ padding: 10px;
+ margin-inline-end: 10px;
+ width: auto;
+ height: auto;
+}
+.filter-applied__button-close {
+ display: inline-flex;
+ padding: 0;
+ margin-inline-start: 10px;
+ outline: none;
+ box-shadow: none;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+.filter-applied__button-close > img {
+ transform: scale(1.4);
+ height: 20px;
+ width: 20px;
+}
+
+@media (forced-colors: active) {
+ .filter-applied {
+ border: 1px solid;
+ }
+ @media (prefers-color-scheme: light) {
+ .filter-applied__button-close > img {
+ filter: invert(1);
+ }
+ }
+}
+
+/* <Search/FilterGroup> */
+.filter-group__radio {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 2px;
+ inset-inline-start: 5px;
+}
+.filter-group__radio:hover {
+ cursor: pointer;
+}
+
+.filter-group {
+ flex-wrap: wrap;
+ flex-direction: column;
+ display: inline-grid;
+ position: relative;
+ margin-bottom: 20px;
+ margin-top: 15px;
+ padding-inline-start: 15px;
+ padding-top: 15px;
+ justify-content: flex-start;
+}
+
+.filter-group__title-wrapper {
+ font-size: 18px;
+ margin-inline-end: 10px;
+}
+
+.filter-group__filter-options {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 10px;
+ flex-direction: column;
+}
+
+.filter-group__filter-option {
+ margin-bottom: 10px;
+ line-height: 25px;
+ position: relative;
+}
+
+@media only screen and (max-width: 72rem) {
+ .filter-group {
+ display: table;
+ }
+}
+
+/* <Search/Search> */
+.search__form-item {
+ margin-top: 0;
+}
+.search__form {
+ margin-top: 2.375rem;
+ display: inherit;
+ flex-wrap: wrap;
+ padding: 0 0 1.5rem;
+}
+
+.search__search-bar .search__search_term {
+ width: 100%;
+ outline: none;
+ height: 50px;
+ position: relative;
+ display: flex;
+}
+
+.search__search-bar {
+ height: 50px;
+ text-align: center;
+ color: #fff;
+ cursor: pointer;
+ font-size: 20px;
+ position: relative;
+ border: 1px solid #919297;
+ border-radius: 2px;
+}
+
+.search__search-icon {
+ position: absolute;
+ bottom: 12px;
+ inset-inline-end: 30px;
+}
+
+.search__search_term::placeholder {
+ font-family: sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 150%;
+ display: flex;
+ align-items: center;
+}
+
+.dropdown-filters {
+ position: relative;
+ border: 3px solid #f3f4f9;
+ z-index: 1;
+}
+
+.search__grid-container {
+ display: grid;
+ height: auto;
+ grid-template-columns: 5fr auto auto;
+ grid-gap: 20px;
+ background: #f3f4f9;
+ padding: 5px;
+ align-items: center;
+ max-width: 100%;
+}
+
+.search__filter-button {
+ padding: 0 0.25rem;
+ background: none;
+ border: none;
+ color: #013cc5;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+@media screen and (max-width: 855px) {
+ .search__grid-container {
+ display: block;
+ }
+}
+
+/* <Search/SearchFilters> */
+@media only screen and (min-width: 1200px) {
+ .small-icons {
+ margin-top: -3px;
+ margin-inline-end: 1px;
+ }
+ .search__checkbox-label {
+ font-weight: normal;
+ padding-inline-start: 35px;
+ display: flex;
+ }
+ .search__checkbox-label {
+ font-weight: normal;
+ padding-inline-start: 35px;
+ display: flex;
+ margin-right: unset;
+ }
+}
+
+/* <Search/SearchFilterToggle> */
+.search__filter__toggle-container {
+ display: flex;
+ margin-inline-end: 1em;
+}
+
+.search__filter__toggle {
+ background-color: #d3d4d9;
+ color: black;
+ padding-left: 16px;
+ padding-right: 16px;
+ font-size: 16px;
+ border-radius: 2px;
+ width: fit-content;
+ margin-inline-start: 15px;
+ text-decoration: underline;
+}
+.search__filter__toggle.is_open {
+ background-color: #adaeb3;
+}
+.search__filter__toggle:hover {
+ cursor: pointer;
+}
+
+.search__filter__toggle-img {
+ width: 20px;
+ height: 14px;
+ padding: 0 0.25rem;
+ margin-bottom: -2px;
+ margin-inline-end: 4px;
+}
+@media (forced-colors: active) {
+ .search__filter__toggle {
+ border: 1px solid;
+ }
+ @media (prefers-color-scheme: dark) {
+ .search__filter__toggle-img {
+ filter: invert(1);
+ }
+ }
+}
+
+/* <Search/SearchSort> */
+.search__sort {
+ z-index: 2;
+}
+
+.search__sort-select {
+ border: none;
+ background-color: #d3d4d9;
+}
+.search__sort-select:hover {
+ cursor: pointer;
+}
+
+@media screen and (max-width: 855px) {
+ .search__sort {
+ margin-bottom: 10px;
+ margin-top: 10px;
+ }
+}
+@media (forced-colors: active) {
+ #pb-sort {
+ border: 1px solid;
+ }
+}
diff --git a/project_browser.libraries.yml b/project_browser.libraries.yml
index bfddfffa30f2b138f5c297014291f3ffdf77ec67..a50be761879ab71448e2a68f19261c4d2855e698 100644
--- a/project_browser.libraries.yml
+++ b/project_browser.libraries.yml
@@ -13,6 +13,12 @@ svelte:
- core/drupal.debounce
- core/drupal.dialog
- core/drupal.announce
+ - project_browser/project_browser
+
+project_browser:
+ css:
+ theme:
+ css/pb.css: {}
tabledrag:
js:
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index 0e54dc38738f118f6b4238306ea45e20a2435d59..ced5fda21e13d1002c17b861b762049ec18329bf 100644
Binary files a/sveltejs/public/build/bundle.js and b/sveltejs/public/build/bundle.js differ
diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map
index e1f605a6859968dfa81ed57c8a2156677ad0b638..fdec582019c24c47a5c022dd1cdf744e2d2527af 100644
Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ
diff --git a/sveltejs/src/Filter.svelte b/sveltejs/src/Filter.svelte
index 17604c02b83430245c73a5eea96d433762efc962..8cc404c7cba86aef9a1ad892ce1a996aed2eea6a 100644
--- a/sveltejs/src/Filter.svelte
+++ b/sveltejs/src/Filter.svelte
@@ -85,34 +85,3 @@
</section>
</form>
</MediaQuery>
-
-<style>
- .filter__summary {
- padding: 0;
- cursor: pointer;
- }
- [open] .filter__summary {
- padding-bottom: 0.95rem;
- }
- .filter__heading {
- margin-top: 0;
- display: inline;
- font-size: 1rem;
- padding: 0 0.5rem;
- }
- .filter__checkbox-label {
- display: block;
- padding: 5px 0;
- }
- .filter__checkbox {
- margin-right: 10px;
- margin-left: 10px;
- }
- .filter__fieldset {
- border: none;
- }
- .filter__checkbox-label:hover,
- .filter__checkbox:hover {
- cursor: pointer;
- }
-</style>
diff --git a/sveltejs/src/ImageCarousel.svelte b/sveltejs/src/ImageCarousel.svelte
index da0a85e34a7d2dc8000604b197c8491ae89720e3..fb51f4642c4a173e88837ad384205cb231408599 100644
--- a/sveltejs/src/ImageCarousel.svelte
+++ b/sveltejs/src/ImageCarousel.svelte
@@ -58,41 +58,3 @@
>
{/if}
</div>
-
-<style>
- .image-carousel__carousel {
- display: flex;
- align-items: center;
- width: 100%;
- height: 400px;
- }
- :global(.image-carousel__slider-image) {
- min-width: 650px;
- min-height: 400px;
- margin: 10px;
- }
-
- .image-carousel__slide-btn--right {
- transform: rotate(180deg);
- }
- .image-carousel__slide-btn {
- margin: 0 10px;
- cursor: pointer;
- }
- .image-carousel__slide-btn:disabled {
- opacity: 0.5;
- cursor: inherit;
- }
- .image-carousel__slide-btn > img {
- background: transparent;
- border: none;
- width: 50px;
- height: 59px;
- }
- @media only screen and (max-width: 600px) {
- :global(.image-carousel__slider-image) {
- min-width: 60%;
- min-height: 60%;
- }
- }
-</style>
diff --git a/sveltejs/src/Loading.svelte b/sveltejs/src/Loading.svelte
index 3126ea3019b459a181163117b42a76e2812ae0bf..c2c3f86e526b7e4a20442c45361c8970e68e4019 100644
--- a/sveltejs/src/Loading.svelte
+++ b/sveltejs/src/Loading.svelte
@@ -11,59 +11,3 @@
</div>
</div>
-
-<style>
- .loading__ajax-progress {
- display: inline-block;
- }
-
- .absolute {
- position: absolute !important;
- }
-
- .ajax-progress__throbber {
- box-sizing: border-box;
- width: 1.125rem;
- height: 1.125rem;
- animation: pb-throbber 0.75s linear infinite;
- border: 2px solid #003cc5;
- border-right: 2px dotted transparent;
- border-radius: 50%;
- }
-
- .ajax-progress--fullscreen {
- position: fixed;
- z-index: 1000;
- top: 50%;
- left: 50%;
- box-sizing: border-box;
- width: 3.5rem; /* 56px */
- height: 3.5rem;
- margin: -1.75rem;
- border: 1px solid rgba(216, 217, 224, 0.8);
- border-radius: 3.5rem;
- background: #fff;
- box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
- }
-
- .ajax-progress__throbber--fullscreen {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 1.75rem; /* 28px */
- height: 1.75rem; /* 28px */
- margin: -0.875rem;
- content: '';
- border: 3px solid #003cc5;
- border-right: 3px dotted transparent;
- }
-
- @keyframes pb-throbber {
- 0% {
- transform: rotateZ(0);
- }
- 100% {
- transform: rotateZ(360deg);
- }
- }
-</style>
diff --git a/sveltejs/src/ModulePage.svelte b/sveltejs/src/ModulePage.svelte
index 07997953e733ba82574ecc2e981a4c4b6e0f5922..f120430fc90c741f8e106037752c1decb6c1c4c8 100644
--- a/sveltejs/src/ModulePage.svelte
+++ b/sveltejs/src/ModulePage.svelte
@@ -114,81 +114,3 @@
</div>
</div>
</div>
-
-<style>
- .module-page__wrapper {
- display: flex;
- text-align: start;
- }
- .module-page__sidebar {
- flex: 1;
- padding: 40px;
- display: flex;
- flex-direction: column;
- }
- .module-page__main {
- flex: 4;
- padding: 40px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
- .module-page__action-button-wrapper {
- margin: 20px;
- }
- .module-page__divider {
- border: 1px solid #000000;
- }
- .module-page__categories-label {
- font-weight: bold;
- }
- .module-page__module-details-grid {
- display: grid;
- grid-template-columns: 0.5fr 2fr;
- line-height: 20px;
- margin-top: 10px;
- }
-
- .module-page__module-details-grid > :global(*:nth-child(odd)) {
- margin: 10% 20% 0 40%;
- }
-
- .module-page__module-details-grid > :global(*:nth-child(even)) {
- margin: 5px 15px;
- }
- .module-page__category-list {
- margin: 0.25em 0 0.25em 0;
- padding: 0;
- display: inline-block;
- width: 100%;
- height: 20px;
- cursor: pointer;
- }
- .module-page__category-list-item {
- list-style: none;
- display: inline-block;
- margin-top: 5px;
- margin-bottom: 2px;
- margin-inline-start: 7px;
- padding: 2px 9px;
- border-radius: 25px;
- background-color: #e5e5e5;
- font-size: 0.9em;
- font-weight: 600;
- color: #4f4f4f;
- }
- :global(.module-page__project-logo) {
- min-height: 200px;
- }
- .module-page__carousel-wrapper {
- margin: 20px 0;
- }
- .module-page--back-to-browsing {
- text-decoration: none;
- }
- @media only screen and (max-width: 600px) {
- .module-page__wrapper {
- flex-direction: column;
- }
- }
-</style>
diff --git a/sveltejs/src/PagerItem.svelte b/sveltejs/src/PagerItem.svelte
index 1aa0e1bd7823e618e346ea46b4488ef126598e78..871a86858315ae645a683b0938930382856c845c 100644
--- a/sveltejs/src/PagerItem.svelte
+++ b/sveltejs/src/PagerItem.svelte
@@ -46,12 +46,3 @@
{label}
</a>
</li>
-
-<style>
- .pager__link--forward::after {
- margin-inline-start: 0.5rem;
- }
- .pager__link--backward::before {
- margin-inline-end: 0.5rem;
- }
-</style>
diff --git a/sveltejs/src/Pagination.svelte b/sveltejs/src/Pagination.svelte
index cd0f0a7ffba6cfaad5d89fa4c206b0f8eaea06c9..4e85b11b672cea0ba8817d2daa87749864b501e2 100644
--- a/sveltejs/src/Pagination.svelte
+++ b/sveltejs/src/Pagination.svelte
@@ -114,19 +114,3 @@
</ul>
</nav>
{/if}
-
-<style>
- .pagination__pager {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .pagination__num-projects {
- margin: 0 10px;
- }
- @media only screen and (max-width: 32rem) {
- .pagination__pager {
- flex-direction: column;
- }
- }
-</style>
diff --git a/sveltejs/src/Project/ActionButton.svelte b/sveltejs/src/Project/ActionButton.svelte
index 47b565c53b3d6f15d8ff3456653efd7b0b095c88..0fa751253a15a9504a6215e42fbb520cb8f9201a 100644
--- a/sveltejs/src/Project/ActionButton.svelte
+++ b/sveltejs/src/Project/ActionButton.svelte
@@ -237,14 +237,3 @@
</span>
{/if}
</div>
-
-<style>
- .action-button__wrapper {
- padding: 0.5em 0;
- margin-inline-start: auto;
- }
-
- .action-button__unicode {
- color: #228572;
- }
-</style>
diff --git a/sveltejs/src/Project/Categories.svelte b/sveltejs/src/Project/Categories.svelte
index 7a692527bb184a091cafb3973e449033b5e0547e..56b74241fb429ff9edea24c327a6ad0d029712d9 100644
--- a/sveltejs/src/Project/Categories.svelte
+++ b/sveltejs/src/Project/Categories.svelte
@@ -26,45 +26,3 @@
</ul>
{/if}
</div>
-
-<style>
- .categories {
- clear: both;
- margin-top: 1em;
- position: center;
- }
- .categories__list {
- margin: 0.25em 0 0.25em 0;
- padding: 0;
- display: inline-block;
- width: 100%;
- height: 20px;
- }
- .categories__category {
- list-style: none;
- display: inline-block;
- margin-top: 2px;
- margin-bottom: 2px;
- padding: 2px 9px;
- border-radius: 25px;
- background-color: #e5e5e5;
- font-size: 0.9em;
- font-weight: 600;
- color: #4f4f4f;
- }
- .categories__category:not(:first-child, .categories__category--extra) {
- margin-inline-start: 4px;
- }
- .categories .categories__category--extra {
- background-color: transparent;
- border: 1px solid #bbb;
- }
- .categories__list--grid {
- text-align: center;
- }
- @media (forced-colors: active) {
- .categories__category {
- border: 1px solid;
- }
- }
-</style>
diff --git a/sveltejs/src/Project/Image.svelte b/sveltejs/src/Project/Image.svelte
index a17db19310ab268769f2c43c82b09a40458328b7..423d61b252d8c3d4d57e0fa196a28bd74b314a90 100644
--- a/sveltejs/src/Project/Image.svelte
+++ b/sveltejs/src/Project/Image.svelte
@@ -64,25 +64,3 @@
{:else}
<img {...defaultImgProps(fallbackImage)} />
{/if}
-
-<style>
- :global(.image-carousel__slider-image, .project__logo-image) {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: 50%;
- object-fit: scale-down;
- }
- /* Small devices (portrait tablets and large phones, 600px and up) */
- @media only screen and (min-width: 600px) {
- :global(.image-carousel__slider-image, .project__logo-image) {
- display: block;
- width: auto;
- border-radius: 5px;
- height: 100px;
- }
- :global(.image-carousel__slider, .project__logo) {
- margin-top: 20px;
- }
- }
-</style>
diff --git a/sveltejs/src/Project/LoadingEllipsis.svelte b/sveltejs/src/Project/LoadingEllipsis.svelte
index b6f13af5f33f48d94bebe3b727d9225b0f292b33..7444337bec44d54469b4c24790c04e86d915ac38 100644
--- a/sveltejs/src/Project/LoadingEllipsis.svelte
+++ b/sveltejs/src/Project/LoadingEllipsis.svelte
@@ -5,32 +5,3 @@
</script>
<span class="loading-ellipsis">{message}</span>
-
-<style>
- .loading-ellipsis {
- position: relative;
- }
-
- .loading-ellipsis:after {
- position: absolute;
- overflow: hidden;
- display: inline-block;
- vertical-align: bottom;
- -webkit-animation: ellipsis steps(4, end) 900ms infinite;
- animation: ellipsis steps(4, end) 900ms infinite;
- content: '\2026'; /* ascii code for the ellipsis character */
- width: 0;
- }
-
- @keyframes ellipsis {
- to {
- width: 20px;
- }
- }
-
- @-webkit-keyframes ellipsis {
- to {
- width: 20px;
- }
- }
-</style>
diff --git a/sveltejs/src/Project/Project.svelte b/sveltejs/src/Project/Project.svelte
index 88d0fd7598027da3d9c9c2804c248dd97087db9a..802ffdec16330681a55bcb99a406aca0315c3fef 100644
--- a/sveltejs/src/Project/Project.svelte
+++ b/sveltejs/src/Project/Project.svelte
@@ -88,172 +88,3 @@
<ActionButton {project} />
{/if}
</li>
-
-<style>
- /* Small devices (portrait tablets and large phones, 600px and up) */
- @media only screen and (min-width: 53.75rem) {
- .project--grid .project__logo {
- overflow: hidden;
- display: flex;
- align-items: center;
- }
- .project--list .project__logo {
- margin-top: -20px;
- display: flex;
- align-items: center;
- }
- .project--list.project {
- padding: 0 2rem;
- }
- }
-
- /* One column card view */
- @media screen and (max-width: 75rem) {
- .project--grid.project {
- width: 100%;
- }
- }
-
- /* Two column card view (laptops/desktops, 1200px and up) */
- @media only screen and (min-width: 75rem) {
- .project--grid.project {
- width: 49%;
- }
- .project--list.project {
- width: 100%;
- padding: 0 2rem;
- }
- }
-
- @media only screen and (min-width: 87.5rem) {
- .project--grid.project {
- width: 32%;
- }
- }
-
- .project {
- position: relative;
- }
- .project--grid.project {
- display: flex;
- flex-direction: column;
- margin-bottom: 2em;
- border: 1px solid rgba(212, 212, 218, 0.8);
- border-radius: 2px;
- box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
- margin-inline-end: 0.5vw;
- }
-
- .project--grid .project__title {
- margin-top: 0.25em;
- text-align: center;
- }
-
- .project__link {
- text-decoration: none;
- color: black;
- }
- .project__link:hover {
- color: #003ecc;
- text-decoration: underline;
- }
-
- .project--grid .project__main {
- display: flex;
- background: white;
- position: relative;
- padding: 1em 1em;
- flex-direction: column;
- }
-
- .project--grid .project__body {
- text-align: center;
- }
-
- .project--grid .project__icons {
- display: flex;
- margin-top: auto;
- padding: 1em 1em;
- height: 3em;
- }
- .project__body {
- font-size: 15px;
- }
- .project--list.project {
- display: grid;
- grid-template-columns: 20% 1fr;
- grid-template-rows: 1fr;
- grid-template-areas:
- 'aside main'
- 'aside footer';
- }
-
- .project--list .project__image {
- padding-inline-start: 4em;
- }
-
- .project--list .project__icons {
- grid-area: footer;
- }
-
- .project--list .project__logo {
- grid-area: aside;
- padding-top: 2rem;
- padding-bottom: 2rem;
- padding-inline: 0 2rem;
- }
- .project--list .project__main {
- grid-area: main;
- }
- .project--list .project__title {
- padding-top: 10px;
- }
- .project--list.project {
- margin-bottom: 2em;
- background: #ffffff;
- border: 0.5px solid #a4a2a2;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- }
- .project--list .project__icons {
- display: flex;
- padding-top: 1rem;
- padding-bottom: 1rem;
- padding-inline: 0 1em;
- }
- .project__icons :global(p) {
- display: inline;
- }
- .project__icons.warnings {
- display: block;
- }
- .project__icons.warnings span {
- display: list-item;
- }
- .project__icons.warnings img {
- display: inline;
- width: 1.2rem;
- position: relative;
- bottom: -0.25rem;
- }
- .warnings + :global(.action) {
- margin-inline-end: 1em;
- margin-bottom: 1em;
- }
- .project__project-usage-container {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .project__status-icon {
- width: 2.4em;
- margin-inline-end: 0.5em;
- display: block;
- }
- .project__install-count {
- margin-inline-start: 10px;
- font-size: 13px;
- }
- .project__active-installs-text {
- font-size: 13px;
- }
-</style>
diff --git a/sveltejs/src/Project/ProjectButtonBase.svelte b/sveltejs/src/Project/ProjectButtonBase.svelte
index 0d4bb4fd88eeb70eeb26c2994aa850913c20c66d..27e60e4f37d0700373e0459350a0f8cbce87f869 100644
--- a/sveltejs/src/Project/ProjectButtonBase.svelte
+++ b/sveltejs/src/Project/ProjectButtonBase.svelte
@@ -10,25 +10,3 @@
>
<slot />
</button>
-
-<style>
- .project_button--primary {
- margin: 0 !important;
- border-width: 0 !important;
- box-shadow: none;
- color: #fff;
- height: 24px;
- font-size: 12.65px;
- line-height: 19px;
- display: flex;
- align-items: center;
- text-align: center;
- justify-content: center;
- white-space: nowrap;
- }
- @media (forced-colors: active) {
- .project_button--primary {
- border: 1px solid !important;
- }
- }
-</style>
diff --git a/sveltejs/src/Project/ProjectIcon.svelte b/sveltejs/src/Project/ProjectIcon.svelte
index fc6e145638f535d64fa8b1b1b2ecdb82a31af1a0..6b32722a8eb9112826dc521bd06319a2a9bdf538 100644
--- a/sveltejs/src/Project/ProjectIcon.svelte
+++ b/sveltejs/src/Project/ProjectIcon.svelte
@@ -30,18 +30,3 @@
class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
alt={typeToImg[type].path.alt}
/>
-
-<style>
- :global(.pb-icon--project-listing) {
- width: 2.4em;
- }
- :global(.pb-icon--module-details) {
- width: 25px;
- }
-
- @media (forced-colors: active) and (prefers-color-scheme: dark) {
- :global(.pb-icon--usage) {
- filter: invert(1);
- }
- }
-</style>
diff --git a/sveltejs/src/Project/ProjectStatusIndicator.svelte b/sveltejs/src/Project/ProjectStatusIndicator.svelte
index 7eb82fdb4753691649c8c8ec014ae8e39ccf374c..08c02b514b0f42ee3c19720f2b12760474ba7a89 100644
--- a/sveltejs/src/Project/ProjectStatusIndicator.svelte
+++ b/sveltejs/src/Project/ProjectStatusIndicator.svelte
@@ -14,10 +14,3 @@
>
{statusText}
</span>
-
-<style>
- .project_status-indicator {
- font-weight: bold;
- text-decoration: none;
- }
-</style>
diff --git a/sveltejs/src/ProjectBrowser.svelte b/sveltejs/src/ProjectBrowser.svelte
index cec21cd0ad0a09a5f02c9ae9189b667ea7b4715c..b8a6d42e57f03b34f1c2426efb0f96d05d4a8878 100644
--- a/sveltejs/src/ProjectBrowser.svelte
+++ b/sveltejs/src/ProjectBrowser.svelte
@@ -397,91 +397,3 @@
</div>
</ProjectGrid>
</MediaQuery>
-
-<style>
- .project-browser__toggle {
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- margin-bottom: 1.5em;
- font-family: inherit;
- color: #232429;
- background-color: #d3d4d9;
- width: 80.41px;
- height: 30px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
- border: none;
- }
-
- .project-browser__list-icon,
- .project-browser__grid-icon {
- pointer-events: none;
- }
- .project-browser__toggle:first-child {
- margin-inline-start: auto;
- }
- .project-browser__toggle-buttons {
- display: flex;
- margin-inline-end: 25px;
- font-weight: bold;
- }
- .project-browser__toggle:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
- }
- .project-browser__toggle.project-browser__list-button {
- margin-inline-end: 5px;
- border-radius: 2px 0 0 2px;
- cursor: pointer;
- }
- .project-browser__toggle.project-browser__grid-button {
- border-radius: 0 2px 2px 0;
- cursor: pointer;
- margin-inline-end: 5px;
- }
- .project-browser__selected-tab {
- background-color: #adaeb3;
- }
- .search-results {
- font-weight: bold;
- margin-inline-start: 10px;
- margin-bottom: 5px;
- }
- .project-browser__install-warning {
- border: 1px solid red;
- padding: 1em;
- }
- .project-browser__warning {
- margin: 0.5em 0;
- }
- .project-browser__warning-header {
- color: red;
- }
- .search-results-wrapper {
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid #dee2e6;
- }
- #output {
- display: inline-block;
- font-family: sans-serif;
- font-style: normal;
- font-weight: 700;
- font-size: 14px;
- line-height: 21px;
- margin-left: 20px;
- }
-
- @media (forced-colors: active) {
- .project-browser__toggle {
- border: 1px solid;
- }
- @media (prefers-color-scheme: dark) {
- .project-browser__list-icon {
- filter: invert(1);
- }
- .project-browser__grid-icon {
- filter: invert(1);
- }
- }
- }
-</style>
diff --git a/sveltejs/src/ProjectGrid.svelte b/sveltejs/src/ProjectGrid.svelte
index 40dafb59594b578e567d55f61b625edf11ab4b8a..2ee0de8597cdd36a70afb6dcb4cdd67e983403eb 100644
--- a/sveltejs/src/ProjectGrid.svelte
+++ b/sveltejs/src/ProjectGrid.svelte
@@ -73,31 +73,3 @@
</div>
<slot name="bottom" />
-
-<style>
- .projects-list {
- display: flex;
- flex-wrap: wrap;
- list-style-type: none;
- margin: 0;
- }
-
- .project-browser__aside {
- flex: 1;
- }
- .project-browser__main {
- flex: 4;
- }
-
- @media (min-width: 700px) {
- .project-browser__container {
- display: flex;
- }
- }
- /* Stack cards below category filter on smaller screens */
- @media screen and (max-width: 900px) {
- .project-browser__container {
- flex-direction: column;
- }
- }
-</style>
diff --git a/sveltejs/src/Search/FilterApplied.svelte b/sveltejs/src/Search/FilterApplied.svelte
index 5803d779342c88dddf1784f49670120e65c557fa..b0dfabe85d70fccbe245504593e1ee394ddc9c9f 100644
--- a/sveltejs/src/Search/FilterApplied.svelte
+++ b/sveltejs/src/Search/FilterApplied.svelte
@@ -25,45 +25,3 @@
</button>
</p>
{/if}
-
-<style>
- .filter-applied {
- word-wrap: break-word;
- font-size: 0.875rem;
- color: white;
- display: inline-flex;
- align-items: center;
- border-radius: 25px;
- background: #013cc5;
- padding: 10px;
- margin-inline-end: 10px;
- width: auto;
- height: auto;
- }
- .filter-applied__button-close {
- display: inline-flex;
- padding: 0;
- margin-inline-start: 10px;
- outline: none;
- box-shadow: none;
- border: none;
- background: none;
- cursor: pointer;
- }
- .filter-applied__button-close > img {
- transform: scale(1.4);
- height: 20px;
- width: 20px;
- }
-
- @media (forced-colors: active) {
- .filter-applied {
- border: 1px solid;
- }
- @media (prefers-color-scheme: light) {
- .filter-applied__button-close > img {
- filter: invert(1);
- }
- }
- }
-</style>
diff --git a/sveltejs/src/Search/FilterGroup.svelte b/sveltejs/src/Search/FilterGroup.svelte
index 4e04636619d5e8aae4fa28526eadfa036818b37e..c826b6d485d67736a91aa6f8d8b7fd55b91b22b2 100644
--- a/sveltejs/src/Search/FilterGroup.svelte
+++ b/sveltejs/src/Search/FilterGroup.svelte
@@ -38,52 +38,3 @@
</div>
</div>
</div>
-
-<style>
- .filter-group__radio {
- width: 20px;
- height: 20px;
- position: absolute;
- top: 2px;
- inset-inline-start: 5px;
- }
- .filter-group__radio:hover {
- cursor: pointer;
- }
-
- .filter-group {
- flex-wrap: wrap;
- flex-direction: column;
- display: inline-grid;
- position: relative;
- margin-bottom: 20px;
- margin-top: 15px;
- padding-inline-start: 15px;
- padding-top: 15px;
- justify-content: flex-start;
- }
-
- .filter-group__title-wrapper {
- font-size: 18px;
- margin-inline-end: 10px;
- }
-
- .filter-group__filter-options {
- display: flex;
- flex-wrap: wrap;
- margin-top: 10px;
- flex-direction: column;
- }
-
- .filter-group__filter-option {
- margin-bottom: 10px;
- line-height: 25px;
- position: relative;
- }
-
- @media only screen and (max-width: 72rem) {
- .filter-group {
- display: table;
- }
- }
-</style>
diff --git a/sveltejs/src/Search/Search.svelte b/sveltejs/src/Search/Search.svelte
index 3eb406aed35e637b531ff42e929f9dbb5aa3c365..d6eebc980ef707e9362e5397e1a6f55804a3d347 100644
--- a/sveltejs/src/Search/Search.svelte
+++ b/sveltejs/src/Search/Search.svelte
@@ -24,7 +24,6 @@
FULL_MODULE_PATH,
DARK_COLOR_SCHEME,
} from '../constants';
- // cspell:ignore searchterm
const { Drupal } = window;
const dispatch = createEventDispatcher();
@@ -167,7 +166,7 @@
>
<div class="search__search-bar">
<input
- class="search__searchterm form-text form-element form-element--type-text"
+ class="search__search_term form-text form-element form-element--type-text"
type="search"
title={labels.placeholder}
placeholder={labels.placeholder}
@@ -243,82 +242,3 @@
<SearchFilters bind:isOpen={filtersOpen} {onAdvancedFilter} />
</div>
</form>
-
-<style>
- .search__form-item {
- margin-top: 0;
- }
- .search__form {
- margin-top: 2.375rem;
- display: inherit;
- flex-wrap: wrap;
- padding: 0 0 1.5rem;
- }
-
- .search__search-bar .search__searchterm {
- width: 100%;
- outline: none;
- height: 50px;
- position: relative;
- display: flex;
- }
-
- .search__search-bar {
- height: 50px;
- text-align: center;
- color: #fff;
- cursor: pointer;
- font-size: 20px;
- position: relative;
- border: 1px solid #919297;
- border-radius: 2px;
- }
-
- .search__search-icon {
- position: absolute;
- bottom: 12px;
- inset-inline-end: 30px;
- }
-
- .search__searchterm::placeholder {
- font-family: sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 150%;
- display: flex;
- align-items: center;
- }
-
- .dropdown-filters {
- position: relative;
- border: 3px solid #f3f4f9;
- z-index: 1;
- }
-
- .search__grid-container {
- display: grid;
- height: auto;
- grid-template-columns: 5fr auto auto;
- grid-gap: 20px;
- background: #f3f4f9;
- padding: 5px;
- align-items: center;
- max-width: 100%;
- }
-
- .search__filter-button {
- padding: 0 0.25rem;
- background: none;
- border: none;
- color: #013cc5;
- text-decoration: underline;
- cursor: pointer;
- }
-
- @media screen and (max-width: 855px) {
- .search__grid-container {
- display: block;
- }
- }
-</style>
diff --git a/sveltejs/src/Search/SearchFilterToggle.svelte b/sveltejs/src/Search/SearchFilterToggle.svelte
index 4dd3e291690d26a4286274693375cce18229ce24..35d33a5082500f098001933be9a6876934ab5813 100644
--- a/sveltejs/src/Search/SearchFilterToggle.svelte
+++ b/sveltejs/src/Search/SearchFilterToggle.svelte
@@ -31,46 +31,3 @@
</button>
</section>
</div>
-
-<style>
- .search__filter__toggle-container {
- display: flex;
- margin-inline-end: 1em;
- }
-
- .search__filter__toggle {
- background-color: #d3d4d9;
- color: black;
- padding-left: 16px;
- padding-right: 16px;
- font-size: 16px;
- border-radius: 2px;
- width: fit-content;
- margin-inline-start: 15px;
- text-decoration: underline;
- }
- .search__filter__toggle.is_open {
- background-color: #adaeb3;
- }
- .search__filter__toggle:hover {
- cursor: pointer;
- }
-
- .search__filter__toggle-img {
- width: 20px;
- height: 14px;
- padding: 0 0.25rem;
- margin-bottom: -2px;
- margin-inline-end: 4px;
- }
- @media (forced-colors: active) {
- .search__filter__toggle {
- border: 1px solid;
- }
- @media (prefers-color-scheme: dark) {
- .search__filter__toggle-img {
- filter: invert(1);
- }
- }
- }
-</style>
diff --git a/sveltejs/src/Search/SearchFilters.svelte b/sveltejs/src/Search/SearchFilters.svelte
index e41232cc91517fd6d2e264149fd5d82ab1f8a9bf..a1dcecff9487536653da8bac11bfb2aa281096a5 100644
--- a/sveltejs/src/Search/SearchFilters.svelte
+++ b/sveltejs/src/Search/SearchFilters.svelte
@@ -72,23 +72,3 @@
</FilterGroup>
</div>
{/if}
-
-<style>
- @media only screen and (min-width: 1200px) {
- .small-icons {
- margin-top: -3px;
- margin-inline-end: 1px;
- }
- .search__checkbox-label {
- font-weight: normal;
- padding-inline-start: 35px;
- display: flex;
- }
- .search__checkbox-label {
- font-weight: normal;
- padding-inline-start: 35px;
- display: flex;
- margin-right: unset;
- }
- }
-</style>
diff --git a/sveltejs/src/Search/SearchSort.svelte b/sveltejs/src/Search/SearchSort.svelte
index 2c66f18e0a5f2d4e22354dd64c2153ce5ce60d5a..ca8cc9d02a87b8b4d9054241aba8704600bf4ac2 100644
--- a/sveltejs/src/Search/SearchSort.svelte
+++ b/sveltejs/src/Search/SearchSort.svelte
@@ -44,29 +44,3 @@
{/each}
</select>
</div>
-
-<style>
- .search__sort {
- z-index: 2;
- }
-
- .search__sort-select {
- border: none;
- background-color: #d3d4d9;
- }
- .search__sort-select:hover {
- cursor: pointer;
- }
-
- @media screen and (max-width: 855px) {
- .search__sort {
- margin-bottom: 10px;
- margin-top: 10px;
- }
- }
- @media (forced-colors: active) {
- #pb-sort {
- border: 1px solid;
- }
- }
-</style>
diff --git a/sveltejs/src/Tabs.svelte b/sveltejs/src/Tabs.svelte
index 1d5b3bb15e53cd3e6a43ce8cd8d9203fa8c18c9e..9961194f784291841f83bfbac66bf3a657297db6 100644
--- a/sveltejs/src/Tabs.svelte
+++ b/sveltejs/src/Tabs.svelte
@@ -83,26 +83,3 @@
</div>
</nav>
{/if}
-
-<style>
- .tabs__tab {
- border: 0;
- cursor: pointer;
- }
- .tabs__tab:focus {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
- }
- .project-browser__plugin-tabs {
- display: flex;
- }
- .project-browser__plugin-tab {
- margin-right: 5px;
- margin-left: 5px;
- height: auto;
- min-height: 30px;
- cursor: pointer;
- }
- .project-browser__plugin-tabs .project-browser__toggle {
- margin-inline-start: 0;
- }
-</style>