|
|
@@ -1,4 +1,110 @@
|
|
|
// app global css in SCSS format
|
|
|
+html,
|
|
|
+body,
|
|
|
+#q-app {
|
|
|
+ font-family: "Montserrat" !important;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h1 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 96px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 144px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h2 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 90px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h3 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 72px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h4 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 51px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h5 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 36px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-h6 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: 0.7px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-subtitle-1 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 0.15px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-subtitle-2 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 21px;
|
|
|
+ letter-spacing: 0.1px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.font-body-1 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-body-2 {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0.25px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-overline {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-caption {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 18px;
|
|
|
+ letter-spacing: 0.4px;
|
|
|
+}
|
|
|
+
|
|
|
+.font-button {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 21px;
|
|
|
+ letter-spacing: 1.25px;
|
|
|
+}
|
|
|
|
|
|
.input-disable {
|
|
|
.q-field--outlined .q-field__control::before {
|
|
|
@@ -7,9 +113,100 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.q-drawer:has(.detached-container) {
|
|
|
- margin: 16px !important;
|
|
|
- margin-bottom: 16px !important;
|
|
|
- margin-left: 10px !important;
|
|
|
- border-radius: 6px !important;
|
|
|
+.q-input-border {
|
|
|
+ .q-field__control::before {
|
|
|
+ border: 1px solid #b9b9b9 !important;
|
|
|
+ transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.q-field--labeled .q-field__control,
|
|
|
+.q-field--focused .q-field__control {
|
|
|
+ border-radius: 8px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.q-field--outlined.q-field--rounded .q-field__control {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+// quasar component overrides
|
|
|
+.q-field__control,
|
|
|
+.q-item--active,
|
|
|
+.q-toggle__inner--truthy {
|
|
|
+ color: #ffd700 !important;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.q-input-no-border {
|
|
|
+ .q-field__control,
|
|
|
+ .q-item--active,
|
|
|
+ .q-toggle__inner--truthy,
|
|
|
+ .q-field--labeled .q-field__control,
|
|
|
+ .q-field--focused .q-field__control,
|
|
|
+ .q-field--outlined.q-field--rounded .q-field__control {
|
|
|
+ color: #ffd700 !important;
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.select-rounded {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.default-button-padding {
|
|
|
+ padding: 12px 16px 12px 16px !important;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.q-checkbox__bg {
|
|
|
+ border-radius: 4px !important;
|
|
|
+ border: 1px solid #ffd700 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.img-gradient {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.img-gradient::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100%; /* A metade inferior da imagem */
|
|
|
+ background: linear-gradient(0, #090808 20.86%, rgba(0, 0, 0, 0.3) 81.63%);
|
|
|
+}
|
|
|
+
|
|
|
+.rounded-full {
|
|
|
+ border-radius: 50% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.q-select__dialog {
|
|
|
+ background-color: #ffffff !important;
|
|
|
+ border: 0.4px solid #5b5a5a6e !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ box-shadow: 0px 1px 2px 0px #00000040 !important;
|
|
|
+ color: #000000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.q-menu {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 0.4px solid #5b5a5a6e;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ box-shadow: 0px 1px 2px 0px #00000040;
|
|
|
+ color: #090808 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.q-item,
|
|
|
+.q-field__append {
|
|
|
+ color: #090808 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card-size {
|
|
|
+ width: 100px;
|
|
|
+ height: 80px;
|
|
|
+ padding: 8px 16px 8px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px;
|
|
|
+ text-transform: capitalize;
|
|
|
}
|