source: CookCraft-FrontEnd/CookCraft-FrontEnd-master/cookcraft-app/src/css/AdminPanelCss/modal-style.module.css@ d7b7f00

Last change on this file since d7b7f00 was d7b7f00, checked in by Gorazd Biskoski <gorazdbiskoskii@…>, 4 weeks ago

Add project

  • Property mode set to 100644
File size: 2.3 KB
RevLine 
[d7b7f00]1.modalOverlay {
2 position: fixed;
3 top: 0;
4 left: 0;
5 right: 0;
6 bottom: 0;
7 background-color: rgba(0, 0, 0, 0.5);
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 z-index: 1000;
12}
13
14.modalContent {
15 background-color: #fff;
16 padding: 20px;
17 border-radius: 8px;
18 max-width: 600px;
19 width: 100%;
20 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21 position: relative;
22 animation: fadeIn 0.3s ease;
23}
24
25.closeButton {
26 position: absolute;
27 top: 10px;
28 right: 10px;
29 background: none;
30 border: none;
31 font-size: 24px;
32 cursor: pointer;
33}
34
35h2 {
36 font-size: 24px;
37 margin-bottom: 15px;
38 color: #333;
39}
40
41p {
42 margin: 10px 0;
43 font-size: 16px;
44 color: #555;
45}
46
47.removeButton,
48.downloadButton {
49 background-color: #ff4d4d; /* Red for remove */
50 border: none;
51 color: white;
52 padding: 10px 20px;
53 margin-top: 15px;
54 font-size: 16px;
55 cursor: pointer;
56 border-radius: 5px;
57 transition: background-color 0.3s;
58}
59
60.downloadButton {
61 background-color: #FFA500;
62 /*background-color: #4CAF50;*/
63}
64
65.removeButton:hover {
66 background-color: #ff1a1a;
67}
68
69.downloadButton:hover {
70 background-color: #e69500;
71 /*background-color: #e59400;*/
72 /*background-color: #45a049;*/
73}
74
75.pageButton {
76 padding: 10px 15px;
77 margin: 5px;
78 border: 1px solid #ccc;
79 background-color: #fff;
80 cursor: pointer;
81 transition: background-color 0.2s;
82}
83
84.pageButton:hover {
85 background-color: #f0f0f0;
86}
87
88.currentPage {
89 font-size: 16px;
90 margin: 0 10px;
91}
92
93.buttons {
94 display: flex;
95 justify-content: center;
96 margin-top: 80px;
97}
98
99.buttonAccept,
100.buttonDecline {
101 padding: 10px 30px;
102 font-size: 18px;
103 border: none;
104 border-radius: 5px;
105 margin: 0 10px;
106 cursor: pointer;
107 transition: background-color 0.3s;
108}
109
110.buttonAccept {
111 /*background-color: #FFA500;*/
112 background-color: #4CAF50;
113 color: white;
114}
115
116.buttonDecline {
117 background-color: #ff4d4d;
118 color: white;
119}
120
121.buttonAccept:hover {
122 /*background-color: #e69500;*/
123 background-color: #45a049;
124}
125
126.buttonDecline:hover {
127 background-color: #ff1a1a;
128}
129
130@keyframes fadeIn {
131 from {
132 opacity: 0;
133 transform: translateY(-20px);
134 }
135 to {
136 opacity: 1;
137 transform: translateY(0);
138 }
139}
Note: See TracBrowser for help on using the repository browser.