581 lines
19 KiB
CSS
581 lines
19 KiB
CSS
.w_route_card {
|
|
padding: 20px;
|
|
|
|
--route-date_splitter-bg: #F1F1F1;
|
|
--route-date_splitter-width: 134px;
|
|
--route-date_splitter-height: 1.5px;
|
|
--route-date_splitter-margin: 5px 0;
|
|
|
|
--route-card-bg: #FFFFFF;
|
|
--route-card-margin: 20px 0;
|
|
--route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
|
|
--route-text-color: #272424;
|
|
|
|
--big-font-size: 16px;
|
|
--medium-font-size: 14px;
|
|
--small-font-size: 10px;
|
|
|
|
--route-text-container-bg: #F1F1F1;
|
|
--route-text-container-padding: 15px;
|
|
--route-text-container-margin: 0 0 0 51px;
|
|
--route-text-container-border-radius: 10px;
|
|
--route-text-img-filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(256%) hue-rotate(113deg) brightness(115%) contrast(89%);
|
|
|
|
--route-card-owner-avatar-size: 52px;
|
|
|
|
--route-owner-type-color: #065BFF;
|
|
|
|
--route-cargo-type-color: #272424;
|
|
|
|
--route_card_route_data-margin-top: 30px;
|
|
|
|
--route-btn-border: 1.5px solid #FF613A;
|
|
--route-btn-border-radius: 10px;
|
|
--route-btn-padding: 7.5px 0;
|
|
--route-btn-width: 171px;
|
|
--route-btn-height: 100%;
|
|
--route-btn-bg: #FFFFFF;
|
|
--route-btn-hover-bg: #FF613A;
|
|
--route-btn-hover-text-color: #FFFFFF;
|
|
--route-btn-title-color: #272424;
|
|
--route-btn-text-data-color: #27242499;
|
|
--route-btn-margin: 0;
|
|
|
|
--route-date-data-justify: center;
|
|
--route-date-data-margin: 4px 0 0 0;
|
|
|
|
--card-splitter-bg: #E6E6E6;
|
|
|
|
--route-number-font-size: 12px;
|
|
--route-number-margin-top: 5px;
|
|
|
|
--from-to-place-data-width: 205px;
|
|
@media (max-width: 1160px) {
|
|
--from-to-place-data-width: 100%;
|
|
}
|
|
|
|
background: var(--route-card-bg);
|
|
margin: var(--route-card-margin);
|
|
box-shadow: var(--route-card-box_shadow);
|
|
border-radius: 10px;
|
|
color: var(--route-text-color);
|
|
&.highlighted{
|
|
--route-card-bg: linear-gradient(90deg, #FBED96 0%, #ABECD6 100%), #FFFFFF;
|
|
--card-splitter-bg: #FFF;
|
|
--route-text-container-bg: #FFFFFF;
|
|
--route-text-img-filter: unset;
|
|
}
|
|
.route_card_info_data{
|
|
&.mobile{display: none}
|
|
@media (max-width: 1024px) {
|
|
display: none;
|
|
&.mobile {
|
|
display: block;
|
|
--route-text-container-margin: 50px 0 0 51px;
|
|
|
|
.route_card_owner_info {
|
|
height: unset;
|
|
margin-left: 0;
|
|
margin-bottom: 10px;
|
|
--medium-font-size: 12px;
|
|
}
|
|
.route_card_text_img{
|
|
top: 25px;
|
|
}
|
|
.route_card_owner_avatar{
|
|
top: 31px;
|
|
}
|
|
.card_owner_name{
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 74px;
|
|
--big-font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
position: relative;
|
|
|
|
.card_owner_name{
|
|
font-weight: 600;
|
|
font-size: var(--big-font-size);
|
|
}
|
|
.route_card_text_img{
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
filter: var(--route-text-img-filter);
|
|
display: block;
|
|
z-index: 1;
|
|
}
|
|
.route_card_owner_avatar{
|
|
height: var(--route-card-owner-avatar-size);
|
|
width: var(--route-card-owner-avatar-size);
|
|
border-radius: 100%;
|
|
display: block;
|
|
position: absolute;
|
|
top: 11px;
|
|
left: 6px;
|
|
z-index: 10;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
.route_card_text_container{
|
|
position: relative;
|
|
@media (max-width: 992px) {
|
|
--big-font-size: 14px;
|
|
}
|
|
background: var(--route-text-container-bg);
|
|
padding: var(--route-text-container-padding);
|
|
margin: var(--route-text-container-margin);
|
|
border-radius: var(--route-text-container-border-radius);
|
|
font-size: var(--big-font-size);
|
|
|
|
&.msg{
|
|
.route_card_text_container_txt{
|
|
background-image: linear-gradient(94.66deg, rgba(0, 0, 0, 1) 0%, rgba(241, 241, 241, 0) 8.64%, rgba(241, 241, 241, 0.98) 16.62%);
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
.route_msg_for_unregistered_user, .route_clicked_msg_for_unregistered_user{
|
|
--filter: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
img{
|
|
width: 32px;
|
|
height: 32px;
|
|
display: block;
|
|
filter: var(--filter);
|
|
}
|
|
div{
|
|
font-size: 12px;
|
|
width: 215px;
|
|
overflow-wrap: break-word;
|
|
color: #27242499;
|
|
}
|
|
@media (max-width: 800px) {
|
|
div{
|
|
font-size: 10px;
|
|
}
|
|
img{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.route_clicked_msg_for_unregistered_user{
|
|
display: none;
|
|
div{
|
|
color: #272424;
|
|
}
|
|
--filter: brightness(0) saturate(100%) invert(43%) sepia(55%) saturate(1482%) hue-rotate(336deg) brightness(104%) contrast(101%);
|
|
}
|
|
&.clicked{
|
|
.route_clicked_msg_for_unregistered_user{
|
|
display: flex;
|
|
}
|
|
.route_msg_for_unregistered_user{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.route_card_owner_info{
|
|
height: 47px;
|
|
margin-left: 75px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.route_card_info_left_part{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
.card_splitter{
|
|
height: 22px;
|
|
width: 2px;
|
|
background: var(--card-splitter-bg);
|
|
}
|
|
.card_owner_type{
|
|
&.mover{
|
|
--route-owner-type-color: #45C226;
|
|
}
|
|
font-size: var(--medium-font-size);
|
|
color: var(--route-owner-type-color);
|
|
font-weight: 600;
|
|
}
|
|
.card_cargo_type{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: var(--medium-font-size);
|
|
color: var(--route-cargo-type-color);
|
|
font-weight: 600;
|
|
|
|
div.orange{color: #FF613A}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.route_card_route_data_cont{
|
|
&.mobile{display: none}
|
|
@media (max-width: 1160px) {
|
|
display: none;
|
|
&.mobile{
|
|
display: block;
|
|
.route_card_route_data {
|
|
display: grid;
|
|
grid-template-columns: 20px calc(100% - 30px);
|
|
gap: 10px;
|
|
|
|
.way_progress_line_container {
|
|
margin-top: 20px;
|
|
height: calc(100% - 20px);
|
|
|
|
.way_progress_round:first-of-type {
|
|
left: unset;
|
|
top: 0;
|
|
}
|
|
|
|
.way_progress_round:last-of-type {
|
|
right: unset;
|
|
top: calc(100% - 20px);
|
|
}
|
|
|
|
.way_progress_line {
|
|
background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
|
|
height: calc(100% - 10px);
|
|
width: 4px;
|
|
}
|
|
|
|
.way_progress_arrows_line {
|
|
height: calc(100% - 10px);
|
|
width: 4px;
|
|
background-repeat: repeat-y;
|
|
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
|
|
background-size: 4px;
|
|
}
|
|
}
|
|
|
|
.place_title{
|
|
width: 100%;
|
|
--max-width: var(--from-to-place-data-width)!important;
|
|
background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--max-width))!important;
|
|
}
|
|
|
|
.route_transport, .route_date_data {
|
|
&.route_transport {
|
|
margin-bottom: 0;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
&.route_date_data {
|
|
margin-top: 0;
|
|
margin-bottom: 5px;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 39px;
|
|
}
|
|
}
|
|
|
|
justify-content: left !important;
|
|
}
|
|
|
|
.arrival_to {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.route_card_route_data{
|
|
margin-top: var(--route_card_route_data-margin-top);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 60px;
|
|
|
|
.from_to_place_data{
|
|
width: var(--from-to-place-data-width);
|
|
@media (max-width: 992px) {
|
|
--big-font-size: 14px;
|
|
}
|
|
&:has(.arrival_to){
|
|
.place{justify-content: right}
|
|
} &:has(.departure_from){
|
|
.place{justify-content: left}
|
|
}
|
|
@media (max-width: 1160px) {.place{justify-content: left!important;}}
|
|
.label{
|
|
color: #27242499;
|
|
font-size: var(--big-font-size);
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
&.departure_from{
|
|
text-align: left;
|
|
} &.arrival_to{
|
|
text-align: right;
|
|
}
|
|
}
|
|
.place{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
.country{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
img{
|
|
width: 16px;
|
|
height: 12px;
|
|
display: block;
|
|
object-fit: contain;
|
|
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.country_code{
|
|
color: #27242499;
|
|
font-size: var(--medium-font-size);
|
|
}
|
|
}
|
|
.place_title{
|
|
--gradient_100: var(--max-width);
|
|
--max-width: calc(var(--from-to-place-data-width) - 52.3px);
|
|
font-size: var(--big-font-size);
|
|
font-weight: 800;
|
|
max-width: var(--max-width);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
&.gradient{
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--gradient_100));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.route_way_data{
|
|
@media (max-width: 992px) {
|
|
--medium-font-size: 12px;
|
|
}
|
|
flex-grow: 1;
|
|
.route_transport{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
margin-bottom: 10px;
|
|
margin-top: 8px;
|
|
.route_transport_name{
|
|
font-size: var(--medium-font-size);
|
|
font-weight: 600;
|
|
}
|
|
img{
|
|
height: 12px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dates_inf_cont{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.way_progress_line_container{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 15px;
|
|
.way_progress_round{
|
|
height: 20px;
|
|
width: 20px;
|
|
background: #FFFFFF;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: -10px;
|
|
z-index: 11;
|
|
&:first-of-type{
|
|
border: 3px solid #065BFF;
|
|
left: 0;
|
|
}
|
|
&:last-of-type{
|
|
border: 3px solid #45C226;
|
|
right: 0;
|
|
}
|
|
}
|
|
.way_progress_line{
|
|
width: calc(100% - 10px);
|
|
margin-left: 10px;
|
|
height: 4px;
|
|
position: absolute;
|
|
top: 2px;
|
|
z-index: 1;
|
|
background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%);
|
|
}
|
|
.way_progress_arrows_line{
|
|
width: calc(100% - 10px);
|
|
margin-left: 10px;
|
|
height: 4px;
|
|
position: absolute;
|
|
top: 2px;
|
|
z-index: 10;
|
|
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg");
|
|
background-repeat: repeat-x;
|
|
background-size: 10px;
|
|
}
|
|
}
|
|
.route_card_actions_container{
|
|
margin-top: 23px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
&.mobile{display: none;}
|
|
@media (max-width: 1160px) {
|
|
display: none;
|
|
&.mobile{
|
|
display: block;
|
|
.delete_route{text-align: center}
|
|
}
|
|
}
|
|
.delete_route{
|
|
cursor: pointer;
|
|
color: #27242499;
|
|
font-size: var(--medium-font-size);
|
|
&:hover{
|
|
color: #FF613A;
|
|
}
|
|
}
|
|
.right_part_action_btns{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
.route_btn{
|
|
&.mobile{display: none;}
|
|
@media (max-width: 1160px) {
|
|
&.mobile{display: flex;}
|
|
&.hide_in_mobile{display: none!important;};
|
|
}
|
|
|
|
cursor: pointer;
|
|
&.solid{
|
|
--route-btn-width: 222px;
|
|
--route-btn-padding: 12px 0;
|
|
--route-btn-bg: #FF613A;
|
|
--route-btn-title-color: #ffffff;
|
|
}
|
|
&.inactive{
|
|
cursor: default;
|
|
--route-btn-title-color: #27242499;
|
|
--route-btn-border: 1.5px solid #FF613A99;
|
|
}
|
|
width: var(--route-btn-width);
|
|
border: var(--route-btn-border);
|
|
border-radius: var(--route-btn-border-radius);
|
|
padding: var(--route-btn-padding);
|
|
background: var(--route-btn-bg);
|
|
height: var(--route-btn-height);
|
|
margin: var(--route-btn-margin);
|
|
text-align: center;
|
|
justify-content: center;
|
|
transition: 200ms all;
|
|
&:has(img){
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: unset;
|
|
}
|
|
&:not(&.inactive) and &:not(&.unhovered){
|
|
&:hover{
|
|
background: var(--route-btn-hover-bg);
|
|
.route_btn_title{color: var(--route-btn-hover-text-color);}
|
|
.route_btn_data{color: var(--route-btn-hover-text-color);}
|
|
box-shadow: 0 4px 4px rgba(189, 104, 104, 0.25);
|
|
}
|
|
}
|
|
.route_btn_title{
|
|
@media (max-width: 768px) {
|
|
--big-font-size: 14px;
|
|
--medium-font-size: 12px;
|
|
}
|
|
color: var(--route-btn-title-color);
|
|
font-size: var(--medium-font-size);
|
|
&.big{
|
|
font-size: var(--big-font-size);
|
|
}
|
|
}
|
|
.route_btn_data{
|
|
font-size: var(--small-font-size);
|
|
color: var(--route-btn-text-data-color);
|
|
}
|
|
img{
|
|
min-width: 16px;
|
|
display: block;
|
|
}
|
|
}
|
|
.route_date_data{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
justify-content: var(--route-date-data-justify);
|
|
margin: var(--route-date-data-margin);
|
|
font-size: var(--medium-font-size);
|
|
width: 100%;
|
|
.date_data_value{
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.route_date_splitter{
|
|
background: var(--route-date_splitter-bg);
|
|
width: var(--route-date_splitter-width);
|
|
height: var(--route-date_splitter-height);
|
|
margin: var(--route-date_splitter-margin);
|
|
}
|
|
.container_actions_mobile{
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 21px;
|
|
margin: 20px 0;
|
|
}
|
|
.route_number{
|
|
@media (max-width: 1160px) {
|
|
--route-number-font-size: 10px;
|
|
--route-number-margin-top: 10px;
|
|
}
|
|
color: #000000;
|
|
width: 100%;
|
|
text-align: right;
|
|
font-size: var(--route-number-font-size);
|
|
margin-top: var(--route-number-margin-top);
|
|
}
|
|
.respond_route_cont{
|
|
&.mobile{display: none;}
|
|
@media (max-width: 1160px) {
|
|
display: none;
|
|
&.mobile{display: grid;}
|
|
}
|
|
display: grid;
|
|
grid-template-columns: calc(100% - 47px) 37px;
|
|
gap: 10px;
|
|
}
|
|
.chat_btn{
|
|
padding: 6.5px;
|
|
background: #FF613A;
|
|
border-radius: 10px;
|
|
img{
|
|
display: block;
|
|
height: 24px;
|
|
width: 24px;
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
} |