Conscribo mobile by GreenMan36

/* ==UserStyle==
@name         Conscribo mobile
@version      20231229.11.46
@namespace    userstyles.world/user/GreenMan36
@description  Enhancements to make Conscribo better to use on a mobile phone
@author       GreenMan36
@license      No License
==/UserStyle== */

@-moz-document domain("secure.conscribo.nl") {
:is(input[type="text"], input[type="password"], textarea) {
  font-size: 1.2rem;
}
body:has(#moduleSpan_Authentication),
#moduleSpan_Authentication :is(input[type="text"], input[type="password"], textarea) {
  font-size: 2rem;
}
#moduleSpan_Authentication {
  /*  remove stupid floats  */
  & div {
    float: unset !important;
  }
  /*  make sure all table elements are proper blocks  */
  & table,
  tbody,
  tr,
  td {
    display: block;
    width: 100% !important;
    /* make input elements mobile friendly      */
    & > input {
      width: 100% !important;
      height: 5rem;
    }
  }
  /*  required specificity  */
  & input[type="text"],
  input[type="password"] {
    margin-bottom: 2rem;
  }
  /*  move login elements to the bottom of the screen and out of the pageflow  */
  & td[rowspan="2"] {
    position: fixed;
    inset: 0;
    z-index: 100;
    top: unset;
    & * {
      display: block !important;
      text-align: center;
    }
    /*  make the login button mobile friendly    */
    & button.cupid-yellow-normal {
      width: 100% !important;
      height: 10rem !important;
      font-size: 2rem;
    }
  }
}
/* Add padding to the news in case there is any (so the login buttons don't cover it) */
span[id="moduleSpan_News"] {
  display: block;
  padding-bottom: 25rem;
}
table {
  overflow: scroll;
  max-width: 100vw !important;
}
table#layoutTop > tbody > tr > .mainMenuContainer > .compressedTable > tbody > tr > td:not(.subMenuContainer) {
  display: flex;
  & > a {
    flex: 1 1;
    & div {
      width: 100%
    }
  }
  /* hide user info area and logo, not really needed   */
  &[style="width: 125px;"],
  & .mainMenuProductConscribo {
    display: none;
  }
  .mainMenuItem {
    height: 5rem;
    font-size: 1.2rem;
  }
  #mainMenuItem_openFin {
    display: flex;
    flex-direction: column;
  }
}
}