1.2.5原版
This commit is contained in:
anian
@@ -0,0 +1,39 @@
|
||||
<script th:inline="javascript" type="text/javascript">
|
||||
var Theme = {
|
||||
username: "[(${#authentication.name})]",
|
||||
ajaxurl: "/",
|
||||
site_title: [[${site.title}]],
|
||||
bgm_open: [[${theme.config.music.bgm_open}]],
|
||||
pjax: [[${theme.config.base_set.site_pjax}]],
|
||||
site_logo : [[${ not #strings.isEmpty(theme.config.base_top_set.site_logo) ? theme.config.base_top_set.site_logo : '/themes/theme-pix/assets/img/avatar.png' }]],
|
||||
admin_des: "[(${theme.config.base_set.admin_des})]",
|
||||
site_page: "[(${theme.config.base_set.site_page})]",
|
||||
theme_set: "[(${theme.config.style.theme_set})]",
|
||||
play: {
|
||||
play_id: [[${theme.config.music.play_id}]],
|
||||
mu_type: [[${theme.config.music.mu_type}]],
|
||||
mu_source: [[${theme.config.music.mu_source}]],
|
||||
pix_mu_api: "[(${theme.config.music.pix_mu_api})]",
|
||||
lrc_open: [[${theme.config.music.lrc_open}]],
|
||||
m_loop: [[${theme.config.music.m_loop}]]
|
||||
},
|
||||
widget_yiyan:{
|
||||
api: [[${theme.config.sidebar.pix_widget_yiyan.api}]]
|
||||
},
|
||||
moments:{
|
||||
push_api: [[${roleName == 'super-role' ? 'console.api.moment.halo.run' : 'uc.api.moment.halo.run'}]],
|
||||
api: [[${roleName == 'super-role' ? 'moment.halo.run' : 'uc.api.moment.halo.run'}]],
|
||||
attachments_api: [[${roleName == 'super-role' ? 'api.console.halo.run' : 'uc.api.storage.halo.run'}]],
|
||||
attachments_upload_api: [[${roleName == 'super-role' ? '/apis/api.console.halo.run/v1alpha1/attachments/upload' : '/apis/uc.api.storage.halo.run/v1alpha1/attachments/-/upload'}]],
|
||||
min_push_num: [[${theme.config.moments.min_push_num}]],
|
||||
policy_name: [[${theme.config.moments.attachmentPolicy}]],
|
||||
group_name: [[${theme.config.moments.attachmentGroup}]],
|
||||
gaode_key: "[(${theme.config.moments.gaode_key})]"
|
||||
},
|
||||
toc: {
|
||||
all_open: [[${theme.config.post.toc.all_open}]]
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<style th:inline="css" id="global-styles-inline-css" th:fragment="global-styles-inline">
|
||||
body {
|
||||
--wp--preset--color--black: #000000;
|
||||
--wp--preset--color--cyan-bluish-gray: #abb8c3;
|
||||
--wp--preset--color--white: #ffffff;
|
||||
--wp--preset--color--pale-pink: #f78da7;
|
||||
--wp--preset--color--vivid-red: #cf2e2e;
|
||||
--wp--preset--color--luminous-vivid-orange: #ff6900;
|
||||
--wp--preset--color--luminous-vivid-amber: #fcb900;
|
||||
--wp--preset--color--light-green-cyan: #7bdcb5;
|
||||
--wp--preset--color--vivid-green-cyan: #00d084;
|
||||
--wp--preset--color--pale-cyan-blue: #8ed1fc;
|
||||
--wp--preset--color--vivid-cyan-blue: #0693e3;
|
||||
--wp--preset--color--vivid-purple: #9b51e0;
|
||||
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
|
||||
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
|
||||
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
|
||||
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
|
||||
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
|
||||
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
|
||||
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
|
||||
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
|
||||
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
|
||||
--wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
|
||||
--wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
|
||||
--wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
|
||||
--wp--preset--font-size--small: 13px;
|
||||
--wp--preset--font-size--medium: 20px;
|
||||
--wp--preset--font-size--large: 36px;
|
||||
--wp--preset--font-size--x-large: 42px;
|
||||
--wp--preset--spacing--20: 0.44rem;
|
||||
--wp--preset--spacing--30: 0.67rem;
|
||||
--wp--preset--spacing--40: 1rem;
|
||||
--wp--preset--spacing--50: 1.5rem;
|
||||
--wp--preset--spacing--60: 2.25rem;
|
||||
--wp--preset--spacing--70: 3.38rem;
|
||||
--wp--preset--spacing--80: 5.06rem;
|
||||
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
|
||||
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
|
||||
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
|
||||
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
|
||||
--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
:where(.is-layout-flex) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
:where(.is-layout-grid) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
body .is-layout-flow>.alignleft {
|
||||
float: left;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 2em;
|
||||
}
|
||||
|
||||
body .is-layout-flow>.alignright {
|
||||
float: right;
|
||||
margin-inline-start: 2em;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
body .is-layout-flow>.aligncenter {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
body .is-layout-constrained>.alignleft {
|
||||
float: left;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 2em;
|
||||
}
|
||||
|
||||
body .is-layout-constrained>.alignright {
|
||||
float: right;
|
||||
margin-inline-start: 2em;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
body .is-layout-constrained>.aligncenter {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
body .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
|
||||
max-width: var(--wp--style--global--content-size);
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
body .is-layout-constrained>.alignwide {
|
||||
max-width: var(--wp--style--global--wide-size);
|
||||
}
|
||||
|
||||
body .is-layout-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body .is-layout-flex {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body .is-layout-flex>* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body .is-layout-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
body .is-layout-grid>* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:where(.wp-block-columns.is-layout-flex) {
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
:where(.wp-block-columns.is-layout-grid) {
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
:where(.wp-block-post-template.is-layout-flex) {
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
:where(.wp-block-post-template.is-layout-grid) {
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
.has-black-color {
|
||||
color: var(--wp--preset--color--black) !important;
|
||||
}
|
||||
|
||||
.has-cyan-bluish-gray-color {
|
||||
color: var(--wp--preset--color--cyan-bluish-gray) !important;
|
||||
}
|
||||
|
||||
.has-white-color {
|
||||
color: var(--wp--preset--color--white) !important;
|
||||
}
|
||||
|
||||
.has-pale-pink-color {
|
||||
color: var(--wp--preset--color--pale-pink) !important;
|
||||
}
|
||||
|
||||
.has-vivid-red-color {
|
||||
color: var(--wp--preset--color--vivid-red) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-orange-color {
|
||||
color: var(--wp--preset--color--luminous-vivid-orange) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-amber-color {
|
||||
color: var(--wp--preset--color--luminous-vivid-amber) !important;
|
||||
}
|
||||
|
||||
.has-light-green-cyan-color {
|
||||
color: var(--wp--preset--color--light-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-vivid-green-cyan-color {
|
||||
color: var(--wp--preset--color--vivid-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-pale-cyan-blue-color {
|
||||
color: var(--wp--preset--color--pale-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-cyan-blue-color {
|
||||
color: var(--wp--preset--color--vivid-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-purple-color {
|
||||
color: var(--wp--preset--color--vivid-purple) !important;
|
||||
}
|
||||
|
||||
.has-black-background-color {
|
||||
background-color: var(--wp--preset--color--black) !important;
|
||||
}
|
||||
|
||||
.has-cyan-bluish-gray-background-color {
|
||||
background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
|
||||
}
|
||||
|
||||
.has-white-background-color {
|
||||
background-color: var(--wp--preset--color--white) !important;
|
||||
}
|
||||
|
||||
.has-pale-pink-background-color {
|
||||
background-color: var(--wp--preset--color--pale-pink) !important;
|
||||
}
|
||||
|
||||
.has-vivid-red-background-color {
|
||||
background-color: var(--wp--preset--color--vivid-red) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-orange-background-color {
|
||||
background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-amber-background-color {
|
||||
background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
|
||||
}
|
||||
|
||||
.has-light-green-cyan-background-color {
|
||||
background-color: var(--wp--preset--color--light-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-vivid-green-cyan-background-color {
|
||||
background-color: var(--wp--preset--color--vivid-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-pale-cyan-blue-background-color {
|
||||
background-color: var(--wp--preset--color--pale-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-cyan-blue-background-color {
|
||||
background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-purple-background-color {
|
||||
background-color: var(--wp--preset--color--vivid-purple) !important;
|
||||
}
|
||||
|
||||
.has-black-border-color {
|
||||
border-color: var(--wp--preset--color--black) !important;
|
||||
}
|
||||
|
||||
.has-cyan-bluish-gray-border-color {
|
||||
border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
|
||||
}
|
||||
|
||||
.has-white-border-color {
|
||||
border-color: var(--wp--preset--color--white) !important;
|
||||
}
|
||||
|
||||
.has-pale-pink-border-color {
|
||||
border-color: var(--wp--preset--color--pale-pink) !important;
|
||||
}
|
||||
|
||||
.has-vivid-red-border-color {
|
||||
border-color: var(--wp--preset--color--vivid-red) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-orange-border-color {
|
||||
border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-amber-border-color {
|
||||
border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
|
||||
}
|
||||
|
||||
.has-light-green-cyan-border-color {
|
||||
border-color: var(--wp--preset--color--light-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-vivid-green-cyan-border-color {
|
||||
border-color: var(--wp--preset--color--vivid-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-pale-cyan-blue-border-color {
|
||||
border-color: var(--wp--preset--color--pale-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-cyan-blue-border-color {
|
||||
border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
|
||||
}
|
||||
|
||||
.has-vivid-purple-border-color {
|
||||
border-color: var(--wp--preset--color--vivid-purple) !important;
|
||||
}
|
||||
|
||||
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
|
||||
background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
|
||||
}
|
||||
|
||||
.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
|
||||
background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
|
||||
background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
|
||||
}
|
||||
|
||||
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
|
||||
background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
|
||||
}
|
||||
|
||||
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
|
||||
background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
|
||||
}
|
||||
|
||||
.has-cool-to-warm-spectrum-gradient-background {
|
||||
background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
|
||||
}
|
||||
|
||||
.has-blush-light-purple-gradient-background {
|
||||
background: var(--wp--preset--gradient--blush-light-purple) !important;
|
||||
}
|
||||
|
||||
.has-blush-bordeaux-gradient-background {
|
||||
background: var(--wp--preset--gradient--blush-bordeaux) !important;
|
||||
}
|
||||
|
||||
.has-luminous-dusk-gradient-background {
|
||||
background: var(--wp--preset--gradient--luminous-dusk) !important;
|
||||
}
|
||||
|
||||
.has-pale-ocean-gradient-background {
|
||||
background: var(--wp--preset--gradient--pale-ocean) !important;
|
||||
}
|
||||
|
||||
.has-electric-grass-gradient-background {
|
||||
background: var(--wp--preset--gradient--electric-grass) !important;
|
||||
}
|
||||
|
||||
.has-midnight-gradient-background {
|
||||
background: var(--wp--preset--gradient--midnight) !important;
|
||||
}
|
||||
|
||||
.has-small-font-size {
|
||||
font-size: var(--wp--preset--font-size--small) !important;
|
||||
}
|
||||
|
||||
.has-medium-font-size {
|
||||
font-size: var(--wp--preset--font-size--medium) !important;
|
||||
}
|
||||
|
||||
.has-large-font-size {
|
||||
font-size: var(--wp--preset--font-size--large) !important;
|
||||
}
|
||||
|
||||
.has-x-large-font-size {
|
||||
font-size: var(--wp--preset--font-size--x-large) !important;
|
||||
}
|
||||
|
||||
.wp-block-navigation a:where(:not(.wp-element-button)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:where(.wp-block-post-template.is-layout-flex) {
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
:where(.wp-block-post-template.is-layout-grid) {
|
||||
gap: 1.25em;
|
||||
}
|
||||
|
||||
:where(.wp-block-columns.is-layout-flex) {
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
:where(.wp-block-columns.is-layout-grid) {
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<style th:if="${theme.config.moments.img_style == 'one'}">
|
||||
|
||||
.img_list .list_inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.img_list span {
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
width: 25%;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
|
||||
.img_list span:nth-child(1):nth-last-child(4),
|
||||
.img_list span:nth-child(3):nth-last-child(2),
|
||||
.img_list span:nth-child(4):nth-last-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.img_list span:nth-child(2):nth-last-child(3) {
|
||||
margin-right: 30%;
|
||||
}
|
||||
|
||||
.img_list span img {
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.img_list .list_inner span:before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:540px) {
|
||||
.img_list span {
|
||||
width: 30%;
|
||||
margin: 2px;
|
||||
}
|
||||
.img_list span:nth-child(1):nth-last-child(4),
|
||||
.img_list span:nth-child(3):nth-last-child(2),
|
||||
.img_list span:nth-child(4):nth-last-child(1) {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style th:if="${theme.config.moments.img_style == 'two'}">
|
||||
.img_list span:nth-last-child(1):first-child {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.img_list .list_inner {
|
||||
display: grid;
|
||||
max-width: 25rem;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.img_list span {
|
||||
position: relative;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='1'] {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='1'] img {
|
||||
aspect-ratio: unset;
|
||||
max-height: 30rem;
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='2'],
|
||||
.img_list .list_inner[num='4'] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='3'],
|
||||
.img_list .list_inner[num='6'],
|
||||
.img_list .list_inner[num='8'] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='3'] span:nth-child(1) {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='3'] span:nth-child(2) {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='3'] span:nth-child(3) {
|
||||
grid-area: 2 / 3 / 3 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(1) {
|
||||
grid-area: 1 / 1 / 5 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(2) {
|
||||
grid-area: 1 / 5 / 3 / 7;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(3) {
|
||||
grid-area: 3 / 5 / 5 / 7;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(4) {
|
||||
grid-area: 5 / 1 / 7 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(5) {
|
||||
grid-area: 5 / 4 / 7 / 7;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
|
||||
height: 127.35px;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(1) {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(2) {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(3) {
|
||||
grid-area: 2 / 3 / 3 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(4) {
|
||||
grid-area: 3 / 1 / 4 / 2;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(5) {
|
||||
grid-area: 3 / 2 / 4 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='6'] span:nth-child(6) {
|
||||
grid-area: 3 / 3 / 4 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(1) {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(2) {
|
||||
grid-area: 1 / 3 / 3 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(3) {
|
||||
grid-area: 3 / 1 / 5 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(4) {
|
||||
grid-area: 3 / 3 / 4 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(5) {
|
||||
grid-area: 3 / 4 / 4 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(6) {
|
||||
grid-area: 4 / 3 / 5 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(7) {
|
||||
grid-area: 4 / 4 / 5 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='8'] span:nth-child(8) {
|
||||
grid-area: 3 / 2 / 4 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='8'] span:nth-child(8) img {
|
||||
aspect-ratio: 3;
|
||||
}
|
||||
|
||||
|
||||
.img_list span img {
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,380 @@
|
||||
<style>
|
||||
[class|=coco],
|
||||
[class|=coco]::after,
|
||||
[class|=coco]::before {
|
||||
box-sizing: border-box;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.coco-msg-progress {
|
||||
width: 13px;
|
||||
height: 13px
|
||||
}
|
||||
|
||||
.coco-msg__circle {
|
||||
stroke-width: 2;
|
||||
stroke-linecap: square;
|
||||
fill: none;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.coco-msg-stage:hover .coco-msg__circle {
|
||||
-webkit-animation-play-state: paused !important;
|
||||
animation-play-state: paused !important
|
||||
}
|
||||
|
||||
.coco-msg__background {
|
||||
stroke-width: 2;
|
||||
fill: none
|
||||
}
|
||||
|
||||
.coco-msg-stage {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
width: auto;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: 3000
|
||||
}
|
||||
|
||||
.coco-msg-wrapper {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
transition: height .3s ease, padding .3s ease;
|
||||
padding: 6px 0;
|
||||
will-change: transform, opacity
|
||||
}
|
||||
|
||||
.coco-msg {
|
||||
padding: 15px 21px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.coco-msg-content,
|
||||
.coco-msg-icon,
|
||||
.coco-msg-wait {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.coco-msg-icon {
|
||||
position: relative;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.coco-msg-icon svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 11px;
|
||||
height: 11px
|
||||
}
|
||||
|
||||
.coco-msg-wait {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
fill: #4eb127
|
||||
}
|
||||
|
||||
.coco-msg-wait svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.coco-msg-close {
|
||||
width: 14px;
|
||||
height: 14px
|
||||
}
|
||||
|
||||
.coco-msg-content {
|
||||
margin: 0 10px;
|
||||
min-width: 240px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: -apple-system, Microsoft Yahei, sans-serif;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, .01)
|
||||
}
|
||||
|
||||
.coco-msg.info {
|
||||
color: #0fafad;
|
||||
background-color: #e7fdfc;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c0faf9
|
||||
}
|
||||
|
||||
.coco-msg.info .coco-msg-icon {
|
||||
background-color: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg.success {
|
||||
color: #4ebb23;
|
||||
background-color: #f3ffe8;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #d9f8bb
|
||||
}
|
||||
|
||||
.coco-msg.success .coco-msg-icon {
|
||||
background-color: #4ebb23
|
||||
}
|
||||
|
||||
.coco-msg.warning {
|
||||
color: #f1b306;
|
||||
background-color: #fff9eb;
|
||||
box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #fcf2cd
|
||||
}
|
||||
|
||||
.coco-msg.warning .coco-msg-icon {
|
||||
background-color: #f1b306
|
||||
}
|
||||
|
||||
.coco-msg.error {
|
||||
color: #f34b51;
|
||||
background-color: #fff7f7;
|
||||
box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #ffe3e3
|
||||
}
|
||||
|
||||
.coco-msg.error .coco-msg-icon {
|
||||
background-color: #f34b51
|
||||
}
|
||||
|
||||
.coco-msg.loading {
|
||||
color: #0fafad;
|
||||
background-color: #e7fdfc;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
|
||||
}
|
||||
|
||||
.coco-msg_loading {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.coco-msg-circular {
|
||||
-webkit-animation: coco-msg-rotate 2s linear infinite both;
|
||||
animation: coco-msg-rotate 2s linear infinite both;
|
||||
transform-origin: center center;
|
||||
height: 18px !important;
|
||||
width: 18px !important
|
||||
}
|
||||
|
||||
.coco-msg-path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: #0fafad;
|
||||
-webkit-animation: coco-msg-dash 1.5s ease-in-out infinite;
|
||||
animation: coco-msg-dash 1.5s ease-in-out infinite;
|
||||
stroke-linecap: round
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-rotate {
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-rotate {
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px
|
||||
}
|
||||
}
|
||||
|
||||
.coco-msg.info .coco-msg-wait {
|
||||
fill: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg.success .coco-msg-wait {
|
||||
fill: #4ebb23
|
||||
}
|
||||
|
||||
.coco-msg.warning .coco-msg-wait {
|
||||
fill: #f1b306
|
||||
}
|
||||
|
||||
.coco-msg.error .coco-msg-wait {
|
||||
fill: #f34b51
|
||||
}
|
||||
|
||||
.coco-msg.loading .coco-msg-wait {
|
||||
fill: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_info {
|
||||
0% {
|
||||
stroke: #0fafad
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #0fafad;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_info {
|
||||
0% {
|
||||
stroke: #0fafad
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #0fafad;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_success {
|
||||
0% {
|
||||
stroke: #4eb127
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #4eb127;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_success {
|
||||
0% {
|
||||
stroke: #4eb127
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #4eb127;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_warning {
|
||||
0% {
|
||||
stroke: #fcbc0b
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #fcbc0b;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_warning {
|
||||
0% {
|
||||
stroke: #fcbc0b
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #fcbc0b;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_error {
|
||||
0% {
|
||||
stroke: #eb262d
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #eb262d;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_error {
|
||||
0% {
|
||||
stroke: #eb262d
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #eb262d;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
.coco-msg-fade-in {
|
||||
-webkit-animation: coco-msg-fade .2s ease-out both;
|
||||
animation: coco-msg-fade .2s ease-out both
|
||||
}
|
||||
|
||||
.coco-msg-fade-out {
|
||||
animation: coco-msg-fade .3s linear reverse both
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, -80%, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, -80%, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user