This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new 95b0e58 [YUNIKORN-2609] Improve visual style of the Web UI (#213)
95b0e58 is described below
commit 95b0e587f5e4f210321905a4702922282856da9e
Author: SP12893678 <[email protected]>
AuthorDate: Tue Oct 29 14:59:05 2024 -0500
[YUNIKORN-2609] Improve visual style of the Web UI (#213)
Closes: #213
Signed-off-by: Craig Condit <[email protected]>
---
angular.json | 1 +
src/app/app.component.html | 32 +++----
src/app/app.component.scss | 98 ++++++++++++----------
.../app-node-utilizations.component.html | 27 +++---
.../app-node-utilizations.component.scss | 13 ++-
.../app-status/app-status.component.html | 2 +-
.../app-status/app-status.component.scss | 3 +-
.../components/apps-view/apps-view.component.scss | 8 +-
.../container-status.component.html | 2 +-
.../container-status.component.scss | 5 +-
.../components/dashboard/dashboard.component.html | 16 ++--
.../components/dashboard/dashboard.component.scss | 9 +-
.../nodes-view/nodes-view.component.html | 3 +-
.../nodes-view/nodes-view.component.scss | 14 ++--
.../queues-view/queues-view.component.scss | 2 +-
src/assets/images/config.svg | 3 +
src/styles.scss | 18 +++-
17 files changed, 148 insertions(+), 108 deletions(-)
diff --git a/angular.json b/angular.json
index fd4c97b..da0bfdf 100644
--- a/angular.json
+++ b/angular.json
@@ -42,6 +42,7 @@
"styles": [
"src/styles.scss",
"node_modules/@fontsource/roboto/index.css",
+ "node_modules/@fontsource/roboto/500.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],
"scripts": [],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6b4c29a..41f2561 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -26,24 +26,21 @@
<ul class="navigation-primary">
<li routerLinkActive="active">
<a routerLink="/dashboard">
- <i class="fa fa-caret-right fa-2x"></i>
- <i class="fa fa-th-large"></i>
- <span>Dashboard</span>
+ <i class="fa fa-th-large text-center"></i>
+ <span *ngIf="isNavOpen">Dashboard</span>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="/queues">
- <i class="fa fa-caret-right"></i>
- <i class="fa fa-sitemap" style="width: 16px"></i>
- <span>Queues</span>
+ <i class="fa fa-sitemap text-center" style="width: 16px"></i>
+ <span *ngIf="isNavOpen">Queues</span>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="/queues-v2">
- <i class="fa fa-caret-right"></i>
<i class="fa fa-sitemap" style="width: 16px"></i>
- <span>Queues V2</span>
- <div class="beta-tag">
+ <span *ngIf="isNavOpen">Queues V2</span>
+ <div class="beta-tag text-center" *ngIf="isNavOpen">
<i class="fa fa-flask"></i>
Beta
</div>
@@ -51,23 +48,20 @@
</li>
<li routerLinkActive="active">
<a routerLink="/applications">
- <i class="fa fa-caret-right"></i>
- <i class="fa fa-indent"></i>
- <span>Applications</span>
+ <i class="fa fa-indent text-center"></i>
+ <span *ngIf="isNavOpen">Applications</span>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="/nodes">
- <i class="fa fa-caret-right"></i>
- <i class="fa fa-server"></i>
- <span>Nodes</span>
+ <i class="fa fa-server text-center"></i>
+ <span *ngIf="isNavOpen">Nodes</span>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="/status">
- <i class="fa fa-caret-right"></i>
- <i class="fa fa-thermometer-full"></i>
- <span>Status</span>
+ <i class="fa fa-thermometer-full text-center"></i>
+ <span *ngIf="isNavOpen">Status</span>
</a>
</li>
</ul>
@@ -93,7 +87,7 @@
matTooltipShowDelay="500"
[matMenuTriggerFor]="helpMenu"
>
- <i class="fa fa-question"></i>
+ <img src="../assets/images/config.svg">
</button>
<mat-menu #helpMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="openYuniKornHelp('/')">Apache
YuniKorn</button>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index d70ffde..eea16b5 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -25,20 +25,20 @@
color: #b8bec4;
font-size: 16px;
z-index: 1;
- -webkit-transition: width 0.8s ease;
- -moz-transition: width 0.8s ease;
- -o-transition: width 0.8s ease;
- transition: width 0.8s ease;
+ -webkit-transition: width 0.4s ease;
+ -moz-transition: width 0.4s ease;
+ -o-transition: width 0.4s ease;
+ transition: width 0.4s ease;
-webkit-font-smoothing: antialiased;
}
.navigation.open {
width: 250px;
font-size: 16px;
- -webkit-transition: width 0.8s ease;
- -moz-transition: width 0.8s ease;
- -o-transition: width 0.8s ease;
- transition: width 0.8s ease;
+ -webkit-transition: width 0.4s ease;
+ -moz-transition: width 0.4s ease;
+ -o-transition: width 0.4s ease;
+ transition: width 0.4s ease;
}
.navigation.open a > .fa {
@@ -47,19 +47,19 @@
.navigation + .wrapper {
margin-left: 50px;
- -webkit-transition: margin-left 0.8s ease;
- -moz-transition: margin-left 0.8s ease;
- -o-transition: margin-left 0.8s ease;
- transition: margin-left 0.8s ease;
+ -webkit-transition: margin-left 0.4s ease;
+ -moz-transition: margin-left 0.4s ease;
+ -o-transition: margin-left 0.4s ease;
+ transition: margin-left 0.4s ease;
-webkit-font-smoothing: antialiased;
}
.navigation.open + .wrapper {
margin-left: 250px;
- -webkit-transition: margin-left 0.8s ease;
- -moz-transition: margin-left 0.8s ease;
- -o-transition: margin-left 0.8s ease;
- transition: margin-left 0.8s ease;
+ -webkit-transition: margin-left 0.4s ease;
+ -moz-transition: margin-left 0.4s ease;
+ -o-transition: margin-left 0.4s ease;
+ transition: margin-left 0.4s ease;
-webkit-font-smoothing: antialiased;
}
@@ -70,10 +70,10 @@
background: #313d54;
height: 60px;
overflow: hidden;
- -webkit-transition: padding-left 0.8s ease, padding-top 0.8s ease;
- -moz-transition: padding-left 0.8s ease, padding-top 0.8s ease;
- -o-transition: padding-left 0.8s ease, padding-top 0.8s ease;
- transition: padding-left 0.8s ease, padding-top 0.8s ease;
+ -webkit-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+ -moz-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+ -o-transition: padding-left 0.4s ease, padding-top 0.4s ease;
+ transition: padding-left 0.4s ease, padding-top 0.4s ease;
-webkit-font-smoothing: antialiased;
}
@@ -89,10 +89,10 @@
.logo img {
float: left;
width: 38px;
- -webkit-transition: width 0.8s ease;
- -moz-transition: width 0.8s ease;
- -o-transition: width 0.8s ease;
- transition: width 0.8s ease;
+ -webkit-transition: width 0.4s ease;
+ -moz-transition: width 0.4s ease;
+ -o-transition: width 0.4s ease;
+ transition: width 0.4s ease;
-webkit-font-smoothing: antialiased;
}
@@ -131,7 +131,7 @@
}
.navigation .fa + span {
- margin-left: 20px;
+ margin-left: 16px;
flex: 1;
}
@@ -148,12 +148,22 @@ ul.navigation-primary {
}
.navigation > ul {
+ padding: 12px 5px;
margin-top: 10px;
+
&:first-of-type {
margin-top: 0;
}
}
+.navigation.open > ul {
+ padding: 12px;
+}
+
+.navigation li {
+ margin-bottom: 8px;
+}
+
.navigation li:hover > a {
color: #fff;
background: #4d5258;
@@ -161,26 +171,29 @@ ul.navigation-primary {
.navigation li a {
display: flex;
- padding: 15px;
+ padding: 12px;
white-space: nowrap;
color: inherit;
text-decoration: none;
color: #fff;
- -webkit-transition: padding 0.8s ease;
- -moz-transition: padding 0.8s ease;
- -o-transition: padding 0.8s ease;
- transition: padding 0.8s ease;
+ -webkit-transition: 0.4s ease;
+ -moz-transition: 0.4s ease;
+ -o-transition: 0.4s ease;
+ transition: 0.4s ease;
-webkit-font-smoothing: antialiased;
+ border-radius: 50%;
+ justify-content: center;
}
.navigation.open li a {
padding-left: 25px;
+ border-radius: 24px;
}
.navigation li.active > a,
.navigation li.active:hover > a {
color: #fff;
- background: #4d5258;
+ background: #4E5258;
}
.navigation li.active > a > .fa-caret-right {
@@ -216,7 +229,7 @@ ul.navigation-primary {
}
.container-fluid {
- padding-top: 61px;
+ padding-top: 58px;
}
// remove the beta tag when the feature is ready for production
@@ -227,7 +240,7 @@ ul.navigation-primary {
}
.header {
- height: 61px;
+ height: 58px;
background: #fff;
padding: 0 20px;
border-bottom: 1px solid #e3e3e3;
@@ -236,10 +249,10 @@ ul.navigation-primary {
right: 0;
top: 0;
z-index: 100;
- -webkit-transition: left 0.8s ease;
- -moz-transition: left 0.8s ease;
- -o-transition: left 0.8s ease;
- transition: left 0.8s ease;
+ -webkit-transition: left 0.4s ease;
+ -moz-transition: left 0.4s ease;
+ -o-transition: left 0.4s ease;
+ transition: left 0.4s ease;
}
.navigation.open + * .header {
@@ -255,19 +268,18 @@ ul.navigation-primary {
.help-menu > .menu-trigger {
background: transparent;
font-size: 14px;
- color: #666;
- border: 1px solid #666;
+ background: #ddd;
outline: none;
cursor: pointer;
&:hover {
- background: #666;
- color: #fff;
+ background: #ccc;
}
}
ul.breadcrumb {
font-size: 20px;
+ line-height: 26px;
display: flex;
list-style: none;
margin: 0;
@@ -276,8 +288,8 @@ ul.breadcrumb {
ul.breadcrumb > li {
margin-right: 5px;
- margin-top: 18px;
- margin-bottom: 20px;
+ margin-top: 16px;
+ margin-bottom: 16px;
}
ul.breadcrumb a {
diff --git
a/src/app/components/app-node-utilizations/app-node-utilizations.component.html
b/src/app/components/app-node-utilizations/app-node-utilizations.component.html
index 69f1f65..78022bd 100644
---
a/src/app/components/app-node-utilizations/app-node-utilizations.component.html
+++
b/src/app/components/app-node-utilizations/app-node-utilizations.component.html
@@ -15,16 +15,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-
-<mat-card appearance="outlined" class="box-card">
- <mat-card-header>
- <mat-card-title>Node Resource Utilization</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <div class="status-wrapper flex-grid">
- <div class="chart-wrapper flex-primary">
- <app-vertical-bar-chart [bucketList]="bucketList"
[barChartDataSets]="barChartDataSets" />
- </div>
- </div>
- </mat-card-content>
-</mat-card>
\ No newline at end of file
+<div class="app-node-utilizations">
+ <mat-card-title class="title">Node Resource Utilization</mat-card-title>
+ <div class="mat-elevation-z8">
+ <mat-card appearance="outlined" class="box-card">
+ <mat-card-content>
+ <div class="status-wrapper flex-grid">
+ <div class="chart-wrapper flex-primary">
+ <app-vertical-bar-chart [bucketList]="bucketList"
[barChartDataSets]="barChartDataSets" />
+ </div>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </div>
+</div>
\ No newline at end of file
diff --git
a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
index a3f036c..c802ee4 100644
---
a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
+++
b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
@@ -14,4 +14,15 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
- */
\ No newline at end of file
+ */
+
+ .app-node-utilizations {
+
+ .title {
+ margin-bottom: 28px;
+ }
+
+ .mat-mdc-card-content {
+ padding: 30px 30px;
+ }
+ }
\ No newline at end of file
diff --git a/src/app/components/app-status/app-status.component.html
b/src/app/components/app-status/app-status.component.html
index efe9e38..032eff3 100644
--- a/src/app/components/app-status/app-status.component.html
+++ b/src/app/components/app-status/app-status.component.html
@@ -20,7 +20,7 @@
<mat-card-header>
<mat-card-title>Application Status</mat-card-title>
</mat-card-header>
- <mat-card-content>
+ <mat-card-content class="thin-card-content">
<div class="status-wrapper flex-grid">
<div class="chart-wrapper flex-primary">
<app-donut-chart [data]="chartData"></app-donut-chart>
diff --git a/src/app/components/app-status/app-status.component.scss
b/src/app/components/app-status/app-status.component.scss
index 5f24275..e2229c6 100644
--- a/src/app/components/app-status/app-status.component.scss
+++ b/src/app/components/app-status/app-status.component.scss
@@ -18,6 +18,7 @@
.status-wrapper {
align-items: center;
+ gap: 8px;
height: 220px;
}
.chart-wrapper {
@@ -30,7 +31,7 @@
overflow: auto;
margin: 0 auto;
font-size: 0.8em;
- font-weight: bold;
+ font-weight: 500;
color: #666;
> div {
margin: 12px 0;
diff --git a/src/app/components/apps-view/apps-view.component.scss
b/src/app/components/apps-view/apps-view.component.scss
index 6482dad..67cd8e3 100644
--- a/src/app/components/apps-view/apps-view.component.scss
+++ b/src/app/components/apps-view/apps-view.component.scss
@@ -32,7 +32,7 @@
padding-right: 40px;
.dropdown-label {
color: #333;
- font-size: 1.2em;
+ font-size: 14px;
margin-right: 10px;
}
}
@@ -52,7 +52,7 @@
.btn{
display: block;
border: none;
- padding: 13px 24px;
+ padding: 5px 16px;
border-radius: 5px;
font-size: 24px;
transform: translateY(-13px);
@@ -125,7 +125,7 @@
.mat-mdc-header-cell {
font-size: 15px;
- font-weight: bold;
+ font-weight: 500;
color: #666;
}
.mat-mdc-cell {
@@ -186,7 +186,7 @@
}
.no-record {
font-size: 14px;
- font-weight: bold;
+ font-weight: 500;
color: #666;
width: 100%;
text-align: center;
diff --git
a/src/app/components/container-status/container-status.component.html
b/src/app/components/container-status/container-status.component.html
index abc9a60..f49723d 100644
--- a/src/app/components/container-status/container-status.component.html
+++ b/src/app/components/container-status/container-status.component.html
@@ -20,7 +20,7 @@
<mat-card-header>
<mat-card-title>Container Status</mat-card-title>
</mat-card-header>
- <mat-card-content>
+ <mat-card-content class="thin-card-content">
<div class="status-wrapper flex-grid">
<div class="chart-wrapper flex-primary">
<app-donut-chart [data]="chartData"></app-donut-chart>
diff --git
a/src/app/components/container-status/container-status.component.scss
b/src/app/components/container-status/container-status.component.scss
index c7a21c8..07ca78d 100644
--- a/src/app/components/container-status/container-status.component.scss
+++ b/src/app/components/container-status/container-status.component.scss
@@ -18,6 +18,7 @@
.status-wrapper {
align-items: center;
+ gap: 8px;
height: 220px;
}
.chart-wrapper {
@@ -27,7 +28,7 @@
max-width: 200px;
margin: 0 auto;
font-size: 0.8em;
- font-weight: bold;
+ font-weight: 500;
color: #666;
> div {
margin: 12px 0;
@@ -39,4 +40,4 @@
float: right;
padding-right: 20px;
}
-}
+}
\ No newline at end of file
diff --git a/src/app/components/dashboard/dashboard.component.html
b/src/app/components/dashboard/dashboard.component.html
index 7cc895f..2ea3792 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -17,33 +17,33 @@
-->
<mat-card appearance="outlined" *ngIf="clusterInfo">
- <div class="flex-grid">
+ <div class="flex-grid align-center">
<div class="flex-primary">
- <div class="text-uppercase light-text">Name</div>
+ <div class="info-label text-uppercase light-text">Name</div>
<div class="info-value strong-text">{{ clusterInfo.clusterName }}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">Status</div>
+ <div class="info-label text-uppercase light-text">Status</div>
<div class="info-value strong-text">{{ clusterInfo.clusterStatus }}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">Nodes</div>
+ <div class="info-label text-uppercase light-text">Nodes</div>
<div class="info-value strong-text">{{ totalNodes | titlecase }}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">NodeSort Policy</div>
+ <div class="info-label text-uppercase light-text">NodeSort Policy</div>
<div class="info-value strong-text">{{ nodeSortPolicy | titlecase
}}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">Applications</div>
+ <div class="info-label text-uppercase light-text">Applications</div>
<div class="info-value strong-text">{{ totalApplications | titlecase
}}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">Containers</div>
+ <div class="info-label text-uppercase light-text">Containers</div>
<div class="info-value strong-text">{{ totalContainers | titlecase
}}</div>
</div>
<div class="flex-primary">
- <div class="text-uppercase light-text">Partition</div>
+ <div class="info-label text-uppercase light-text">Partition</div>
<div class="info-value strong-text">{{ partitionName | titlecase }}</div>
</div>
<div class="info-card">
diff --git a/src/app/components/dashboard/dashboard.component.scss
b/src/app/components/dashboard/dashboard.component.scss
index eb4f1cf..2f10123 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -21,9 +21,14 @@
margin-bottom: 20px;
}
+.info-label {
+ font-size: 14px;
+ line-height: 19px;
+}
+
.info-value {
- margin-top: 6px;
- font-size: 1.4em;
+ font-size: 18px;
+ line-height: 24px;
}
.cluster-info {
diff --git a/src/app/components/nodes-view/nodes-view.component.html
b/src/app/components/nodes-view/nodes-view.component.html
index 013104e..b4b1b89 100644
--- a/src/app/components/nodes-view/nodes-view.component.html
+++ b/src/app/components/nodes-view/nodes-view.component.html
@@ -34,8 +34,7 @@
<div class="right-wrapper">
<div class="filter">
<mat-form-field>
- <mat-label>Filter</mat-label>
- <input matInput (keyup)="applyFilter($event)" placeholder="Ex. amd64"
#input>
+ <input matInput (keyup)="applyFilter($event)" placeholder="Filter"
#input>
</mat-form-field>
</div>
diff --git a/src/app/components/nodes-view/nodes-view.component.scss
b/src/app/components/nodes-view/nodes-view.component.scss
index dea1fce..85b7f62 100644
--- a/src/app/components/nodes-view/nodes-view.component.scss
+++ b/src/app/components/nodes-view/nodes-view.component.scss
@@ -25,7 +25,7 @@
padding-right: 40px;
.part-label {
color: #333;
- font-size: 1.2em;
+ font-size: 14px;
margin-right: 10px;
}
}
@@ -53,7 +53,7 @@
.btn{
display: block;
border: none;
- padding: 13px 24px;
+ padding: 5px 16px;
border-radius: 5px;
font-size: 24px;
transform: translateY(-13px);
@@ -71,7 +71,7 @@
height: 100%;
.mat-mdc-header-cell {
font-size: 15px;
- font-weight: bold;
+ font-weight: 500;
color: #666;
}
.mat-mdc-cell {
@@ -124,7 +124,9 @@
.mat-mdc-cell.indicator-icon {
max-width: 40px;
font-size: 18px;
- margin-left: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.node-allocations {
margin-top: 20px;
@@ -134,7 +136,7 @@
}
.no-record {
font-size: 14px;
- font-weight: bold;
+ font-weight: 500;
color: #666;
width: 100%;
text-align: center;
@@ -142,5 +144,5 @@
}
.node-utilizations-view {
- margin-top: 20px
+ margin-top: 80px
}
diff --git a/src/app/components/queues-view/queues-view.component.scss
b/src/app/components/queues-view/queues-view.component.scss
index a2941e5..9e982b6 100644
--- a/src/app/components/queues-view/queues-view.component.scss
+++ b/src/app/components/queues-view/queues-view.component.scss
@@ -18,7 +18,7 @@
.part-label {
color: #333;
- font-size: 1.2em;
+ font-size: 14px;
margin-right: 10px;
}
.queues-view {
diff --git a/src/assets/images/config.svg b/src/assets/images/config.svg
new file mode 100644
index 0000000..ead8285
--- /dev/null
+++ b/src/assets/images/config.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="22.969" height="22.855"
viewBox="0 0 22.969 22.855">
+ <path id="settings_FILL0_wght400_GRAD0_opsz24"
d="M86.342-857.145l-.457-3.657a4.333,4.333,0,0,1-.7-.343q-.329-.2-.643-.429l-3.4,1.428L78-865.573l2.943-2.228a2.727,2.727,0,0,1-.029-.386v-.771a2.728,2.728,0,0,1,.029-.386L78-871.572,81.143-877l3.4,1.428A7.787,7.787,0,0,1,85.2-876a5.764,5.764,0,0,1,.686-.343L86.342-880h6.285l.457,3.657a4.343,4.343,0,0,1,.7.343q.329.2.643.429l3.4-1.428,3.143,5.428-2.943,2.228a2.728,2.728,0,0,1,.029.386v.771A1.4,1.4,0,0,1,98-867.8l2.943,2.228L97.8-860.145l-3
[...]
+</svg>
diff --git a/src/styles.scss b/src/styles.scss
index 1e5bcea..8dfc8b1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -15,6 +15,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@use '@angular/material' as mat;
+
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
* {
@@ -26,6 +28,7 @@
}
body {
+ @include mat.form-field-density(-4);
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #666;
@@ -102,6 +105,10 @@ p {
display: flex;
}
+.align-center {
+ align-items: center;
+}
+
.flex-primary {
flex-grow: 1;
}
@@ -113,15 +120,18 @@ p {
color: #666;
background-color: #f7f7f7;
border-bottom: 1px solid #d5d5d5;
- padding: 15px 10px;
+ padding: 20px;
}
.mat-mdc-card-title {
- margin-left: -5px;
- font-weight: bold;
+ font-size: 18px;
+ line-height: 24px;
margin-bottom: 0 !important;
}
.mat-mdc-card-content {
- padding: 10px;
+ padding: 60px 50px;
+ }
+ .thin-card-content {
+ padding: 60px 16px;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
