CSS
语言:
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
:root {
--color-bg: #FEFDFB;
--color-title: #0E1C4E;
--color-summary-1: #FFF6EE;
--color-summary-1-highlight: #FFC48B;
--color-summary-2: #FAFAFF;
--color-summary-2-highlight: #B4B3FF;
--color-summary-3: #FFF0F3;
--color-summary-3-highlight: #FFB3C0;
--font-ibm-plex-sans: 'IBM Plex Sans', sans-serif;
}
html,
body {
overflow: auto;
height: 100vh;
width: 100%;
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
}
.card {
background: white;
padding: 38px 36px;
margin-top: 40px;
margin-bottom: 40px;
border-radius: 4px;
box-shadow: 0 8px 10px rgba(0, 0, 0, .1);
max-width: 400px;
width: 100%;
h1 {
font-family: var(--font-ibm-plex-sans);
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
color: var(--color-title);
margin-bottom: 20px;
}
details {
border-radius: 4px;
overflow: hidden;
padding: 20px;
background: rgba(0, 0, 0, .05);
border-left: 5px solid gray;
&:not(:last-of-type) {
margin-bottom: 15px;
}
&.warning {
background: var(--color-summary-1);
border-left: 5px solid var(--color-summary-1-highlight);
}
&.info {
background: var(--color-summary-2);
border-left: 5px solid var(--color-summary-2-highlight);
}
&.alert {
background: var(--color-summary-3);
border-left: 5px solid var(--color-summary-3-highlight);
}
summary,
p {
font-family: var(--font-ibm-plex-sans);
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 1.4;
color: var(--color-title);
&:not(:last-of-type) {
margin-bottom: 10px;
}
}
p {
padding-left: 30px;
}
summary {
cursor: pointer;
margin-bottom: 0;
list-style-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
&::-webkit-details-marker {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
color: transparent;
background-size: 100% 100%;
margin-right: 18px;
width: 16px;
height: 16px;
transform: translateY(2px);
}
}
&[open] {
summary {
margin-bottom: 10px;
list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
font-weight: 700;
&::-webkit-details-marker {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
color: transparent;
background-size: 100% 100%;
margin-right: 20px;
width: 12px;
height: 12px;
transform: translateY(1px);
}
}
p {
padding-left: 32px;
}
}
}
}