@pedroab0/skills 1.1.0 → 1.2.0

package/figma-extractor/demo/style.css

@@ -1,360 +0,0 @@
-/* DT Money - Complete Desktop Home UI */
-:root {
-  /* Colors from Figma */
-  --gray-100: #e1e1e6;
-  --gray-300: #c4c4cc;
-  --gray-500: #7c7c8a;
-  --gray-600: #323238;
-  --gray-700: #29292e;
-  --gray-800: #202024;
-  --gray-900: #121214;
-
-  --green-300: #00b37e;
-  --green-500: #00875f;
-  --green-700: #015f43;
-  --red-500: #f75a68;
-  --white: #ffffff;
-
-  /* Typography */
-  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --radius-sm: 5px;
-  --radius-md: 6px;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--gray-800);
-  color: var(--gray-100);
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Page Header (Dark Top Bar) */
-.page-header {
-  background-color: var(--gray-900);
-  padding: 40px 0 128px 0;
-}
-
-.header-container {
-  width: 100%;
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  text-decoration: none;
-}
-
-.logo-text {
-  font-size: 26px;
-  font-weight: 700;
-  color: var(--gray-100);
-  letter-spacing: -0.5px;
-}
-
-.btn-new-transaction {
-  background-color: var(--green-500);
-  color: var(--white);
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 12px 20px;
-  font-size: 16px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background-color 0.2s, transform 0.1s;
-}
-
-.btn-new-transaction:hover {
-  background-color: var(--green-700);
-}
-
-.btn-new-transaction:active {
-  transform: scale(0.98);
-}
-
-/* Main Content Area */
-.main-content {
-  width: 100%;
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 24px 64px 24px;
-}
-
-/* Summary Cards (Overlapping Header by ~68px) */
-.summary-cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-  margin-top: -68px;
-}
-
-.card {
-  background-color: var(--gray-600);
-  border-radius: var(--radius-md);
-  padding: 24px 24px 24px 32px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 137px;
-  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
-}
-
-.card.card-highlight {
-  background-color: var(--green-700);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.card-title {
-  color: var(--gray-300);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 26px;
-}
-
-.card-icon {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.card-value {
-  color: var(--gray-100);
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 45px;
-}
-
-/* Search Bar */
-.search-form {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 64px;
-}
-
-.search-input {
-  flex: 1;
-  background-color: var(--gray-900);
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  padding: 16px;
-  color: var(--gray-100);
-  font-family: var(--font-sans);
-  font-size: 16px;
-  line-height: 22px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.search-input::placeholder {
-  color: var(--gray-500);
-}
-
-.search-input:focus {
-  border-color: var(--green-300);
-}
-
-.btn-search {
-  background-color: transparent;
-  border: 1px solid var(--green-300);
-  border-radius: var(--radius-md);
-  color: var(--green-300);
-  padding: 14px 32px;
-  font-size: 16px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.btn-search:hover {
-  background-color: var(--green-500);
-  border-color: var(--green-500);
-  color: var(--white);
-}
-
-.btn-search svg {
-  transition: fill 0.2s;
-}
-
-.btn-search:hover svg {
-  fill: var(--white);
-}
-
-/* Transactions Table */
-.table-container {
-  margin-top: 24px;
-  width: 100%;
-  overflow-x: auto;
-}
-
-.transactions-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0 8px;
-}
-
-.transactions-table tr {
-  background-color: var(--gray-700);
-  transition: transform 0.15s, background-color 0.15s;
-}
-
-.transactions-table tr:hover {
-  background-color: #2e2e34;
-}
-
-.transactions-table td {
-  padding: 20px 32px;
-  font-size: 16px;
-  line-height: 26px;
-  vertical-align: middle;
-}
-
-.transactions-table td:first-child {
-  border-top-left-radius: var(--radius-sm);
-  border-bottom-left-radius: var(--radius-sm);
-  color: var(--gray-300);
-  width: 48%;
-}
-
-.transactions-table td:last-child {
-  border-top-right-radius: var(--radius-sm);
-  border-bottom-right-radius: var(--radius-sm);
-  color: var(--gray-500);
-  text-align: right;
-  width: 14%;
-}
-
-.transactions-table .col-category {
-  color: var(--gray-500);
-  width: 20%;
-}
-
-.transactions-table .col-amount {
-  font-weight: 400;
-  width: 18%;
-  white-space: nowrap;
-}
-
-.amount-income {
-  color: var(--green-300);
-}
-
-.amount-outcome {
-  color: var(--red-500);
-}
-
-/* Pagination */
-.pagination {
-  margin-top: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-}
-
-.pagination-btn {
-  background: transparent;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 8px;
-}
-
-.pagination-btn.disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.pagination-pages {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.page-num {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-md);
-  background-color: var(--gray-600);
-  color: var(--gray-300);
-  border: none;
-  font-family: var(--font-sans);
-  font-size: 16px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.page-num:hover:not(.active) {
-  background-color: var(--gray-700);
-  color: var(--gray-100);
-}
-
-.page-num.active {
-  background-color: var(--green-500);
-  color: var(--white);
-}
-
-/* Responsive Breakpoints */
-@media (max-width: 960px) {
-  .summary-cards {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-
-  .transactions-table td {
-    padding: 16px 20px;
-    font-size: 14px;
-  }
-
-  .card-value {
-    font-size: 26px;
-  }
-}
-
-@media (max-width: 640px) {
-  .header-container {
-    flex-direction: column;
-    gap: 20px;
-    align-items: flex-start;
-  }
-
-  .search-form {
-    flex-direction: column;
-  }
-
-  .btn-search {
-    width: 100%;
-    justify-content: center;
-  }
-}