logo

pleroma-fe

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

desktop_nav.scss (2215B)

    

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