这是林泊百科的迁移技术测试站点,所有改动不会同步到林泊百科上,此站点将会在正式迁移后关闭,请勿存放重要数据

模板:曲里拐弯故事会/common.css:修订间差异

来自Limbo Wiki
跳转到导航 跳转到搜索
晨茗biu~留言 | 贡献
创建页面,内容为“ .Infobox { border:1px solid; border-spacing: 3px; background-color: #f8f9fa; padding: 0.2em; line-height: 1.5em; border-left: 10px solid; margin:0 20% 0 0; width:80%; position: relative; } .Infobox td{ border:0 !important; } .Infobox::before { content: ''; position: absolute; inset: -1px -1px -1px -10px; border-radius:…”
 
Nannnnn留言 | 贡献
Nannnnn将页面模板:曲里拐弯故事会/common.css的内容模型从“CSS”更改为“已过滤的CSS”
 
(未显示2个用户的4个中间版本)
第8行: 第8行:
         margin:0 20% 0 0;
         margin:0 20% 0 0;
         width:80%;
         width:80%;
        position: relative;
     }
     }
     .Infobox td{
     .Infobox td{
     border:0 !important;
     border:0 !important;
     }
     }
 
   
     .Infobox::before {
     .Distorted-text{
            content: '';
    background: black;
            position: absolute;
    }
            inset: -1px -1px -1px -10px;
   
            border-radius: inherit;
            z-index: -1;
            pointer-events: none;
            background: repeating-conic-gradient(from 0deg,
                    #ff6b6b 0deg,
                    #ffa94d calc(360deg / 9 / 7 * 1),
                    #ffd43b calc(360deg / 9 / 7 * 2),
                    #69db7c calc(360deg / 9 / 7 * 3),
                    #4dabf7 calc(360deg / 9 / 7 * 4),
                    #9775fa calc(360deg / 9 / 7 * 5),
                    #f06595 calc(360deg / 9 / 7 * 6),
                    #ff6b6b calc(360deg / 9 / 7 * 7));
        }
 
     @media screen and (max-width: 850px) {
     @media screen and (max-width: 850px) {
         .Infobox {
         .Infobox {
第37行: 第22行:
             width:100% !important;
             width:100% !important;
         }
         }
    }
@media (prefers-color-scheme: dark) and (max-width: 850px) {
    .Infobox {
        position: relative;
        border: 1px solid transparent;
        border-left: 10px solid transparent;
        border-image: linear-gradient(
            to right,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0
        ) 1;
     }
     }


     @media screen and (prefers-color-scheme: dark) {
     .Infobox::before {
         .Infobox {
         content: "";
            background-color: #343a40;
        position: absolute;
            color: #f8f9fa;
        top: -1px;
            border:0px;
        left: -10px;
            margin:10px;
        bottom: -1px;
         }
        width: 10px;
         background: repeating-linear-gradient(
            to bottom,
            #ff9999 0%,  #ffb366 5%,  #ffeb99 10%,
            #7ddf90 15%,  #66b3ff 20%,  #9999ff 25%,  #d49be0 30%
        );
    }
   
    .Distorted-text{
    background: linear-gradient(
        to right,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0
    );
     }
     }
}

2026年6月6日 (六) 16:48的最新版本

    .Infobox {
        border:1px solid;
        border-spacing: 3px;
        background-color: #f8f9fa;
        padding: 0.2em;
        line-height: 1.5em;
        border-left: 10px solid;
        margin:0 20% 0 0;
        width:80%;
    }
    .Infobox td{
    border:0 !important;
    }
    
    .Distorted-text{
    	 background: black;
    }
    
    @media screen and (max-width: 850px) {
        .Infobox {
            margin:0;
            width:100% !important;
        }
    }
@media (prefers-color-scheme: dark) and (max-width: 850px) {
    .Infobox {
        position: relative;
        border: 1px solid transparent;
        border-left: 10px solid transparent;
        border-image: linear-gradient(
            to right,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
            #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0
        ) 1;
    }

    .Infobox::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -10px;
        bottom: -1px;
        width: 10px;
        background: repeating-linear-gradient(
            to bottom,
            #ff9999 0%,   #ffb366 5%,   #ffeb99 10%,
            #7ddf90 15%,  #66b3ff 20%,  #9999ff 25%,  #d49be0 30%
        );
    }
    
    .Distorted-text{
    background: linear-gradient(
        to right,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0,
        #ff9999, #ffb366, #ffeb99, #7ddf90, #66b3ff, #9999ff, #d49be0
    );
    }
}