mirror of
https://github.com/WDI-Ideas/rubix-admin-panel.git
synced 2026-04-29 06:15:51 +00:00
second commit
This commit is contained in:
274
src/App.css
Normal file
274
src/App.css
Normal file
@@ -0,0 +1,274 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* font-family: "League Spartan", sans-serif !important; */
|
||||
font-family: "Noto Sans", sans-serif !important;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.activee{
|
||||
text-decoration: none; /* Remove underline */
|
||||
font-weight: bold; /* Optionally change font weight for active link */
|
||||
background: linear-gradient(to right, #7A45FB, #DE41B5); /* Gradient background */
|
||||
-webkit-background-clip: text; /* Clip text to the background area */
|
||||
-webkit-text-fill-color: transparent; /* Fill text with the background color */
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.active{
|
||||
background-color: #e2e8f086;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none ;
|
||||
transition: all 0.2s ease-in-out;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
background-color: #e2e8f065 !important;
|
||||
}
|
||||
|
||||
.active:hover {
|
||||
background-color: #e2e8f065;
|
||||
}
|
||||
|
||||
.web-text-small{
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.web-text-xxsmall{
|
||||
font-size: 9px !important;
|
||||
}
|
||||
.web-text-xsmall{
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.web-text-medium{
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.web-text-large{
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.rubix-text-dark{
|
||||
color:#3b3e3f
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow-button{
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.arrow-button:active{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.arrow-button:focus{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.arrow-button:hover{
|
||||
background: linear-gradient(90deg, #DE41B5 0%, #7A45FB 100%);
|
||||
}
|
||||
|
||||
.greeting{
|
||||
text-decoration: none; /* Remove underline */
|
||||
font-weight: bold; /* Optionally change font weight for active link */
|
||||
background: linear-gradient(to right, #7A45FB, #DE41B5); /* Gradient background */
|
||||
-webkit-background-clip: text; /* Clip text to the background area */
|
||||
-webkit-text-fill-color: transparent; /* Fill text with the background color */
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.primary-btn{
|
||||
background-color: #38187C !important;
|
||||
}
|
||||
|
||||
.team-slider .swiper-button-next:after {
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
right: 110px;
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
#ffffff,
|
||||
#eee2f2,
|
||||
#e7c3dc,
|
||||
#e5a3ba,
|
||||
#de858e
|
||||
);
|
||||
}
|
||||
.team-slider .swiper-button-prev:after {
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
left: 110px;
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
#ffffff,
|
||||
#eee2f2,
|
||||
#e7c3dc,
|
||||
#e5a3ba,
|
||||
#de858e
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rotate{
|
||||
|
||||
animation: animName 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes animName {
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lds-ellipsis {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
}
|
||||
.lds-ellipsis div {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
.lds-ellipsis div:nth-child(1) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(2) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(3) {
|
||||
left: 26px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(4) {
|
||||
left: 45px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Extra small devices (phones, 600px and down) */
|
||||
@media only screen and (max-width: 600px) {
|
||||
body {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Small devices (portrait tablets and large phones, 600px and up) */
|
||||
@media only screen and (min-width: 600px) {
|
||||
body {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (landscape tablets, 768px and up) */
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (laptops/desktops, 992px and up) */
|
||||
@media only screen and (min-width: 992px) {
|
||||
body {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
body {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user