神奇宝贝百科:层叠样式表

来自神奇宝贝百科

这是神奇宝贝百科的 CSS 源代码,使用 SASS 语法并兼容标准 CSS。

使用方法见Help:层叠样式表

修改建议请在讨论页提出。代码修改后,会自动更新到 Common.css

文本内容

// 颜色列表设置
// 配置方法:
// 每行用逗号分割,每列用空格分割
// 各列分别表示 颜色名 正常颜色值 浅色值 深色值
// 简繁不同的颜色名需要复制一行

$colorList:
    红 #F11 #FF6464 #A60B0B,
    紅 #F11 #FF6464 #A60B0B,
    绿 #1B1 #64D364 #0B7A0B,
    綠 #1B1 #64D364 #0B7A0B,
    蓝 #11F #6464FF #0B0BA6,
    藍 #11F #6464FF #0B0BA6,
    黄 #FFD733 #FFE57A #A68C21,
    皮卡丘 #FFD733 #FFE57A #A68C21,
    金 #DAA520 #E7C46E #8E6B15,
    银 #C0C0C0 #D6D6D6 #7D7D7D,
    銀 #C0C0C0 #D6D6D6 #7D7D7D,
    水晶 #4FD9FF #8CE6FF #338DA6,
    红宝石 #BF0109 #B37577 #A9070E,
    紅寶石 #BF0109 #B37577 #A9070E,
    蓝宝石 #3862AE #779FE8 #103D8F,
    藍寶石 #3862AE #779FE8 #103D8F,
    绿宝石 #00A000 #59C159 #006800,
    綠寶石 #00A000 #59C159 #006800,
    火红 #FF7327 #FFA472 #A64B19,
    火紅 #FF7327 #FFA472 #A64B19,
    叶绿 #98CF12 #DAF598 #81B00F,
    葉綠 #98CF12 #DAF598 #81B00F,
    钻石 #7BB1F9 #B2D1FB #678BD5,
    鑽石 #7BB1F9 #C8C8FB #678BD5,
    珍珠 #E068A0 #f0A0D0 #D84890,
    白金 #B69E00 #CFC059 #766700,
    心金 #F8C838 #F8E8A8 #C87010,
    魂银 #A0C0E8 #C8D8F0 #506090,
    魂銀 #A0C0E8 #C8D8F0 #506090,
    黑 #444 #858585 #2C2C2C,
    白 #C3C3C3 #D8D8D8 #7F7F7F,
    黑2 #181818 #636161 #1892CB,
    白2 #CBCBCB #EEEDED #DB2818,
    X #025DA6 #5A96C5 #013D6C,
    Y #EA1A3E #F16A81 #981128,
    OR #AB2813 #C87365 #6F1A0C,
    欧米伽红宝石 #AB2813 #C87365 #6F1A0C,
    歐米加紅寶石 #AB2813 #C87365 #6F1A0C,
    AS #26649C #729ABF #194166,
    阿尔法蓝宝石 #26649C #729ABF #194166,
    阿爾法藍寶石 #26649C #729ABF #194166,
    太阳 #EE993C #F5BE84 #CA7111,
    太陽 #EE993C #F5BE84 #CA7111,
    月亮 #7DC3E3 #B3DCEF #2C9BCE,
    US #FA8E00 #FBA81C #110B0D,
    究极之日 #FA8E00 #FBA81C #110B0D,
    究極之日 #FA8E00 #FBA81C #110B0D,
    UM #008CD9 #12A6DF #110B0D,
    究极之月 #008CD9 #12A6DF #110B0D,
    究極之月 #008CD9 #12A6DF #110B0D,
    LP #F5DA26 #F8E772 #9F8E19,
    LG皮卡丘 #F5DA26 #F8E772 #9F8E19,
    LE #D4924B #E3B88A #8A5F31,
    LG伊布 #D4924B #E3B88A #8A5F31,
    Sw #00A1E9 #59C2F1 #006998,
    SW #00A1E9 #59C2F1 #006998,
    剑 #00A1E9 #59C2F1 #006998,
    劍 #00A1E9 #59C2F1 #006998,
    Sh #BF004F #D5598C #7C0033,
    SH #BF004F #D5598C #7C0033,
    盾 #BF004F #D5598C #7C0033,
    冠之雪原 #01948A #44BB87 #004C64,
    鎧之孤島 #F5D623 #FEE65E #FBB102,
    铠之孤岛 #F5D623 #FEE65E #FBB102,
    BD #44BAE5 #85D2EE #2C7995,
    晶燦鑽石 #44BAE5 #85D2EE #2C7995,
    晶灿钻石 #44BAE5 #85D2EE #2C7995,
    SP #DA7D99 #E7ABBD #8E5163,
    明亮珍珠 #DA7D99 #E7ABBD #8E5163,
    LA #36597B #7C93A9 #233A50,
    传说阿尔宙斯 #36597B #7C93A9 #233A50,
    傳說阿爾宙斯 #36597B #7C93A9 #233A50,
    朱 #F8463E #FF933C #9E2A22,
    紫 #9C4595 #BB45B0 #552277,
    碧之假面 #299a9b #77bfbc #317448,
    蓝之圆盘 #11668f #266ab4 #064261,
    藍之圓盤 #11668f #266ab4 #064261,
    LZ #34B574 #FAD6DD #1F7A6D,
    传说ZA #34B574 #FAD6DD #1F7A6D,
    傳說ZA #34B574 #FAD6DD #1F7A6D,
    赤救 #C50C50 #D85C8A #840836,
    青救 #095baf #5a91c9 #063d75,
    XD #604e82 #978cae #3e3355,
    COLO #b6cae4 #cfdced #768394,
    时探 #2190c7 #6ab5d9 #166185,
    時探 #2190c7 #6ab5d9 #166185,
    暗探 #c3141b #d76166 #830d12,
    空探 #7bb54f #a6cd89 #527935,
    极大之门 #0872F9 #7EE0FD #003D94,
    極大之門 #0872F9 #7EE0FD #003D94,
    巡护员 #F7681A #FA9D6A #A14411,
    巡護員 #F7681A #FA9D6A #A14411,
    DeP #F7D909 #FBE972 #66370A,
    一般 #BBBBAA #E7E7D8 #8A8A7B,    
    火 #FF4422 #FF927D #BA1F00,
    水 #3399FF #77BBFF #0D6AC8,
    草 #77CC55 #BDFFA3 #40C60A,
    电 #FFCC33 #FAE078 #BD8E00,
    電 #FFCC33 #FAE078 #BD8E00,
    格斗 #BB5544 #DD9988 #912E1E,
    格鬥 #BB5544 #DD9988 #912E1E,
    飞行 #6699FF #99BBFF #3678FF,
    飛行 #6699FF #99BBFF #3678FF,
    毒 #AA5599 #C689BA #792F6A,
    虫 #AABB22 #DAEC44 #849400,
    蟲 #AABB22 #DAEC44 #849400,
    岩石 #BBAA66 #E1D08C #88762C,
    地面 #DDBB55 #F1DDA0 #B59226,
    超能力 #FF5599 #FF9CC4 #D00053,
    冰 #77DDFF #DBF6FF #13A8D9,
    龙 #7766EE #A194FF #31229D,
    龍 #7766EE #A194FF #31229D,
    幽灵 #6666BB #9F9FEC #42428E,
    幽靈 #6666BB #9F9FEC #42428E,
    恶 #775544 #BDA396 #442C21,
    惡 #775544 #BDA396 #442C21,
    钢 #AAAABB #DFDFE1 #74747B,
    鋼 #AAAABB #DFDFE1 #74747B,
    妖精 #FFAAFF #FBCBFB #EC67EA,
    未知 #68A090 #9DC1B7 #44685E,
    暗影 #604E82 #978CAE #3E3355,
    无色C #E5D6D0 #EEE4E0 #958B87,
    無色C #E5D6D0 #EEE4E0 #958B87,
    火C #E24242 #EC8484 #932B2B,
    水C #5BC7E5 #94DBEE #3B8295,
    草C #7DB808 #AAD15E #517805,
    雷C #FAB536 #FCCE7C #A37523,
    斗C #CA7121 #E09048 #A4550E,
    鬥C #CA7121 #E09048 #A4550E,
    超C #A65E9A #C596BD #6C3D64,
    恶C #064240 #337774 #002B29,
    惡C #064240 #337774 #002B29,
    钢C #BCC7C3 #E7E9E9 #90A69E,
    鋼C #BCC7C3 #E7E9E9 #90A69E,
    龙C #D9CD57 #E4E7A2 #747343,
    龍C #D9CD57 #E4E7A2 #747343,
    妖C #E03A83 #EA7EAE #912555,
    宝可体质C #146837 #5A9572 #0E4926,
    寶可體質C #146837 #5A9572 #0E4926,
    宝可力量C #850921 #A95263 #5D0617,
    寶可力量C #850921 #A95263 #5D0617,
    训练家卡C #FFE995 #FFFCE4 #B3A33B,
    訓練家卡C #FFE995 #FFFCE4 #B3A33B,
    支援者卡C #F68B00 #F5C267 #EA601F,
    竞技场卡C #90E183 #B7EBAE #5E9255,
    競技場卡C #90E183 #B7EBAE #5E9255,
    物品卡C #1F91D8 #6BB3ED #0063C5,
    道具卡C #AB74AB #D1A8C8 #6F559F,
    宝可梦道具C #AB74AB #D1A8C8 #6F559F,
    寶可夢道具C #AB74AB #D1A8C8 #6F559F,
    彩虹C #5BC7E5 #60DCFF #37B4D6,
    极光C #5BC7E5 #60DCFF #37B4D6,
    極光C #5BC7E5 #60DCFF #37B4D6,
    特性C #C84923 #D87F64 #8C3318,
    未知C #58A090 #EEE4E0 #958B87,
    怪兽E #d25064 #df8492 #933846,
    怪獸E #d25064 #df8492 #933846,
    人型E #d29682 #dfb5a7 #93695b,
    水中1E #97b5fd #b5cbfd #697fb1,
    水中3E #5876be #899ed1 #3d5285,
    虫E #aac22a #c3d469 #77881d,
    蟲E #aac22a #c3d469 #77881d,
    矿物E #7a6252 #a19085 #554439,
    礦物E #7a6252 #a19085 #554439,
    飞行E #b29afa #c8b8fb #7c6caf,
    飛行E #b29afa #c8b8fb #7c6caf,
    不定形E #8a8a8a #acacac #606060,
    陆上E #d0c068 #d9d295 #9d8649,
    陸上E #d0c068 #d9d295 #9d8649,
    水中2E #729afa #9cb8fb #506caf,
    妖精E #ffc8f0 #ffd8f4 #b38ca8,
    百变怪E #a664bf #c092d2 #744686,
    百變怪E #a664bf #c092d2 #744686,
    植物E #82d25a #a7df8b #5b933f,
    龙E #7a42ff #a17aff #552eb3,
    龍E #7a42ff #a17aff #552eb3,
    未发现E #333333 #6f6f6f #232323,
    未發現E #333333 #6f6f6f #232323,
    性别不明E #0080c0 #4ca5d2 #005986,
    性別不明E #0080c0 #4ca5d2 #005986,
    物理 #FF4400 #EE7700 #CC2200,
    特殊 #2266CC #7799DD #0033AA,
    变化 #999999 #ACACAC #666655,
    變化 #999999 #ACACAC #666655,
    睡眠 #549CDF #FBF5DA #5D6DC0,
    濒死 #DBDBDB #FBF5DB #707070,
    瀕死 #DBDBDB #FBF5DB #707070,
    昏厥 #DBDBDB #FBF5DB #707070,
    华丽大赛 #e090a8 #EBB7C6 #925E6D,
    華麗大賽 #e090a8 #EBB7C6 #925E6D,
    聪明 #9BCE13 #B8C964 #83A51D,
    聰明 #9BCE13 #B8C964 #83A51D,
    美丽 #51B3DC #95EAEA #1A7FA1,
    美麗 #51B3DC #95EAEA #1A7FA1,
    强壮 #E7B43D #F5CC61 #B27F09,
    強壯 #E7B43D #F5CC61 #B27F09,
    帅气 #BD3A29 #EF755D #9E2918,
    帥氣 #BD3A29 #EF755D #9E2918,
    可爱 #E67091 #EDA9A9 #A4737B,
    可愛 #E67091 #EDA9A9 #A4737B,
    HP #8AC654 #97C87A #558936,
    攻击 #F8CB3C #FAE192 #CCBC33,
    攻擊 #F8CB3C #FAE192 #CCBC33,
    防御 #D98837 #FBB977 #B4673D,
    防禦 #D98837 #FBB977 #B4673D,
    特攻 #59C3D0 #A2D4DA #1A7E8D,
    特防 #5890CD #89A9CD #004689,
    速度 #A456D0 #C39CD8 #3C2957,
    辣 #F08030 #F5AC78 #9C531F,
    酸 #FFCC33 #FAE078 #A1871F,
    涩 #6890F0 #9DB7F5 #445E9C,
    澀 #6890F0 #9DB7F5 #445E9C,
    苦 #78C850 #A7DB8D #4E8234,
    甜 #FF5599 #FA92B2 #A13959,
    回避 #AE58F8 #D099FF #542B77,
    迴避 #AE58F8 #D099FF #542B77,
    命中 #58F8F6 #AEFFFE #2A6F6E,
    关都 #CF4376 #EA89AD #B3255A,
    關都 #CF4376 #EA89AD #B3255A,
    城都 #E5C94A #FAE340 #C5A20E,
    丰缘 #0EBE2D #18DD39 #0B831F,
    豐緣 #0EBE2D #18DD39 #0B831F,
    神奥 #2995CF #52A6D3 #0A79B3,
    神奧 #2995CF #52A6D3 #0A79B3,
    合众 #F0A39B #F4C0BB #D6847B,
    合眾 #F0A39B #F4C0BB #D6847B,
    卡洛斯 #D6D8D8 #E1E6E6 #8E9193,
    阿罗拉 #5AC8FA #8AD8FB #21A4E1,
    阿羅拉 #5AC8FA #8AD8FB #21A4E1,
    伽勒尔 #AC379E #C97DC0 #702467,
    伽勒爾 #AC379E #C97DC0 #702467,
    洗翠 #007E66 #38B48B #013224,
    帕底亚 #D45455 #E39091 #8A3737,
    帕底亞 #D45455 #E39091 #8A3737,
    七之岛 #52cc91 #8debbc #2b915e,
    七之島 #52cc91 #8debbc #2b915e,
    橘子 #FF7F00 #FFAC59 #A65300,
    杰可罗拉 #2292E7 #5CBFEA #105CAF,
    杰可羅拉 #2292E7 #5CBFEA #105CAF,
    菲蕾 #F7681A #FA9D6A #A14411,
    菲雷 #F7681A #FA9D6A #A14411,
    欧雷 #817548 #ada588 #544c2f,
    歐雷 #817548 #ada588 #544c2f,
    阿尔米亚 #2D4B98 #768ABC #1D3163,
    阿爾米亞 #2D4B98 #768ABC #1D3163,
    奥卜利比亚 #2CB8E9 #76D1F1 #1D7898,
    奧卜利比亞 #2CB8E9 #76D1F1 #1D7898,
    乱世 #F0AF40 #F8DE7E #E08A1E,
    亂世 #F0AF40 #F8DE7E #E08A1E,
    宝可梦卡牌岛 #FFE955 #FFFCE4 #b3a33b,
    寶可夢卡牌島 #FFE955 #FFFCE4 #b3a33b,
    坚铁 #9B9B9B #CDCDCD #6B6B6B,
    堅鐵 #9B9B9B #CDCDCD #6B6B6B,
    陆地 #75C977 #A2E0A3 #4AA14D,
    陸地 #75C977 #A2E0A3 #4AA14D,
    森林 #3A822D #71AD64 #34612D,
    雾 #B5ADC7 #CAC1DE #9E98AD,
    霧 #B5ADC7 #CAC1DE #9E98AD,
    湿地 #7792BD #BDA595 #3D6633,
    溼地 #7792BD #BDA595 #3D6633,
    濕地 #7792BD #BDA595 #3D6633,
    灰尘 #9C8583 #B8A09E #856765,
    灰塵 #9C8583 #B8A09E #856765,
    遗迹 #BFB895 #EBE5CA #9E9773,
    遺跡 #BFB895 #EBE5CA #9E9773,
    沙地 #D6BD7C #DBCFA0 #B59B59,
    湖泊 #66BDCC #85D4DE #538FBD,
    海洋 #485CC2 #5A98F5 #1E3F94,
    水下 #6053AD #737AC7 #553894,
    洞窟 #CC8F66 #E0B192 #A66A42,
    山峰 #B8907D #D4B5A7 #7A5443,
    火山 #D20000 #D23434 #A30000,
    雪地 #DCEBEF #E1EFF2 #BBCDD1,
    空间 #222 #555 #000,
    空間 #222 #555 #000,
    破格 #5A65DB #CC8562 #2622A8,
    破碎 #5A65DB #CC8562 #2622A8,
    阴影 #472E63 #604E82 #1A0A2C,
    陰影 #472E63 #604E82 #1A0A2C,
    建筑 #A8B9BD #C3D8DE #8A9CA1,
    建築 #A8B9BD #C3D8DE #8A9CA1,
    道路 #ABA9A4 #CFCDC7 #949391,
    天空 #7CE9FD #B6F3FE #04C8EC,
    宇宙 #511843 #3C488D #331139,
    对战开拓区 #3FA9D0 #82C7E0 #296E87,
    對戰開拓區 #3FA9D0 #82C7E0 #296E87,
    开拓区 #3FA9D0 #82C7E0 #296E87,
    開拓區 #3FA9D0 #82C7E0 #296E87,
    塔 #D6553C #E49080 #8B3727,
    工厂 #296E87 #7AB7D7 #215E7E,
    工廠 #296E87 #7AB7D7 #215E7E,
    轮盘 #ffc115 #FFD767 #A67E0E,
    輪盤 #ffc115 #FFD767 #A67E0E,
    城堡 #40ad72 #83CAA3 #2A714A,
    舞台 #F87A97 #FAA8BB #A14F62,
    清晨 #FFA #FFFFC8 #b3b377,
    白天 #5ED0FF #96E0FF #4192b3,
    黄昏 #E85800 #FFA900 #881000,
    黃昏 #E85800 #FFA900 #881000,
    夜晚 #003366 #597A9B #002347,
    春 #B0F858 #c7fa89 #7bae3d,
    夏 #78D0F8 #a0defa #5492ae,
    秋 #F89058 #fab189 #ae653d,
    冬 #F0D8F8 #f4e3fa #a897ae,
    道具 #009ACD #6DE0FF #005069,
    回复 #00D1B2 #ADF9D6 #008E9A,
    回復 #00D1B2 #ADF9D6 #008E9A,
    精灵球 #C88820 #E0A038 #925906,
    精靈球 #C88820 #E0A038 #925906,
    招式学习器 #8A48DC #D4ABFD #551C97,
    招式學習器 #8A48DC #D4ABFD #551C97,
    树果 #6161FD #B5B5FD #2B2BD0,
    樹果 #6161FD #B5B5FD #2B2BD0,
    战斗道具 #3070E0 #4880F0 #163B86,
    戰鬥道具 #3070E0 #4880F0 #163B86,
    战斗 #3070E0 #4880F0 #163B86,
    戰鬥 #3070E0 #4880F0 #163B86,
    邮件 #1890B0 #18A8D0 #1B5D68,
    郵件 #1890B0 #18A8D0 #1B5D68,
    重要物品 #FC3636 #FFA7A7 #AF0A0A,
    球果 #F0A018 #F8C038 #A05840,
    Z纯晶 #A76502 #FFB744 #583700,
    Z純晶 #A76502 #FFB744 #583700,
    洛托姆之力 #FE624B #FE9488 #D33E26,
    食材 #F7E881 #FDF7CD #FBC521,
    野餐 #F7E881 #FDF7CD #FBC521,
    掉落物 #E77B89 #F2F2F2 #A39DAE,
    宝物 #FDD052 #F6E061 #987824,
    寶物 #FDD052 #F6E061 #987824,
    神奇宝贝百科 #F1907B #FFE0C4 #e34234,
    神奇寶貝百科 #F1907B #FFE0C4 #e34234
