/* ------------------------------------------------ Sessions ------------------------------------------------ */ .tl-sessions-list { width: 100%; } .tl-session-list { display: flex; flex-direction: column; gap: 16px; } /* ------------------------------------------------ Owner Activity ------------------------------------------------ */ .tl-session-owner-activity { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 2px 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--tl-color-border-soft); border-radius: 0; box-shadow: none; } .tl-session-owner-activity-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tl-session-owner-activity-content strong { font-size: .875em; line-height: 1.3; } .tl-session-owner-activity-content span { color: var(--tl-color-text-secondary); font-size: .8125em; line-height: 1.3; } .tl-session-owner-activity-link { flex: 0 0 auto; font-size: .875em; font-weight: 600; text-decoration: none; } .tl-app .tl-session-owner-activity-link, .tl-app .tl-session-owner-activity-link:visited { color: var(--tl-color-primary); } .tl-app .tl-session-owner-activity-link:hover, .tl-app .tl-session-owner-activity-link:focus { color: var(--tl-color-primary-hover); } /* ------------------------------------------------ Session Card ------------------------------------------------ */ .tl-session-card { margin: 0; overflow: hidden; background: var(--tl-color-surface); border: 1px solid var(--tl-color-border-soft); border-radius: var(--tl-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .06); } /* ------------------------------------------------ Session Card Body / Link ------------------------------------------------ */ .tl-session-card-body, .tl-session-card-link { display: grid; grid-template-columns: 92px minmax(0, 1fr); width: 100%; min-height: 138px; box-sizing: border-box; } .tl-session-card-link { color: inherit; text-decoration: none; } /* ------------------------------------------------ Dog Photo ------------------------------------------------ */ .tl-session-card-photo { width: 92px; min-width: 92px; height: 100%; overflow: hidden; background: var(--tl-color-background); } .tl-session-card-photo-image { display: block; width: 100%; height: 100%; min-height: 138px; object-fit: cover; border-radius: 0; } /* ------------------------------------------------ Session Content ------------------------------------------------ */ .tl-session-card-content { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; padding: 16px; } /* ------------------------------------------------ Dog and Session Information ------------------------------------------------ */ .tl-session-card-details { min-width: 0; } .tl-session-card-dog { margin: 0; color: var(--tl-color-text); font-size: 1.0625em; font-weight: 700; line-height: 1.2; } .tl-session-card-title { margin-top: 3px; color: var(--tl-color-primary-hover); font-size: .9375em; font-weight: 600; line-height: 1.35; } .tl-session-card-owners { margin-top: 3px; color: var(--tl-color-text-secondary); font-size: .8125em; line-height: 1.35; } /* ------------------------------------------------ Session Meta ------------------------------------------------ */ .tl-session-card-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--tl-color-border-soft); color: var(--tl-color-text-secondary); font-size: .75em; line-height: 1.4; } .tl-session-card-meta strong { color: var(--tl-color-text); font-weight: 600; } /* ------------------------------------------------ Session Card Actions ------------------------------------------------ */ .tl-session-card-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-top: 1px solid var(--tl-color-border-soft); } .tl-session-card-action { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 12px; box-sizing: border-box; text-align: center; text-decoration: none; font-size: .8125em; font-weight: 700; line-height: 1.2; } .tl-session-card-action--update, a.tl-session-card-action--update, a.tl-session-card-action--update:visited { background: var(--tl-color-surface); color: var(--tl-color-primary); } a.tl-session-card-action--update:hover, a.tl-session-card-action--update:focus { background: var(--tl-color-background); color: var(--tl-color-primary-hover); } .tl-session-card-action--view, a.tl-session-card-action--view, a.tl-session-card-action--view:visited { background: var(--tl-color-surface); border-left: 1px solid var(--tl-color-border); color: var(--tl-color-text); } a.tl-session-card-action--view:hover, a.tl-session-card-action--view:focus { background: var(--tl-color-background); color: var(--tl-color-text); } /* ------------------------------------------------ Session Action Icons ------------------------------------------------ */ .tl-session-card-action::before { content: ""; display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 8px; background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .tl-session-card-action--update::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H4.5v-1.42l9.56-9.56 1.42 1.42-9.56 9.56ZM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H4.5v-1.42l9.56-9.56 1.42 1.42-9.56 9.56ZM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82Z'/%3E%3C/svg%3E"); } .tl-session-card-action--view::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E"); } /* ------------------------------------------------ Linked Card Interaction ------------------------------------------------ */ .tl-session-card-link:hover, .tl-session-card-link:focus-visible { background: var(--tl-color-background); } .tl-session-card-link:focus-visible { outline: 2px solid var(--tl-color-primary); outline-offset: -2px; } /* ------------------------------------------------ Empty State ------------------------------------------------ */ .tl-sessions-list .tl-list-empty { margin-top: 4px; } /* ------------------------------------------------ Larger Screens ------------------------------------------------ */ @media (min-width: 768px) { .tl-session-list { gap: 18px; } .tl-session-owner-activity { padding: 2px 0 12px; } .tl-session-card-body, .tl-session-card-link { grid-template-columns: 120px minmax(0, 1fr); min-height: 160px; } .tl-session-card-photo { width: 120px; min-width: 120px; } .tl-session-card-photo-image { min-height: 160px; } .tl-session-card-content { padding: 20px 22px; } .tl-session-card-dog { font-size: 1.125em; } .tl-session-card-title { font-size: 1em; } .tl-session-card-owners { font-size: .875em; } .tl-session-card-meta { font-size: .8125em; } .tl-session-card-action { min-height: 50px; font-size: .875em; } }