Sid Gifari File Manager Pro v10.0.3

✏️ Editing: TopBar.css Writable

.topbar-top {
  background-color: rgba(0,0,0,0.7); width: 100%; text-align: right;
}
/* .topbar-topmenu { list-style: none; padding-right: 23px; display: inline-block; }
.topbar-topitem { display: inline-block; margin: 1px 3.2px; text-transform: capitalize; }
.topbar-topitem a {
  color: #fff; text-decoration: none; padding: 5px 8px; margin-bottom: 1px;
  font-size: 12px; font-weight: 500; position: relative;  display: inline-block;
}
.topbar-topitem a img {
  max-width: 14px; max-height: 14px; position: absolute; top: 8px; right: -9px;
} */

/* .topbar-logo {
  display: flex; align-items: center; text-transform: capitalize; height: 78px;
}
.topbar-logo div { flex: 1; margin: 0 10px; }
.topbar-logo img { max-width: 200px; width: 100%; max-height: 100%; min-height: 40px; }
.topbar-logo-srch { text-align: right; color: rgba(0,0,0,0.7); }
.topbar-logo-srch span { margin-right: 8.5px; cursor: pointer; font-weight: 600; }
.topbar-logo-srch span i { margin-left: 10px; }
.topbar-logo-srch span:hover { color: #ed1b24; } */

/* .topbar-srch {
  width: 100%; height: 0; overflow: hidden; padding: 10px 0; /* 62px * /
  background-color: #fff; position: absolute; z-index: 9;
  /* transition: height 1s .2s ease, z-index 1.5s, display 0s 1s; * /
  border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
  transition: height 1s .2s ease, padding 1s .2s, z-index 1.5s;
}
.topbar-srch-frm {
  display: flex; align-items: center; flex-wrap: wrap;
}
.topbar-srch1, .topbar-srch2 { height: 100%; padding: 0 15px; }
.topbar-srch1 { flex: 10; }
.topbar-srch2 { flex: 2.8; padding-right: 15px; }
.topbar-srch1-inp, .topbar-srch2-btn {
  font-family: 'Exo 2', sans-serif; font-size: 15px; line-height: 1.5; height: 40px;
}
.topbar-srch1-inp { display: block; border: 0; width: 100%; }
/* .topbar-srch-inp:focus { border: 1px solid #efefef; } * /
/* .topbar-srch-inp:active { border: none; } * /
.topbar-srch2-btn {
  background-color: #ed1b24; width: 65%; margin-right: 15px;
  border: none; border-radius: 5px; color: #fff; cursor: pointer;
}
.topbar-srch2-cls {
  text-align: center; cursor: pointer;
  font-weight: 600; text-decoration: underline;
} */

