logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

desktop_nav.scss (2305B)

    

  1. .DesktopNav {
  2.   width: 100%;
  3.   z-index: var(--ZI_navbar);
  5.   input {
  6.     color: var(--inputTopbarText, var(--inputText));
  7.   }
  9.   a {
  10.     color: var(--link);
  11.   }
  13.   .inner-nav {
  14.     display: grid;
  15.     grid-template-rows: var(--navbar-height);
  16.     grid-template-columns: 2fr auto 2fr;
  17.     grid-template-areas: "sitename logo actions";
  18.     box-sizing: border-box;
  19.     padding: 0 1.2em;
  20.     margin: auto;
  21.     max-width: 980px;
  22.   }
  24.   &.-column-stretch .inner-nav {
  25.     --miniColumn: 25rem;
  26.     --maxiColumn: 45rem;
  27.     --columnGap: 1em;
  29.     max-width:
  30.       calc(
  31.         var(--sidebarColumnWidth, var(--miniColumn)) +
  32.         var(--contentColumnWidth, var(--maxiColumn)) +
  33.         var(--columnGap)
  34.       );
  35.   }
  37.   &.-logoLeft .inner-nav {
  38.     grid-template-columns: auto 2fr 2fr;
  39.     grid-template-areas: "logo sitename actions";
  40.   }
  42.   &.-column-stretch.-wide .inner-nav {
  43.     max-width:
  44.       calc(
  45.         var(--sidebarColumnWidth, var(--miniColumn)) +
  46.         var(--contentColumnWidth, var(--maxiColumn)) +
  47.         var(--notifsColumnWidth, var(--miniColumn)) +
  48.         var(--columnGap)
  49.       );
  50.   }
  52.   .button-default {
  53.     &,
  54.     svg {
  55.       color: var(--text);
  56.     }
  57.   }
  59.   .logo {
  60.     grid-area: logo;
  61.     position: relative;
  62.     transition: opacity;
  63.     transition-timing-function: ease-out;
  64.     transition-duration: 100ms;
  66.     @media all and (min-width: 800px) {
  67.       /* stylelint-disable-next-line declaration-no-important */
  68.       opacity: 1 !important;
  69.     }
  71.     .mask {
  72.       mask-repeat: no-repeat;
  73.       mask-position: center;
  74.       mask-size: contain;
  75.       background-color: var(--text);
  76.       position: absolute;
  77.       top: 0;
  78.       bottom: 0;
  79.       left: 0;
  80.       right: 0;
  81.     }
  83.     img {
  84.       display: inline-block;
  85.       height: var(--navbar-height);
  86.     }
  87.   }
  89.   .nav-icon {
  90.     margin-left: 0.2em;
  91.     width: 2em;
  92.     height: 100%;
  93.     text-align: center;
  95.     .svg-inline--fa {
  96.       color: var(--link);
  97.     }
  98.   }
  100.   .sitename {
  101.     grid-area: sitename;
  102.   }
  104.   .actions {
  105.     grid-area: actions;
  106.   }
  108.   .item {
  109.     flex: 1;
  110.     line-height: var(--navbar-height);
  111.     height: var(--navbar-height);
  112.     overflow: hidden;
  113.     display: flex;
  114.     flex-wrap: wrap;
  116.     &.right {
  117.       justify-content: flex-end;
  118.       text-align: right;
  119.     }
  120.   }
  122.   .spacer {
  123.     width: 1em;
  124.   }
  125. }