394 lines
7.4 KiB
CSS
394 lines
7.4 KiB
CSS
|
.top_pannel { /*отступ слева в top_pannel*/
|
|||
|
|
margin-left: 20vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo_sidebar { /*размеры лого sidebar*/
|
|||
|
|
width: 17vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_font { /*текст sidebar*/
|
|||
|
|
line-height: 3;
|
|||
|
|
font-size: 2.4vh;
|
|||
|
|
color: #5d5d5d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.offcanvas-start.show { /*ширина sidebar*/
|
|||
|
|
width: 25vw;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.offcanvas-header { /*настройки header sidebar*/
|
|||
|
|
margin-top: 8vh;
|
|||
|
|
height: 15%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.offcanvas-body { /*настройки body sidebar*/
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: auto;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 { /*форматирование текста*/
|
|||
|
|
font-size: 4.5vw;
|
|||
|
|
font-family: "Segoe UI Light";
|
|||
|
|
font-weight: lighter;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main_pannel { /*основная панель main_pannel*/
|
|||
|
|
margin-left: 28vw;
|
|||
|
|
margin-top: 5vw;
|
|||
|
|
font-weight: lighter;
|
|||
|
|
max-width: 70%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table { /*таблица */
|
|||
|
|
margin-top: 5vh;
|
|||
|
|
margin-left: 0vw;
|
|||
|
|
width: 60vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
overflow-x: hidden; /* скрыть горизонтальную прокрутку на всей странице */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.objects { /*объекты в таблицe main_pannel*/
|
|||
|
|
width: 17vw;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption { /*описание к объекту в таблице main_pannel*/
|
|||
|
|
font-weight: lighter;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 1.8vw;
|
|||
|
|
/*margin-top: 1vw;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption_2 { /*описание к объекту в цене main_pannel*/
|
|||
|
|
font-weight: lighter;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 2.8vw;
|
|||
|
|
color: #5d5d5d;
|
|||
|
|
/*margin-top: 0.3vw;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption_count {
|
|||
|
|
font-weight: lighter;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 1.2vw;
|
|||
|
|
margin-top: 0.5vw;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon_top { /*top_pannel*/
|
|||
|
|
margin-left: 2vw;
|
|||
|
|
width: 1.1vw;
|
|||
|
|
margin-top: 1vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-link { /* текста top_pannel*/
|
|||
|
|
font-size: calc(0.6vw + 0.6vh);
|
|||
|
|
margin-top: 1vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header nav { /*заливка панели белым top_pannel*/
|
|||
|
|
background-color: #ffffff
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-container { /* сдвиг top_pannel*/
|
|||
|
|
margin-right: 5vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_containter { /* сдвиг top_pannel*/
|
|||
|
|
margin-left: 5vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_sidebar { /* список sidebar*/
|
|||
|
|
top: 10vh;
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header nav a:hover { /* подчеркивание текста top_pannel*/
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.social_network img { /*иконки соц сетей*/
|
|||
|
|
margin-top: 1vh;
|
|||
|
|
height: 3.5vh;
|
|||
|
|
margin-right: 1vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom_sidebar { /*bottom sidebar*/
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 0vh;
|
|||
|
|
flex-direction: column;
|
|||
|
|
margin-top: 60vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow_and_cities { /*чтобы все было на одном уровне, стрелка и город top_pannel*/
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h0 {
|
|||
|
|
font-size: 2vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_open {
|
|||
|
|
background-image: url('../src/open_sidebar.png');
|
|||
|
|
background-color: transparent;
|
|||
|
|
background-size: cover;
|
|||
|
|
position: fixed;
|
|||
|
|
margin-top: 0vh;
|
|||
|
|
margin-left: 3vh;
|
|||
|
|
border: none;
|
|||
|
|
height: 4vh;
|
|||
|
|
width: 3vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn:hover {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-close {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5vh;
|
|||
|
|
right: 5vh;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.width_input_mail { /*ширина панели для вводы почты*/
|
|||
|
|
width: 30%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back_arrow_icon { /*стрелка назад*/
|
|||
|
|
height: 4vh;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 4vh;
|
|||
|
|
left: 3vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-weight: lighter;
|
|||
|
|
font-size: 4vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h2_light {
|
|||
|
|
font-weight: lighter;
|
|||
|
|
font-size: 2vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login_pannel { /*2 страница, расположение объектов*/
|
|||
|
|
height: 90vh; /* на весь экран */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 2vh; /* Добавляет отступы между элементами */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add_object {
|
|||
|
|
height: 90vh; /* на весь экран */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1vh; /* Добавляет отступы между элементами */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.width_add_object {
|
|||
|
|
width: 25%;
|
|||
|
|
text-align: left;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add_object-button {
|
|||
|
|
background-color: #118500;
|
|||
|
|
border-color: #118500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_object {
|
|||
|
|
margin-top: 6vh;
|
|||
|
|
margin-left: 0vw;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr; /* Делит контейнер на две равные колонки */
|
|||
|
|
gap: 6vh; /* Добавляет промежуток между клеточками */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-cell {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 6vh;
|
|||
|
|
margin-top: 6vh;
|
|||
|
|
/*margin-left: 15vw;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-cell {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 6vh;
|
|||
|
|
margin-top: 6vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main_pannel2 {
|
|||
|
|
height: 100vh; /* на весь экран */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding-left: 25vw;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-weight: lighter;
|
|||
|
|
font-size: 3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-pills .nav-link {
|
|||
|
|
color: rgba(166, 166, 166, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-pills .nav-link:hover {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-pills .nav-link:focus,
|
|||
|
|
.nav-pills .nav-link.active,
|
|||
|
|
.nav-pills .nav-link:visited {
|
|||
|
|
background-color: rgba(0, 255, 49, 0.28);
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.objects_basket {
|
|||
|
|
height: 20vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption_basket {
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: lighter;
|
|||
|
|
font-size: 2.5vh;
|
|||
|
|
background-color: #25e000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption_basket_price {
|
|||
|
|
font-weight: lighter;
|
|||
|
|
font-size: 4vh;
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add_object-button:hover {
|
|||
|
|
background-color: rgba(0, 255, 49, 0.28);
|
|||
|
|
color: black;
|
|||
|
|
border-color: #118500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.col {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#image-preview {
|
|||
|
|
width: 200px;
|
|||
|
|
margin-bottom: 1.4vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-float:nth-child(3n+1) {
|
|||
|
|
clear: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fa-pencil, .fa-trash {
|
|||
|
|
color: darkgray; /* Change to the desired color */
|
|||
|
|
text-decoration: none; /* Убрать подчеркивание у кнопок */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
@media (max-width: 1300px) {
|
|||
|
|
.main_pannel {
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table { /*таблица */
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
width: 60vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.offcanvas-start.show {
|
|||
|
|
border: 1px solid black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-close {
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 800px) {
|
|||
|
|
.col-4 {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.objects { /*объекты в таблицe main_pannel*/
|
|||
|
|
width: 52vw;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption { /*описание к объекту в таблице main_pannel*/
|
|||
|
|
font-size: 3.2vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caption_2 { /*описание к объекту в цене main_pannel*/
|
|||
|
|
font-size: 4vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_font { /*текст sidebar*/
|
|||
|
|
font-size: 2vh;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.offcanvas-start.show { /*ширина sidebar*/
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top_pannel {
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.width_input_mail {
|
|||
|
|
width: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-control {
|
|||
|
|
width: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.width_add_object {
|
|||
|
|
width: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-group { /*подгон ширины под отсльаные*/
|
|||
|
|
padding-right: 9vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view_object {
|
|||
|
|
padding-top: 1vh;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|