.topbar-nav {
  position: sticky; top: 0; z-index: 10; /* position: relative; /* height: 51px; */
  display: flex; background-color: #fff; /* align-items: center; */
  max-height: 76px;
}
.topbar-nav1 {
  flex: 59; background-color: #a62424; /*rgb(226, 19, 110); /*#ed1b24;*/
  transition: flex 0.1s; position: relative;
}
.topbar-nav1 a { text-decoration: none; }
.topbar-nav1>ul {
  display: block; list-style: none; height: 60.4px;
}
.topbar-nav1>ul img { height: 60.4px; }
.topbar-nav1>ul>li {
  display: inline-block; margin-left: 10px; /*position: relative;*/
  border-bottom: 4px solid transparent; vertical-align: middle;
}
.topbar-nav1>ul>li.imp.menu, .topbar-nav1>ul>li.imp.logo,
.topbar-nav1>ul>li:first-of-type { border-bottom: none; margin-right: 3vw; }
.topbar-nav1 ul li a { text-decoration: none; }
.topbar-nav1>ul>li>a {
  color: #fff; font-weight: 400;
  display: inline-block; padding: 14px 8px 10.5px 18px;
}
.topbar-nav1>ul>li:first-of-type>a {
  padding-top: 0; padding-bottom: 0;
}
.topbar-nav1>ul>li>span {
  color: #fff; text-align: center; /* display: none; */
  height: 45px; line-height: 45px; display: inline-block;
  padding-right: 8px;
}
.topbar-nav1>ul>li>span i { font-size: 80%; }
/* .topbar-nav1>ul>li>a i { font-size: 93%; } */
/* .topbar-nav1>ul>li>a:hover i { font-size: 100%; } */
.topbar-nav1>ul>li>span:hover i { font-size: 100%; }
.topbar-nav1>ul>li:hover { border-bottom: 4px solid #fff; }
.topbar-nav1>ul>li:first-of-type:hover { border-bottom: none; }
.topbar-nav1>ul>li a:hover { font-weight: bolder; }
.topbar-nav1>ul>li a:focus {
  text-decoration: underline; /* box-shadow: 0 0 3px #666;
  outline: 1px solid rgba(102,102,102,0.5); */
  /* background-color: #f6f6f6; font-weight: 600; */
}
.topbar-nav1 div.dropdown-box {
  position: absolute; top: 60.4px; left: 0; width: 99.1vw; /*99.1072vw;*/
  background-color: #f6f6f6; padding: 10px 0;
}
.topbar-nav1 div.dropdown-box .container {
  width: 1400px; max-width: 100vw; padding: 0 10px;
  margin-left: auto; margin-right: auto; display: flex;
}
.topbar-nav1 .dropdown-box .container div {
  flex: 2; padding: 10px;
}
.topbar-nav1 .dropdown-box .container div:last-of-type { flex: 1; }
.topbar-nav1 div.dropdown-box .container nav {
  flex: 15.5; padding: 10px;
}
.topbar-nav1 div.dropdown-box .container nav>ul>li {
  display: inline-block; width: 18.2vw; padding-top: 8px;
  cursor: pointer;
}
.topbar-nav1 div.dropdown-box .container nav>ul>li a {
  color: rgb(51,51,51); font-weight: 400; padding: 3.05px 10px;
  display: inline-block; width: 100%;
}
.topbar-nav1 div.dropdown-box .container nav>ul>li a i {
  margin-right: 1rem; font-size: 175%;
}
.topbar-nav1 div.dropdown-box .container nav>ul>li:nth-of-type(3n+1) i {color:rgba(237,27,36,0.6);}
.topbar-nav1 div.dropdown-box .container nav>ul>li:nth-of-type(3n+2) i {color:rgba(24, 206, 36, 0.7);}
.topbar-nav1 div.dropdown-box .container nav>ul>li:nth-of-type(3n) i { color: rgba(226, 19, 110, 0.6); }
.topbar-nav1 div.dropdown-box .container nav>ul>li:nth-of-type(5n) i { color: rgba(78, 19, 226, 0.6); }
.topbar-nav1 div.dropdown-box .container nav>ul>li:hover {
  background-color: #dbdbdb;
}

.topbar-nav1>ul>li.btn, .topbar-nav1>ul>li.lang {
  border-bottom: transparent; float: right;
}
.topbar-nav1>ul>li.btn { margin-top: 16px; padding-top: 7px; }
.topbar-nav1>ul>li.lang { margin-top: 9px; color: #fff; vertical-align: middle; }
.topbar-nav1>ul>li.lang a:last-of-type { padding-left: 7px; vertical-align: middle; }
.topbar-nav1>ul>li.btn div {
  border-radius: 50%; background-color: #eee; vertical-align: middle;
  height: 25.5px; width: 25.5px; display: inline-block; margin-top: -2.5px;
  background-color: transparent; border: 1px solid #fff;
}
.topbar-nav1>ul>li.btn div:last-of-type {
  margin-left: -13px; z-index: 1; position: relative;
}
.topbar-nav1>ul>li.btn button {
  margin-left: -13px; border: 0; z-index: 10; position: relative;
  background-color: rgb(226, 19, 110); /*#ed1b24;*/
  color: #fff; padding-top: 1px;
  border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}
.topbar-nav1>ul>li.btn:hover div, .topbar-nav1>ul>li.btn:hover button {
  background-color: #fff; color: rgb(226, 19, 110); /*#ed1b24;*/
}
.topbar-nav1>ul>li.btn a {
  border: 2px solid #fff; overflow: hidden;
  border-radius: 42%; line-height: 0.6;
  display: inline-block; padding-right: 14px;
}
.topbar-nav1>ul>li.btn a:hover {
  background-color: #fff; color: rgb(226, 19, 110); /*#ed1b24;*/
}
.topbar-nav1 .imp.menu { float: right; width: 13.13%; }
.topbar-nav1 .imp.menu>a {
  padding: 0; height: 51px; width: 100%; background-color: #000;
}
.topbar-nav1 .imp.menu img {
  height: 70%; width: 90%; margin-left: 6%; margin-top: 7px;
  position: relative;
}
.topbar-nav1 .imp.menu div.screen {
  background-color: #000; position: absolute; top: 0;
  width: 100%; height: 51px; opacity: 0.5;
}
.topbar-nav1-dropdown {
  display: none;
}
.topbar-nav1-dropdown li a {
  display: block;
}
.topbar-nav1-dropdown li { display: block; }
.topbar-nav1-dropdown li a:hover {
  background-color: rgb(226, 19, 110); /*#ed1b24;*/
  color: #fff;
}
.topbar-nav1-mobile {
  color: #fff; padding: 12px 10px; cursor: pointer; display: none;
}
.topbar-nav1-mobile i { padding: 0 5px; font-size: 80%; }
.topbar-nav1-mobile.active i, .topbar-nav1>ul>li.showDropdown i {
  transform: rotate(180deg);
}
.topbar-nav1-mobile:hover { font-weight: bolder; }
.topbar-nav1-mobile:hover i { font-size: 100%; }

.topbar-nav1 .imp.logo {
  background-repeat: no-repeat; /* transition on background-image doesn't work */
  transition: background-image 2s, background-size 0.1s;
}
.topbar-nav1 .imp.logo.stk {
  background-image: url(/public/logo.png), linear-gradient(#fff, #fff);
  background-size: 95% 70%, cover; width: 15.79%; height: 75px;
  position: absolute; top: 0; right: 14.45%;
}

.topbar-nav2 {
  flex: 6.5; background-position: center; height: 100%; flex-basis: 0;
  z-index: 10; background-repeat: no-repeat;
  transition: flex 0.1s, background-image 0.1s, background-size 0.1s;
}
.topbar-nav2.bckimg {
  background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7))
  , url(/public/logo.png), linear-gradient(#fff, #fff);
  background-size: cover, 95% 70%, cover;
}
.topbar-nav2.stkimg {
  background-image: url(/public/logo.png), linear-gradient(#fff, #fff);
  background-size: 95% 70%, cover;
}
.topbar-nav3 {
  flex: 8.5; background-position: center; height: 51px; /* 100% */
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5))
  , url(/public/logo1.png), linear-gradient(#000, #000); z-index: 10;
  background-size: cover, 90% 70%, cover; background-repeat: no-repeat;
  /* box-shadow: inset 0 0 0 9px #000; */
}
.topbar-nav4 {
  flex: 1; z-index: 10;
  background-color: rgb(226, 19, 110); /*#ed1b24;*/ height: 51px; /* 100% */
}
.topbar-top .highlight, .topbar-nav .highlight,
.topbar-nav .highlight>a, .topbar-nav .highlight i {
  color: #ff0 !important; font-weight: bold !important;
}
.topbar-nav .highlight>ul a { font-weight: 400; }
.topbar-nav .highlight {
  animation: 2.6s linear infinite topbar-blinker;
}
.topbar-nav .highlight:hover { animation: none; }
@keyframes topbar-blinker {
  0%  { opacity: 1.0 } 25% { opacity: 1.0 }  60% { opacity: 0.5 }
  65% { opacity: 0.2 } 75% { opacity: 0.5 } 100% { opacity: 1.0 }
}

.topbar-nav1 .imp.logo {
  background-image: url(/public/logo.png), linear-gradient(#fff, #fff);
  background-size: 100px 70%, cover; height: 51px;
}
.topbar-nav1 .imp.logo::after {
  display: block; content: " ";
  background-image: linear-gradient(rgb(255,255,255), rgb(255,255,255));
  background-size: cover; opacity: 0.7; height: 46px; transition: opacity .5s;
}
.topbar-nav1 .imp.logo:hover::after, .topbar-nav1 .imp.logo.stk::after { opacity: 0; }

@media only screen and (min-width:991px) {
  .topbar-nav1-dropdown {
    position: absolute; z-index: 10; top:51px;
    background-color: #fff; width: 241px;
  }
  .imp.menu .topbar-nav1-dropdown { left: -100px; }
  .topbar-nav1 .imp.menu:hover { border-bottom: none; }
  .topbar-nav1 .imp.menu:hover div.screen { opacity: 0.1; }
  .topbar-nav1>ul>li:hover .topbar-nav1-dropdown { display: block; }
  .topbar-nav1-dropdown li a {
    padding: 10px 15px; border-bottom: 1px solid #f5f5f5;
  }
  .topbar-nav1 .imp.logo {
    float: right; width: 9.94%; background-position: center;
    /* background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7))
    , url(/public/logo.png), linear-gradient(#fff, #fff);
    background-size: cover, 95% 70%, cover; height: 51px; */
  }
}
@media only screen and (max-width:991px) {
  .topbar-top { text-align: left; padding: 4.5px 0; }
  .topbar-topmenu { padding: 0 15px; }
  .topbar-sm-hide { display: none; }
  .topbar-logo { height: 68px; }
  /* .topbar-nav { position: relative; } */
  .topbar-srch { padding: 0; }
  .topbar-srch1 { flex-basis: 100%; }
  .topbar-srch1-inp { height: 32px; }
  .topbar-srch2-btn { height: 38px; }
  .topbar-nav1>ul, .topbar-nav2, .topbar-nav3 { display: none; }
  .topbar-nav1>ul {
    position: absolute; top: 46px; background-color: rgb(226, 19, 110); /*#ed1b24;*/
    border-top: 4px solid #fff; width: 100%;
  }
  .topbar-nav1>ul>li { display: block; }
  .topbar-nav1>ul>li>a { width: 90%; }
  .topbar-nav1>ul>li>span {
    display: inline-block; position: absolute; right: 0;
    width: 10%; padding-left: 4%; cursor: pointer;
  }
  .topbar-nav .highlight>ul a { color: #ff0 !important; }
  .topbar-nav1-mobile { display: inline-block; }
  .topbar-nav1 li.showDropdown .topbar-nav1-dropdown { display: block; }
  .topbar-nav1 li.showDropdown ul { background-color: rgb(226, 19, 110); /*#de1c24;*/ }
  .topbar-nav1 li.showDropdown ul a { border-left: 4px solid transparent; }
  .topbar-nav1 li.showDropdown ul a:hover { border-left: 4px solid #fff; }
  .topbar-nav1-dropdown li a { margin: 10px 0; padding: 0 25px; color: #fff; }
  .topbar-nav1 .imp.menu, .topbar-nav1 .imp.logo { float: none; width: 100%; }
  .topbar-nav1 .imp.menu { border-bottom: none; }
  .topbar-nav1 .imp.menu img { max-width: 128px; margin-left: 13px; }
  /* .topbar-nav1 .imp.logo {
    background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7))
    , url(/public/logo.png), linear-gradient(#fff, #fff);
    background-size: cover, 100px 70%, cover; background-position: 0 0, 27px center;
    height: 51px; border-bottom: 5px solid #000;
  } */
  .topbar-nav1 .imp.logo {
    background-position: 27px center, 0 0; border-bottom: 5px solid #000 !important;
  }
  /* .topbar-nav1 .imp.logo:hover {
    background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0))
    , url(/public/logo.png), linear-gradient(#fff, #fff);
  } */
  .topbar-nav1 .imp.menu div.screen { opacity: 0.4; }
  .topbar-nav1 .imp.menu:hover div.screen { opacity: 0; }
}

/* .topbar-tut {
  width: 100%; height: 50px;
  background-color: rgb(247, 243, 239);
  position: sticky; top: 0; z-index: 9;
  display: flex; align-items: center;
  font-family: 'Ubuntu', sans-serif;
}
.topbar-left, .topbar-right {
  flex: 3;
  display: flex; align-items: center;
  justify-content: center;
}
.topbar-center {
  flex: 6;
}
.topbar-profile-pic {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover;
}
.topbar-social-icon {
  margin-right: 12px; cursor: pointer;
  font-size: 22px; color: var(--primary-color);
}
.topbar-list {
  display: flex; align-items: center; justify-content: center;
  list-style: none;
}
.topbar-list-item {
  margin-right: 22px; font-size: 20px; cursor: pointer;
  color: var(--primary-color);
}
.topbar-search {
  color: var(--primary-color); cursor: pointer; font-size: 20px;
  margin-left: 20px;
}

.dropdown { position: relative; display: inline-block; }
.dropdown-btn { text-decoration: none; }
.dropdown-content { position: absolute; z-index: 10; display: none; top:30px; left: -30px; }
.dropdown-content li { display: block; color: red; }
.dropdown-content li:hover { background-color: #ddd;}
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropdown-btn { background-color: aqua; border-bottom: 3px solid #f00; } */

✏️ Editing: TopBar.css Writable

📁 File Manager Pro

📁 File Manager Pro