Шаблон:ModernFrame/styles.css: различия между версиями
Als (обсуждение | вклад) Новая страница: «.modern-frame { overflow: hidden; display: flex; flex-direction: column; background-color: var(--tmp-10); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 5px; } .modern-frame hr { margin: 0.5rem 0; background-color: var(--tmp-25); } .modern-frame-header { display: flex; align-items: center; justify-content: space-between; min-height: 1.75rem; gap: 0.5rem; padding: 2px 0.5rem 0; background...» |
Als (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
.modern-frame { | .modern-frame { | ||
/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */ | |||
/* --alpha из стилей шаблона; по умолчанию: 30% */ | |||
--c-m-bg: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100)); | |||
--c-m-border: color-mix(in srgb, var(--bg-color) 80%, transparent); | |||
background: var(--bg-color); | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-radius: var(--border-radius-medium); | |||
} | } | ||
.modern- | .modern-frame__title { | ||
position: relative; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
min-height: 32px; | |||
min-height: | padding: 2px 8px; | ||
color: var(--theme-text-color-header); | |||
padding: 2px | font-family: var(--font-family-heading); | ||
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; | |||
border-top: 2px solid var(--color-lighter-alpha-x); | |||
border- | border-bottom: 3px solid var(--color-darkened-border); | ||
} | } | ||
.modern- | .modern-frame__content { | ||
border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); | |||
border: | box-shadow: var(--box-shadow-inset-medium); | ||
border: 2px solid var(--c-m-border); | |||
background: var(--c-m-bg); | |||
flex-grow: 2; | |||
} | } | ||
Текущая версия от 11:58, 27 июля 2025
.modern-frame {
/* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-300) */
/* --alpha из стилей шаблона; по умолчанию: 30% */
--c-m-bg: color-mix(in srgb, var(--bg-color) var(--alpha), var(--theme-bg-color-100));
--c-m-border: color-mix(in srgb, var(--bg-color) 80%, transparent);
background: var(--bg-color);
display: flex;
flex-direction: column;
border-radius: var(--border-radius-medium);
}
.modern-frame__title {
position: relative;
display: flex;
align-items: center;
min-height: 32px;
padding: 2px 8px;
color: var(--theme-text-color-header);
font-family: var(--font-family-heading);
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
border-top: 2px solid var(--color-lighter-alpha-x);
border-bottom: 3px solid var(--color-darkened-border);
}
.modern-frame__content {
border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
box-shadow: var(--box-shadow-inset-medium);
border: 2px solid var(--c-m-border);
background: var(--c-m-bg);
flex-grow: 2;
}