用户:晨茗biu/Sandbox-SaturnForum.css:修订间差异

来自Limbo Wiki Mirror
晨茗biu留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
晨茗biu留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
 
(未显示同一用户的5个中间版本)
第1行: 第1行:
  .SaturnForum-Maincontainer {
        .SaturnForum-Maincontainer {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 95%;
      min-width: 200px;
      max-width: 1100px;
      min-height: 300px;
      background-color: #f0f0f0;
      margin: 0 auto;
  }
 
  .SaturnForum-logo {
      position: absolute;
      width: 96px;
      height: 32px;
      left: 2px;
      top: 4px;
  }
 
  .SaturnForum-portrait {
      background-color: rgba(98,92,93,255);
      margin-top: 10px;
      margin-left: 20px;
      height: 60px;
      width: 60px;
      display: flex;
      order: 2;
  }
 
  .SaturnForum-user {
      width: 90px;
      height: auto;
      text-align: center;
      padding: 6px;
      text-decoration: none;
      transition: all 0.1s ease;
      cursor: pointer;
      word-break: break-all;
      order: 2;
  }
 
      .SaturnForum-user:hover {
          color: #3498db;
          text-decoration: underline;
      }
 
  .SaturnForum-line-top {
      position: relative;
      width: 100%;
      height: 2px;
      background-color: rgba(98,98,98,255);
      order: 1;
  }
 
  .SaturnForum-line-left {
      position: absolute;
      left: 100px;
      height: 100%;
      width: 2px;
      background-color: rgba(98,98,98,255);
  }
 
  .SaturnForum-line-bottom {
      position: relative;
      width: 100%;
      height: 2px;
      background-color: rgba(98,98,98,255);
      margin-bottom: 40px;
      order: 3;
  }
 
  .SaturnForum-header-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: flex-start;
      align-items: flex-start;
      order: 0;
      margin: 0 auto;
  }
 
  .SaturnForum-time {
      position: static;
      text-align: left;
      padding: 10px;
      padding-left: 120px;
      margin-right: 10px;
      font-size: 0.85rem;
      word-break: break-word;
  }
 
  .SaturnForum-floor {
      position: static;
      text-align: right;
      padding: 10px;
      padding-right: 10px;
      margin-left: auto;
      font-size: 0.85rem;
      word-break: break-word;
      min-width: 25px;
  }
 
  .SaturnForum-refence {
      position: absolute;
      bottom: 10px;
      left: 120px;
      height: 10px;
      text-align: center;
      padding: 10px;
      font-size: 0.85rem;
      color: #3498db;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
  }
 
      .SaturnForum-refence:hover {
          color: #e74c3c;
          text-decoration: underline;
      }
 
  .SaturnForum-ping {
      position: absolute;
      bottom: 11px;
      left: 160px;
      height: 10px;
      text-align: center;
      padding: 10px;
      font-size: 0.85rem;
      color: #3498db;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
  }
 
      .SaturnForum-ping:hover {
          color: #e74c3c;
          text-decoration: underline;
      }
 
  .SaturnForum-report {
      position: absolute;
      bottom: 10px;
      right: 10px;
      height: 10px;
      text-align: center;
      padding: 10px;
      font-size: 0.85rem;
      color: #3498db;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
  }
 
      .SaturnForum-report:hover {
          color: #e74c3c;
          text-decoration: underline;
      }
 
  .SaturnForum-text {
      position: static;
      flex: 1;
      align-self: stretch;
      margin: -100px 15px 10px 114px;
      font-size: 0.95rem;
      word-break: break-all;
      overflow: auto;
      line-height: 2;
      order: 2;
  }
        /* 基础三列等宽布局 */
        .container1 {
             display: grid;
             display: grid;
             grid-template-columns: repeat(3, 1fr); /* 创建3列等宽 */
            width: 95%;
             gap: 10px; /* 网格间距 */
            min-width: 200px;
            max-width: 1100px;
            min-height: 300px;
             grid-template-columns: 100px 2px 1fr 1fr;
            grid-template-rows: minmax(40px,auto) 2px 80px minmax(136px,auto) 2px minmax(40px,auto);
             grid-template-areas:
                "logo line-left-top time floor"
                "line-top line-top line-top line-top"
                "portrait line-left-center text text"
                "user line-left-center text text"
                "line-bottom line-bottom line-bottom line-bottom"
                ". line-left-bottom reaction reaction";
            background-color: #f0f0f0;
            margin: 0 auto;
         }
         }
 
        .SaturnForum-logo {
            .container1 > div {
            grid-area: logo;
                background: #ff6b6b;
            justify-self: center;
                padding: 20px;
            align-self: center;
                text-align: center;
        }
            }
        .SaturnForum-line-top {
 
            grid-area: line-top;
         /* 响应式两列+侧边栏布局 */
            background-color: rgba(98,98,98,255);
         .container2 {
         }
             display: grid;
         .SaturnForum-line-bottom {
             grid-template-columns: 200px 1fr; /* 固定侧边栏+弹性主内容区 */
             grid-area: line-bottom;
             grid-template-areas:
             background-color: rgba(98,98,98,255);
                "header header"
        }
                "sidebar main";
        .SaturnForum-line-left-top {
             grid-area: line-left-top;
            background-color: rgba(98,98,98,255);
         }
         }
 
         .SaturnForum-line-left-center {
         .header {
             grid-area: line-left-center;
             grid-area: header;
             background-color: rgba(98,98,98,255);
             background: #4ecdc4;
         }
         }
 
         .SaturnForum-line-left-bottom {
         .sidebar {
             grid-area: line-left-bottom;
             grid-area: sidebar;
             background-color: rgba(98,98,98,255);
             background: #45b7d1;
         }
         }
 
         .SaturnForum-portrait {
         .main {
             grid-area: portrait;
             grid-area: main;
             background-color: rgba(98,92,93,255);
             background: #f9f871;
            height: 60px;
            width: 60px;
            justify-self: center;
            align-self: center;
         }
         }
 
         .SaturnForum-user {
        /* 图片画廊布局(自动行高) */
             grid-area: user;
         .gallery {
            justify-self: center;
             display: grid;
            height: auto;
             grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自动填充最小150px的列 */
            text-align: center;
             gap: 15px;
             text-decoration: none;
            transition: all 0.1s ease;
            cursor: pointer;
            word-break: break-all;
            margin-left: 15px;
             margin-right: 15px;
         }
         }


             .gallery img {
             .SaturnForum-user:hover {
                 width: 100%;
                 color: #3498db;
                height: auto;
                 text-decoration: underline;
                 border-radius: 8px;
             }
             }
 
        .SaturnForum-time {
         /* 复杂区域划分 */
            grid-area: time;
         .container3 {
            align-self: center;
            justify-self: start;
            text-align: left;
            margin-left: 10px;
            font-size: 0.85rem;
            word-break: break-all;
        }
        .SaturnForum-floor {
            grid-area: floor;
            align-self: center;
            justify-self: end;
            text-align: right;
            margin-right: 10px;
            font-size: 0.85rem;
            word-break: break-all;
        }
        .SaturnForum-text {
            grid-area: text;
            font-size: 0.95rem;
            word-break: break-all;
            overflow: auto;
            margin: 5px;
            line-height: 1.35;
         }
         .SaturnForum-reaction {
             display: grid;
             display: grid;
            grid-area: reaction;
            justify-self: stretch;
            align-self: stretch;
            width: 100%;
            height: 100%;
            grid-template-columns: 50px 20px 1fr;
             grid-template-areas:
             grid-template-areas:
                 "header header header"
                 "refence ping report";
                "nav    content ads"
        }
                "footer footer footer";
        .SaturnForum-refence {
             grid-template-columns: 100px 1fr 100px;
            grid-area: refence;
             min-height: 300px;
             justify-self: center;
            align-self: center;
             text-align: center;
            margin: 10px;
            font-size: 0.85rem;
            color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
         }
         }


         .nav {
            .SaturnForum-refence:hover {
             grid-area: nav;
                color: #e74c3c;
             background: #a6a6a6;
                text-decoration: underline;
            }
 
         .SaturnForum-ping {
             grid-area: ping;
            justify-self: center;
            align-self: center;
            text-align: center;
            margin: 10px;
            font-size: 0.85rem;
             color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
         }
         }


        .content {
            .SaturnForum-ping:hover {
            grid-area: content;
                color: #e74c3c;
            background: #ffffff;
                text-decoration: underline;
        }
            }


         .ads {
         .SaturnForum-report {
             grid-area: ads;
             grid-area: report;
             background: #d4a5a5;
             justify-self: right;
            align-self: center;
            text-align: center;
            margin: 10px;
            font-size: 0.85rem;
            color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
         }
         }


         .footer {
            .SaturnForum-report:hover {
            grid-area: footer;
                color: #e74c3c;
             background: #2c3e50;
                text-decoration: underline;
            }
         @media(max-width: 400px) {
            .SaturnForum-Maincontainer {
                grid-template-columns: 100px 1fr;
                grid-template-rows: 40px 2px 80px minmax(30px,auto) 2px minmax(150px,auto) 2px minmax(40px,auto);
                grid-template-areas:
                    "logo logo"
                    "line-left-top line-left-top"
                    "portrait time"
                    "user floor"
                    "line-top line-top"
                    "text text"
                    "line-bottom line-bottom"
                    "reaction reaction"
            }
             .SaturnForum-time {
                justify-self: end;
                text-align: right;
                margin-right: 10px;
            }
         }
         }

