This repository has no description
1/* src/components/Card/Card.css */
2
3/* Grid item container style */
4.grid-item {
5 background: #fff !important;
6 padding: 15px;
7 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
8 border: 5px solid #ddd;
9 border-radius: 12px;
10}
11
12/* Paragraph margins inside grid-item */
13.grid-item p {
14 margin-bottom: 0;
15 margin-top: 7px;
16}
17
18/* Ensure grid items don’t overflow */
19.grid-item {
20 background: transparent;
21 box-sizing: border-box;
22 overflow: clip;
23}
24
25/* Card container to clip overflow if needed */
26.card {
27 overflow: clip;
28 display: flex;
29 flex-direction: column;
30}
31
32/* Header for title and drag-handle */
33.card-header {
34 display: flex;
35 align-items: center;
36 justify-content: space-between;
37 margin-bottom: 10px;
38 border-bottom: 1px solid #eee;
39 padding-bottom: 10px;
40}
41
42/* Card title styles */
43.card-title {
44 margin: 0;
45 font-size: 1.2em;
46 color: #000; /* default dark text */
47}
48
49/* Card content styles */
50.card-content {
51 flex-grow: 1;
52 font-size: 0.95em;
53 color: #000;
54}
55
56/* Styles for the react-resizable handle (if applicable) */
57.react-resizable-handle {
58 background-image: none !important;
59}
60
61.react-grid-item > .react-resizable-handle::after {
62 border-bottom: 3px solid #00000045;
63 border-right: 3px solid #00000045;
64 bottom: 3px;
65 content: "";
66 height: 10px;
67 position: absolute;
68 right: 3px;
69 width: 10px;
70 margin: 3px;
71 border-end-end-radius: 8px;
72}
73
74/* Draggable Handle Styles */
75.drag-handle {
76 display: flex;
77 align-items: center;
78 border-radius: 4px;
79 cursor: move;
80 max-width: 18px;
81 text-align: center;
82 display: none;
83}
84
85/* Drag icon styling */
86.drag-icon {
87 font-size: 1.2em;
88 user-select: none;
89}
90
91/* Responsive Adjustments for Cards */
92@media (max-width: 768px) {
93 .drag-handle {
94 justify-content: center;
95 }
96}
97
98/* Dark mode overrides */
99.dark-mode .grid-item {
100 background: #2c2c2c !important;
101 border: 5px solid #444;
102 box-shadow: 0 2px 4px rgba(0,0,0,0.6);
103}
104
105.dark-mode .card-header {
106 border-bottom: 1px solid #555;
107}
108
109.dark-mode .card-title,
110.dark-mode .card-content {
111 color: #fff;
112}
113
114.dark-mode .react-grid-item > .react-resizable-handle::after {
115 border-bottom: 3px solid #ffffff45;
116 border-right: 3px solid #ffffff45;
117}
118
119
120.dark-mode .drag-handle {
121 color: white;
122}