hub2wp/assets/css/admin-styles.css
2026-03-14 01:06:23 +01:00

834 lines
15 KiB
CSS

/* Top Bar */
.h2wp-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 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;
}
.h2wp-search-form input[type="search"] {
width: 240px;
}
/* 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;
}
/* Theme cards (custom, independent from wp-admin themes.css) */
.h2wp-themes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.h2wp-theme-card {
background: #fff;
border: 1px solid #dcdcde;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.h2wp-theme-card .h2wp-theme-screenshot {
position: relative;
overflow: hidden;
height: 20px;
border-bottom: 1px solid #dcdcde;
}
.h2wp-theme-card .h2wp-theme-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(16px) saturate(120%) hue-rotate(var(--hue, 0deg));
transform: scale(1.3);
clip-path: inset(0);
}
.h2wp-theme-card .h2wp-theme-header {
padding: 12px;
background: #fff;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.h2wp-theme-card .h2wp-theme-name {
margin: 0;
background: #fff;
font-size: 20px;
line-height: 1.2;
font-weight: 600;
}
.h2wp-theme-card .h2wp-theme-name-link {
color: inherit;
text-decoration: none;
}
.h2wp-theme-card .h2wp-theme-name-link:hover,
.h2wp-theme-card .h2wp-theme-name-link:focus {
color: #135e96;
text-decoration: underline;
}
.h2wp-theme-card .h2wp-theme-description {
padding: 0 12px 12px;
margin: 0;
background: #fff;
box-sizing: border-box;
min-height: 52px;
color: #50575e;
font-size: 13px;
line-height: 1.5;
}
.h2wp-theme-card .h2wp-theme-description p {
margin: 0;
}
.h2wp-theme-card .h2wp-theme-actions {
position: static;
padding: 0 12px 12px;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.h2wp-theme-card .h2wp-theme-actions .h2wp-button {
margin: 0;
}
.h2wp-theme-card .h2wp-theme-actions .h2wp-private-badge {
margin-left: auto;
}
.h2wp-theme-card .h2wp-theme-author-text {
display: inline;
margin: 0 0 0 auto;
color: #646970;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
place-self: center;
}
.h2wp-theme-card .h2wp-theme-author-text a {
color: #2271b1;
}
.h2wp-theme-card .h2wp-theme-author-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #dcdcde;
flex: 0 0 18px;
place-self: center;
}
.h2wp-theme-card .h2wp-plugin-icon-placeholder {
width: 100%;
height: 100%;
}
.h2wp-theme-card .h2wp-plugin-meta {
margin: auto 0 0;
padding: 10px 12px;
}
.h2wp-theme-card .h2wp-hidden,
.h2wp-theme-card .h2wp-activate-plugin.h2wp-hidden {
display: none !important;
}
/* Modal Styles */
.h2wp-modal {
display: none;
position: fixed;
z-index: 100000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
/* Tab container */
.h2wp-modal-tabs {
border-bottom: 1px solid #dcdcde;
margin: 0;
padding-top: 0;
padding-bottom: 0;
line-height: inherit;
background: #f6f7f7;
}
/* Tab list */
.h2wp-modal-tabs ul {
list-style: none;
margin: 0;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
}
/* Individual tab items */
.h2wp-modal-tabs li {
margin: 0;
padding: 0;
}
/* Tab links */
.h2wp-modal-tabs .h2wp-modal-tab {
padding: 5px 10px;
margin: 0 3px;
font-size: 14px;
line-height: 1.71428571;
font-weight: 400;
text-decoration: none;
color: #2271b1;
display: inline-block;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
background: transparent;
transition: all 0.2s ease-in-out;
}
/* First tab spacing */
.h2wp-modal-tabs li:first-child .h2wp-modal-tab {
margin-left: 0;
}
/* Hover state */
.h2wp-modal-tabs .h2wp-modal-tab:hover {
color: #135e96;
}
/* Active state */
.h2wp-modal-tabs .h2wp-modal-tab-active,
.h2wp-modal-tabs .h2wp-modal-tab-active:hover {
border-color: #dcdcde;
border-top-color: #fff;
background: #fff;
color: #2c3338;
margin-bottom: -1px;
padding-bottom: 6px;
}
/* Focus state */
.h2wp-modal-tabs .h2wp-modal-tab:focus {
box-shadow: 0 0 0 1px #2271b1;
outline: 1px solid transparent;
}
.h2wp-modal-content {
position: relative;
background-color: #fff;
margin: 0;
width: 100%;
max-width: 800px;
border-radius: 0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90vh;
overflow-y: auto;
}
#h2wp-plugin-modal.h2wp-modal-loading .h2wp-modal-content > * {
visibility: hidden;
}
#h2wp-plugin-modal .h2wp-modal-spinner {
display: none;
}
#h2wp-plugin-modal.h2wp-modal-loading .h2wp-modal-spinner {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
}
.h2wp-modal-close {
color: #fff;
position: absolute;
top: 20px;
right: 20px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
z-index: 2;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.h2wp-modal-header {
position: relative;
height: 250px;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-color: #23282d;
}
.h2wp-modal-header::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.15) 100%);
}
.h2wp-modal-header-text {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
color: #fff;
z-index: 1;
}
.h2wp-modal-header-text > .h2wp-modal-title {
font-family: "Helvetica Neue", sans-serif;
display: inline-block;
font-size: 30px;
line-height: 1.68;
box-sizing: border-box;
max-width: 100%;
color: #fff;
background: rgba(29, 35, 39, 0.9);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0 15px;
margin-bottom: 0;
}
.h2wp-modal-body {
display: flex;
gap: 0;
position: relative;
height: calc(100% - 60px);
min-height: 300px;
overflow: hidden;
align-items: stretch;
}
.h2wp-modal-body > .h2wp-modal-main {
flex: 1;
padding: 10px 30px;
overflow-y: auto;
}
.h2wp-modal-readme-content h1, .h2wp-modal-readme-content h2, .h2wp-modal-readme-content h3, .h2wp-modal-readme-content h4, .h2wp-modal-readme-content h5, .h2wp-modal-readme-content h6 {
line-height: 1.2;
}
.h2wp-modal-body > .h2wp-modal-sidebar {
background: #f6f7f7;
padding: 16px;
width: 200px;
border-left: 1px solid #dcdcde;
color: #646970;
flex-shrink: 0;
}
.h2wp-modal-compatibility-details p, .h2wp-modal-links p {
margin: 0.8em 0;
}
.h2wp-modal-sidebar h3 {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
color: #646970;
margin: 24px 0 8px;
}
.h2wp-meta-stats .h2wp-meta-stat:first-child svg {
color: #dba617;
}
.h2wp-meta-stats .h2wp-meta-stat:nth-child(2) svg {
color: #0073aa;
}
.h2wp-modal-stats {
list-style: none;
padding: 0;
margin: 0;
}
.h2wp-modal-body > .h2wp-modal-sidebar strong,
.h2wp-modal-stats li {
color: #3c434a;
}
.h2wp-modal-stars-content .dashicons {
color: #dba617;
}
.h2wp-modal-stars {
font-weight: bold;
}
.h2wp-modal-stats li {
margin: 0 0 12px;
font-weight: 600;
}
.h2wp-modal-stats li .dashicons {
margin-right: 5px;
}
.h2wp-modal-stats li span {
font-weight: normal;
color: #646970;
}
.h2wp-modal-compatibility-details .h2wp-loading span.dashicons {
display: inline-block;
transform: scaleX(-1);
}
.h2wp-modal-compatibility-details .h2wp-loading span.dashicons::before {
content: '\f531';
animation: h2wp-spin-invert 1s linear infinite;
display: inline-block;
font-size: 16px;
margin-right: 5px;
}
.h2wp-modal-compatibility-details span.h2wp-modal-compatibility {
font-weight: 600;
color: #3c434a;
}
.h2wp-loading span.h2wp-modal-compatibility {
vertical-align: bottom;
}
.h2wp-modal-incompatibility-reason {
padding: 8px 10px;
background: #fff;
border: 1px solid #dcdcde;
}
/* Meta tab */
.h2wp-modal-meta-content {
padding: 16px;
background: white;
}
.h2wp-modal-meta-content h3 {
margin: 0 0 16px;
color: #1d2327;
font-size: 16px;
font-weight: 600;
}
.h2wp-modal-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.h2wp-modal-stat-card {
padding: 12px;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
transition: border-color 0.15s ease;
}
.h2wp-modal-stat-card:hover {
border-color: #8c8f94;
}
.h2wp-modal-stat-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
color: #646970;
}
.h2wp-modal-stat-label {
font-size: 13px;
}
.h2wp-modal-author,
.h2wp-modal-stars,
.h2wp-modal-forks,
.h2wp-modal-watchers,
.h2wp-modal-issues,
.h2wp-modal-updated {
font-weight: 500;
}
.h2wp-modal-author a {
color: #2271b1;
text-decoration: none;
}
.h2wp-modal-author a:hover {
color: #135e96;
text-decoration: underline;
}
.h2wp-modal-links {
margin-top: 16px;
}
@media (max-width: 600px) {
.h2wp-modal-stats-grid {
grid-template-columns: 1fr;
}
}
ul.h2wp-changelog {
list-style: none;
padding: 0;
margin: 0;
}
ul.h2wp-changelog li {
margin: 0 0 15px;
border-bottom: 1px solid #dcdcde;
}
/* Topics */
.h2wp-modal-topics {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.h2wp-modal-topics span a {
text-decoration: none;
padding: 4px 8px;
color: #2271b1;
background: #f0f0f1;
font-size: 13px;
}
.h2wp-modal-topics span a:hover {
background: #2271b1;
color: #fff;
}
.h2wp-modal-plugin-compatility:before {
content: '';
display: block;
height: 1px;
background: #dcdcde;
margin: 20px 0;
}
.h2wp-modal-footer {
background: #f6f7f7;
border-top: 1px solid #dcdcde;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
bottom: -1px;
flex-direction: row-reverse;
min-height: 36px;
}
.h2wp-modal-footer .h2wp-button {
padding: 8px 16px;
font-size: 14px;
}
@media (max-width: 782px) {
.h2wp-top-bar {
flex-direction: column;
gap: 20px;
}
.h2wp-modal-content {
margin: 0 15px;
width: calc(100% - 30px);
}
.h2wp-modal-header {
height: 200px;
}
.h2wp-modal-title {
font-size: 24px;
}
}
@keyframes h2wp-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes h2wp-spin-invert {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}