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;
|
||
}
|
||
}
|
||
|