parent
962a600dc1
commit
ff30a89ac0
@ -0,0 +1,189 @@
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
.cookie-card {
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
#story {
|
||||
/* 设置边框样式 */
|
||||
border: 1px solid #ccc;
|
||||
|
||||
/* 圆角边框 */
|
||||
border-radius: 5px;
|
||||
|
||||
/* 填充（内边距） */
|
||||
padding: 10px;
|
||||
|
||||
/* 设置字体样式 */
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
/* 设置背景色 */
|
||||
background-color: #fff;
|
||||
|
||||
/* 调整元素宽度和高度（如果需要） */
|
||||
width: 700px; /* 设置为父元素宽度的100% */
|
||||
resize: vertical; /* 允许用户垂直调整大小 */
|
||||
|
||||
/* 过渡效果（可选） */
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
/* 聚焦时改变边框颜色（可选） */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0 #333;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
#story:focus {
|
||||
/* 聚焦时边框效果 */
|
||||
border-color: #333;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
}
|
||||
Loading…
Reference in new issue