[YSTU WPROG] Mobile adaptation by xtcry

/* ==UserStyle==
@name [YSTU WPROG] Mobile adaptation
@namespace https://github.com/xTCry
@homepageURL https://gist.github.com/xTCry/c4c0ede4ff0904ef788ae29f239467f9
@supportURL https://gist.github.com/xTCry/c4c0ede4ff0904ef788ae29f239467f9
@version 0.0.4
@description  [YSTU WPROG] Mobile adaptation
@author xTCry
@license MIT
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://ystu.ru/WPROG/"),
url-prefix("https://www.ystu.ru/WPROG/"),
url-prefix("https://ystu.ru/wprog/"),
url-prefix("https://www.ystu.ru/wprog/") {

  /* Fixs/Feature for modal */
  .popup,
  .popup_click {
    width: fit-content;
    margin: inherit!important;
    position: absolute;
    top: 15%;
    left: 35%;
    margin-top: -50px!important;
    margin-left: -50px!important;
  }
  .parent_popup,
  .parent_popup_click {
    top: 0;
  }
  .prokrutka {
    overflow-x: auto;
    overflow-y: auto;
  }

  .CenterColumn {
    margin: inherit;
    display: flex;
    justify-content: center;
  }

  @media screen and (max-width: 800px) {
    .WidthLimiter {
      min-width: max-content;
    }

    /*   header   */
    .ContentHeader {
      max-width: calc(100vw - 0px);
    }
    .ContentHeader > .Logo {
      width: inherit;
      height: inherit;
      position: inherit;
      top: inherit;
      left: inherit;

      padding: 5px;
    }

    .ContentHeader > .Logo > img {
      width: 150px;
    }

    .MainMenuContent > ul {
      flex-direction: column;
      display: flex;
    }
    .MainMenuContent > ul > lim,
    .MainMenuContent > ul > lil,
    .MainMenuContent > ul > lir,
    .MainMenuContent > ul > * {
      border-bottom: 1px solid #ffffff;
      height: inherit;
      /* max-width: calc(100vw - 40px); */
    }

    .MainMenuArea {
      padding: 15px;
    }

    .MainMenuArea .MainMenuContent {
      height: inherit;
      background: inherit;
      background-color: #3670f4;
    }

    /*   content   */
    .WidthLimiter > .Content,
    .NewsLeftColumn > .Content {
      flex-direction: column;
      display: flex;
      max-width: calc(100vw - 0px);
    }

    .LeftColumn {
      width: inherit;
    }

    .RightContentColumn {
      margin-left: inherit;
    }

    /* Скрыть гирлянду */
    .NewsLeftColumn .Content > img {
      display: none;
    }

    /* fix желтого */
    .NewsLeftColumn .Content > .box {
      max-width: calc(100vw - 80px);
    }
    .NewsLeftColumn .Content > .box > pre {
      white-space: pre-wrap;
    }

    /* Объявлеиня */
    .NewsLeftColumn > .Content > font > ul {
      max-width: 100vw;
      margin: inherit;
      padding: 0 0 0 30px;
      line-height: inherit;
    }

    .RightContentColumn > div > div > div > table {
      width: auto;
    }

    .CenterColumn {
      margin: 0 15px;
      flex-direction: column;
    }
    .CenterColumn table,
    .CenterColumn table td {
      width: auto;
    }

    /* Footer */
    .BottomFooter .Copyright > table {
      width: auto;
    }
    .BottomFooter .Copyright > table p.Lightgray {
      margin-left: inherit;
      margin-right: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .BottomFooter .Copyright > table > tbody > tr > td,
    .NewsLeftColumn > .Content > table > tbody > tr > td,
    .NewsLeftColumn > .Content > font > table > tbody > tr > td {
      display: block;
      max-width: calc(100vw - 50px);
      align-self: inherit;
      text-align: center;
    }

    /* Blue buttons*/
    td > a.bluebut {
      margin: auto;
      border: inherit;
      padding: 4px 20px;
    }

    /* # Timetable */
    .hidetext {
      padding: inherit;
      margin: inherit;
    }

    /* groups list (by .hidetext) */
    .NewsLeftColumn > .Content > .hidetext > table > tbody > tr > td {
      max-width: calc(100vw - 50px);
      align-self: inherit;
      /* text-align: center; */
    }

    /* Fixs/Feature for modal on mobile */
    .popup,
    .popup_click {
      width: calc(100vw - 50px);
      padding: 5px;
      margin: inherit;
      position: absolute;
      top: 30px;
      left: 10px;
      margin-top: inherit !important;
      margin-left: inherit !important;
    }
    .prokrutka {
      height: calc(100vh - 180px);
      width: inherit;
    }
  }
}