Difference between revisions of "Template:Umamusume clothing/style.css"
m |
m |
||
(3 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
.umamusume-cloth .tabLabelRight.reverse .TabLabelText { | .umamusume-cloth .tabLabelRight.reverse .TabLabelText { | ||
/* background-image: url("https://img.moegirl.org.cn/common/e/eb/%E8%B5%9B%E9%A9%AC%E5%A8%98-%E7%AB%8B%E7%BB%98%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE.png"); */ | /* background-image: url("https://img.moegirl.org.cn/common/e/eb/%E8%B5%9B%E9%A9%AC%E5%A8%98-%E7%AB%8B%E7%BB%98%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE.png"); */ | ||
− | |||
− | |||
background-size: 100%; | background-size: 100%; | ||
width: 60px; | width: 60px; | ||
Line 37: | Line 35: | ||
} | } | ||
+ | /* 因不支持background-image而注释 | ||
.umamusume-cloth .tabLabelRight.reverse .TabLabelText.selected:before { | .umamusume-cloth .tabLabelRight.reverse .TabLabelText.selected:before { | ||
content: ""; | content: ""; | ||
Line 45: | Line 44: | ||
width: 78px; | width: 78px; | ||
height: 78px; | height: 78px; | ||
− | + | background-image: url("https://img.moegirl.org.cn/common/2/26/%E8%B5%9B%E9%A9%AC%E5%A8%98-%E7%AB%8B%E7%BB%98%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE-%E9%80%89%E4%B8%AD.png"); | |
background-size: 78px; | background-size: 78px; | ||
background-position: 50%; | background-position: 50%; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | .umamusume-cloth .tabLabelRight.reverse .TabContentText.selected { | ||
+ | border-right: 3px solid #69C10C; | ||
} | } | ||
Latest revision as of 04:35, 26 December 2021
.umamusume-cloth { height: 450px; overflow: hidden; } .umamusume-cloth .Tabs.tabLabelRight { color: black; } .umamusume-cloth .tabLabelRight.reverse .TabLabelText { /* background-image: url("https://img.moegirl.org.cn/common/e/eb/%E8%B5%9B%E9%A9%AC%E5%A8%98-%E7%AB%8B%E7%BB%98%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE.png"); */ background-size: 100%; width: 60px; height: 60px; border: none; position: relative; margin: 5px; transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.275); writing-mode: horizontal-tb; display: inline-flex; align-items: center; justify-content: center; } .umamusume-cloth .tabLabelRight.reverse .TabLabelText:hover { transition: transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1); transform: scale(.9); } .umamusume-cloth .tabLabelRight.reverse .TabLabelText.selected { border: none; transform: none; color: #E485C9; font-weight: bold; } /* 因不支持background-image而注释 .umamusume-cloth .tabLabelRight.reverse .TabLabelText.selected:before { content: ""; display: block; position: absolute; top: -9px; left: -11px; width: 78px; height: 78px; background-image: url("https://img.moegirl.org.cn/common/2/26/%E8%B5%9B%E9%A9%AC%E5%A8%98-%E7%AB%8B%E7%BB%98%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE-%E9%80%89%E4%B8%AD.png"); background-size: 78px; background-position: 50%; } */ .umamusume-cloth .tabLabelRight.reverse .TabContentText.selected { border-right: 3px solid #69C10C; } .umamusume-cloth .tabLabelRight.reverse .TabLabelText .umamusume-cloth-text { text-align: center; margin-top: -3px; margin-left: -5px; line-height: 1.1em; } .umamusume-cloth .Tabs.tabLabelRight .TabLabel { flex-direction: row-reverse; flex-wrap: wrap; writing-mode: vertical-lr; height: 450px; } .umamusume-cloth .Tabs.tabLabelRight .TabContent { height: 450px; width: 300px; overflow: hidden; background-color: transparent; } .umamusume-cloth .umamusume-cloth-text .umamusume-cloth-text-small { font-size: smaller; } .umamusume-cloth-table { border-radius: 0 0 10px 10px; border: thick solid #69C10C; border-top: none; } .umamusume-cloth-table > caption { color: white; background-color: #69C10C; border-radius: 10px 10px 0 0; padding: 0.2em 0.4em; text-align: center; } @media screen and (max-width: 1000px) { .umamusume-cloth-table { border: none; } .umamusume-cloth-table > caption { border-radius: 10px 10px 0 0; } .umamusume-cloth-table > tbody { border-radius: 0 0 10px 10px; border: thick solid #69C10C; border-top: none; width: 100%; } .umamusume-cloth-table > tbody > tr > td { width: 100vw; } .umamusume-cloth .umamusume-cloth-text .umamusume-cloth-text-small { font-size: 2.5vw; } } @media screen and (max-width: 600px) { .umamusume-cloth { height: auto; } .umamusume-cloth .Tabs.tabLabelRight .TabLabel { height: auto; width: 100%; writing-mode: initial; order: 0; } .umamusume-cloth .Tabs.tabLabelRight { width: 100%; flex-wrap: wrap; } .umamusume-cloth .Tabs.tabLabelRight .TabContent { height: auto; width: 100%; } .umamusume-cloth .Tabs.tabLabelRight .TabContent .TabContentText .umamusume-cloth-img { margin-top: 0 !important; } }