Skip to content

Commit c991afe

Browse files
KimlikDAO-botKimlikDAO-bot
authored
PR #40'ı merge'le (Oyla sayfası #38)
Oyla sayfası yeni önerge yollama
2 parents 2080612 + 008a2da commit c991afe

File tree

3 files changed

+224
-116
lines changed

3 files changed

+224
-116
lines changed

‎oyla/sayfa.css

+133-76
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#oy {
2-
margin: 5em auto;
2+
margin: 2em auto;
33
display: flex;
44
flex-direction: column;
55
justify-content: space-around;
@@ -8,7 +8,7 @@
88

99
#oyy {
1010
width: 300px;
11-
max-height: 40px;
11+
max-height: 70px;
1212
cursor: pointer;
1313
box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
1414
border-radius: 2px;
@@ -31,125 +31,164 @@
3131
max-width: 800px;
3232
width: 80%;
3333
max-height: 1000px;
34-
height: 400px;
3534
cursor: default;
3635
transition-property: width, max-height;
37-
transition-duration: 0.5s, 0.2s;
38-
transition-delay: 0s, 0.5s;
36+
transition-duration: 0.1s, 0.1s;
37+
transition-delay: 0, 0.1s;
3938
transition-timing-function: ease-in;
4039
}
4140

4241
#oyytitle {
4342
width: 100%;
44-
height: 40px;
43+
height: 70px;
4544
display: flex;
4645
justify-content: center;
4746
align-items: center;
48-
border-bottom: 1px solid rgb(0 0 0 / 15%);
4947
}
5048

51-
#oyyfc {
49+
#oyytabs {
5250
display: flex;
53-
justify-content: center;
5451
flex-wrap: wrap;
55-
margin: 1em 0;
52+
width: 100%;
5653
}
5754

58-
#oyyft {
59-
position: relative;
55+
#oyytabs input[type="radio"] {
56+
display: none;
57+
}
58+
59+
.oyy_tablabel {
6060
display: flex;
6161
justify-content: center;
62+
align-items: center;
63+
cursor: pointer;
64+
width: 33%;
65+
height: 40px;
66+
opacity: 0.5;
67+
border-bottom: 1px solid rgb(0 0 0 / 15%);
68+
transition-property: opacity, background-color;
69+
transition-duration: 0.3s;
70+
transition-timing-function: ease-in;
71+
}
72+
73+
.oyy_tablabel.sol {
74+
border-left: none;
75+
}
76+
77+
@media (max-width: 320px) {
78+
.oyy_tablabel {
79+
font-size: 10pt;
80+
}
81+
}
82+
83+
.oyytab {
6284
width: 100%;
85+
padding: 2em;
86+
display: none;
87+
order: 1;
88+
justify-content: center;
89+
flex-wrap: wrap;
90+
align-items: center;
6391
}
6492

65-
#oyydb {
66-
display: flex;
67-
cursor: pointer;
68-
justify-content: space-around;
93+
#oyytabs input[type="radio"]:checked + .oyy_tablabel {
94+
opacity: 1;
6995
border: 1px solid rgb(0 0 0 / 15%);
70-
border-radius: 5px;
71-
padding: 0.5em;
72-
width: 170px;
73-
background-color: rgb(255 255 255);
96+
border-bottom: none;
7497
}
7598

76-
#oyydb:hover {
77-
background-color: rgb(255 255 255 / 30%);
99+
#oyytabs input[type="radio"]:checked + .oyy_tablabel.sol {
100+
border-left: none;
101+
border-top-right-radius: 10px;
78102
}
79103

80-
#oytri {
81-
width: 0;
82-
height: 0;
83-
margin-left: 5px;
84-
border-top: 5px solid rgb(0 0 0);
85-
opacity: 0.5;
86-
border-left: 5px solid transparent;
87-
border-right: 5px solid transparent;
88-
cursor: pointer;
89-
transform: translateY(7.5px);
104+
#oyytabs input[type="radio"]:checked + .oyy_tablabel.orta {
105+
border-top-left-radius: 10px;
106+
border-top-right-radius: 10px;
90107
}
91108

92-
#oytri.up {
93-
transform: translateY(7.5px) rotate(180deg);
109+
#oyytabs input[type="radio"]:checked + .oyy_tablabel.sag {
110+
border-right: none;
111+
border-top-left-radius: 10px;
94112
}
95113

96-
#oyydd {
97-
position: absolute;
98-
top: 30px;
99-
cursor: pointer;
100-
margin: 10px 0;
101-
padding: 0;
102-
background-color: #fff;
103-
border: 1px solid #f8f8f8;
104-
border-radius: 5px;
105-
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
106-
display: block;
107-
animation: growDown 300ms ease-in-out forwards;
108-
transform-origin: top center;
109-
list-style: none;
110-
z-index: 20;
111-
}
112-
113-
#oyydd li {
114-
height: 35px;
115-
margin: 1px;
116-
padding: 3px 10px;
114+
#oyytabs input[type="radio"]:checked + label + .oyytab {
117115
display: flex;
118-
align-items: center;
119-
justify-content: left;
120116
}
121117

