fix(styles): optimize tab padding and remove legacy overrides for 13in laptop screens
This commit is contained in:
+3
-3
@@ -210,8 +210,8 @@ th { font-size:.7rem; letter-spacing:.06em; }
|
||||
.workspace-new-menu > nav a:hover { background:#f8faff; }
|
||||
.create-entity { max-width:720px; padding-bottom:72px; }
|
||||
.entity-detail-shell,.recipe-detail-shell { width:min(1500px,calc(100% - 48px)); margin:0 auto; padding:24px 0 72px; color:#101a4a; }
|
||||
.entity-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; min-height:108px; border-bottom:1px solid #e8eaf0; }.entity-detail-header h1 { margin:8px 0 2px; font:700 clamp(1.7rem,2.4vw,2.35rem) var(--sans); letter-spacing:-.035em; }.entity-detail-header p { margin:0; color:#858da2; }.entity-breadcrumb a { color:#26346d; font-size:.82rem; text-decoration:none; }.identity-edit { position:relative; }.identity-edit > summary { padding:8px 15px; color:#4868f7; border:1px solid #4868f7; border-radius:20px; cursor:pointer; font-weight:700; list-style:none; }.identity-edit > summary::-webkit-details-marker { display:none; }.identity-edit > form { position:absolute; z-index:8; right:0; width:min(390px,calc(100vw - 32px)); padding:18px; background:white; border:1px solid #dfe3ec; border-radius:7px; box-shadow:0 .75rem 2rem rgba(30,35,25,.16); }.identity-edit label { display:grid; gap:4px; margin-bottom:10px; color:#737c91; font-size:.75rem; }.identity-edit input,.identity-edit select,.identity-edit textarea { width:100%; padding:9px; border:1px solid #dfe3ec; }.identity-edit button { padding:9px 12px; color:white; background:#4868f7; border:0; border-radius:5px; font-weight:700; }.entity-notice { margin:14px 0; }.entity-detail-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); min-height:720px; }.entity-primary { padding:48px 42px 40px 0; border-right:1px solid #e8eaf0; }.entity-secondary { min-width:0; padding-left:32px; }.entity-section { margin-bottom:54px; }.entity-section h2,.entity-tab-panel h2 { margin:0 0 8px; font:700 1.35rem var(--sans); }.prep-action-table { margin-top:34px; }.prep-action-table th,.prep-action-table td { padding:13px 8px; text-align:left; border-bottom:1px solid #edf0f5; }.prep-action-table th { color:#9098aa; font-size:.72rem; font-weight:500; }.inline-editor { margin-top:20px; }.inline-editor > summary { color:#4868f7; cursor:pointer; font-weight:700; list-style:none; }.additional-card { min-height:260px; padding:28px; border:1px solid #e8eaf0; }.additional-card > details { padding:16px 0; }.additional-card summary { cursor:pointer; font-weight:700; }.additional-card summary small { margin-left:5px; color:#9aa2b5; }.additional-card ul { padding-left:20px; }.additional-card li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; }.entity-tabs { display:flex; position:sticky; top:0; z-index:3; background:var(--paper); border-bottom:1px solid #e8eaf0; }.entity-tabs button { flex:1; padding:18px 10px; color:#111a49; background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer; font-weight:700; }.entity-tabs button.active { border-bottom-color:#4868f7; }.entity-tab-panel { display:none; padding:42px 0; background:transparent; border:0; }.entity-tab-panel.active { display:block; }.equivalency-list p { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; padding:14px 4px; border-bottom:1px solid #e8eaf0; }.equivalency-list p small { grid-column:1/-1; color:#8b93a7; }.entity-secondary .purchase-item-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.entity-secondary .purchase-name,.entity-secondary .purchase-rate { grid-column:1/-1; }
|
||||
.recipe-detail-shell { width:min(1600px,calc(100% - 48px)); }.recipe-detail-shell .entity-detail-header { min-height:92px; }.recipe-workspace-tabs { display:flex; justify-content:flex-end; border-bottom:1px solid #f3f3f3; }.recipe-workspace-tabs a { min-width:150px; padding:16px 18px; color:#111a49; border-bottom:2px solid transparent; text-align:center; text-decoration:none; font-weight:700; }.recipe-workspace-tabs a.active { border-bottom-color:#4868f7; }.recipe-overview-strip { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:18px 0; }.recipe-overview-form { flex:1; }.recipe-overview-form > details > summary { color:#4868f7; cursor:pointer; font-weight:700; }.recipe-overview-form fieldset { max-width:720px; margin-top:15px; }.recipe-yield-summary { display:flex; align-items:baseline; gap:12px; min-width:260px; padding:12px 16px; border:1px solid #e8eaf0; }.recipe-yield-summary span,.recipe-yield-summary small { color:#8b93a7; }.recipe-structure-workspace { border-top:1px solid #e8eaf0; }.recipe-structure-workspace .structure-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); column-gap:32px; }.recipe-structure-workspace .section-heading { grid-column:1/-1; }.recipe-structure-workspace .component-editor,.recipe-structure-workspace > .structure-editor > .secondary-action { grid-column:1; }.recipe-structure-workspace .method-editor { grid-column:2; grid-row:2 / span 40; min-width:0; padding-left:32px; border-left:1px solid #e8eaf0; }.recipe-structure-workspace .component-editor { border-color:#e8eaf0; background:white; }.recipe-structure-workspace .editor-items { min-width:46rem; }.recipe-structure-workspace .method-editor li { padding:15px; border:1px solid #e8eaf0; }.recipe-history { margin-top:30px; padding:18px; border:1px solid #e8eaf0; }.recipe-history summary { cursor:pointer; font-weight:700; }.recipe-history li span,.recipe-history li small { display:block; color:#8b93a7; }
|
||||
.entity-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; min-height:108px; border-bottom:1px solid #e8eaf0; }.entity-detail-header h1 { margin:8px 0 2px; font:700 clamp(1.7rem,2.4vw,2.35rem) var(--sans); letter-spacing:-.035em; }.entity-detail-header p { margin:0; color:#858da2; }.entity-breadcrumb a { color:#26346d; font-size:.82rem; text-decoration:none; }.identity-edit { position:relative; }.identity-edit > summary { padding:8px 15px; color:#4868f7; border:1px solid #4868f7; border-radius:20px; cursor:pointer; font-weight:700; list-style:none; }.identity-edit > summary::-webkit-details-marker { display:none; }.identity-edit > form { position:absolute; z-index:8; right:0; width:min(390px,calc(100vw - 32px)); padding:18px; background:white; border:1px solid #dfe3ec; border-radius:7px; box-shadow:0 .75rem 2rem rgba(30,35,25,.16); }.identity-edit label { display:grid; gap:4px; margin-bottom:10px; color:#737c91; font-size:.75rem; }.identity-edit input,.identity-edit select,.identity-edit textarea { width:100%; padding:9px; border:1px solid #dfe3ec; }.identity-edit button { padding:9px 12px; color:white; background:#4868f7; border:0; border-radius:5px; font-weight:700; }.entity-notice { margin:14px 0; }.entity-detail-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); min-height:720px; }.entity-primary { padding:48px 42px 40px 0; border-right:1px solid #e8eaf0; }.entity-secondary { min-width:0; padding-left:32px; }.entity-section { margin-bottom:54px; }.entity-section h2,.entity-tab-panel h2 { margin:0 0 8px; font:700 1.35rem var(--sans); }.prep-action-table { margin-top:34px; }.prep-action-table th,.prep-action-table td { padding:13px 8px; text-align:left; border-bottom:1px solid #edf0f5; }.prep-action-table th { color:#9098aa; font-size:.72rem; font-weight:500; }.inline-editor { margin-top:20px; }.inline-editor > summary { color:#4868f7; cursor:pointer; font-weight:700; list-style:none; }.additional-card { min-height:260px; padding:28px; border:1px solid #e8eaf0; }.additional-card > details { padding:16px 0; }.additional-card summary { cursor:pointer; font-weight:700; }.additional-card summary small { margin-left:5px; color:#9aa2b5; }.additional-card ul { padding-left:20px; }.additional-card li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; }.entity-tab-panel { display:none; padding:42px 0; background:transparent; border:0; }.entity-tab-panel.active { display:block; }.equivalency-list p { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; padding:14px 4px; border-bottom:1px solid #e8eaf0; }.equivalency-list p small { grid-column:1/-1; color:#8b93a7; }.entity-secondary .purchase-item-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.entity-secondary .purchase-name,.entity-secondary .purchase-rate { grid-column:1/-1; }
|
||||
.recipe-detail-shell { width:min(1600px,calc(100% - 48px)); }.recipe-detail-shell .entity-detail-header { min-height:92px; }.recipe-overview-strip { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:18px 0; }.recipe-overview-form { flex:1; }.recipe-overview-form > details > summary { color:#4868f7; cursor:pointer; font-weight:700; }.recipe-overview-form fieldset { max-width:720px; margin-top:15px; }.recipe-yield-summary { display:flex; align-items:baseline; gap:12px; min-width:260px; padding:12px 16px; border:1px solid #e8eaf0; }.recipe-yield-summary span,.recipe-yield-summary small { color:#8b93a7; }.recipe-structure-workspace { border-top:1px solid #e8eaf0; }.recipe-structure-workspace .structure-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); column-gap:32px; }.recipe-structure-workspace .section-heading { grid-column:1/-1; }.recipe-structure-workspace .component-editor,.recipe-structure-workspace > .structure-editor > .secondary-action { grid-column:1; }.recipe-structure-workspace .method-editor { grid-column:2; grid-row:2 / span 40; min-width:0; padding-left:32px; border-left:1px solid #e8eaf0; }.recipe-structure-workspace .component-editor { border-color:#e8eaf0; background:white; }.recipe-structure-workspace .editor-items { min-width:46rem; }.recipe-structure-workspace .method-editor li { padding:15px; border:1px solid #e8eaf0; }.recipe-history { margin-top:30px; padding:18px; border:1px solid #e8eaf0; }.recipe-history summary { cursor:pointer; font-weight:700; }.recipe-history li span,.recipe-history li small { display:block; color:#8b93a7; }
|
||||
.immersive-main { min-height:100vh; background:#fff; }.immersive-main .entity-detail-shell,.immersive-main .recipe-detail-shell { width:100%; max-width:none; margin:0; padding:0 0 72px; }.detail-utility { display:flex; align-items:center; justify-content:flex-end; gap:18px; min-height:58px; padding:7px 28px; border-bottom:1px solid #e8eaf0; }.detail-utility form { width:min(560px,42vw); }.detail-utility input { width:100%; min-height:42px; padding:8px 14px; border:1px solid #e5e8ef; border-radius:4px; font:inherit; }.detail-utility > a { color:#26346d; text-decoration:none; font-weight:700; }.detail-utility .detail-new { padding:9px 16px; color:white; background:#4868f7; border-radius:21px; }.immersive-main .entity-detail-header { width:52%; min-height:128px; padding:26px 38px; border-right:1px solid #e8eaf0; }.immersive-main .entity-notice { width:calc(52% - 76px); margin:12px 38px; }.immersive-main .entity-detail-grid { grid-template-columns:52% 48%; }.immersive-main .entity-primary { padding:48px 38px; }.immersive-main .entity-secondary { padding:0 30px; }.immersive-main .recipe-detail-shell .entity-detail-header { width:52%; padding:22px 38px; }.immersive-main .recipe-workspace-tabs { width:48%; margin:-92px 0 30px 52%; min-height:92px; align-items:end; padding:0 22px; }.immersive-main .recipe-overview-strip { width:52%; min-height:150px; padding:20px 38px; border-right:1px solid #e8eaf0; }.immersive-main .recipe-structure-workspace { padding:0 38px; }.immersive-main .recipe-structure-workspace .structure-editor { grid-template-columns:minmax(0,52fr) minmax(420px,48fr); column-gap:0; }.immersive-main .recipe-structure-workspace .section-heading { padding-right:32px; }.immersive-main .recipe-structure-workspace .component-editor,.immersive-main .recipe-structure-workspace > .structure-editor > .secondary-action { margin-right:32px; }.immersive-main .recipe-structure-workspace .method-editor { padding-left:32px; }.immersive-main .recipe-history { margin-inline:38px; }
|
||||
.immersive-main .entity-detail-shell,.immersive-main .recipe-detail-shell { position:relative; }.immersive-main .detail-utility { position:absolute; z-index:10; top:0; right:0; width:48%; height:58px; background:#fff; }.detail-new-menu { position:relative; }.detail-new-menu > summary { padding:9px 16px; color:white; background:#4868f7; border-radius:21px; cursor:pointer; font-weight:700; list-style:none; white-space:nowrap; }.detail-new-menu > summary::-webkit-details-marker { display:none; }.detail-new-menu > div { position:absolute; top:46px; right:0; width:220px; padding:8px 0; background:#fff; border:1px solid #e5e8ef; border-radius:6px; box-shadow:0 12px 30px rgba(22,30,65,.15); }.detail-new-menu > div a { display:flex; gap:12px; padding:13px 18px; color:#111a49; text-decoration:none; }.detail-new-menu > div a:hover { background:#f7f8fc; }.immersive-main .entity-detail-header { min-height:164px; padding-top:24px; }.immersive-main .entity-detail-grid { border-top:1px solid #e8eaf0; }.immersive-main .entity-secondary { margin-top:-106px; background:#fff; }.immersive-main .entity-tabs { min-height:58px; }.immersive-main .recipe-detail-shell .entity-detail-header { min-height:116px; padding-top:20px; }.immersive-main .recipe-workspace-tabs { min-height:58px; margin:-58px 0 28px 52%; }.immersive-main .recipe-workspace-tabs a { padding-block:17px; }.immersive-main .recipe-overview-strip { min-height:126px; }.immersive-main .recipe-structure-workspace { border-top:0; }.immersive-main .recipe-structure-workspace .structure-editor { border-top:1px solid #e8eaf0; }.immersive-main .recipe-structure-workspace .section-heading { min-height:76px; margin:0; padding:18px 32px 12px 0; }.immersive-main .recipe-structure-workspace .section-heading h2 { margin:2px 0; font:700 1.35rem var(--sans); }
|
||||
.edit-command { padding:8px 15px; color:#4868f7; border:1px solid #4868f7; border-radius:20px; text-decoration:none; font-weight:700; }.recipe-view-workspace { display:grid; grid-template-columns:52% 48%; border-top:1px solid #e8eaf0; }.recipe-view-formula { min-width:0; padding:26px 32px 48px 38px; border-right:1px solid #e8eaf0; }.recipe-view-formula .calculator { padding:0; }.recipe-view-formula .calculator-heading { display:flex; align-items:baseline; gap:24px; margin-bottom:22px; }.recipe-view-formula .calculator-heading h2 { margin:0; font:700 1.4rem var(--sans); }.recipe-view-formula .calculator-heading .eyebrow { display:none; }.recipe-view-formula .basis-input { min-width:0; }.recipe-view-formula .formula-component { margin:0 0 14px; border:0; background:transparent; }.recipe-view-formula .formula-component h3 { margin:0; padding:8px 0; background:transparent; border-bottom:1px solid #f3f3f3; font:500 1.125rem var(--sans); }.recipe-view-formula .recipe-ingredients th { color:#8b93a7; background:white; font-size:.72rem; font-weight:500; }.recipe-view-formula .recipe-ingredients td { border:0; }.recipe-view-formula .formula-total { margin-top:12px; }.recipe-view-details { min-width:0; padding:28px 30px 60px; }.recipe-view-method h2,.recipe-derived-panel > h2 { font:700 1.4rem var(--sans); }.recipe-view-method h2 small { color:#9aa2b5; font-size:.85rem; }.recipe-view-method ol { padding:0; list-style:none; }.recipe-derived-panel { margin-top:46px; padding-top:26px; border-top:1px solid #e8eaf0; }.recipe-derived-panel dl { margin:0; }.recipe-derived-panel dl > div { display:flex; justify-content:space-between; padding:12px 4px; border-bottom:1px solid #edf0f5; }.recipe-derived-panel dd { margin:0; font-weight:700; }.recipe-derived-panel .nutrition-wrap { display:block; }.recipe-derived-panel .nutrition-label { max-width:520px; }
|
||||
@@ -315,7 +315,7 @@ th { font-size:.7rem; letter-spacing:.06em; }
|
||||
.application-body .prep-equivalency-link:hover { background:#f1f5fe; text-decoration:underline; }
|
||||
.application-body .outlined-add-action { min-height:40px; margin-top:20px; padding:8px 16px; color:#202962; background:#fff; border:1px solid #202962; border-radius:22px; cursor:pointer; font-size:14px; font-weight:600; }
|
||||
.application-body #ingredient-done.dirty::after { content:""; display:inline-block; width:6px; height:6px; margin-left:7px; background:#fff; border-radius:50%; vertical-align:middle; }
|
||||
.recipe-workspace-tabs button { min-width:150px; padding:16px 18px; color:#111a49; background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer; font:700 .9rem var(--sans); }.recipe-workspace-tabs button.active { border-bottom-color:#4868f7; }.recipe-tab-panel { display:none; }.recipe-tab-panel.active { display:block; }.recipe-view-details > .recipe-derived-panel { margin-top:0; padding-top:0; border-top:0; }.recipe-view-details .derived-grid { display:block; }.recipe-view-details .derived-card { border:0; padding:0; }.recipe-view-details .derived-title h2 { font:700 1.4rem var(--sans); }
|
||||
.recipe-tab-panel { display:none; }.recipe-tab-panel.active { display:block; }.recipe-view-details > .recipe-derived-panel { margin-top:0; padding-top:0; border-top:0; }.recipe-view-details .derived-grid { display:block; }.recipe-view-details .derived-card { border:0; padding:0; }.recipe-view-details .derived-title h2 { font:700 1.4rem var(--sans); }
|
||||
.recipe-view-equivalencies h2,.recipe-equivalence-editor h2 { font:700 1.4rem var(--sans); }.recipe-view-equivalencies > div,.recipe-equivalence-editor > div { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; padding:14px 4px; border-bottom:1px solid #e8eaf0; }.recipe-view-equivalencies small,.recipe-equivalence-editor small { grid-column:1/-1; color:#8b93a7; }.recipe-equivalence-editor { margin:30px 38px; padding:24px; border:1px solid #e8eaf0; }.recipe-equivalence-editor > p { color:#8b93a7; }.recipe-equivalence-editor form { display:grid; grid-template-columns:90px 1fr auto 90px 1fr minmax(150px,1fr) auto; align-items:center; gap:8px; margin-top:20px; }.recipe-equivalence-editor input,.recipe-equivalence-editor select { min-width:0; padding:9px; border:1px solid #dfe3ec; }.recipe-equivalence-editor button { padding:10px 12px; color:white; background:#4868f7; border:0; border-radius:5px; font-weight:700; }
|
||||
.editable-entity-title {
|
||||
display:block;
|
||||
|
||||
@@ -174,9 +174,6 @@ input[type="search"]::-webkit-search-results-decoration,
|
||||
.application-body .immersive-main .entity-detail-grid,.application-body .immersive-main .recipe-structure-workspace .structure-editor { border-color:#eeeef3; }
|
||||
.application-body .immersive-main .entity-primary { padding:42px 38px; border-color:#eeeef3; }
|
||||
.application-body .immersive-main .entity-secondary { padding:0 32px; }
|
||||
.application-body .entity-tabs { min-height:58px; border-color:#edf0f5; }
|
||||
.application-body .entity-tabs button,.application-body .recipe-workspace-tabs button { padding:17px 10px; color:#202962; font-size:15px; font-weight:400; }
|
||||
.application-body .entity-tabs button.active,.application-body .recipe-workspace-tabs button.active { color:#050841; background:#f1f5fe; border-bottom:2px solid #3d5df6; }
|
||||
.application-body .entity-tab-panel { padding-top:38px; }
|
||||
.application-body .entity-section { margin-bottom:48px; }
|
||||
.application-body .entity-section h2,.application-body .entity-tab-panel h2,.application-body .recipe-view-method h2 { font-size:20px; font-weight:600; }
|
||||
|
||||
@@ -425,7 +425,7 @@
|
||||
.application-body .immersive-main .recipe-view-workspace { grid-template-columns:1fr 1fr; }
|
||||
.application-body .immersive-main .recipe-view-formula { padding:0 0 35px; border-right:0; }
|
||||
.application-body .immersive-main .recipe-view-details { padding:26px 32px 60px; border-top:0; border-left:1px solid #f3f3f3; }
|
||||
.application-body .immersive-main .recipe-read-tabs { min-height:48px; padding:0; padding-left:50%; overflow-x:visible; }
|
||||
.application-body .immersive-main .recipe-read-tabs { min-height:48px; padding:0; }
|
||||
.application-body .immersive-main .recipe-read-tabs button { flex:0 0 auto; }
|
||||
}
|
||||
|
||||
@@ -524,81 +524,22 @@
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs,
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs {
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
align-items:center;
|
||||
justify-content:flex-start;
|
||||
width:auto;
|
||||
width:100%;
|
||||
min-height:48px;
|
||||
max-height:48px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:#ffffff;
|
||||
border-bottom:2px solid #edf0f5;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button,
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs button,
|
||||
.application-body .recipe-workspace-tabs button,
|
||||
.application-body .entity-tabs button {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex:0 0 auto;
|
||||
min-width:0;
|
||||
height:48px;
|
||||
min-height:48px;
|
||||
margin:0;
|
||||
padding:0 16px;
|
||||
color:#050841;
|
||||
background:transparent;
|
||||
border:0;
|
||||
border-right:0;
|
||||
border-bottom:2px solid transparent;
|
||||
border-radius:0;
|
||||
font-family:var(--meez-font-sans);
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
line-height:22px;
|
||||
cursor:pointer;
|
||||
border-bottom:1px solid #edf0f5;
|
||||
box-sizing:border-box;
|
||||
transition:background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
|
||||
overflow-x:auto;
|
||||
scrollbar-width:none;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button:hover:not(.active),
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs button:hover:not(.active),
|
||||
.application-body .recipe-workspace-tabs button:hover:not(.active),
|
||||
.application-body .entity-tabs button:hover:not(.active) {
|
||||
background-color: #fbfbfb !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #050841 !important;
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs::-webkit-scrollbar {
|
||||
display:none;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button.active,
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs button.active,
|
||||
.application-body .recipe-workspace-tabs button.active,
|
||||
.application-body .entity-tabs button.active {
|
||||
background-color: #f1f5fe !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button.active:hover,
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs button.active:hover,
|
||||
.application-body .recipe-workspace-tabs button.active:hover,
|
||||
.application-body .entity-tabs button.active:hover {
|
||||
background-color: #f1f5fe !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
}
|
||||
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-tab-icon,
|
||||
.application-body .recipe-read-shell .recipe-tab-icon,
|
||||
.application-body .recipe-tab-icon {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width:22px;
|
||||
height:22px;
|
||||
margin-right:8px;
|
||||
color:inherit;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-tab-icon svg,
|
||||
.application-body .recipe-read-shell .recipe-tab-icon svg,
|
||||
.application-body .recipe-tab-icon svg { display:block; width:20px; height:20px; }
|
||||
.application-body .immersive-main .recipe-read-shell .detail-utility .entity-header-actions {
|
||||
display:flex;
|
||||
flex:none;
|
||||
|
||||
@@ -11,11 +11,20 @@
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.application-body .recipe-workspace-tabs::-webkit-scrollbar,
|
||||
.application-body .recipe-read-tabs::-webkit-scrollbar,
|
||||
.application-body .entity-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.application-body .recipe-workspace-tabs button,
|
||||
@@ -23,9 +32,10 @@
|
||||
.application-body .entity-tabs button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0 20px 0 4px;
|
||||
padding: 0 14px 0 2px;
|
||||
color: #050841;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@@ -33,7 +43,7 @@
|
||||
border-right: 1px solid #f3f3f3;
|
||||
border-radius: 0;
|
||||
font-family: var(--meez-font-sans);
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
@@ -78,9 +88,9 @@
|
||||
.application-body .entity-tabs button:hover .recipe-tab-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
margin-right: 4px;
|
||||
margin-right: 2px;
|
||||
color: #050841 !important;
|
||||
}
|
||||
|
||||
@@ -89,7 +99,42 @@
|
||||
.application-body .recipe-read-tabs button .recipe-tab-icon svg,
|
||||
.application-body .entity-tabs button .recipe-tab-icon svg {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Responsive adjustment for 13" laptop screens (1280px / 1366px) */
|
||||
@media (max-width: 1366px) and (min-width: 901px) {
|
||||
.application-body .recipe-workspace-tabs button,
|
||||
.application-body .recipe-read-tabs button,
|
||||
.application-body .entity-tabs button {
|
||||
padding: 0 10px 0 2px;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.application-body .recipe-tab-icon,
|
||||
.application-body .recipe-workspace-tabs button .recipe-tab-icon,
|
||||
.application-body .recipe-read-tabs button .recipe-tab-icon,
|
||||
.application-body .entity-tabs button .recipe-tab-icon {
|
||||
width: 28px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) and (min-width: 901px) {
|
||||
.application-body .recipe-workspace-tabs button,
|
||||
.application-body .recipe-read-tabs button,
|
||||
.application-body .entity-tabs button {
|
||||
padding: 0 8px 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.application-body .recipe-tab-icon,
|
||||
.application-body .recipe-workspace-tabs button .recipe-tab-icon,
|
||||
.application-body .recipe-read-tabs button .recipe-tab-icon,
|
||||
.application-body .entity-tabs button .recipe-tab-icon {
|
||||
width: 26px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -637,102 +637,4 @@
|
||||
background-color: #2b4be0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Meez Tab Row & Tab Hover / Active States (Definitive)
|
||||
========================================================================== */
|
||||
|
||||
.application-body .recipe-workspace-tabs,
|
||||
.application-body .entity-tabs {
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
width: auto !important;
|
||||
min-height: 48px !important;
|
||||
height: 48px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: #ffffff !important;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid #edf0f5 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-workspace-tabs button,
|
||||
.application-body .entity-tabs button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
flex: 0 0 auto !important;
|
||||
min-width: 0 !important;
|
||||
height: 48px !important;
|
||||
min-height: 48px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 16px !important;
|
||||
color: #050841 !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
border-radius: 0 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 22px !important;
|
||||
cursor: pointer !important;
|
||||
position: relative !important;
|
||||
z-index: 2 !important;
|
||||
box-sizing: border-box !important;
|
||||
transition: border-color 0.12s ease, background-color 0.12s ease !important;
|
||||
}
|
||||
|
||||
/* Inactive Tab Hover: Meez style: #fbfbfb background + dark #050841 underline */
|
||||
.application-body .recipe-workspace-tabs button:hover:not(.active),
|
||||
.application-body .entity-tabs button:hover:not(.active) {
|
||||
background: #fbfbfb !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #050841 !important;
|
||||
}
|
||||
|
||||
/* Active Tab: soft blue background + blue underline */
|
||||
.application-body .recipe-workspace-tabs button.active,
|
||||
.application-body .entity-tabs button.active,
|
||||
.application-body .recipe-workspace-tabs button[aria-selected="true"],
|
||||
.application-body .entity-tabs button[aria-selected="true"] {
|
||||
background: #f1f5fe !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
}
|
||||
|
||||
/* Active Tab Hover: stays soft blue background + blue underline */
|
||||
.application-body .recipe-workspace-tabs button.active:hover,
|
||||
.application-body .entity-tabs button.active:hover,
|
||||
.application-body .recipe-workspace-tabs button[aria-selected="true"]:hover,
|
||||
.application-body .entity-tabs button[aria-selected="true"]:hover {
|
||||
background: #f1f5fe !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-tab-icon {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 22px !important;
|
||||
height: 22px !important;
|
||||
margin-right: 8px !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-tab-icon svg {
|
||||
display: block !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button.mobile-only-tab,
|
||||
.application-body .recipe-read-shell .recipe-workspace-tabs button.mobile-only-tab,
|
||||
.application-body .recipe-workspace-tabs button.mobile-only-tab,
|
||||
.application-body .entity-tabs button.mobile-only-tab,
|
||||
.application-body .mobile-only-tab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@import "./components/entity-directory.css";
|
||||
@import "./components/recipe-books.css";
|
||||
@import "./components/inventory.css";
|
||||
@import "./components/tabs.css";
|
||||
@import "./layout.css";
|
||||
@import "./components/recipe-edit.css";
|
||||
@import "./components/recipe-view.css";
|
||||
|
||||
@@ -349,80 +349,5 @@
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.application-body .recipe-read-right .recipe-workspace-tabs {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
}
|
||||
.application-body .recipe-read-right .recipe-view-details {
|
||||
padding: 24px 36px 35px;
|
||||
background: transparent;
|
||||
border-left: 0;
|
||||
}
|
||||
.application-body .recipe-detail-shell .entity-detail-header { background:#ffffff; }
|
||||
.application-body .recipe-detail-shell > .entity-detail-header > div:first-child > p { display:block; }
|
||||
.application-body .recipe-detail-shell .entity-breadcrumb a { color:#202962; font-size:12px; font-weight:400; text-decoration:none; }
|
||||
.application-body .recipe-detail-shell .entity-detail-header h1 { font-size:28px; font-weight:900; line-height:42px; }
|
||||
.application-body .recipe-read-tabs { min-height:48px; }
|
||||
.application-body .recipe-detail-shell .detail-actions-menu > summary svg { display:block; width:24px; height:24px; }
|
||||
.application-body .recipe-detail-shell .detail-actions-menu > div { border:0; box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); overflow:hidden; }
|
||||
.application-body .recipe-detail-shell .detail-actions-menu button { width:100% !important; max-width:100% !important; min-height:44px; padding:10px 20px; color:#050841; font-size:15px; font-weight:500; }
|
||||
|
||||
/* Tab row: 48px, icon + 15px label, active = #f1f5fe with blue underline. */
|
||||
.application-body .recipe-workspace-tabs {
|
||||
min-height: 48px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.application-body .recipe-workspace-tabs button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
padding: 0 20px 0 4px;
|
||||
color: #050841;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
border-radius: 0;
|
||||
font-family: var(--meez-font-sans);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.application-body .recipe-workspace-tabs button:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.application-body .recipe-workspace-tabs button:hover:not(.active) {
|
||||
background: #fbfbfb !important;
|
||||
color: #050841 !important;
|
||||
border-bottom: 2px solid #050841 !important;
|
||||
}
|
||||
.application-body .recipe-workspace-tabs button.active {
|
||||
color: #050841 !important;
|
||||
background: #f1f5fe !important;
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
.application-body .recipe-tab-icon,
|
||||
.application-body .recipe-workspace-tabs button .recipe-tab-icon,
|
||||
.application-body .recipe-workspace-tabs button.active .recipe-tab-icon,
|
||||
.application-body .recipe-workspace-tabs button:hover .recipe-tab-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
margin-right: 4px;
|
||||
color: #050841 !important;
|
||||
}
|
||||
.application-body .recipe-tab-icon svg {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user