20260526152617

code/docusaurus/src/components/Link/styles.module.css

@@ -0,0 +1,231 @@
+.grid {
+  display: grid;
+  gap: 16px;
+  margin-top: 16px;
+
+  /* 默认桌面4列 */
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* 平板 */
+@media (max-width: 1200px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* 小平板 */
+@media (max-width: 996px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* 手机 */
+@media (max-width: 576px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 卡片 */
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  padding: 18px;
+
+  border-radius: 14px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+
+  background: var(--ifm-card-background-color);
+
+  color: inherit;
+  text-decoration: none;
+
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.card:hover {
+  color: inherit;
+  text-decoration: none;
+
+  transform: translateY(-3px);
+
+  border-color: var(--ifm-color-primary);
+
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* 标题区域 */
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* 图标 */
+
+.icon {
+  width: 32px;
+  height: 32px;
+
+  object-fit: contain;
+
+  flex-shrink: 0;
+}
+
+.placeholder {
+  width: 40px;
+  height: 40px;
+
+  border-radius: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: var(--ifm-color-primary);
+  color: white;
+
+  font-size: 18px;
+  font-weight: 700;
+
+  flex-shrink: 0;
+}
+
+/* 标题 */
+
+.title {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 描述 */
+
+.description {
+  margin-top: 14px;
+
+  font-size: 14px;
+  line-height: 1.6;
+
+  color: var(--ifm-color-emphasis-700);
+
+  overflow: hidden;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 搜索容器 */
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.searchWrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: var(--ifm-card-background-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 2px 2px 2px 16px;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.searchWrapper:focus-within {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 3px var(--ifm-color-primary-alpha-10);
+}
+
+.searchIcon {
+  color: var(--ifm-color-emphasis-400);
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  width: 100%;
+  padding: 12px 16px 12px 0;
+  border: none;
+  border-radius: 0 10px 10px 0;
+  font-size: 15px;
+  background: transparent;
+  color: var(--ifm-font-color-base);
+}
+
+.searchInput:focus {
+  outline: none;
+}
+
+.searchInput::placeholder {
+  color: var(--ifm-color-emphasis-500);
+}
+
+.searchCount {
+  font-size: 13px;
+  color: var(--ifm-color-emphasis-500);
+  white-space: nowrap;
+  padding: 6px 12px;
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 20px;
+}
+
+/* 分组样式 */
+
+.group {
+  margin-bottom: 32px;
+}
+
+.group:last-child {
+  margin-bottom: 0;
+}
+
+.groupTitle {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ifm-color-emphasis-800);
+  margin-bottom: 20px;
+  padding-left: 14px;
+  border-left: 4px solid var(--ifm-color-primary);
+}
+
+/* 无结果状态 */
+
+.noResults {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.noResultsIcon {
+  color: var(--ifm-color-emphasis-400);
+  margin-bottom: 16px;
+}
+
+.noResults p {
+  margin: 0;
+  font-size: 15px;
+}