tor-browser

link-preview-card.css (6347B)

---

/**
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

.og-card {
 font: menu;
 --og-main-font-size: 15px;
 background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 font-size: 13px;
}

.og-card-img {
 border-radius: var(--border-radius-small);
 height: 100px;
 object-fit: cover;
 width: 100%;
}

.og-card-content {
 background-color: var(--panel-background);
 border-bottom: 1px solid var(--panel-border-color);
 color: var(--text-color-deemphasized);
 display: flex;
 flex-direction: column;
 gap: var(--space-large);
 padding: var(--og-padding);
}

.og-card-title {
 color: var(--panel-color);
 font-size: var(--og-main-font-size);
 font-weight: var(--heading-font-weight);
 margin: 0;
 overflow: hidden;
 -webkit-line-clamp: 3;
}

.og-card-description {
 color: var(--panel-color);
 font-size: var(--og-main-font-size);
 margin: 0;
 overflow: hidden;
 -webkit-line-clamp: 3;
}

.og-error-message {
 font-size: var(--og-main-font-size);
 margin-block: 0 var(--space-medium);
}

.ai-content {
 position: relative;
 padding: var(--og-padding);

 .og-error-message-container {
   font-size: var(--og-main-font-size);
   margin: 0;

   .og-error-message {
     color: var(--text-color-deemphasized);
   }

   a {
     color: var(--text-color-deemphasized);
   }
 }

 .keypoints-header {
   display: flex;
   font-size: var(--og-main-font-size);
   font-weight: var(--heading-font-weight);
   gap: var(--space-xs);
   margin: 0;
   user-select: none;
 }
 .keypoints-header::before {
   content: "";
   background-image: url("chrome://global/skin/icons/arrow-down.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   display: inline-block;
   fill: currentColor;
   height: var(--icon-size);
   margin-inline-end: var(--space-small);
   -moz-context-properties: fill;
   transform: rotateZ(0deg);
   width: var(--icon-size);
 }

 @media (prefers-reduced-motion: no-preference) {
   .keypoints-header::before {
     transition: transform 0.3s ease;
   }
 }

 .keypoints-header:has(+ .keypoints-content:not(.hidden))::before {
   transform: rotateZ(-180deg);
 }

 &:dir(rtl) .keypoints-header:has(+ .keypoints-content:not(.hidden))::before {
   transform: rotateZ(180deg);
 }

 img.icon {
   fill: currentColor;
   height: var(--icon-size);
   margin-inline-start: var(--space-xlarge);
   -moz-context-properties: fill;
   pointer-events: none;
   width: var(--icon-size);
 }

 .keypoints-content {
   max-height: 1000px;
   overflow: hidden;
   padding-inline-start: 0.05rem; /*  custom adjustment to align with chevron icon */
   transition: max-height 0.3s ease;

   &.hidden {
     max-height: 0;
     overflow: hidden;
   }

   > ul {
     font-size: var(--og-main-font-size);
     line-height: 1.15; /* Design requires 18px line-height */
     list-style-type: square;
     padding-inline: var(--space-xlarge) var(--space-xsmall);
   }

   li {
     margin-block: var(--space-medium);
     padding-inline-start: 5px;
     &::marker {
       color: var(--border-color-deemphasized);
     }
   }

   .visit-link-container {
     align-items: center;
     display: flex;
     justify-content: flex-end;
     margin-top: var(--space-xlarge);

     .visit-link {
       align-items: center;
       display: flex;
       font-size: var(--og-main-font-size);
       font-weight: var(--font-weight-semibold);
       gap: var(--space-xs);
     }

     .visit-link::after {
       content: "";
       background-image: url("chrome://browser/skin/forward.svg");
       background-position: center;
       background-repeat: no-repeat;
       background-size: contain;
       display: inline-block;
       fill: currentColor;
       height: 16px;
       margin-inline-start: 8px;
       -moz-context-properties: fill;
       width: 16px;
     }

     &:dir(rtl) .visit-link::after {
       transform: scaleX(-1);
     }
   }

   > hr {
     border-color: var(--border-color-card);
     margin-block: var(--space-xlarge);
   }

   > p {
     margin-block: var(--space-medium) 0;
   }
 }
}

/**
* Defines the animation for the loading state of link preview keypoints
* Creates a smooth gradient animation that moves from right to left
* to indicate content is being loaded
*/
@keyframes link-preview-keypoints-loading {
 0% {
   background-position: 200% 0;
 }
 100% {
   background-position: -200% 0;
 }
}

.keypoints-list {
 .content-item {
   margin-bottom: var(--space-xlarge);
   width: 100%;

   &.loading {
     div {
       --skeleton-loader-background-color: var(--tab-group-suggestions-loading-animation-color-1);
       --skeleton-loader-motion-element-color: var(--tab-group-suggestions-loading-animation-color-2);
       animation: link-preview-keypoints-loading 3s infinite;
       background: linear-gradient(
         100deg,
         var(--skeleton-loader-background-color) 30%,
         var(--skeleton-loader-motion-element-color) 50%,
         var(--skeleton-loader-background-color) 70%
       );
       background-size: 200% 100%;
       border-radius: 5px;
       height: var(--og-main-font-size);
       margin-bottom: 4px;
       width: 100%;
       /* Add non-impactful references to the CSS variables to satisfy the test browser_parsable_css */
       outline-color: var(--skeleton-loader-background-color);
       border-color: var(--skeleton-loader-motion-element-color);
     }

     &.static div {
       animation: none;
       background: var(--skeleton-loader-background-color);
     }

     div:nth-of-type(1) {
       max-width: 95%;
     }

     div:nth-of-type(2) {
       max-width: 98%;
     }

     div:nth-of-type(3) {
       max-width: 90%;
     }
   }
 }
}

.reading-time-settings-container {
 align-items: center;
 display: flex;
 justify-content: space-between;
}

model-optin {
 --font-size-xxlarge: var(--og-main-font-size);
 --optin-wrapper-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
 inset-inline: 0;
 margin-inline: auto;
 position: absolute;
 top: 60px;
 width: 75%;
 z-index: 10;
}