@import '~assets/styles/mixins/cards'; @import '~assets/styles/scss-imports/splitview'; .title { $title-gap: 8px; align-items: center; color: var(--fg2); display: flex; flex-direction: row; flex-wrap: nowrap; gap: $title-gap; max-width: 70%; place-items: flex-start; width: 80%; @media (max-width: $breakpoint-tablet) { align-items: flex-start; flex-direction: column; gap: unset; max-width: 100%; width: 100%; } @media (min-width: calc($breakpoint-tablet + 1px)) and (max-width: calc($breakpoint-hidden - 1px)) { align-items: center; } @media (min-width: $breakpoint-singlecolumn) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { align-items: flex-start; flex-direction: column; max-width: 100%; width: 100%; } .mobile-prefix { align-items: center; display: none; @media (min-width: calc($breakpoint-tablet + 1px)) and (max-width: calc($breakpoint-hidden - 1px)) { margin-bottom: 2px; } @media (max-width: $breakpoint-hidden) { display: flex; max-width: 30%; opacity: 0.85; } @media (max-width: $breakpoint-tablet) { max-width: 100%; width: 100%; } } .prefix { display: flex; max-width: 30%; opacity: 0.85; @media (max-width: $breakpoint-hidden) { display: none; } } .full-path { display: flex; max-width: inherit; @media (max-width: $breakpoint-tablet) { display: flex; margin-left: 40px; max-width: calc(100% - 48px); } @media (min-width: $breakpoint-singlecolumn) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { width: 100%; } @media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-hidden) { display: flex; } .own-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } .cards { @include details-cards(); @media (max-width: $breakpoint-tablet) { overflow: hidden; } } .header { align-items: center; display: flex; margin-bottom: 16px; padding: 12px 12px 12px 0; place-content: space-between; @media (min-width: calc($breakpoint-tablet + 1px)) and (max-width: $breakpoint-hidden) { border-bottom: solid 1px var(--lines); place-content: center; } @media (max-width: $breakpoint-tablet) { flex-direction: column; place-content: flex-start; } @media (min-width: $breakpoint-hidden) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { border-bottom: solid 1px var(--lines); flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 0; } @media (min-width: $breakpoint-singlecolumn) { align-items: center; } a.mobile-back-button { display: none; @media (max-width: $breakpoint-hidden) { display: inline-block; padding: 0 4px 0 16px; position: relative; top: 1px; } } .add-buttons:empty { @media (max-width: $breakpoint-tablet) { border-top: unset; margin: 0; padding-bottom: 0; } @media (min-width: $breakpoint-hidden) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { border-top: unset; margin: 0; padding-bottom: 0; } } .add-buttons { flex-shrink: 0; @media (max-width: $breakpoint-tablet) { border-bottom: solid 1px var(--lines); } @media (max-width: $breakpoint-tablet) { border-top: solid 1px var(--lines); display: flex; margin-top: 16px; padding: 14px 0; place-content: center; width: 98%; } @media (min-width: $breakpoint-hidden) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { border-top: solid 1px var(--lines); display: flex; margin-top: 16px; padding: 14px 0; place-content: center; width: 98%; } button { margin-left: 6px; @media (max-width: $breakpoint-tablet) { flex: 1; width: 40%; } @media (min-width: $breakpoint-hidden) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) { flex: 1; } } } }