用户:晨茗biu/Sandbox-SaturnForum.css

        .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;
            }
 /* 基础Grid布局 - 默认移动优先（单列） */
 .grid-container {
     display: grid;
     grid-template-columns: 1fr; /* 单列布局 */
     gap: 15px;
     padding: 20px;
     background-color: #f9fafb;
 }

 /* 媒体查询：平板设备（横屏模式） */
 @media (min-width: 768px) and (orientation: landscape) {
     .grid-container {
         grid-template-columns: repeat(2, 1fr); /* 双列布局 */
         background-color: #f3f4f6;
     }
 }

 /* 媒体查询：桌面设备 */
 @media (min-width: 1024px) {
     .grid-container {
         grid-template-columns: repeat(3, 1fr); /* 三列布局 */
         max-width: 1200px;
         margin: 0 auto;
         background-color: #e5e7eb;
     }

     /* 特定列样式 */
     .grid-item:nth-child(3) {
         background-color: #93c5fd;
         grid-column: span 2; /* 跨两列 */
     }
 }

 /* 媒体查询：大屏幕优化 */
 @media (min-width: 1280px) {
     .grid-container {
         grid-template-columns: 1fr 2fr 1fr; /* 比例布局 */
     }
 }

 /* 媒体查询：深色模式 */
 @media (prefers-color-scheme: dark) {
     .grid-container {
         background-color: #1e293b;
         color: #f8fafc;
     }

     .grid-item {
         background-color: #334155;
     }
 }

 /* 网格项基础样式 */
 .grid-item {
     padding: 25px;
     border-radius: 10px;
     background-color: white;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }