mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-20 01:53:47 +00:00
Merge pull request #17479 from overleaf/mf-clean-up-plans-styling
[web] Clean up plans page styling GitOrigin-RevId: fe05e9a1fd6c29c62941c878fe5e676d062c37de
This commit is contained in:
M Fahru
Copybot
parent
fe1417ffe9
commit
ec1ab82789
10 changed files with 176 additions and 247 deletions
|
|
@ -42,14 +42,14 @@ block content
|
|||
|
||||
.row.row-spaced-large
|
||||
.col-md-12
|
||||
.plans-header.plans-subheader.text-centered
|
||||
.plans-header.text-centered
|
||||
hr
|
||||
h2.header-with-btn #{translate('still_have_questions')}
|
||||
h2 #{translate('still_have_questions')}
|
||||
button.btn.plans-v2-btn-header.text-capitalize(
|
||||
data-ol-open-contact-form-modal="general"
|
||||
) #{translate('contact_us')}
|
||||
|
||||
.row.row-spaced
|
||||
.row.row-spaced-large
|
||||
|
||||
include ./plans/_group_plan_modal
|
||||
!= moduleIncludes("contactModalGeneral-marketing", locals)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.faq.plans-v2-faq
|
||||
.plans-v2-faq
|
||||
.row.row-spaced-large
|
||||
.col-md-12
|
||||
.page-header.plans-header.plans-subheader.text-centered
|
||||
.page-header.plans-header.text-centered
|
||||
h2 FAQ
|
||||
.row
|
||||
.col-md-12
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.row.row-spaced-large
|
||||
.col-md-12
|
||||
.page-header.plans-header.plans-subheader.text-centered
|
||||
.page-header.plans-header.text-centered
|
||||
h2 #{translate('in_good_company')}
|
||||
.row
|
||||
.col-md-6
|
||||
|
|
|
|||
59
services/web/frontend/stylesheets/app/change-plan-modal.less
Normal file
59
services/web/frontend/stylesheets/app/change-plan-modal.less
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.plans {
|
||||
blockquote {
|
||||
footer {
|
||||
/* accessibility fix */
|
||||
color: @ol-blue-gray-3;
|
||||
}
|
||||
}
|
||||
.plans-header {
|
||||
h1,
|
||||
h2 {
|
||||
color: @gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,68 @@
|
|||
@plans-v2-table-td-mobile-min-height: 34px;
|
||||
|
||||
.plans {
|
||||
p {
|
||||
color: @neutral-70;
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
footer {
|
||||
/* accessibility fix */
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plans-header {
|
||||
h1,
|
||||
h2 {
|
||||
color: @neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-lg {
|
||||
height: 180px;
|
||||
padding: 70px 8px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.circle-subtext {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
float: right;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
[data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] {
|
||||
display: none;
|
||||
|
|
@ -1181,6 +1243,10 @@ p.plans-v2-table-green-highlighted-text {
|
|||
}
|
||||
|
||||
.plans-v2-faq {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// need for specificity to override default a color
|
||||
p > a {
|
||||
color: @ol-blue;
|
||||
|
|
|
|||
|
|
@ -1,225 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,6 +101,12 @@
|
|||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.student-disclaimer {
|
||||
font-size: 14px;
|
||||
color: @gray;
|
||||
margin: 12.5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.price-feature-description {
|
||||
|
|
|
|||
|
|
@ -104,8 +104,6 @@
|
|||
@import 'app/project-list-react.less';
|
||||
@import 'app/editor.less';
|
||||
@import 'app/homepage.less';
|
||||
@import 'app/plans/plans.less';
|
||||
@import 'app/plans/plans-ol.less';
|
||||
@import 'app/plans/plans-v2.less';
|
||||
@import 'app/recurly.less';
|
||||
@import 'app/bonus.less';
|
||||
|
|
@ -117,6 +115,8 @@
|
|||
@import 'app/translations.less';
|
||||
@import 'app/contact-us.less';
|
||||
@import 'app/subscription.less';
|
||||
@import 'app/change-plan-modal.less';
|
||||
@import 'app/group-subscription-modal.less';
|
||||
@import 'app/invite.less';
|
||||
@import 'app/error-pages.less';
|
||||
@import 'app/editor/history-v2.less';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue