Merge pull request #12082 from overleaf/mf-jel-card-style-cms

Add new card style for CMS pages

GitOrigin-RevId: e664d185452e64702c23e2a09f3db6e950035cbe

services/web/frontend/stylesheets/components/card.less

@@ -1,7 +1,7 @@
 .card {
   background-color: white;
   border-radius: @border-radius-base;
-  box-shadow: @card-box-shadow;
+  box-shadow: none;
   padding: @line-height-computed;
   .page-header {
     margin: 0 0 1.5625rem;
@@ -30,6 +30,16 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  &.card-drop-shadow {
+    box-shadow: @card-box-shadow;
+    background-color: white;
+
+    > hr {
+      margin-left: -@line-height-computed;
+      margin-right: -@line-height-computed;
+    }
+  }
 }
 
 .card-thin {

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -102,8 +102,6 @@
 @navbar-subdued-hover-bg: @ol-blue-gray-1;
 @navbar-subdued-hover-color: @ol-blue-gray-3;
 
-@card-box-shadow: 0 0 0 1px @ol-blue-gray-1;
-
 // v2 History
 @history-toolbar-color: @ol-blue-gray-3;
 @history-base-bg: @ol-blue-gray-0;

services/web/frontend/stylesheets/core/variables.less

@@ -933,8 +933,9 @@
 @btn-border-bottom-width: 0;
 
 // Cards
-@card-box-shadow: none;
 @card-border-radius: @border-radius-base-new;
+@card-box-shadow: 0px 4px 12px rgba(30, 37, 48, 0.12),
+  0px 2px 4px rgba(30, 37, 48, 0.08);
 
 // Project table
 @structured-list-link-color: @ol-blue;

services/web/frontend/stylesheets/variables/all.less

@@ -721,8 +721,9 @@
 @btn-secondary-hover-bg-color: @neutral-20;
 
 // Cards
-@card-box-shadow: none;
 @card-border-radius: @border-radius-base-new;
+@card-box-shadow: 0px 4px 12px rgba(30, 37, 48, 0.12),
+  0px 2px 4px rgba(30, 37, 48, 0.08);
 
 // Project table
 @structured-list-link-color: @blue;

services/web/frontend/stylesheets/variables/themes/light.less

@@ -90,8 +90,6 @@
 @navbar-subdued-hover-bg: @neutral-20;
 @navbar-subdued-hover-color: @neutral-70;
 
-@card-box-shadow: 0 0 0 1px @neutral-20;
-
 // v2 History
 @history-toolbar-color: @neutral-70;
 @history-base-bg: @neutral-10;