122-
#oyydd li:hover {
123-
background-color: #f2f2f2;
118+
#oyypc {
119+
width: 50%;
120+
display: flex;
124121
}
125122

126-
#oyyform {
127-
width: 100%;
128-
padding: 0 1em;
123+
#oyypc input::-webkit-outer-spin-button,
124+
#oyypc input::-webkit-inner-spin-button {
125+
-webkit-appearance: none;
126+
margin: 0;
127+
}
128+
129+
#oyytc {
130+
width: 50%;
131+
display: flex;
132+
justify-content: space-between;
133+
}
134+
135+
#oyytcsol {
136+
display: flex;
137+
flex-direction: column;
138+
}
139+
140+
#oyytcsag {
141+
display: flex;
142+
flex-direction: column;
143+
justify-content: center;
144+
}
145+
146+
#oyytcsol input[type="radio"]:checked + label {
147+
border: 1px solid rgb(0 0 0 / 15%);
148+
background-color: rgb(0 0 0 / 15%);
129149
}
130150

131151
.oyyfi {
132-
width: 100%;
133-
height: 35px;
152+
width: 50%;
153+
height: 25px;
134154
font-size: 13pt;
135-
border: 1px solid rgb(0 0 0 / 15%);
136-
border-radius: 5px;
137-
margin: 0.5em 0;
155+
margin: 0.5em;
156+
border: none;
138157
outline: none;
139158
}
140159

141-
.oyyfi:hover,
142-
.oyyfi:focus {
143-
box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
160+
.oyyfi::placeholder {
161+
opacity: 0.4;
144162
}
145163

146-
.oyyfi::placeholder {
147-
opacity: 0.3;
148-
font-family: monospace;
164+
.oyy_toklabel {
165+
display: flex;
166+
justify-content: start;
167+
align-items: center;
168+
cursor: pointer;
169+
height: 30px;
170+
margin: 0.3em 0.3em 0.3em 1em;
171+
border-radius: 16px;
172+
padding: 0 1em;
173+
width: 80px;
174+
font-weight: 600;
175+
background-color: #fff;
176+
border: 1px solid rgb(0 0 0 / 5%);
177+
}
178+
179+
.oyy_toklabel:hover {
180+
border: 1px solid rgb(0 0 0 / 15%);
181+
background-color: rgb(0 0 0 / 15%);
182+
}
183+
184+
.oyy_tsel {
185+
display: flex;
186+
align-items: center;
187+
font-size: 13pt;
149188
}
150189

151-
.oyyfsc {
152-
margin: 2em 0;
190+
#oyyfsc {
191+
margin: 1em 0;
153192
}
154193

155194
.oyc {
@@ -167,6 +206,7 @@
167206
font-size: 11pt;
168207
color: #888;
169208
border-bottom: 1px solid rgba(0 0 0 / 10%);
209+
border-bottom: 1px solid rgba(0 0 0 / 10%);
170210
}
171211

172212
.oyok {
@@ -175,7 +215,7 @@
175215
cursor: pointer;
176216
overflow: hidden;
177217
transition-property: max-height;
178-
transition-duration: 1s;
218+
transition-duration: 0.3s;
179219
transition-timing-function: ease-in;
180220
border-bottom: 1px solid rgba(0 0 0 / 10%);
181221
border-radius: 2px;
@@ -200,6 +240,7 @@
200240
display: flex;
201241
justify-content: space-between;
202242
width: 100%;
243+
width: 100%;
203244
}
204245

205246
.oyaotitle {
@@ -211,6 +252,7 @@
211252
.oyaotb {
212253
position: relative;
213254
cursor: pointer;
255+
cursor: pointer;
214256
width: 25px;
215257
height: 20px;
216258
opacity: 0.3;
@@ -239,6 +281,7 @@
239281
.oyao_middle {
240282
display: flex;
241283
width: 100%;
284+
width: 100%;
242285
}
243286

244287
@media (max-width: 425px) {
@@ -332,6 +375,8 @@
332375
display: flex;
333376
justify-content: center;
334377
margin-bottom: 1em;
378+
justify-content: center;
379+
margin-bottom: 1em;
335380
}
336381

337382
.chartbtn {
@@ -396,6 +441,18 @@
396441
margin-top: 3em;
397442
}
398443

444+
.oybdis {
445+
margin: 1em 0;
446+
cursor: pointer;
447+
color: #2ec479;
448+
449+
}
450+
451+
.oyao_bottom {
452+
width: 100%;
453+
margin-top: 3em;
454+
}
455+
399456
.oybdis {
400457
margin: 1em 0;
401458
cursor: pointer;

0 commit comments

Comments
 (0)