;

// 圆角边框
@mixin roundy($radius, $suffix) {
    .roundy#{$suffix} {
        border-radius: $radius;
    }
    .roundytl#{$suffix} {
        border-top-left-radius: $radius;
    }
    .roundytr#{$suffix} {
        border-top-right-radius: $radius;
    }
    .roundybl#{$suffix} {
        border-bottom-left-radius: $radius;
    }
    .roundybr#{$suffix} {
        border-bottom-right-radius: $radius;
    }
    .roundytop#{$suffix} {
        border-top-left-radius: $radius;
        border-top-right-radius: $radius;
    }
    .roundyright#{$suffix} {
        border-bottom-right-radius: $radius;
        border-top-right-radius: $radius;
    }
    .roundybottom#{$suffix} {
        border-bottom-left-radius: $radius;
        border-bottom-right-radius: $radius;
    }
    .roundyleft#{$suffix} {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
    }
    .roundyhead#{$suffix} th:first-child {
        border-top-left-radius: $radius;
    }
    .roundyhead#{$suffix} th:last-child {
        border-top-right-radius: $radius;
    }
}

.hide {
    display: none;
}

.textblack, .textblack a { color: #000 !important; }
.textwhite, .textwhite a { color: #FFF !important; }
.textblack2, .textblack2 a { color: #000; }
.textwhite2, .textwhite2 a { color: #FFF; }
.bgwhite { background: #FFF; }

// 栅格化系统
// Bootstrap v4.0.0 (https://getbootstrap.com)
// Copyright 2011-2018 The Bootstrap Authors
// Copyright 2011-2018 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
$grid-breakpoints: (
  xs: 0,
  sm: 540px,
  md: 720px,
  lg: 1000px,
  xl: 1200px
);
$grid-columns:                12;
$grid-gutter-width:           8px;

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      @for $i from 0 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) {
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}

@mixin make-container() {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($grid-gutter-width / -2);
  margin-left: ($grid-gutter-width / -2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

.container {
  @include make-container();
}

.row {
  @include make-row();
}

@include make-grid-columns();

// 响应式表格采用 flex 布局
table.container {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  flex: 1;
  .content & {
      margin: 0;
  }
  > tbody, > thead {
    flex: 1;
    display: flex;
    flex-direction: column;
    > tr {
      @include make-row();
      > td {
        display: block;
      }
    }
  }
}

.container {
  box-sizing: border-box;
  *, *::before, *::after {
    box-sizing: inherit;
  }
}

// 细节
.bl-公, .bl-雄 { border: 3px solid #3355FF; }
.bl-母, .bl-雌 { border: 3px solid #FF77DD; }

// 颜色 CSS
// 使用方法:
// .bg-颜色名,将元素的背景设置为该颜色
// .b-颜色名,将元素的边框设置为该颜色,边框宽度默认为3像素
// .t-颜色名,将元素中文字内容(包括链接)设置为该颜色
// .bgl-颜色名 和 .bgd-颜色名 分别为该颜色的浅色和深色
// .bl-颜色名,.bd-颜色名,.tl-颜色名,.td-颜色名 同理
@each $i in $colorList {
    .bg-#{nth($i, 1)} {
        background-color: nth($i, 2) !important;
    }
    .bgl-#{nth($i, 1)} {
        background-color: nth($i, 3) !important;
    }
    .bgd-#{nth($i, 1)} {
        background-color: nth($i, 4) !important;
    }
    .b-#{nth($i, 1)} {
        border-color: nth($i, 2);
    }
    .bl-#{nth($i, 1)} {
        border-color: nth($i, 3);
    }
    .bd-#{nth($i, 1)} {
        border-color: nth($i, 4);
    }
    .t-#{nth($i, 1)} {
        &, & a {
            color: nth($i, 2) !important;
        }
    }
    .tl-#{nth($i, 1)} {
        &, & a {
            color: nth($i, 3) !important;
        }
    }
    .td-#{nth($i, 1)} {
        &, & a {
            color: nth($i, 4) !important;
        }
    }
}

