Первый коммит
This commit is contained in:
Redsandyg
145
src/styles/billing.module.css
Normal file
145
src/styles/billing.module.css
Normal file
@@ -0,0 +1,145 @@
|
||||
.billingPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
}
|
||||
.metricsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.metricsGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.grid2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.payoutFormBlock, .pieChartBlock {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 24px;
|
||||
}
|
||||
.blockTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.formGroup {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.formGroup label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.formGroup input,
|
||||
.formGroup select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.formGroup input:focus,
|
||||
.formGroup select:focus {
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.payoutBtn {
|
||||
width: 100%;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.payoutBtn:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
.tableBlock {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.tableTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
padding: 24px 24px 0 24px;
|
||||
}
|
||||
.statusDone {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.statusPending {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.statusError {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.metricsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.grid2 {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.payoutFormBlock, .pieChartBlock {
|
||||
padding: 12px;
|
||||
}
|
||||
.tableTitle {
|
||||
padding: 16px 8px 0 8px;
|
||||
}
|
||||
.tableBlock {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
107
src/styles/dashboard.module.css
Normal file
107
src/styles/dashboard.module.css
Normal file
@@ -0,0 +1,107 @@
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metricsFlex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.metricsFlex {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.metricsFlex {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.metricCard {
|
||||
min-width: 200px;
|
||||
}
|
||||
.chartsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.chartsGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.chartStub {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tableBlock {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.tableTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
padding: 24px 24px 0 24px;
|
||||
}
|
||||
.statusPaid {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.statusPending {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.dashboard {
|
||||
gap: 16px;
|
||||
}
|
||||
.metricsFlex {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.chartsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.chartStub {
|
||||
min-height: 140px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.tableTitle {
|
||||
padding: 16px 8px 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tableBlock {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
35
src/styles/metricCard.module.css
Normal file
35
src/styles/metricCard.module.css
Normal file
@@ -0,0 +1,35 @@
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(16, 30, 54, 0.04);
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 24px;
|
||||
min-width: 200px;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.valueRow {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
}
|
||||
.positive {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #16a34a;
|
||||
}
|
||||
.negative {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #dc2626;
|
||||
}
|
||||
59
src/styles/navigation.module.css
Normal file
59
src/styles/navigation.module.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
height: 64px;
|
||||
padding: 0 32px;
|
||||
box-shadow: 0 1px 2px rgba(16, 30, 54, 0.04);
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #2563eb;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
.link {
|
||||
color: #6b7280;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 8px 0;
|
||||
transition: color 0.2s, border 0.2s;
|
||||
}
|
||||
.link:hover {
|
||||
color: #2563eb;
|
||||
border-bottom: 2px solid #dbeafe;
|
||||
}
|
||||
.active {
|
||||
color: #2563eb;
|
||||
border-bottom: 2px solid #2563eb;
|
||||
font-weight: 600;
|
||||
}
|
||||
.profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
.profileName {
|
||||
color: #374151;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
199
src/styles/stat.module.css
Normal file
199
src/styles/stat.module.css
Normal file
@@ -0,0 +1,199 @@
|
||||
.statPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.headerRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
}
|
||||
.exportBtn {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.exportBtn:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
border-bottom: 1.5px solid #e5e7eb;
|
||||
}
|
||||
.tab {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
padding: 12px 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border 0.2s;
|
||||
}
|
||||
.tab:hover {
|
||||
color: #2563eb;
|
||||
border-bottom: 2px solid #dbeafe;
|
||||
}
|
||||
.activeTab {
|
||||
color: #2563eb;
|
||||
border: none;
|
||||
border-bottom: 2px solid #2563eb;
|
||||
font-weight: 600;
|
||||
background: none;
|
||||
}
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 20px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.filters {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
.filters label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.filters input,
|
||||
.filters select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
background: #fff !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
.filters input:focus,
|
||||
.filters select:focus {
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.filters input:-webkit-autofill,
|
||||
.filters input:-webkit-autofill:focus,
|
||||
.filters input:-webkit-autofill:hover,
|
||||
.filters input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
|
||||
box-shadow: 0 0 0 1000px #fff inset !important;
|
||||
-webkit-text-fill-color: #111827 !important;
|
||||
color: #111827 !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
.filterBtnWrap {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
.filterBtn {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.filterBtn:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.tabContent {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.statusActive {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.statusInactive {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.statusPending {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.statPage {
|
||||
gap: 16px;
|
||||
}
|
||||
.headerRow {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.tabs {
|
||||
gap: 12px;
|
||||
}
|
||||
.filters {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.tabContent {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.tableTitle {
|
||||
padding: 16px 8px 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для иконки календаря в input[type='date'] */
|
||||
.filters input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.3) sepia(1) saturate(5) hue-rotate(180deg);
|
||||
/* Делает иконку тёмной, можно скорректировать под нужный цвет */
|
||||
}
|
||||
.filters input[type="date"]::-webkit-input-placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
.filters input[type="date"]::-moz-placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
.filters input[type="date"]:-ms-input-placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
.filters input[type="date"]::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Для Firefox */
|
||||
.filters input[type="date"]::-moz-focus-inner {
|
||||
color-scheme: dark;
|
||||
}
|
||||
40
src/styles/table.module.css
Normal file
40
src/styles/table.module.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.tableWrapper {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(16, 30, 54, 0.04);
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflowX {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.table {
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.thead {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.th {
|
||||
padding: 12px 24px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.tbody tr {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.tbody tr:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.tbody td {
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
color: #111827;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in New Issue
Block a user