frame.css in appscms-tools-theme-2.7.2

- old
+ new

@@ -1,17 +1,19 @@
 body {
-  font-family: "Dancing Script", cursive;
+  font-family: "PT Sans", sans-serif !important;
 }
+
 :root {
   --dark: #374151;
   --darker: #1f2937;
   --darkest: #111827;
   --gray: #6b7280;
   --light: #eee;
   --pink: #ec4899;
   --purple: #8b5cf6;
 }
+
 #img-svg {
   margin: auto;
   margin-top: 16px;
   height: 67px;
   width: 98px;
@@ -118,30 +120,34 @@
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 #dropfile {
   font-size: 16px;
   margin-top: 15px;
   text-align: center;
   color: #fff;
 }
+
 .saving-file-download-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 #download {
   padding: 10px 16px;
   background: #fff;
 }
 
 .trust-img {
   height: 80px;
   width: 80px;
 }
+
 .options-panel select,
 textarea,
 input {
   width: 100%;
   text-align: left;
@@ -153,13 +159,15 @@
   justify-content: space-between;
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
   color: #0f0c0c;
   border: 1px solid #ccc;
 }
+
 .options-panel div {
   width: 100%;
 }
+
 #action-button {
   background-color: #ff6537;
   margin: 0;
   width: 180px;
   padding: 10px 0;
@@ -171,20 +179,23 @@
   font-weight: 600;
   display: block;
   margin: auto;
   margin-top: 20px;
 }
+
 #workspace-area input[type="text"] {
   height: 40px;
   border: 1px solid gray;
   border-radius: 2px;
 }
+
 #canvas-area {
   width: 100%;
   margin-top: 30px;
   max-width: 100%;
 }
+
 #img-svg {
   margin: auto;
   margin-top: 16px;
   height: 67px;
   width: 98px;
@@ -299,70 +310,80 @@
   background: rgba(0, 0, 0, 0.1);
   padding: 40px;
   min-height: 300px;
   width: 100%;
 }
+
 #dropfile {
   font-size: 16px;
   margin-top: 15px;
   text-align: center;
   color: #fff;
 }
+
 .options-panel {
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   border-radius: 4px;
   padding: 30px;
   width: 100%;
 }
+
 .options-panel .title {
   width: 100%;
   font-size: 28px;
   line-height: 36px;
   color: #000;
   font-weight: 700;
   text-align: left;
   text-transform: capitalize;
 }
+
 .options-panel .description {
   width: 100%;
   font-size: 17px;
   color: #666;
   font-weight: 400;
   text-align: left;
 }
+
 .options-title {
   width: 100%;
   font-size: 17px;
   color: #666;
   font-weight: 400;
   text-align: left;
 }
+
 #download-button {
   text-decoration: none;
   border-radius: 2px;
   border: 1px solid linear-gradient(to right, var(--pink), var(--purple));
   box-shadow: 0;
   color: #fff;
   margin: 3px;
   padding: 4px 15px;
 }
+
 #download-button svg {
   fill: #fff;
   margin-right: 4px;
   margin-bottom: 4px;
   height: 15px;
 }
+
 .download-wrapper {
   display: flex;
   align-items: center;
   border-bottom: 1px solid #ddd;
   margin: 12px 0px;
   padding: 12px 0px;
 }
+
 #canvas-panel canvas {
   max-width: 100%;
 }
+
 .example-images-modal-container,
 .crop-image-modal-container {
   position: fixed;
   display: none;
   justify-content: center;
@@ -372,20 +393,22 @@
   top: 0;
   left: 0;
   z-index: 999999;
   padding: 0px 20px;
 }
+
 .example-images-modal,
 .crop-image-modal {
   height: fit-content;
   background-color: #fff;
   width: 100%;
   margin-top: 10px;
   border-radius: 5px;
   padding: 0;
   overflow-y: auto;
 }
+
 .example-images-modal-header,
 .crop-image-modal-header {
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
   display: flex;
@@ -393,126 +416,145 @@
   background: linear-gradient(to right, var(--pink), var(--purple));
   display: flex;
   align-items: center;
   padding: 10px 20px;
 }
+
 .example-images-modal-header div,
 .crop-image-modal-header div {
   height: 100%;
   display: flex;
   align-items: center;
   font-size: 20px;
   color: #fff;
 }
+
 .example-images-modal-body,
 .crop-image-modal-body {
   width: 450px;
   margin: 10px auto;
 }
+
 .example-images-modal-header button,
 .crop-image-modal-header button {
   border: none;
   background-color: transparent;
 }
+
 .example-images-modal-header button i,
 .crop-image-modal-header button i {
   color: #fff;
   font-size: 20px;
 }
+
 .example-images-modal-body,
 .crop-image-modal-body {
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
 }
+
 #crop {
   border: none;
   padding: 7px 14px;
   color: #fff;
 }
+
 .carousel-control-next,
 .carousel-control-prev {
   border: none;
   background: none;
   height: 40px;
   background: #ff5554;
   top: 50%;
 }
