1 | body {
|
---|
2 | font-family: Arial, sans-serif;
|
---|
3 | }
|
---|
4 |
|
---|
5 | .add-news, .add-coupons {
|
---|
6 | position: absolute;
|
---|
7 | top: 30px;
|
---|
8 | right: 70px;
|
---|
9 | width: 50px;
|
---|
10 | height: 50px;
|
---|
11 | background-color: #4CAF50;
|
---|
12 | color: white;
|
---|
13 | display: flex;
|
---|
14 | align-items: center;
|
---|
15 | justify-content: center;
|
---|
16 | border-radius: 50%;
|
---|
17 | font-size: 24px;
|
---|
18 | cursor: pointer;
|
---|
19 | }
|
---|
20 |
|
---|
21 | #news-list, #coupons-list {
|
---|
22 | display: flex;
|
---|
23 | flex-direction: row;
|
---|
24 | flex-wrap: wrap;
|
---|
25 | justify-content: flex-start;
|
---|
26 | margin: 0 20px;
|
---|
27 | }
|
---|
28 | .news-item{
|
---|
29 | display: flex;
|
---|
30 | flex-direction: column;
|
---|
31 | width: 420px;
|
---|
32 | align-items: center;
|
---|
33 | justify-content: center;
|
---|
34 | margin: 0 15px 10px 0;
|
---|
35 | padding: 20px;
|
---|
36 | border: 1px solid #ddd;
|
---|
37 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
---|
38 | }
|
---|
39 | .news-item > *{
|
---|
40 | text-align: left;
|
---|
41 | }
|
---|
42 | img{
|
---|
43 | width: 100%;
|
---|
44 | max-width: 400px;
|
---|
45 | height: auto;
|
---|
46 | border-radius: 10px;
|
---|
47 | margin-bottom: 15px;
|
---|
48 | }
|
---|
49 | p{
|
---|
50 | font-size: 1.2rem;
|
---|
51 | line-height: 1.5;
|
---|
52 | text-align: center;
|
---|
53 | color: #333;
|
---|
54 | margin: 0;
|
---|
55 | }
|
---|
56 | @media (max-width: 768px) {
|
---|
57 | .news-item {
|
---|
58 | flex-direction: column;
|
---|
59 | }
|
---|
60 | }
|
---|
61 |
|
---|
62 | .form-container, #coupons-form{
|
---|
63 | position: fixed;
|
---|
64 | top: 0;
|
---|
65 | left: 0;
|
---|
66 | width: 100%;
|
---|
67 | height: 100%;
|
---|
68 | background: rgba(0, 0, 0, 0.5);
|
---|
69 | display: flex;
|
---|
70 | align-items: center;
|
---|
71 | justify-content: center;
|
---|
72 | }
|
---|
73 |
|
---|
74 | #form {
|
---|
75 | background: white;
|
---|
76 | padding: 20px;
|
---|
77 | border-radius: 5px;
|
---|
78 | width: 500px;
|
---|
79 | height: 400px;
|
---|
80 | }
|
---|
81 | #title-part, #image-part, #code-part{
|
---|
82 | width:100%;
|
---|
83 | height:60px;
|
---|
84 | display: flex;
|
---|
85 | align-items: center;
|
---|
86 | }
|
---|
87 | input{
|
---|
88 | width:100%;
|
---|
89 |
|
---|
90 | }
|
---|
91 | textarea{
|
---|
92 | width: 100%;
|
---|
93 | height: 180px;
|
---|
94 | display: flex;
|
---|
95 | }
|
---|
96 | label{
|
---|
97 | padding-right: 10px;
|
---|
98 | }
|
---|
99 | #text-part, #description-part{
|
---|
100 | padding: 20px 0;
|
---|
101 | }
|
---|
102 |
|
---|
103 | #open-popup {
|
---|
104 | padding: 10px 20px;
|
---|
105 | background-color: #007bff;
|
---|
106 | color: white;
|
---|
107 | border: none;
|
---|
108 | border-radius: 5px;
|
---|
109 | cursor: pointer;
|
---|
110 | font-size: 16px;
|
---|
111 | }
|
---|
112 |
|
---|
113 | #image-popup {
|
---|
114 | width: 400px;
|
---|
115 | background-color: white;
|
---|
116 | border-radius: 8px;
|
---|
117 | padding: 20px;
|
---|
118 | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
---|
119 | z-index: 1000;
|
---|
120 | }
|
---|
121 |
|
---|
122 | #image-popup h3 {
|
---|
123 | margin-top: 0;
|
---|
124 | margin-bottom: 15px;
|
---|
125 | font-size: 20px;
|
---|
126 | color: #333;
|
---|
127 | text-align: center;
|
---|
128 | }
|
---|
129 |
|
---|
130 | #image-preview {
|
---|
131 | margin-top: 10px;
|
---|
132 | text-align: center;
|
---|
133 | padding: 10px;
|
---|
134 | }
|
---|
135 |
|
---|
136 | #image-popup button {
|
---|
137 | padding: 8px 15px;
|
---|
138 | margin-right: 10px;
|
---|
139 | margin-top: 10px;
|
---|
140 | background-color: #28a745;
|
---|
141 | color: white;
|
---|
142 | border: none;
|
---|
143 | border-radius: 5px;
|
---|
144 | cursor: pointer;
|
---|
145 | }
|
---|
146 |
|
---|
147 |
|
---|
148 | #edit-button, #save-button {
|
---|
149 | background-color: #17a2b8;
|
---|
150 | }
|
---|
151 |
|
---|
152 |
|
---|
153 | #overlay {
|
---|
154 | background: rgba(0, 0, 0, 0.5);
|
---|
155 | z-index: 999;
|
---|
156 | }
|
---|
157 |
|
---|
158 | #image-popup button:hover, #open-popup:hover {
|
---|
159 | opacity: 0.9;
|
---|
160 | }
|
---|
161 |
|
---|
162 | #cancel-button {
|
---|
163 | background-color: #dc3545;
|
---|
164 | }
|
---|
165 |
|
---|
166 | #authButton{
|
---|
167 | position: absolute;
|
---|
168 | left: 1145px;
|
---|
169 | top: 21px;
|
---|
170 | width: 150px;
|
---|
171 | color: white;
|
---|
172 | background-color: red;
|
---|
173 | padding: 10px;
|
---|
174 | border: none;
|
---|
175 | border-radius: 5px;
|
---|
176 | } |
---|