Ignore:
Timestamp:
12/12/24 17:06:06 (5 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
d565449
Message:

Pred finalna verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/pages/IMaps/components/Navbar.css

    rd565449 r0c6b92a  
    1 .navbar {
    2   background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
    3   height: 80px;
     1.modern-navbar {
     2  /*background-color: #ffffff;*/
     3  /*background: linear-gradient(*/
     4  /*        90deg,*/
     5  /*        #fafafa 0%,*/
     6  /*        #c07e7e 25%,*/
     7  /*        #af2525 50%,*/
     8  /*        #443a3a 75%,*/
     9  /*        #8d1010 100%*/
     10  /*);*/
     11  /*background: linear-gradient(to right, #ffffff, #c12c2c);*/
     12  /*background: linear-gradient(90deg, #3b3131, #ffffff);*/
     13  background: linear-gradient(90deg, #9b1818, #efefef);
     14  color: #ffffff;
     15  /*color: #333333;*/
    416  display: flex;
    517  justify-content: center;
    618  align-items: center;
    7   font-size: 1.2rem;
     19  padding: 0.8rem 1.5rem;
     20  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    821  position: sticky;
    922  top: 0;
    10   z-index: 999;
    11 }
    12 
    13 .pad-bot {
    14   /* padding-bottom: 1.5rem; */
     23  z-index: 1000;
     24  border-radius: 8px;
     25  margin: 5px;
    1526}
    1627
    1728.navbar-container {
    1829  display: flex;
    19   justify-content: center;
     30  justify-content: space-between;
    2031  align-items: center;
    2132  width: 100%;
     33  max-width: 1200px;
    2234}
    2335
    24 .navbar-logo {
    25   color: #fff;
    26   justify-self: start;
    27   margin-left: 20px;
    28   cursor: pointer;
    29   text-decoration: none;
    30   font-size: 2rem;
     36.navbar-left {
    3137  display: flex;
    3238  align-items: center;
     39  gap: 1rem;
    3340}
    3441
    35 .fa-typo3 {
    36   margin-left: 0.5rem;
    37   font-size: 1.8rem;
     42.navbar-title {
     43  font-size: 1.6rem;
     44  font-weight: 700;
     45  color: #ffffff;
     46  margin: 0;
     47  font-family: "exo", sans-serif;
    3848}
    3949
    40 .nav-menu {
    41   display: grid;
    42   grid-template-columns: repeat(4, auto);
    43   grid-gap: 10px;
    44   list-style: none;
    45   text-align: center;
    46   width: 70vw;
    47   justify-content: end;
    48   margin-right: 2rem;
     50.navbar-right {
     51  display: flex;
     52  align-items: center;
     53  gap: 1rem;
    4954}
    5055
    51 .nav-item {
    52   height: 80px;
     56.navbar-btn {
     57  padding: 0.4rem 1.5rem;
     58  font-size: 0.9rem;
     59  border: 2px solid transparent;
     60  border-radius: 20px;
     61  text-decoration: none;
     62  color: #ffffff;
     63  font-weight: 500;
     64  transition: all 0.3s ease-in-out;
     65  font-family: "exo", sans-serif;
     66  cursor: pointer;
     67  margin-left: 4em;
     68  margin-right: 1em;
    5369}
    5470
    55 .nav-links {
    56   color: #fff;
    57   display: flex;
    58   align-items: center;
    59   text-decoration: none;
    60   padding: 0.5rem 1rem;
    61   height: 100%;
     71.navbar-login {
     72  background-color: #252627;
     73  border: 2px solid #3f3232;
    6274}
    6375
    64 .nav-links:hover {
    65   border-bottom: 4px solid #fff;
    66   transition: all 0.2s ease-out;
     76.navbar-login:hover {
     77  background-color: #ffffff;
     78  color: #212121;
     79  border: 1px solid rgba(19, 18, 18, 0.82);
    6780}
    6881
    69 .fa-bars {
    70   color: #fff;
     82.navbar-signup {
     83  background-color: #252627;
     84  color: #ffffff;
     85  border: 2px solid #343a40;
    7186}
    7287
    73 .nav-links-mobile {
    74   display: none;
     88.navbar-signup:hover {
     89  background-color: #ffffff;
     90  color: #343a40;
     91  border: 2px solid #343a40;
    7592}
    76 
    77 .menu-icon {
    78   display: none;
    79 }
    80 
    81 @media screen and (max-width: 960px) {
    82   .NavbarItems {
    83     position: relative;
    84   }
    85 
    86   .nav-menu {
    87     display: flex;
    88     flex-direction: column;
    89     width: 100%;
    90     height: 90vh;
    91     position: absolute;
    92     top: 80px;
    93     left: -100%;
    94     opacity: 1;
    95     transition: all 0.5s ease;
    96   }
    97 
    98   .nav-menu.active {
    99     background: #242222;
    100     left: 0;
    101     opacity: 1;
    102     transition: all 0.5s ease;
    103     z-index: 1;
    104   }
    105 
    106   .nav-links {
    107     text-align: center;
    108     padding: 2rem;
    109     width: 100%;
    110     display: table;
    111   }
    112 
    113   .nav-links:hover {
    114     background-color: #fff;
    115     color: #242424;
    116     border-radius: 0;
    117   }
    118 
    119   .navbar-logo {
    120     position: absolute;
    121     top: 0;
    122     left: 0;
    123     transform: translate(25%, 50%);
    124   }
    125 
    126   .menu-icon {
    127     display: block;
    128     position: absolute;
    129     top: 0;
    130     right: 0;
    131     transform: translate(-100%, 60%);
    132     font-size: 1.8rem;
    133     cursor: pointer;
    134   }
    135 
    136   .fa-times {
    137     color: #fff;
    138     font-size: 2rem;
    139   }
    140 
    141   .nav-links-mobile {
    142     display: block;
    143     text-align: center;
    144     margin: 2rem auto;
    145     border-radius: 4px;
    146     width: 80%;
    147     text-decoration: none;
    148     font-size: 1.5rem;
    149     background-color: transparent;
    150     color: #fff;
    151     padding: 14px 20px;
    152     border: 1px solid #fff;
    153     transition: all 0.3s ease-out;
    154   }
    155 
    156   .nav-links-mobile:hover {
    157     background: #fff;
    158     color: #242424;
    159     transition: 250ms;
    160   }
    161 }
Note: See TracChangeset for help on using the changeset viewer.