-.accordion > .card > .card-header {
+
+.accordion>.card>.card-header {
   background: none;
   border: none;
   height: 34px;
   padding: 0;
 }
 
-.accordion > .card {
+.accordion>.card {
   border: none;
   border-bottom: 1px solid #f2f2f2 !important;
   display: block;
 
   color: #444;
   text-decoration: none;
   font-size: 0.95em;
   border-radius: 1px;
 }
+
 .card-header:hover {
   background: #f8f8f8 !important;
 }
+
 .categories-list .card-body {
   padding: 0px;
 }
+
 .categories-list .card-body a {
   width: 100%;
   text-align: left;
   display: block;
   border-top: 1px solid #dadada;
   padding: 9px 9px;
 }
-.categories-list .accordion > .card > .card-header {
+
+.categories-list .accordion>.card>.card-header {
   display: flex;
   justify-content: space-between;
   background-color: transparent;
   padding: 7px 9px;
 }
-.categories-list .accordion > .card > .card-header i {
+
+.categories-list .accordion>.card>.card-header i {
   color: #888888;
   margin-bottom: 0;
   font-size: 19px;
 }
-.categories-list .accordion > .card > .card-header {
+
+.categories-list .accordion>.card>.card-header {
   height: auto;
 }
-.categories-list .accordion > .card > .card-header > button {
+
+.categories-list .accordion>.card>.card-header>button {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
+
 .frame-h1 {
   margin: 0;
   font-size: 17pt;
   line-height: 24pt;
   font-weight: 600;
-  text-align: center;
+  text-align: left;
   color: #555;
 }
+
 .frame-h2 {
   font-size: 15px;
   line-height: 16px;
   color: #656464;
   max-width: 100%;
   color: #555;
   padding: 4px 0;
-  text-align: center;
+  text-align: left;
 }
+
 .image-samples {
   display: flex;
   flex-wrap: wrap;
   margin-top: 5px;
   margin-bottom: 18px;
   gap: 5px;
   cursor: pointer;
 }
+
 .image-samples img {
   cursor: pointer;
   width: 52px;
   height: 52px;
   float: left;
@@ -526,19 +568,22 @@
   color: #555;
   margin: 0 0 8px;
   font-weight: 600;
   border-bottom: 1px solid #dadada;
 }
+
 .preview-section {
   display: flex;
   justify-content: left;
   margin-top: 15px;
 }
+
 .preview-section img {
   width: auto;
   height: auto;
 }
+
 #effect-form label {
   display: block;
   font-weight: 600;
   margin: 0 0 5px;
   color: #666;
@@ -559,60 +604,58 @@
   padding: 5px 15px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   background: linear-gradient(to right, var(--pink), var(--purple));
-  background: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0, #ff6537),
-    color-stop(1, #ff754b)
-  );
+  background: -webkit-gradient(linear,
+      left bottom,
+      left top,
+      color-stop(0, #ff6537),
+      color-stop(1, #ff754b));
   background: linear-gradient(to right, var(--pink), var(--purple));
   background: linear-gradient(to right, var(--pink), var(--purple));
   background: linear-gradient(to right, var(--pink), var(--purple));
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
 }
+
 .cam-image {
   color: #666;
   height: 40px;
   width: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #ccc;
   background: #eee;
-  background: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0, #ececec),
-    color-stop(1, #f6f6f6)
-  );
+  background: -webkit-gradient(linear,
+      left bottom,
+      left top,
+      color-stop(0, #ececec),
+      color-stop(1, #f6f6f6));
 }
+
 .cam-image i {
   margin-bottom: 0px;
   color: #666;
 }
+
 .small-image-preview {
   height: 40px;
   width: 50px !important;
   width: 100%;
 }
+
 .choose-image {
   color: #666;
   margin-right: 6px;
   border: 1px solid #ccc;
   background: #eee;
-  background: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0, #ececec),
-    color-stop(1, #f6f6f6)
-  );
+  background: -webkit-gradient(linear,
+      left bottom,
+      left top,
+      color-stop(0, #ececec),
+      color-stop(1, #f6f6f6));
   padding: 0;
   width: 186px;
   height: 40px;
   line-height: 40px;
   font-size: 13pt;
@@ -635,19 +678,23 @@
   -moz-border-radius: 2px;
   border-radius: 2px;
   margin: 0;
   width: 216px;
 }
+
 .mb-15 {
   margin-bottom: 15px !important;
 }
+
 .btn:focus {
   box-shadow: none !important;
 }
+
 .result-info {
   display: flex;
 }
+
 .result-info a {
   color: rgb(155, 22, 155) !important;
   cursor: pointer;
   text-decoration: underline;
   float: left;
@@ -656,35 +703,40 @@
   margin: 0 0 5px;
   font-weight: 600;
   color: #444;
   text-transform: capitalize;
 }
+
 .result-info i {
   margin-left: 6px;
   margin-right: 6px;
   color: black;
   font-size: 17px;
   margin-bottom: 0px;
   margin-top: 11px;
 }
+
 .result-info div {
   float: left;
   font-size: 17pt;
   font-weight: 600;
   text-transform: capitalize;
   line-height: 24pt;
   margin: 0 0 5px;
   color: #444;
 }
+
 #saving-data {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 #saving-data img {
   height: 200px;
 }
+
 .photo-card {
   display: inline-block;
   zoom: 1;
   margin: 7px 3px 3px;
   padding: 8px 12px 4px;
@@ -696,18 +748,21 @@
   overflow: hidden;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: px;
 }
+
 .photo-effect-feature-name {
   text-align: center;
   color: #777;
 }
+
 .categories-list li {
   font-size: 1em;
   border-bottom: 1px solid #f2f2f2;
 }
+
 .categories-list .category-link {
   display: block;
   padding: 7px 9px;
   color: #444;
   text-transform: capitalize;
@@ -715,12 +770,13 @@
   font-size: 0.95em;
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
 }
+
 .categories-list .category-link:hover {
   background-color: #f4f4f4;
 }
 
 .categories-list .active-cat {
   background-color: #f4f4f4;
-}
+}
\ No newline at end of file