mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 08:17:28 -05:00
c27dc70c80
[web] Use grid layout for template details GitOrigin-RevId: 1f15dfcd9bc04bec5bd7e0b6a7b1230966def997
430 lines
7.3 KiB
SCSS
430 lines
7.3 KiB
SCSS
.gallery.gallery-tagged {
|
|
.gallery-title {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.gallery-summary {
|
|
text-align: left;
|
|
max-width: 828px;
|
|
}
|
|
|
|
.gallery-filters {
|
|
@include media-breakpoint-down(lg) {
|
|
margin-top: var(--spacing-06);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.gallery {
|
|
margin-top: var(--spacing-10);
|
|
|
|
.gallery-tagged-tags-container-spacing {
|
|
padding: 0 var(--spacing-09);
|
|
margin-bottom: var(--spacing-16);
|
|
|
|
h2 {
|
|
margin-bottom: var(--spacing-09);
|
|
}
|
|
}
|
|
|
|
.gallery-filters {
|
|
float: right;
|
|
margin-bottom: var(--spacing-11);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-04);
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
float: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:visited {
|
|
color: var(--green-50);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--green-60);
|
|
}
|
|
|
|
&.active {
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gallery-header {
|
|
margin-bottom: var(--spacing-09);
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
max-width: $templates-search-max-width;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.gallery-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--spacing-06);
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-summary {
|
|
@include body-lg;
|
|
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tagged-header-container {
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
.top-picks-banner {
|
|
padding: 0;
|
|
margin: 0 auto var(--spacing-16) auto;
|
|
|
|
h2 {
|
|
@include heading-xl;
|
|
}
|
|
|
|
.doc-rows-container {
|
|
margin-top: var(--spacing-09);
|
|
}
|
|
}
|
|
|
|
.recent-templates-container {
|
|
padding: 0 var(--spacing-09);
|
|
margin-bottom: var(--spacing-16);
|
|
|
|
h2 {
|
|
margin-bottom: var(--spacing-09);
|
|
|
|
@include heading-xl;
|
|
}
|
|
}
|
|
|
|
.no-articles-matching {
|
|
color: var(--neutral-90);
|
|
font-weight: 600;
|
|
|
|
@include heading-lg;
|
|
}
|
|
|
|
.template-summary {
|
|
margin-top: var(--spacing-02);
|
|
margin-bottom: var(--spacing-09);
|
|
|
|
@include body-lg;
|
|
}
|
|
|
|
@mixin line-clamp {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popular-tags-list,
|
|
.gallery-container {
|
|
--bs-gutter-x: var(--spacing-09);
|
|
|
|
row-gap: var(--spacing-11);
|
|
}
|
|
|
|
.gallery-container {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.gallery-thumbnail {
|
|
a {
|
|
@extend .link-black-text;
|
|
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
.thumbnail,
|
|
.thumbnail-tag {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
background: var(--neutral-90);
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: opacity 0.15s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.thumbnail-tag {
|
|
&::before {
|
|
border-radius: var(--border-radius-medium);
|
|
}
|
|
}
|
|
|
|
.thumbnail {
|
|
&::before {
|
|
border-radius: var(--border-radius-base);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.thumbnail,
|
|
.thumbnail-tag {
|
|
&::before {
|
|
transition: opacity 0.15s ease-in-out;
|
|
opacity: 0.08;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.thumbnail,
|
|
.thumbnail-tag {
|
|
margin: 0 0 var(--spacing-08) 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.thumbnail {
|
|
img {
|
|
@include shadow-lg;
|
|
|
|
border-radius: var(--border-radius-base);
|
|
}
|
|
}
|
|
|
|
.caption {
|
|
// Override Server Pro template styles
|
|
background: none;
|
|
border: none;
|
|
margin-top: var(--spacing-04);
|
|
}
|
|
|
|
.caption-description {
|
|
color: var(--neutral-70);
|
|
margin-bottom: 0;
|
|
|
|
@include line-clamp;
|
|
}
|
|
|
|
.author-name {
|
|
margin-top: var(--spacing-04);
|
|
color: var(--neutral-70);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.gallery-list-item-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-04);
|
|
|
|
.badge-container {
|
|
display: inline-block;
|
|
text-wrap: nowrap;
|
|
|
|
.badge:not(:first-child) {
|
|
margin-left: var(--spacing-04);
|
|
}
|
|
}
|
|
|
|
* {
|
|
flex-basis: content;
|
|
cursor: inherit;
|
|
}
|
|
}
|
|
|
|
.caption-title {
|
|
color: var(--neutral-90);
|
|
font-weight: 600;
|
|
|
|
@include heading-md;
|
|
@include line-clamp;
|
|
}
|
|
}
|
|
|
|
.related-tags-top-spacing {
|
|
margin-top: var(--spacing-16);
|
|
}
|
|
|
|
.gallery-tagged-template-tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-05);
|
|
|
|
.badge-content {
|
|
padding-left: var(--spacing-02);
|
|
padding-right: var(--spacing-02);
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: var(--spacing-13);
|
|
}
|
|
|
|
.popular-tags {
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-16);
|
|
|
|
a {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.popular-tags,
|
|
.recent-docs,
|
|
.featured-docs {
|
|
h2 {
|
|
margin-bottom: var(--spacing-09);
|
|
}
|
|
}
|
|
|
|
.recent-docs + .featured-docs {
|
|
margin-top: var(--spacing-16);
|
|
}
|
|
|
|
.gallery-item-title {
|
|
display: inline-flex;
|
|
gap: var(--spacing-06);
|
|
|
|
h1 {
|
|
margin: unset;
|
|
}
|
|
|
|
.gallery-item-title-badge-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--spacing-04);
|
|
|
|
.badge-content {
|
|
font-size: var(--font-size-02);
|
|
line-height: var(--line-height-02);
|
|
}
|
|
}
|
|
}
|
|
|
|
.template-details-container {
|
|
@include heading-xs;
|
|
|
|
gap: var(--spacing-04) var(--spacing-11);
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
|
|
.template-detail {
|
|
display: contents;
|
|
|
|
&.tags > div {
|
|
margin-top: var(--spacing-06);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gallery-abstract {
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
|
|
a {
|
|
hyphens: none;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.cta-links-container {
|
|
margin-top: var(--spacing-09);
|
|
margin-bottom: var(--spacing-09);
|
|
|
|
.cta-links {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-06);
|
|
|
|
.btn {
|
|
margin: 0; // gap will handle spacing
|
|
}
|
|
}
|
|
}
|
|
|
|
.gallery-large-pdf-preview {
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
@include shadow-md;
|
|
}
|
|
|
|
.related-tags-header {
|
|
margin-top: var(--spacing-16);
|
|
}
|
|
|
|
.related-tags {
|
|
margin-top: var(--spacing-09);
|
|
max-height: 61px;
|
|
overflow: hidden;
|
|
|
|
&.all-tags {
|
|
max-height: none;
|
|
|
|
// min-height prevents elements below the tags from moving upwards
|
|
// when Show More is clicked
|
|
min-height: 102px;
|
|
}
|
|
|
|
.badge-link {
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
|
|
.show-more-tags {
|
|
margin-top: var(--spacing-06);
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.template-item-left-section {
|
|
padding-right: var(--spacing-10);
|
|
}
|
|
|
|
.template-item-right-section {
|
|
padding-left: var(--spacing-10);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
.template-item-left-section {
|
|
.badge-link-list {
|
|
margin-top: var(--spacing-04);
|
|
}
|
|
}
|
|
|
|
.template-item-right-section {
|
|
margin-top: var(--spacing-11);
|
|
}
|
|
}
|
|
}
|