hub2wp-repo-public/public/css/style.css

/* Let's override Tailwind's text-blue-500 to #2271b1 */
.text-blue-500 {
    color: #2271b1;
}
.bg-blue-500 {
    background-color: #2271b1;
}

/* Sticky footer styles */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header,
.site-footer {
    background-color: #1d2327;
}

main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    background-color: #1a1a1a;
    margin-top: auto;
}

input[type="search"] {
    -webkit-appearance: none;
}

#changelog .tab-content-inner a {
    color: #2271b1;
}

/* Top Bar */
.h2wp-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 10px 20px;
    border: 1px solid #dcdcde;
    background: #fff;
}

.h2wp-popular-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.h2wp-popular-tags span {
    color: #646970;
    font-size: 13px;
}

.h2wp-popular-tags a {
    text-decoration: none;
    padding: 4px 8px;
    color: #2271b1;
    background: #f0f0f1;
    font-size: 13px;
}

.h2wp-popular-tags a:hover {
    background: #2271b1;
    color: #fff;
}

.h2wp-popular-tags a.h2wp-tag-active {
    background: #2271b1;
    color: #fff;
}

/* Search Form */

.h2wp-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Plugin Cards Grid */
.h2wp-plugins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.h2wp-plugin-card {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.h2wp-plugin-card:hover {
    border-color: #2271b1;
}

.h2wp-plugin-header {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.h2wp-plugin-icon {
    width: 100px;
    height: 100px;
    background: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2wp-plugin-icon img {
    max-width: 100%;
    height: auto;
}

.h2wp-plugin-info {
    flex: 1;
}

.h2wp-plugin-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px;
}

.h2wp-plugin-author {
    color: #646970;
    font-size: 13px;
    margin-bottom: 10px;
}

.h2wp-plugin-description {
    color: #50575e;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.h2wp-plugin-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    align-items: center;
}

.h2wp-plugin-meta {
    background: #f6f7f7;
    border-top: 1px solid #dcdcde;
    margin: 20px -20px -20px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #646970;
}

.h2wp-meta-stats {
    display: flex;
    gap: 15px;
}

.h2wp-meta-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.h2wp-meta-stat svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Buttons */
.h2wp-button {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid;
    cursor: pointer;
}

.h2wp-button-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.h2wp-button-secondary {
    background: #f6f7f7;
    border-color: #2271b1;
    color: #2271b1;
}

.h2wp-button-disabled {
    background: #f6f7f7;
    border-color: #dcdcde;
    color: #a7aaad;
    cursor: default;
    pointer-events: none;
}

.h2wp-button-primary:hover {
    background: #2271b1;
    color: #fff;
}

.h2wp-button-primary:focus {
    background: #1e5b90;
    color: #fff;
    outline: 1px solid #2271b1;
}

.h2wp-button-secondary:hover {
    background: #f0f0f1;
    color: #2271b1;
}

.h2wp-button-secondary:focus {
    background: #e6e7e8;
    color: #2271b1;
    outline: 1px solid #2271b1;
}

/* Pagination */

.h2wp-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.h2wp-pagination a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid #dcdcde;
    color: #2271b1;
}

.h2wp-pagination span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid #dcdcde;
    color: #2271b1;
}

.h2wp-pagination a:hover {
    background: #2271b1;
    color: #fff;
}

.h2wp-pagination span.current {
    background: #2271b1;
    color: #fff;
}

.h2wp-hidden {
    display: none;
}

.h2wp-meta-stats .h2wp-meta-stat:first-child svg {
    color: #dba617;
}

.h2wp-meta-stats .h2wp-meta-stat:nth-child(2) svg {
    color: #0073aa;
}

.h2wp-plugin-meta .h2wp-plugin-updated-at svg {
    color: #4a4a54;
}

ul.h2wp-changelog {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.h2wp-changelog li {
    margin: 0 0 15px;
    border-bottom: 1px solid #dcdcde;
}

@media (max-width: 782px) {
    .h2wp-top-bar {
        flex-direction: column;
        gap: 20px;
    }
}

@keyframes h2wp-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes h2wp-spin-invert {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* Plugin page specific styles */
.plugin-header {
    background: linear-gradient(to bottom, #fff, #f8fafc);
}

.plugin-icon img {
    max-width: 128px;
    max-height: 128px;
}

.tab-link.active {
    position: relative;
    color: #2271b1;
}

.tab-link.active:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #2271b1;
}

/* Button styles */
.h2wp-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.h2wp-button-primary {
    background-color: #2271b1;
    color: white;
    border: 1px solid #2271b1;
}

.h2wp-button-primary:hover {
    background-color: #135e96;
    border-color: #135e96;
}

.h2wp-button-secondary {
    background-color: white;
    color: #2271b1;
    border: 1px solid #2271b1;
}

.h2wp-button-secondary:hover {
    background-color: #f0f0f1;
}

/* Content styling */
.tab-content {
    line-height: 1.6;
}

.tab-content h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem;
}

.tab-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem;
}

.tab-content p {
    margin-bottom: 1rem;
}

.tab-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .plugin-header .flex {
        flex-direction: column;
    }
    
    .plugin-icon {
        margin: 0 auto 1rem;
    }
    
    .plugin-header h1 {
        text-align: center;
    }
    
    .plugin-header .flex items-center {
        justify-content: center;
    }
}

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.6) 25%,
    rgba(226, 232, 240, 0.9) 37%,
    rgba(226, 232, 240, 0.6) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.skeleton-text {
  height: 1em;
  border-radius: 0.25rem;
}

.skeleton-image {
  background-color: rgb(226, 232, 240);
}

/* Sidebar tags */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #f0f0f1;
    color: #2271b1;
    border-radius: 9999px;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.tag:hover {
    background-color: #2271b1;
    color: #ffffff;
}

#description .md > .markdown-heading:first-child h1,
#description .md > .markdown-heading:first-child h2,
#description .md > .markdown-heading:first-child h3 {
    margin-top: 0;
}

#description .md a {
    color: #2271b1;
}