Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
2.2 kB · 122 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122/* src/components/Card/Card.css */
/* Grid item container style */.grid-item { background: #fff !important; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 5px solid #ddd; border-radius: 12px;}
/* Paragraph margins inside grid-item */.grid-item p { margin-bottom: 0; margin-top: 7px;}
/* Ensure grid items don’t overflow */.grid-item { background: transparent; box-sizing: border-box; overflow: clip;}
/* Card container to clip overflow if needed */.card { overflow: clip; display: flex; flex-direction: column;}
/* Header for title and drag-handle */.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;}
/* Card title styles */.card-title { margin: 0; font-size: 1.2em; color: #000; /* default dark text */}
/* Card content styles */.card-content { flex-grow: 1; font-size: 0.95em; color: #000;}
/* Styles for the react-resizable handle (if applicable) */.react-resizable-handle { background-image: none !important;}
.react-grid-item > .react-resizable-handle::after { border-bottom: 3px solid #00000045; border-right: 3px solid #00000045; bottom: 3px; content: ""; height: 10px; position: absolute; right: 3px; width: 10px; margin: 3px; border-end-end-radius: 8px;}
/* Draggable Handle Styles */.drag-handle { display: flex; align-items: center; border-radius: 4px; cursor: move; max-width: 18px; text-align: center; display: none;}
/* Drag icon styling */.drag-icon { font-size: 1.2em; user-select: none;}
/* Responsive Adjustments for Cards */@media (max-width: 768px) { .drag-handle { justify-content: center; }}
/* Dark mode overrides */.dark-mode .grid-item { background: #2c2c2c !important; border: 5px solid #444; box-shadow: 0 2px 4px rgba(0,0,0,0.6);}
.dark-mode .card-header { border-bottom: 1px solid #555;}
.dark-mode .card-title,.dark-mode .card-content { color: #fff;}
.dark-mode .react-grid-item > .react-resizable-handle::after { border-bottom: 3px solid #ffffff45; border-right: 3px solid #ffffff45;}
.dark-mode .drag-handle { color: white;}