.projects_page { height: 120vw; background-color: #dcb495; } .header_block { width: 100%; height: 20vw; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) ), url(../images/back_project_one.jpg);background-repeat: repeat; background-position: center; } .header_title { color: #ffffff; font-size: 7vw; } .header_title_2 { color: #ffffff; text-align: center; font-size: 1.5vw; width: 50vw; } .find_block { width: 100%; height: 15vw; background-color: #dcb495; display: flex; align-items: center; flex-direction: row; justify-content: center; } .find_input_text { margin-right: 12px; background-color: #EDCBB0; border: #EDCBB0; width: 45vw; height: 5vw; color: #776658; border-radius: 5vw; vertical-align: middle; font-size: 1.5vw; } .find_input_button { margin-left: 12px; background-color: #9E795A; border: #9E795A; width: 10vw; height: 5vw; color: #ffffff; border-radius: 5vw; vertical-align: middle; font-size: 1.5vw; } .list_project_block { margin-left: 3%; border: 0.2vw solid #694a2d; border-radius: 4.5vw; width: 94%; height: 45vw; overflow-y: auto; padding-top: 2vw; } .list_project_block::-webkit-scrollbar { width: 0.8vw; /* ширина scrollbar */ } .list_project_block::-webkit-scrollbar-thumb { background-color: #d49d51; /* цвет плашки */ border-radius: 5vw; /* закругления плашки */ border: 0.25vw solid #ffffff; } .list_project { width: 95%; margin-left: 2.5%; margin-top: 0.5vw; overflow-y: hidden; overflow-x: hidden; } .project_header_button { height: 5.5vw; width: 100%; text-align: left; border-radius: 5vw; background-color: #9E795A; border-color: #9E795A; border-bottom-color: #9E795A; color: #ffffff; display: flex; align-items: center; } .project_description_block { background-color: #9E795A; width: 100%; height: 20vw; border-radius: 2vw; } .project_logo_block { width: 4.5vw; height: 4.5vw; border: 0.3vw solid #ffffff; background-color: #ffffff; border-radius: 2vw; display: flex; justify-content: center; align-items: center; } .project_logo { width: 4vw; height: 4vw; border-radius: 5vw; } .project_title_block { width: 100%; height: 4vw; margin-left: 1vw; } .project_title { font-size: 3.5vw; overflow-y: hidden; overflow-x: auto; white-space: nowrap } .project_title::-webkit-scrollbar { height: 0.8vw; /* ширина scrollbar */ } .project_title::-webkit-scrollbar-thumb { background-color: #d49d51; /* цвет плашки */ border-radius: 5vw; /* закругления плашки */ border: 0.25vw solid #ffffff; } .project_button_block_one { width: 90%; display: flex; justify-content: flex-start; align-items: flex-start; } .project_description { width: 98%; height: 100%; margin-left: 1%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: space-evenly; } .collaborator_block { width: 22%; height: 90%; background-color: #EDCBB0; border-radius: 2vw; overflow-y: auto; } .collaborator_block::-webkit-scrollbar { width: 0.8vw; /* ширина scrollbar */ } .collaborator_block::-webkit-scrollbar-thumb { background-color: #d49d51; /* цвет плашки */ border-radius: 5vw; /* закругления плашки */ border: 0.25vw solid #ffffff; } .description_block { width: 48%; height: 90%; display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; } .description_header_text { font-size: 2vw; } .description_block_text { overflow-y: auto; overflow-x: hidden; width: 90% !important; height: 80% !important; width: 50%; background-color: #dcb495; border-radius: 2vw; } .description_block_text::-webkit-scrollbar { width: 0.8vw; /* ширина scrollbar */ } .description_block_text::-webkit-scrollbar-thumb { background-color: #d49d51; /* цвет плашки */ border-radius: 5vw; /* закругления плашки */ border: 0.25vw solid #ffffff; } .description_text { width: 100% !important; height: 100%; font-size: 1.5vw; overflow-wrap: normal; /* не поддерживает IE, Firefox; является копией word-wrap */ word-wrap: normal; word-break: normal; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ line-break: auto; /* нет поддержки для русского языка */ hyphens: manual; /* значение auto не поддерживается Chrome */ margin: 2vw; } .open_project_block { width: 20%; height: 90%; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; } .open_button { background-color: #ffffff; color: #000000; width: 15vw; height: 4.5vw; vertical-align: middle; border-radius: 5vw; display: flex; align-items: center; justify-content: center; } .open_button:hover { text-decoration: none; color: #000000; } .open_button_text { font-size: 1.5vw; margin-top: 15px; display: flex; align-items: center; justify-content: center; } .open_button, .open_button_link { display: flex; align-items: center; justify-content: center; width: 15vw; height: 4.5vw; color: #000000; } .open_button_link:hover { text-decoration: none; color: #000000; } .staff_block { margin: 20px; } .user { width: 16vw; height: 3.5vw; background-color: #ffffff; border: 2px solid #9E795A; border-radius: 3vw; margin-top: 5px; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: no-wrap; } .user_logo { margin-left: 3px; width: 3vw; height: 3vw; border-radius: 5vw; background-color: #000000; } .user_names { margin-left: 9px; margin-top: 10px; overflow-x: auto; color: #000000 !important; } .new_project_button, .find_project_button { width: 13vw; height: 5vw; background-color: #000000; border: 2px solid #ffffff; border-radius: 3vw; margin-left: 2vw; } .new_project_button_text, .find_project_button_text { width: 13vw; height: 5vw; text-align: center; font-size: 1.5vw; color: #ffffff; display: flex; align-items: center; justify-content: center; } .new_project_button_link, find_project_button_linkk { width: 13vw; height: 5vw; } .new_project_button_link:hover, .find_project_button_linkk:hover { text-decoration: none; color: #000000; } .form_project_block { display: flex; align-items: center; justify-content: center; } .link_to_user { width: 16vw; height: 3.5vw; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: no-wrap; text-decoration: none; } .link_to_user:hover { text-decoration: none; }