Files
red-valley/resources/[framework]/[addons]/qs-smartphone-pro/html/css/apps/uberRider.css
2026-03-29 21:41:17 +03:00

409 lines
7.4 KiB
CSS

#uberRider-categoriesContainer {
position: relative;
top: 50px;
display: flex;
flex-direction: column;
height: 100%;
width: 98%;
margin: 0 auto;
}
.uberRider-categories h4 {
font-size: 25px;
width: 80%;
text-align: left;
}
#uberRider-categoriesContainer h1 {
margin-top: 10%;
font-weight: bold;
}
.uberRider-categories {
position: relative;
margin: 0px 14px;
width: 50%;
height: 300px;
margin-top: 10%;
background-color: var(--dark-background-color);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
transition: all 0.1s linear;
}
#uberRider-categoriesContainer footer {
margin-top: 8%;
font-weight: bold;
}
#uberRider-categoriesContainer .text-2xl {
font-size: 20px;
}
.uberRider-categ-img {
width: auto;
height: 100px;
}
.uberRider-categ-righticon {
position: relative;
right: 45px;
top: 20px;
cursor: pointer;
height: 75px;
}
.uberRider-backImg {
position: relative;
display: block;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background: var(--text-color);
color: var(--invert-text-color);
padding: 11.2px;
font-size: 19px;
border-radius: 50%;
cursor: pointer;
z-index: 9999;
}
#uberRider-getARide,
#uberRider-beARiderContainer {
display: none;
flex-direction: column;
width: calc(100% - 20px);
height: 100%;
margin: 0 10px;
position: relative;
top: 50px;
transition: all 0.1s linear;
}
#uberRider-beARiderContent {
position: relative;
top: 30px;
width: 90%;
margin: 0 auto;
}
#uberRider-beARiderContent a {
color: gray;
text-align: center;
}
#uberRider-beARiderContainer article {
margin-top: 35%;
}
#uberRider-beARiderContainer img {
height: 250px;
}
#uberRider-beARiderContainer p {
margin-top: 3%;
color: gray;
text-align: center;
}
#uberRider-vehicleModelContainer {
position: relative;
width: 100%;
height: 220px;
overflow: auto;
}
#uberRider-vehicleModelContainer::-webkit-scrollbar {
display: none
}
#uberRider-vehicleModels {
position: relative;
width: 94%;
height: 84%;
margin: 0 auto;
top: 20px;
z-index: 999;
overflow: auto;
}
#uberRider-vehicleModels h5 {
position: relative;
color: green;
font-size: 18px;
}
#uberRider-vehicleModels h4 {
position: relative;
font-size: 19px;
}
#uberRider-ridersContainer {
position: relative;
width: 94%;
margin: 0 auto;
height: 100%;
bottom: 30px;
}
#uberRider-ridersContainer h3 {
position: absolute;
left: 50%;
color: #f8b044;
transform: translate(-50%, -50%)
}
#uberRider-riders {
position: absolute;
top: 10%;
width: 100%;
height: 51%;
overflow-y: auto;
}
#uberRider-riders::-webkit-scrollbar {
display: none
}
.uberRider-rider {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5px;
border-radius: 2px;
background-color: var(--text-color);
width: 100%;
margin-bottom: 5px;
height: 45px;
padding-left: 15px;
padding-right: 15px;
color: var(--invert-text-color);
font-size: 17px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
}
.uberRider-rider span:last-child {
color: var(--invert-text-color);
font-size: 15px;
font-weight: 100;
}
#uberRider-riderContainer {
width: 100%;
height: 85%;
align-items: center;
}
.uberRider-riderContainer-header {
position: relative;
top: 40px;
font-size: 18px;
width: 80%;
margin: 0 auto;
text-align: center;
}
#uberRider-riderContainer a {
position: relative;
color: var(--text-color);
}
#uberRider-beariderFee {
border: none;
background: var(--border-color);
height: 45px;
padding-left: 15px;
}
#uberRider-beARiderContainer form {
display: flex;
flex-direction: column;
gap: 15px;
}
#uberRider-beARiderbtn {
border: none;
background-color: var(--text-color);
color: var(--invert-text-color);
font-size: 18px;
height: 45px;
}
.uberRider-vehicleModel {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-wrap: wrap;
width: 100%;
height: 55px;
background-color: var(--text-color);
margin: 5px 0px;
color: var(--invert-text-color);
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.4s
}
#uberRider-requests {
position: absolute;
width: calc(100% - 20px);
height: 45%;
/* background-color: red; */
}
#leaveUberRider {
position: relative;
left: 50%;
top: 5%;
transform: translate(-50%, 50%);
background-color: #eb2828;
color: white;
border: none;
height: 55px;
font-size: 17px;
font-weight: bold;
border-radius: 4px;
width: 70%;
}
#uberRider-waitingUber,
#uberRider-roadToRequester {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 99999999;
background-color: var(--main-background-color);
}
#uberRider-waitingUberContainer,
#uberRider-roadToRequesterContainer {
position: absolute;
top: 10%;
width: 100%;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 50px;
color: var(--text-color);
}
#uberRider-waitingUberContainer h5 {
font-size: 17px;
font-weight: 100;
margin-bottom: 40px;
}
#uberRider-roadToRequesterContainer h5 {
font-size: 16px;
font-weight: 100;
margin-bottom: 25px;
}
#uberRider-waitingUberContainer i,
#uberRider-roadToRequesterContainer i {
color: var(--text-color);
font-size: 45px;
margin-bottom: 10px;
}
#uberRider-callRequest,
#uberRider-callRider {
border: none;
background-color: #00aeff;
width: 90%;
height: 55px;
font-size: 18px;
font-weight: bold;
border-radius: 2px;
color: white;
margin-bottom: 10px;
}
#uberRider-cancelRequest,
#uberRider-cancelRider {
border: none;
background-color: #eb2828;
width: 90%;
height: 55px;
font-size: 18px;
font-weight: bold;
color: white;
border-radius: 2px;
}
#uberRider-riderInfo {
width: 100%;
margin-bottom: 40px;
}
#uberRider-riderInfo p {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
font-size: 17px;
border-bottom: 1px solid var(--dark-border-color);
}
#uberRider-riderInfo p i {
color: var(--text-color);
font-size: 22px;
}
#uberRider-riderInfo-Header {
width: 100%;
font-size: 25px;
color: white
}
.uberRider-last-transaction-first-letter {
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 700;
background-color: var(--dark-background-color);
width: 45px;
height: 45px;
border-radius: 9999px;
margin-right: 5px;
color: white;
transition: all 0.05s linear 0s;
}
#uberRider-last-transactions {
background: none;
border-radius: 0;
border-bottom: 1px solid var(--dark-background-color);
}
#uberRider-last-transactions .text-green-500 {
text-align: right;
}
#uberRider-map {
height: 70%;
width: 450px;
position: relative;
right: 10px;
bottom: 89px;
background-color: #143c6a;
}
#uberRider-map .leaflet-control-zoom {
display: none;
}