// 特殊文字颜色
.ts-物理 {
    &, & a {
        color: #FFCC00 !important;
    }
}
.ts-特殊 {
    &, & a {
        color: #BBEEFF !important;
    }
}
.ts-变化, .ts-變化 {
    &, & a {
        color: #EEEEEE !important;
    }
}
.ts-夜晚 {
    &, & a {
        color: #FF9;
    }
}
.ts-湿地, .ts-濕地, .ts-溼地 {
    &, & a {
        color: #573118 !important;
    }
}
.ts-火山 {
    &, & a {
        color: #FFBC00 !important;
    }
}
.ts-破碎 {
    &, & a {
        color: #E0FAFF !important;
    }
}
.ts-宇宙 {
    &, & a {
        color: #AEE7BC !important;
    }
}
.ts-特殊, .ts-空间, .ts-空間, .ts-阴影, .ts-陰影 {
    @extend .textwhite;
}

.s-关都, .s-關都 { background: #FAA; border-color: #AFA; border-style: solid; }
.s-橘子 { background: #FDA; border-color: #FB5; border-style: solid; }
.s-城都 { background: #FFCB49; border-color: #DDD; border-style: solid; }
.s-丰缘, .s-豐緣 { background: #F77; border-color: #99F; border-style: solid; }
.s-火叶, .s-火葉 { background: #FF9359; border-color: #32FA32; border-style: solid; }
.s-开拓区, .s-開拓區 { background: #7F7; border-color: #5D5; border-style: solid; }
.s-神奥, .s-神奧 { background: #AAF; border-color: #FCC; border-style: solid; }
.s-心魂 { background: #CEB654; border-color: #EBEBEB; border-style: solid; }
.s-合众, .s-合眾 { background: #C3C3C3; border-color: #2C2C2C; border-style: solid; }
.s-卡洛斯 { background: #F16A81; border-color: #5A96C5; border-style: solid; }
.s-Z { background: #A1D175; border-color: #6FB82B; border-style: solid; }
.s-阿羅拉, .s-阿罗拉 {background: #8AD8FB; border-color: #5AC8FA; border-style: solid; }
.s-伽勒爾, .s-伽勒尔 {background: #C97DC0; border-color: #AC379E; border-style: solid; }
.s-SS, .s-旅途 {background: #0090CA; border-color: #005CA7; border-style: solid; }
.s-洗翠 {background: #38B48B; border-color: #013224; border-style: solid; }
.s-帕底亞, .s-帕底亚 { background: #E39091; border-color: #D45455; border-style: solid; }
.s-地平线, .s-地平線 { background: #58A0D8; border-color: #E37277; border-style: solid; }
// 字体
body, div#content h1, div#content h2, div#content #firstHeading {
  font-family: -apple-system, "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei", 微軟正黑體, "Microsoft JhengHei", AppleGothic, "WenQuanYi Micro Hei", STHeiti, Meiryo, Arial, sans-serif;
}

// 主页不显示标题
body.page-主页 {
  h1.firstHeading, #contentSub, #catlinks { @extend .hide; }
}

// 隐藏目录层级
.toclimit-1 .toclevel-1 ul, .toclimit-2 .toclevel-2 ul, .toclimit-3 .toclevel-3 ul, .toclimit-4 .toclevel-4 ul { @extend .hide; }

// 顶部滚动公告,代码来自萌娘百科 http://zh.moegirl.org.cn/MediaWiki:Common.css
#scrollDiv {
  width: 100%;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
#scrollDiv ul {
  margin-left: 0 !important;
  margin-top: 0;
}
#scrollDiv li {
  height: 25px;
  padding-left: 0px;
  list-style: none;
}

// 代码样式
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
code {
  border: 1px solid #ddd;
  padding: 1px 4px;
  border-radius: 2px;
  background-color: #f9f9f9;
}

// 表格hover选择器
table.hover tr:hover { 
  background: #f5f5dc; 
  color: #000; 
}

// 展开按钮
.collapseButton {
  @extend .a-r;
  @extend .at-r;
  font-weight: normal;
  width: auto;
  font-size: 85%;
  margin-left: 8px;
}

// 旧式表格样式,不建议使用
.bluetable .bg1, .blueinfobox .bg1, .lightbluebg { background: #f8f8ff; }
.graytable .bg1, .grayinfobox .bg1, .lightgraybg { background: #f8f8f8; }
.blueborder { border: 1px solid #88a; }
.grayborder { border: 1px solid #999; }
.bluetable .bg2, .blueinfobox .bg2 { background: #eef; }
.bluetable .bg3, .blueinfobox .bg3 { background: #ddf; }
.bluetable .bg4, .blueinfobox .bg4 { background: #ccf; }
.graytable .bg2, .grayinfobox .bg2 { background: #f0f0f0; }
.graytable .bg3, .grayinfobox .bg3 { background: #e1e1e1; }
.graytable .bg4, .grayinfobox .bg4 { background: #d2d2d2; }
.bluetable, .graytable, .blueinfobox, .grayinfobox {
  border-collapse: collapse;
}
.blueinfobox { background: #f8f8ff; }
.grayinfobox { background: #f8f8f8; }
.bluetable, .blueinfobox { border: 1px solid #88a; }
.graytable, .grayinfobox { border: 1px solid #999; }
.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .graytable td, .graytable th { border: 1px solid #999; }
.bluetable td, .bluetable th, .graytable td, .graytable th, 
.blueinfobox td, .blueinfobox th, .graytable td, .graytable th {
  padding: 2px;
}
.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .grayinfobox td, .grayinfobox th { border: 1px solid #999; }
.bluetable th { background: #ccf; }
.graytable th { background: #d2d2d2; }
.bluetable th:first-child, .graytable th:first-child, .blueinfobox th, .grayinfobox th {
  text-align: right;
}
.bluetable .divider, .blueinfobox .divider, .bluetable .header, .blueinfobox .header,
.graytable .divider, .grayinfobox .divider, .graytable .header, .grayinfobox .header {
  text-align: center !important;
}
.bluetable .header, .bluetable .divider, .blueinfobox .header { background: #ccf; }
.graytable .header, .graytable .divider, .grayinfobox .header { background: #d2d2d2; }
.blueinfobox .divider { background: #eef; }
.grayinfobox .divider { background: #f0f0f0; }

abbr[original-title], .explain[original-title] {
  border-bottom: 1px dotted;
  cursor: help;
}

.hvbwenlarge:hover {
  border-width: 4px;
}

.eplist {
  @extend .at-c;
  th {
    @extend .textblack2;
  }
  td {
    @extend .bgwhite;
  }
}

.hvlist {
  @extend .at-c;
  @extend .hover;
  tr {
    @extend .bgwhite;
  }
  th {
    @extend .textblack2;
  }
}

.rdlist {
  @extend .at-c;
}

.table-separate {
  &, & table {
    border-collapse: separate;
    border-spacing: 1px;
  }
}

bdi {
  display: inline-block;
}
ul.gallery.mw-gallery-slideshow {
  margin: 0;
}

// 表格样式
.s-关都, .s-關都, .s-橘子, .s-城都, .s-丰缘, .s-豐緣, .s-火叶, .s-火葉, .s-开拓区, .s-開拓區,.s-神奥, .s-神奧,
.s-心魂, .s-合众, .s-合眾, .s-卡洛斯, .s-Z, .s-阿羅拉, .s-阿罗拉, .s-伽勒爾, .s-伽勒尔, .s-旅途, .s-SS, .s-洗翠, .s-帕底亞, .s-帕底亚 {
  @extend .table-separate;
}

@each $i in $colorList {
  table.bg-#{nth($i, 1)}, table.bgl-#{nth($i, 1)}, table.bgd-#{nth($i, 1)} {
    @extend .table-separate;
  }
}

table.roundy {
  @extend .table-separate;
}

@each $radius in 10,8,15,20,24,25,30,32,48,50,60,80,96,100 {
  table.roundy-#{$radius} {
    @extend .table-separate;
  }
}

@each $i in $colorList {
  .b-#{nth($i, 1)}, .bl-#{nth($i, 1)}, .bd-#{nth($i, 1)} {
    border-width: 1px;
    border-style: solid;
  }
}

.s-关都, .s-關都, .s-橘子, .s-城都, .s-丰缘, .s-豐緣, .s-火叶, .s-火葉, .s-开拓区, .s-開拓區,.s-神奥, .s-神奧,
.s-心魂, .s-合众, .s-合眾, .s-卡洛斯, .s-Z, .s-阿羅拉, .s-阿罗拉, .s-伽勒爾, .s-伽勒尔, .s-旅途, .s-SS, .s-洗翠, .s-帕底亞, .s-帕底亚 {
  border-width: 1px;
}

@include roundy(4px, "");

@each $radius in 10,8,15,20,24,25,30 {
  @include roundy(4px, "-"+$radius);
}

@each $radius in 4,5,6 {
  @include roundy(2px, "-"+$radius);
}

@each $radius in 32,48,50,60,80,96,100 {
  @include roundy(#{$radius}px, "-"+$radius);
}

.rdlist {
  tr:first-child td:first-child {
    border-top-left-radius: 2px;
  }
  tr:first-child td:last-child {
    border-top-right-radius: 2px;
  }
}

.eplist, .rdlist, .hvlist {
  tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
  }
  tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
  }
}

body.skin-vector-2022 {
  #siteNotice {
    margin: 0;
    div > table {
      background-color: transparent !important;
      border-color: transparent;
      border-radius: 0;
    }
  }
  .mw-sidebar {
    background-image: url(//media.52poke.com/wiki/e/ee/SideBarBg.png);
    border-radius: 5px;
  }
}

@media screen and (min-width: 721px) {
  // Desktop 专用样式
  @include roundy(10px, "");

  @each $radius in 10,4,5,6,8,15,20,24,25,30 {
    @include roundy(#{$radius}px, "-"+$radius);
  }

  body:not(.skin-vector-2022) {
    // 表格样式
    .s-关都, .s-關都, .s-橘子, .s-城都, .s-丰缘, .s-豐緣, .s-火叶, .s-火葉, .s-开拓区, .s-開拓區,.s-神奥, .s-神奧,
    .s-心魂, .s-合众, .s-合眾, .s-卡洛斯, .s-Z, .s-阿羅拉, .s-阿罗拉, .s-伽勒爾, .s-伽勒尔, .s-旅途, .s-SS, .s-洗翠, .s-帕底亞, .s-帕底亚 {
      border-width: 3px;
    }
    
    @each $i in $colorList {
      .b-#{nth($i, 1)}, .bl-#{nth($i, 1)}, .bd-#{nth($i, 1)} {
        border-width: 3px;
      }
    }

    .rdlist {
      tr:first-child td:first-child {
        border-top-left-radius: 6px;
      }
      tr:first-child td:last-child {
        border-top-right-radius: 6px;
      }
    }
  
    .eplist, .rdlist, .hvlist {
      tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
      }
      tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
      }
    }

    // 表格边框
    .bw-1 { border-width: 1px; }
    .bw-2 { border-width: 2px; }
    .bw-3 { border-width: 3px; }
  }

  // 用户框
  .userbox, .babelbox {
    float: right;
    border: 1px solid #999;
    background: #F8F8F8;
    width: 25%;
    padding: 0.25em 0.5em;
    margin-left: 1em;
    margin-bottom: 0.5em;
  }
  .userboxitem, .babelboxitem {
    border-radius: 60px;
    width: 100%;
    margin: 0.25em 0;
    th {
      border-radius: 60px;
      width: 60px;
      height: 60px;
      font-size: 18px;
    }
    td {
      font-size: 11px;
      line-height: 1.25em;
      padding: 4px;
      text-align: left;
    }
  }

  // 圆角表格样式
  .eplist {
    margin: 0 auto;
  }

  .blueinfobox, .grayinfobox {
    float: right;
    clear: right;
    margin: 0 0 0.5em 0.5em;
  }
}

@media screen and (max-width: 720px) {
  #content .mw-parser-output > table:not(.container), #content .tabbertab > table:not(.container), #content .toggle-content > table:not(.container) {
    overflow-y: hidden;
    overflow-x: auto;
    width: 100% !important;
    box-sizing: border-box;
    display: block;

    > thead, > tbody, > tfoot {
      display: table;
      min-width: 100%;
    }

    > tbody {
      td > a:only-child, th > a:only-child {
        white-space: nowrap;
      }
    }
  }

  #content .mw-parser-output table.a-r {
    float: none;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #content #bodyContent .row table:not(.hide), table table:not(.hide) {
    display: table;
    margin-top: 0;
    margin-bottom: 0;
  }
  #content #bodyContent table.hide {
    display: none;
  }

  hr {
    height: 1px;
    color: #a2a9b1;
    background-color: #a2a9b1;
    border: 0;
    margin: 0.2em 0;
  }

  table.hover tr:hover { 
    background: #f5f5dc; 
    color: #000; 
  }

  #content table small {
    font-size: smaller;
  }

  .thumb .thumbinner {
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: fill-available;
    max-width: -webkit-fill-available;
    min-width: auto;
    overflow: auto;
  }

  div.tright, div.floatright, table.floatright, div.tleft, div.floatleft, table.floatleft {
    margin: 0.6em 0;
    float: unset;
  }
  div.tright > a, div.floatright > a, table.floatright > a, div.tleft > a, div.floatleft > a, table.floatleft > a {
    display: block;
    text-align: center;
  }

  .md-hide {
    display: none;
  }
  .md-show {
    display: unset;
  }
  .md-block {
    display: block;
  }
  .md-inline {
    display: inline;
  }
  .md-inline-block {
    display: inline-block;
  }
  .md-flex {
    display: flex;
  }
  .md-inline-flex {
    display: inline-flex;
  }
  .md-grid {
    display: grid;
  }
  .md-inline-grid {
    display: inline-grid;
  }
  .md-table {
    display: table;
  }
  .md-inline-table {
    display: inline-table;
  }
  .md-table-row {
    display: table-row;
  }
  .md-table-cell {
    display: table-cell;
  }
  .md-list-item {
    display: list-item;
  }

  .wikitable > caption {
    font-weight: bold;
    display: inline-block;
  }

  body.skin-vector-2022 {
    #p-vector-user-menu-overflow, #firstHeading .editsection, .vector-menu-heading-label {
      display: none;
    }

    .mw-body-header .mw-portlet-lang .vector-menu-content {
      left: auto;
    }
  
    .mw-logo {
      min-width: 131px;
    }
    
    .vector-sidebar-container {
        position: absolute;
        z-index: 100;
        width: 80vw;
    }
    
    .vector-menu-portal .vector-menu-content ul {
        list-style: none;
        margin: 0;
        padding-top: 0.3em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .vector-menu-portal .vector-menu-content li {
        margin-right: 10px;
        margin-top: 8px;
    }
  }

  body.skin-vector:not(.skin-vector-2022) {
    #mw-head-base {
        margin-top: -5em;
        margin-left: 10em;
        height: 7em;
    }

    .mw-body, #mw-data-after-content {
        margin-left: 0;
    }

    #left-navigation {
        float: left;
        margin-left: 0;
        margin-top: 4.5em;
        margin-bottom: -2.5em;
    }

    #right-navigation {
        float: right;
        margin-top: 4.5em;
    }

    .vector-menu-dropdown .vector-menu-content {
        right: -1px;
        left: unset;
    }

    .vector-menu-tabs-legacy {
        float: unset;
    }

    .vector-search-box {
        float: unset;
        margin-right: 0;
        margin-left: 0;
        position: absolute;
        top: 2em;
        left: 1em;
        width: 13em;
    }

    .vector-search-box-inner {
        min-width: 5em;
        width: 13em;
        max-width: 20em;
    }

    #p-personal ul {
        padding-left: 0;
    }
    
    .mw-footer {
        margin-left: 0;
        margin-top: 0;
        padding: 0.75em;
    }
    
    #p-logo {
        width: 10em;
        height: 160px;
        margin-bottom: 0;
    }
    
    #mw-panel {
        position: unset;
        width: 100%;
    }
    
    #mw-panel ul {
        list-style: none;
        margin: 0;
        padding-top: 0.3em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    #mw-panel li {
        margin-right: 10px;
        margin-top: 8px;
    }
    
    .toc {
        width: unset;
    }
  }
}

// 对齐
#content {
  .valign-middle, .valign-center, .va-m, .va-c { vertical-align:middle; }
  .valign-top, .va-t { vertical-align:top; }
  .valign-bottom, .va-b { vertical-align:bottom; }
  .align-middle, .align-center, .a-m, .a-c { margin: 0 auto; }
  .align-left, .a-l { float:left; }
  .align-right, .a-r { float:right; }
  .fulltable { width: 100%; box-sizing: border-box; }
}

// 特殊样式框
.type-box-6 {
  display: inline-block;
  font-size: 11px;
  min-width: 50px;
  text-align: center;
  box-sizing: border-box;
  height: 18px;
  border-radius: 9px;
  border: 1px solid #656557;
  box-shadow: 0 0 1px 1px #fff inset;
  line-height: 16px;
  text-shadow: 0 0 2px #656565;
  &, & a {
    color: #fff !important;
    text-decoration: none !important;
  }
}

// 文字对齐
.alignt-middle, .alignt-center, .at-m, .at-c { text-align:center; }
.alignt-left, .at-l { text-align:left; }
.alignt-right, .at-r { text-align:right; }

// 缩略图圆角
div.thumbinner, li.gallerybox div.thumb {
  border-radius: 10px;
}


div.thumbinner img {
  border-radius: 6px;
}

// Typelink模板属性图标
.sprite-type, .sprite-category { display: inline-block; height: 20px; width: 20px; background: url(//media.52poke.com/wiki/8/87/MST_SV.webp) no-repeat; vertical-align: middle; background-size: 20px 420px; }
.sprite-type-一般 { background-position: 0 0; }
.sprite-type-格斗, .sprite-type-格鬥 { background-position: 0 -20px; }
.sprite-type-飞行, .sprite-type-飛行 { background-position: 0 -40px; }
.sprite-type-毒 { background-position: 0 -60px; }
.sprite-type-地面 { background-position: 0 -80px; }
.sprite-type-岩石 { background-position: 0 -100px; }
.sprite-type-虫, .sprite-type-蟲 { background-position: 0 -120px; }
.sprite-type-幽灵, .sprite-type-幽靈 { background-position: 0 -140px; }
.sprite-type-钢, .sprite-type-鋼 { background-position: 0 -160px; }
.sprite-type-火 { background-position: 0 -180px; }
.sprite-type-水 { background-position: 0 -200px; }
.sprite-type-草 { background-position: 0 -220px; }
.sprite-type-电, .sprite-type-電 { background-position: 0 -240px; }
.sprite-type-超能力 { background-position: 0 -260px; }
.sprite-type-冰 { background-position: 0 -280px; }
.sprite-type-龙, .sprite-type-龍 { background-position: 0 -300px; }
.sprite-type-恶, .sprite-type-惡 { background-position: 0 -320px; }
.sprite-type-妖精 { background-position: 0 -340px; }
.sprite-category-物理 { background-position: 0 -360px; }
.sprite-category-特殊 { background-position: 0 -380px; }
.sprite-category-变化, .sprite-category-變化 { background-position: 0 -400px; }