Файловый менеджер - Редактировать - /www/wwwroot/gamenworld.store/themes/gameking/css/MyComponent.css
�азад
/*global css*/ body { background-color: #c5c5c5; width: 100vw; max-width: 7.5rem; margin: 0 auto; font-family: "Noto Sans SC"; } .container { width: 100%; overflow: hidden; margin: 0 auto; } /*header css*/ .header{ width: 100%; min-height: 10px; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; /* 垂直居中 */ box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .header a img{ width: 100%; aspect-ratio: 4 / 1; } .header0{ width: 100%; min-height: 10px; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; /* 垂直居中 */ background-color: rgba(0, 0, 0, 0); } .header0 a img{ width: 100%; aspect-ratio: 4 / 1; } .header0 form{ margin-top:0px; display: flex; flex-direction: row; margin-bottom: 10px; height: 30px; width:100%; align-items: center; justify-content: center; } .header0 form a{ height: 100%; display: flex; margin: 0 5px; } .header0 form a img{ height: 100%; aspect-ratio: 1 / 1; } .header0 form input{ height: 100%; width: 70%; } .header0 form button{ height: 100%; } .header1{ } .header1 form{ margin-top:0px; display: flex; flex-direction: row; margin-bottom: 10px; height: 30px; width:100%; align-items: center; justify-content: center; } .header1 form a{ height: 100%; display: flex; margin: 0 5px; } .header1 form a img{ height: 100%; aspect-ratio: 1 / 1; } .header1 form input{ height: 100%; width: 70%; } .header1 form button{ height: 100%; } .header2{ border-radius:0 0 0.2rem 0.2rem; } .header2 form{ margin-top:0px; display: flex; flex-direction: row; margin-bottom: 10px; height: 30px; width:100%; align-items: center; justify-content: center; } .header2 form a{ height: 100%; display: flex; margin: 0 5px; } .header2 form a img{ height: 100%; aspect-ratio: 1 / 1; } .header2 form input{ height: 100%; width: 70%; } .header2 form button{ height: 100%; } /*card box css*/ .cardBox{ width:90%; padding: 2%; box-sizing: border-box; font-size: 40px; margin: 15px auto; } .cardBox0{ width:100%; background-color: rgba(0, 0, 0, 0); padding: 2%; box-sizing: border-box; font-size: 40px; margin: 15px auto; } .cardBox1{ border-radius: 0.3rem; } .cardBox2{ width: 85%; border-radius: 5px; border: 1px solid rgba(0, 0, 255, .2); transition: all .2s; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); margin-bottom: 10%; } .cardBox3{ border-radius: 40px; background: lightgrey; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset; } .cardBox4{ border-radius: 40px 0 40px 0; } /*card title css*/ .cardTitle1{ display: flex; align-items: center; /* 垂直居中 */ font-size: 20px; margin: 3% auto; justify-content: space-between; width: 95%; } .cardTitle1 img{ width: auto; height: 15px; } .cardTitle1 span{ margin: 0 5px; } .cardTitle1 a{ text-decoration: none; } .cardTitle2{ display: flex; align-items: center; /* 垂直居中 */ font-size: 20px; margin: 3% auto; justify-content: space-between; width: 95%; border: 2px solid black; height: 40px; padding: 2%; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .cardTitle2 .title-text{ margin-left: 2%; } .cardTitle2 img{ width: auto; height: 15px; } .cardTitle2 span{ margin: 0 5px; } .cardTitle2 a{ text-decoration: none; } .cardTitle3{ display: flex; align-items: center; /* 垂直居中 */ font-size: 20px; margin: 3% auto; justify-content: space-between; width: 95%; border: 2px solid black; height: 40px; padding: 2%; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border-radius:0.2rem; } .cardTitle3 .title-text{ margin-left: 2%; } .cardTitle3 img{ width: auto; height: 15px; } .cardTitle3 span{ margin: 0 5px; } .cardTitle3 a{ text-decoration: none; } .cardTitle4{ display: flex; align-items: center; /* 垂直居中 */ font-size: 20px; margin: 3% auto; justify-content: space-between; width: 95%; border: 2px solid black; height: 40px; padding: 2%; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border-radius:1rem; } .cardTitle4 .title-text{ margin-left: 2%; } .cardTitle4 img{ width: auto; height: 15px; } .cardTitle4 span{ margin: 0 5px; } .cardTitle4 a{ text-decoration: none; } .cardTitle5{ display: flex; align-items: center; /* 垂直居中 */ font-size: 20px; margin: 3% auto; justify-content: space-between; width: 95%; height: 40px; padding: 2%; } .cardTitle5 span{ margin-left: 10px; } /*card css*/ .card{ } .card1{ margin-top: 1%; margin-bottom:1%; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card1 img{ width: 95%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .card1 span{ color: #020202; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 90%; margin: 1% 1%; font-size: 15px; } .card2{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card2 img{ width: 80%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; } .card2 span{ color: #020202; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 80%; margin: 10% 10%; } .card3{ font-size: 13px; position: relative; margin-bottom: 2%; } .card3 .inCard{ display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; width: 85%; position: relative; margin: 0 auto; } .card3 img { width: 100%; aspect-ratio: 1 / 1; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .card3 span { position:absolute; bottom:0; left:0; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 100%; height:20%; background-color: rgba(19, 19, 19, 0.6); border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; text-align: center; } .card4{ font-size: 25px; margin: 5px 0; } .card4 .inCard{ width: 95%; margin: 0 auto; display: flex; flex-direction: row; align-items: center; height: 80px; background-color: #9c9c9c; border-radius: 0.2rem; } .card4 .inCard img{ height: 100%; aspect-ratio: 1 / 1; border-radius: 0.2rem; } .card4 .game-info{ margin-left: 20px; height: 100%; width: 80%; position: relative; } .card4 .game-info>span{ font-size: 80%; width: 90%; height: 50%; white-space: nowrap; /* 保持文本在一行显示 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ overflow: hidden; position: absolute; top:15% } .card4 .stars{ width: 100%; align-items: center; height: 50%; position: absolute; top:55% } .card4 .stars>span{ height: 100%; font-size: 70%; position: absolute; top:1%; } .card4 .stars .imgBox{ display: flex; align-items: center; margin-left: 10px; height: 100%; position: absolute; top:-18%; left: 8%; } .card4 .stars img{ height: 20px; } .card5{ font-size: 13px; margin-bottom: 3px; } .card5 .inCard{ width: 95%; height: 90%; display: flex; flex-direction: row; align-items: center; border-radius: 0.3rem; } .card5 img{ width: 30%; aspect-ratio: 1 / 1; border-radius: 0.2rem; margin: 5%; } .card5 span{ white-space: nowrap; /* 保持文本在一行显示 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ overflow: hidden; } .card6{ font-size: 13px; margin-bottom: 8px; } .card6 .inCard{ width: 90%; height: 90%; display: flex; flex-direction: row; align-items: center; border-radius: 0.3rem; border: 3px solid black; } .card6 img{ width: 30%; aspect-ratio: 1 / 1; border-radius: 0.2rem; margin: 5%; } .card6 span{ white-space: nowrap; /* 保持文本在一行显示 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ overflow: hidden; } .card7{ margin-top: 1%; margin-bottom:1%; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card7 img{ width: 80%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border: 3px solid black; } .card7 span{ color: #020202; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 90%; margin: 1% 1%; font-size: 15px; } .card8{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card8 img{ width: 90%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; border: 3px solid black; } .card8 span{ color: #020202; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 80%; margin: 10% 10%; } .card9{ font-size: 13px; position: relative; margin-bottom: 2%; } .card9 .inCard{ display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; width: 80%; position: relative; margin: 0 auto; } .card9 img { width: 100%; aspect-ratio: 1 / 1; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border: 2px solid black; } .card9 span { position:absolute; bottom:0; left:0; white-space: nowrap; /* 保持文本在一行显示 */ overflow: hidden; /* 隐藏溢出的文本 */ text-overflow: ellipsis; /* 使用省略号表示隐藏的文本 */ width: 100%; height:20%; background-color: rgba(19, 19, 19, 0.6); border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; text-align: center; } .card10{ margin-top: 1%; margin-bottom:1%; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card10 img{ width: 95%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .card11{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card11 img{ width: 90%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .card12{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card12 img{ width: 90%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border: 3px solid black; } .card13{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card13 img{ width: 90%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); border: 4px solid white; } .card14{ margin-top: 2%; margin-bottom:2%; font-size: 13px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } .card14 img{ width: 90%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius:0.2rem; box-shadow: 4px 8px 8px -3px rgba(0,0,0,0.27); } .card14 img:hover { transform: translateY(-20%); } /*footer css*/ .footer{ display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 20px; height: 150px; } .footer .footer-nav{ width: 100%; font-size: 60%; height: 50%; display: flex; flex-direction: row; } .footer .footer-nav .footer-nav-a{ width: 33%; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-nav-a a{ text-decoration: none; } .footer .footer-text{ width: 100%; font-size: 70%; height: 50%; position: relative; } .footer .footer-text p{ width: 100%; text-align: center; } .footer .footer-text .p1{ position: absolute; top: -35%; } .footer .footer-text .p2{ position: absolute; top: 0; } .footer .footer-text .p3{ position: absolute; top: 35%; } /*card group css*/ .cardGroup { display: flex; /* 启用Flexbox布局 */ flex-direction: row; /* 子元素水平排列 */ flex-wrap: wrap; /* 允许子元素换行 */ width: 100%; } /*Customized*/ .testBox{ width: 100%; aspect-ratio: 4 / 1; min-height: 10px; background-color: red; display: flex; align-items: center; /* 垂直居中 */ border-radius:0 0 0.2rem 0.2rem; } .testBox img{ width: 100%; } .anchor-ad { position: fixed; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #f8f9fa; /* 更加接近 Google 常见广告的颜色 */ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); text-align: center; line-height: 100px; font-size: 16px; color: #333; z-index: 1000; transition: transform 0.5s ease; transform: translateY(0); } .anchor-ad.ad-hidden { transform: translateY(100%); } .drawer-handle { position: absolute; top: -15px; left: 10px; width: 40px; height: 15px; background-color: #4285f4; /* Google 蓝色 */ color: #fff; text-align: center; line-height: 15px; font-size: 12px; cursor: pointer; border-radius: 10px 10px 0 0; } .top-anchor-ad { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #f8f9fa; /* 更加接近 Google 常见广告的颜色 */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); text-align: center; line-height: 100px; font-size: 16px; color: #333; z-index: 1000; transition: transform 0.5s ease; transform: translateY(0); } .top-anchor-ad.ad-hidden { transform: translateY(-100%); } .top-drawer-handle { position: absolute; bottom: -15px; left: 10px; width: 40px; height: 15px; background-color: #4285f4; /* Google 蓝色 */ color: #fff; text-align: center; line-height: 15px; font-size: 12px; cursor: pointer; border-radius: 0 0 10px 10px; }
| ver. 1.4 |
Github
|
.
| PHP 8.0.26 | Генераци� �траницы: 0 |
proxy
|
phpinfo
|
�а�тройка