Use 101% transform

This commit is contained in:
the1812 2019-11-06 17:14:31 +08:00
parent 534206c0dc
commit 2f43cadf87
10 changed files with 103 additions and 121 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
min/about.min.css vendored
View File

@ -1 +1 @@
.bilibili-evolved-about{height:100%;width:450px;background:#fff;color:#000;position:fixed;top:0;left:0;z-index:100000;transform:translateX(-100%);transition:.3s cubic-bezier(0,.86,.58,1);display:flex;flex-direction:column;box-shadow:4px 0 16px 0 #0000}body.dark .bilibili-evolved-about{background:#222;color:#eee}.bilibili-evolved-about.opened{transform:translateX(0);box-shadow:4px 0 16px 0 #0005}.about-header{padding:32px;display:flex;align-items:center;justify-content:flex-start}.about-header i{margin-right:8px;display:flex}.about-title{font-size:16pt}.about-content{padding:16px 36px 0;margin-bottom:36px;display:flex;flex-direction:column;overflow:auto}.about-content .name{font-size:24pt;display:none;align-items:center}.about-content .name svg{width:100%}body.dark .about-content .name.dark,body:not(.dark) .about-content .name.light{display:flex}.about-content .version{font-size:10pt;font-weight:700;opacity:.6;margin-top:6px;margin-bottom:6px;align-self:center}.about-content .love{font-size:10pt;margin-bottom:24px;align-self:center}.about-content .love a{color:inherit!important}.about-content section{font-size:10pt;margin-top:16px}.about-content section .title{display:flex;justify-content:center;text-transform:uppercase;font-weight:700;font-size:13pt;letter-spacing:3px;margin:8px 0 16px}.about-content section .supporter,.about-content section a{color:var(--theme-color)!important;margin-right:8px;display:inline-flex}.about-content section .supporter{user-select:none}.about-content section .supporter:not(:last-child)::after,.about-content section a:not(:last-child)::after{content:","}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.about-content section.participants .fetching{margin-right:8px;position:relative;display:inline-flex}.about-content section.participants .fetching::before{content:"Loading..."} .bilibili-evolved-about{height:100%;width:450px;background:#fff;color:#000;position:fixed;top:0;left:0;z-index:100000;transform:translateX(-101%);transition:.3s cubic-bezier(0,.86,.58,1);display:flex;flex-direction:column;box-shadow:4px 0 16px 0 #0000}body.dark .bilibili-evolved-about{background:#222;color:#eee}.bilibili-evolved-about.opened{transform:translateX(0);box-shadow:4px 0 16px 0 #0005}.about-header{padding:32px;display:flex;align-items:center;justify-content:flex-start}.about-header i{margin-right:8px;display:flex}.about-title{font-size:16pt}.about-content{padding:16px 36px 0;margin-bottom:36px;display:flex;flex-direction:column;overflow:auto}.about-content .name{font-size:24pt;display:none;align-items:center}.about-content .name svg{width:100%}body.dark .about-content .name.dark,body:not(.dark) .about-content .name.light{display:flex}.about-content .version{font-size:10pt;font-weight:700;opacity:.6;margin-top:6px;margin-bottom:6px;align-self:center}.about-content .love{font-size:10pt;margin-bottom:24px;align-self:center}.about-content .love a{color:inherit!important}.about-content section{font-size:10pt;margin-top:16px}.about-content section .title{display:flex;justify-content:center;text-transform:uppercase;font-weight:700;font-size:13pt;letter-spacing:3px;margin:8px 0 16px}.about-content section .supporter,.about-content section a{color:var(--theme-color)!important;margin-right:8px;display:inline-flex}.about-content section .supporter{user-select:none}.about-content section .supporter:not(:last-child)::after,.about-content section a:not(:last-child)::after{content:","}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.about-content section.participants .fetching{margin-right:8px;position:relative;display:inline-flex}.about-content section.participants .fetching::before{content:"Loading..."}

View File

@ -1,5 +1,5 @@
{ {
"about.min.css": "839FB8FA5429AFB22AAE52B0B1114EB5474333D12082554BAD790E75936CF48C", "about.min.css": "A43C276DD6D36012DF6604E5247642922F1B550DEBE8C63C9E2EF2DD29C0A947",
"about.min.html": "E44CC2091973A839E5A533B397EF8C78DD573DAB9AF0C4D19E63748DCB9450DB", "about.min.html": "E44CC2091973A839E5A533B397EF8C78DD573DAB9AF0C4D19E63748DCB9450DB",
"about.min.js": "D370F647A4845E0704666BE88104E89738231A63AA1FCAB272898072E4665DE4", "about.min.js": "D370F647A4845E0704666BE88104E89738231A63AA1FCAB272898072E4665DE4",
"activity-apis.min.js": "459D26DB0BB447FEFE6F1842541A119E67C63573A800E56AD7FEC71D20087CEF", "activity-apis.min.js": "459D26DB0BB447FEFE6F1842541A119E67C63573A800E56AD7FEC71D20087CEF",
@ -68,7 +68,7 @@
"full-page-title.min.js": "D761A0C4A8B0A25CC0A23A10C495C2A5E6028BC19C6460C8ABB8D4B0B855E748", "full-page-title.min.js": "D761A0C4A8B0A25CC0A23A10C495C2A5E6028BC19C6460C8ABB8D4B0B855E748",
"full-tweets-title.min.css": "13A0CF1C96F374CED3FA59A532E28B4B620D7A4C374385A363F32AD1A7656764", "full-tweets-title.min.css": "13A0CF1C96F374CED3FA59A532E28B4B620D7A4C374385A363F32AD1A7656764",
"full-tweets-title.min.js": "DD57BB732ABEF7739CA84AEFF97E86F8984FCC4A8A75B957213622350B2A7C37", "full-tweets-title.min.js": "DD57BB732ABEF7739CA84AEFF97E86F8984FCC4A8A75B957213622350B2A7C37",
"gui-settings.min.css": "C2807BC955820558881C18CF5200E9E5B50D787392373000B21A560EB3B3967F", "gui-settings.min.css": "DEC04253DEC3FB1771713BC5DADD1A663ACCA0C7EE1CEBD52BB6FC85D318DBBF",
"gui-settings.min.html": "28E00DD5EA1A99D6EDF15585D3CF357E3968A0F57E7BC8785947EE420B7DB9EE", "gui-settings.min.html": "28E00DD5EA1A99D6EDF15585D3CF357E3968A0F57E7BC8785947EE420B7DB9EE",
"gui-settings.min.js": "6868F7F72B3993D899A24B51A773DE1DBEB657638322C2FE28E4FAF1841A2A48", "gui-settings.min.js": "6868F7F72B3993D899A24B51A773DE1DBEB657638322C2FE28E4FAF1841A2A48",
"haruna-scale.min.js": "D046864416831B101582DD87E602AE21309FDE2DB64A8F24D57B6ADBE67E6D7B", "haruna-scale.min.js": "D046864416831B101582DD87E602AE21309FDE2DB64A8F24D57B6ADBE67E6D7B",

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -1,131 +1,113 @@
.bilibili-evolved-about .bilibili-evolved-about {
{ height: 100%;
height: 100%; width: 450px;
width: 450px; background: white;
background: white; color: #000;
color: #000; position: fixed;
position: fixed; top: 0;
top: 0; left: 0;
left: 0; z-index: 100000;
z-index: 100000; transform: translateX(-101%);
transform: translateX(-100%); transition: all 0.3s cubic-bezier(0, 0.86, 0.58, 1);
transition: all .3s cubic-bezier(0, 0.86, 0.58, 1); display: flex;
display: flex; flex-direction: column;
flex-direction: column; box-shadow: 4px 0px 16px 0px #0000;
box-shadow: 4px 0px 16px 0px #0000;
} }
body.dark .bilibili-evolved-about body.dark .bilibili-evolved-about {
{ background: #222;
background: #222; color: #eee;
color: #eee;
} }
.bilibili-evolved-about.opened .bilibili-evolved-about.opened {
{ transform: translateX(0);
transform: translateX(0); box-shadow: 4px 0px 16px 0px #0005;
box-shadow: 4px 0px 16px 0px #0005;
} }
.about-header .about-header {
{ padding: 32px;
padding: 32px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: flex-start;
justify-content: flex-start;
} }
.about-header i .about-header i {
{ margin-right: 8px;
margin-right: 8px; display: flex;
display: flex;
} }
.about-title .about-title {
{ font-size: 16pt;
font-size: 16pt;
} }
.about-content .about-content {
{ padding: 16px 36px 0 36px;
padding: 16px 36px 0 36px; margin-bottom: 36px;
margin-bottom: 36px; display: flex;
display: flex; flex-direction: column;
flex-direction: column; overflow: auto;
overflow: auto;
} }
.about-content .name .about-content .name {
{ font-size: 24pt;
font-size: 24pt; display: none;
display: none; align-items: center;
align-items: center;
} }
.about-content .name svg .about-content .name svg {
{ width: 100%;
width: 100%;
} }
body.dark .about-content .name.dark, body.dark .about-content .name.dark,
body:not(.dark) .about-content .name.light body:not(.dark) .about-content .name.light {
{ display: flex;
display: flex;
} }
.about-content .version .about-content .version {
{ font-size: 10pt;
font-size: 10pt; font-weight: bold;
font-weight: bold; opacity: 0.6;
opacity: 0.6; margin-top: 6px;
margin-top: 6px; margin-bottom: 6px;
margin-bottom: 6px; align-self: center;
align-self: center;
} }
.about-content .love .about-content .love {
{ font-size: 10pt;
font-size: 10pt; margin-bottom: 24px;
margin-bottom: 24px; align-self: center;
align-self: center;
} }
.about-content .love a .about-content .love a {
{ color: inherit !important;
color: inherit !important;
} }
.about-content section .about-content section {
{ font-size: 10pt;
font-size: 10pt; margin-top: 16px;
margin-top: 16px;
} }
.about-content section .title { .about-content section .title {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 13pt; font-size: 13pt;
letter-spacing: 3px; letter-spacing: 3px;
margin: 8px 0 16px 0; margin: 8px 0 16px 0;
} }
.about-content section a, .about-content section a,
.about-content section .supporter .about-content section .supporter {
{ color: var(--theme-color) !important;
color: var(--theme-color) !important; margin-right: 8px;
margin-right: 8px; display: inline-flex;
display: inline-flex;
} }
.about-content section .supporter .about-content section .supporter {
{ user-select: none;
user-select: none;
} }
.about-content section .supporter:not(:last-child)::after, .about-content section .supporter:not(:last-child)::after,
.about-content section a:not(:last-child)::after .about-content section a:not(:last-child)::after {
{ content: ",";
content: ",";
} }
@keyframes spinner @keyframes spinner {
{ to {
to {transform: translate(-50%, -50%) rotate(360deg);} transform: translate(-50%, -50%) rotate(360deg);
}
} }
.about-content section.participants .fetching .about-content section.participants .fetching {
{ margin-right: 8px;
margin-right: 8px; position: relative;
position: relative; display: inline-flex;
display: inline-flex;
} }
.about-content section.participants .fetching::before .about-content section.participants .fetching::before {
{ content: "Loading...";
content: "Loading..."; /* box-sizing: border-box;
/* box-sizing: border-box;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;

View File

@ -471,7 +471,7 @@ li.category.folded i.icon-arrow {
top: 0; top: 0;
left: 0; left: 0;
z-index: 100000; z-index: 100000;
transform: translateX(-100%); transform: translateX(-101%);
transition: all 0.3s cubic-bezier(0, 0.86, 0.58, 1); transition: all 0.3s cubic-bezier(0, 0.86, 0.58, 1);
display: none; display: none;
flex-direction: column; flex-direction: column;