2026年2月1日 (日) 03:08的最新版本

        .SaturnForum-Maincontainer {
            display: grid;
            width: 95%;
            min-width: 200px;
            max-width: 1100px;
            min-height: 300px;
            grid-template-columns: 100px 2px 1fr 1fr;
            grid-template-rows: minmax(40px,auto) 2px 80px minmax(136px,auto) 2px minmax(40px,auto);
            grid-template-areas:
                "logo line-left-top time floor"
                "line-top line-top line-top line-top"
                "portrait line-left-center text text"
                "user line-left-center text text"
                "line-bottom line-bottom line-bottom line-bottom"
                ". line-left-bottom reaction reaction";
            background-color: #f0f0f0;
            margin: 0 auto;
        }
        .SaturnForum-logo {
            grid-area: logo;
            justify-self: center;
            align-self: center;
        }
        .SaturnForum-line-top {
            grid-area: line-top;
            background-color: rgba(98,98,98,255);
        }
        .SaturnForum-line-bottom {
            grid-area: line-bottom;
            background-color: rgba(98,98,98,255);
        }
        .SaturnForum-line-left-top {
            grid-area: line-left-top;
            background-color: rgba(98,98,98,255);
        }
        .SaturnForum-line-left-center {
            grid-area: line-left-center;
            background-color: rgba(98,98,98,255);
        }
        .SaturnForum-line-left-bottom {
            grid-area: line-left-bottom;
            background-color: rgba(98,98,98,255);
        }
        .SaturnForum-portrait {
            grid-area: portrait;
            background-color: rgba(98,92,93,255);
            height: 60px;
            width: 60px;
            justify-self: center;
            align-self: center;
        }
        .SaturnForum-user {
            grid-area: user;
            justify-self: center;
            height: auto;
            text-align: center;
            text-decoration: none;
            transition: all 0.1s ease;
            cursor: pointer;
            word-break: break-all;
            margin-left: 15px;
            margin-right: 15px;
        }

            .SaturnForum-user:hover {
                color: #3498db;
                text-decoration: underline;
            }
        .SaturnForum-time {
            grid-area: time;
            align-self: center;
            justify-self: start;
            text-align: left;
            margin-left: 10px;
            font-size: 0.85rem;
            word-break: break-all;
        }
        .SaturnForum-floor {
            grid-area: floor;
            align-self: center;
            justify-self: end;
            text-align: right;
            margin-right: 10px;
            font-size: 0.85rem;
            word-break: break-all;
        }
        .SaturnForum-text {
            grid-area: text;
            font-size: 0.95rem;
            word-break: break-all;
            overflow: auto;
            margin: 5px;
            line-height: 1.35;
        }
        .SaturnForum-reaction {
            display: grid;
            grid-area: reaction;
            justify-self: stretch;
            align-self: stretch;
            width: 100%;
            height: 100%;
            grid-template-columns: 50px 20px 1fr;
            grid-template-areas:
                "refence ping report";
        }
        .SaturnForum-refence {
            grid-area: refence;
            justify-self: center;
            align-self: center;
            text-align: center;
            margin: 10px;
            font-size: 0.85rem;
            color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
        }

            .SaturnForum-refence:hover {
                color: #e74c3c;
                text-decoration: underline;
            }

        .SaturnForum-ping {
            grid-area: ping;
            justify-self: center;
            align-self: center;
            text-align: center;
            margin: 10px;
            font-size: 0.85rem;
            color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
        }

            .SaturnForum-ping:hover {
                color: #e74c3c;
                text-decoration: underline;
            }

        .SaturnForum-report {
            grid-area: report;
            justify-self: right;
            align-self: center;
            text-align: center;
            margin: 10px;
            font-size: 0.85rem;
            color: #3498db;
            transition: all 0.3s ease;
            cursor: pointer;
        }

            .SaturnForum-report:hover {
                color: #e74c3c;
                text-decoration: underline;
            }
        @media(max-width: 400px) {
            .SaturnForum-Maincontainer {
                grid-template-columns: 100px 1fr;
                grid-template-rows: 40px 2px 80px minmax(30px,auto) 2px minmax(150px,auto) 2px minmax(40px,auto);
                grid-template-areas:
                    "logo logo"
                    "line-left-top line-left-top"
                    "portrait time"
                    "user floor"
                    "line-top line-top"
                    "text text"
                    "line-bottom line-bottom"
                    "reaction reaction"
            }
            .SaturnForum-time {
                justify-self: end;
                text-align: right;
                margin-right: 10px;
            }
        }