overleaf/services/web/frontend/stylesheets/app/plans/plans.less
M Fahru 920e86e4d0 Merge pull request #17303 from overleaf/mf-fix-plans-page-mobile
[web] Fix plans page table styling on both desktop and mobile

GitOrigin-RevId: 252bbaf7245751b1cfe07286a0fe19069219bb5b
2024-03-04 09:04:08 +00:00

225 lines
3.7 KiB
Text

.plans {
p {
color: @gray-dark;
margin-bottom: @line-height-computed;
}
blockquote {
footer {
/* accessibility fix */
color: @gray-med;
}
}
.card .btn {
white-space: normal;
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn {
white-space: normal;
}
.circle {
font-size: 1.5rem;
font-weight: 700;
padding: 46px 18px;
margin: 0 auto @line-height-computed;
text-shadow: 0 -1px 1px darken(@link-color, 10%);
width: 120px;
height: 120px;
border-radius: 50%;
background-color: @brand-secondary;
color: white;
white-space: nowrap;
line-height: 1;
.small {
color: rgba(255, 255, 255, 0.85);
font-size: @font-size-base * 0.8;
}
.undiscounted-price {
display: block;
margin-top: -48px;
}
}
.circle-lg {
height: 180px;
padding: 70px 8px;
width: 180px;
}
.circle-subtext {
font-size: 1rem;
}
.circle-img {
float: right;
}
.faq {
p {
margin: 0;
}
}
.header-with-btn {
line-height: 1.6;
}
.plans-header {
h1,
h2,
p {
text-shadow: 0 -1px 1px white;
}
h1,
h2 {
color: @red;
}
p {
margin-bottom: 0;
}
}
.plans-subheader {
margin-bottom: @line-height-computed;
}
.tagline {
margin-bottom: 20px;
}
}
/**
Plans Test
*/
@best-val-height: 35px;
@border-width-base: 3px;
@gray-med: #6d6d6d;
/* Media Queries */
@media (max-width: @screen-sm-max) {
.plans {
.circle-img {
float: left;
margin: 0 15px;
}
}
}
@media (min-width: @screen-md-min) {
.plans {
blockquote {
margin-bottom: 0;
}
.faq {
.row:nth-child(2) {
h3 {
margin-top: 0;
}
}
}
}
}
.student-disclaimer {
font-size: 14px; /* match .paymentPageFeatures p */
color: @gray; /* match .paymentPageFeatures p */
margin: 12.5px 0 0 0;
}
.group-subscription-modal {
.modal-header {
text-align: center;
}
.group-plan-option {
display: block;
span {
padding-left: 5px;
font-weight: normal;
}
}
.educational-discount-badge {
height: 50px;
padding-top: 25px;
p {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
font-size: @font-size-small;
}
.applied {
background-color: rgba(@ol-dark-green, 0.1);
color: @ol-dark-green;
}
.ineligible {
background-color: @ol-blue-gray-0;
color: @ol-blue-gray-4;
}
}
}
/**
Subscription Dash
*/
#change-plan {
.modal-dialog {
&:extend(.modal-lg);
}
table {
@media only screen and (min-width: @screen-md-min) {
th:last-child,
td:last-child {
width: 1%; // will expand to fit the content
text-align: center;
}
}
@media only screen and (max-width: @screen-sm-max) {
display: block;
thead {
display: none;
}
tbody,
td,
tr {
display: inline-block;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
}
td:first-child {
padding-top: @padding-md;
}
td:last-child {
padding-top: @padding-sm;
padding-bottom: @padding-md;
}
tr:first-child {
td:first-child {
padding-top: @padding-sm;
}
}
tr {
border-bottom: 1px solid @table-border-color;
td,
th {
border: 0 !important;
}
}
tr:last-child {
border-bottom: 0;
}
}
}
}