[html]
<style>
.calendar-wrapper {
margin: auto;
display: flex;
padding:20px;
width:450px;
flex-direction: column;
align-items: center;
background:lightgray;
border-radius: 25px;
}
.calendar-wrapper>h4 {
color: #646a6e;
font-family: sans-serif;
font-size: 35px;
background: #ffffff;
width: 90%;
text-align: center;
border-radius: calc(infinity* 1px);
margin: 0px 0px 17px;
}
.calendar-wrapper>ul>li {
display: inline-flex;
width: 60px;
height: 60px;
position: relative;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px !important;
margin-bottom: 5px;
margin-left: 5px;
font-family: sans-serif;
border-radius: 12px;
}
.calen-week {
display:flex;
padding:0px!important;
}
.calen-days {
display:flex;
padding:0px!important;
}
.calen-week>li {
background: #646a6e;
font-size: 25px;
color: #ededed;
font-weight: bold;
}
.calen-days>li{
background: #e8eeef;
font-size: 30px;
color: #495258;
}
.extra-day {
opacity:.3;
}
.calen-tooltip-wrapper {
position: relative;
display: flex;
cursor: pointer;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
border-radius: 12px;
}
.calen-tooltip-content {
display: none;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
background-color: #151d224f;
color: #151718;
padding: 5px !important;
border-radius: 12px;
font-family: sans-serif;
text-align: justify;
z-index: 1000;
font-size: 12px;
width: 300px;
flex-direction: column;
backdrop-filter: blur(4px);
transition: ease-in-out .4s;
}
.active {
display: flex;
}
.calen-tooltip-content>img {
width: 300px;
height: 85px;
object-fit: cover;
border-radius: 7px;
margin-top: 5px;
}
.calen-tooltip-content>p {
font-size: 13px !important;
background: #e8eeefc2;
color: black;
padding: 2px 6px !important;
border-radius: 7px;
}
.calen-tooltip-content::before {
content: '';
position: absolute;
top: -32px;
left: 50%;
margin-left: -16px;
border-width: 16px;
border-style: solid;
border-color: transparent transparent #9da0a3;
}
.day-with-tooltip {
position: relative;
display: flex;
cursor: pointer;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
border-radius: 12px;
}
</style>
[/html]
[html]
<section class='calendar-wrapper'>
<h4>СЕНТЯБРЬ </h4>
<ul class='calen-week'>
<li>ПН</li>
<li>ВТ</li>
<li>СР</li>
<li>ЧТ</li>
<li>ПТ</li>
<li>СБ</li>
<li>ВС</li>
</ul>
<ul class='calen-days'>
<li class='extra-day'>26</li>
<li class='extra-day'>27</li>
<li class='extra-day'>28</li>
<li>29</li>
<li>30</li>
<li>
31
</li>
<li>1</li>
</ul>
<ul class='calen-days'>
<li>2</li>
<li>3</li>
<li>
4
</li>
<li>
5
</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul class='calen-days'>
<li>
9
</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>
13
</li>
<li><div class="calen-tooltip-wrapper">
14
<div class="calen-tooltip-content"><p>
Старт квеста "Поезд в Валенштайн". Первая глава.
</p><img src='https://i.pinimg.com/originals/fb/ed/a9/fbeda997c9b463547af488ba925a03a2.gif' alt='episode-photo'>
</div>
</div></li>
<li><div class="calen-tooltip-wrapper">
15
<div class="calen-tooltip-content"><p>
Админский день. Обновление конкурсов, подведение итогов недели.
</p><img src='https://i.pinimg.com/originals/e2/15/8a/e2158a855ac4563ef0beca2edb6c4f2b.gif' alt='episode-photo'>
</div>
</div></li>
</ul>
<ul class='calen-days'>
<li>
16
</li>
<li>17
</li>
<li>18</li>
<li>
19
</li>
<li>
20
</li>
<li>
21
</li>
<li>22</li>
</ul>
<ul class='calen-days'>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
</section>
[/html]
- Подпись автора
Ты пришел и говоришь: Авалон, мне нужна справедливость, мне нужен пост. Но ты просишь без уважения, ты не предлагаешь дружбу, ты даже не назвал меня крестным админом.
Хронология