VulpesOS/gaia/apps/settings/style/settings_large.css

/**
 * style & layout for tablet (two-column)
 */
@media (min-width: 768px) and (orientation: portrait) {

  section[role="region"]:not(#root).current {
    z-index: 2;
  }

  /**
   * media storage
   */
  section[role="region"]#mediaStorage .color-music.stackedbar-item,
  section[role="region"]#mediaStorage .color-music > .stackedbar-color-label {
    background-color: #82c82d;
    border: 0.3rem #82c82d;
  }

  section[role="region"]#mediaStorage .color-pictures.stackedbar-item,
  section[role="region"]#mediaStorage .color-pictures > .stackedbar-color-label {
    background-color: #efd600;
    border: 0.3rem #efd600;
  }

  section[role="region"]#mediaStorage .color-videos.stackedbar-item,
  section[role="region"]#mediaStorage .color-videos > .stackedbar-color-label {
    background-color: #00aacc;
    border: 0.3rem #00aacc;
  }

  section[role="region"]#mediaStorage .color-free.stackedbar-item,
  section[role="region"]#mediaStorage .color-free > .stackedbar-color-label {
    background-color: #858585;
    border: 0.3rem #858585;
  }
}

@media (min-width: 768px) and (orientation: landscape) {

  section[role="region"]#root {
    transform: none;
    transition: none;
    offset-inline-start: 0;
    width: 40rem;
    visibility: visible;
  }

  section[role="region"],
  section[role="region"].previous,
  section[role="region"].current {
    transition: none;
    offset-inline-start: 40rem;
    width: calc(100% - 40rem);
  }

  section[role="region"]#root header {
    background: url("images/ui/tablet_menu_header.png") repeat-x scroll 0 0 / auto 100% transparent;
  }

  section[role="region"]#root header:after {
    background-image: url("images/ui/tablet_separator.png");
    background-repeat: no-repeat;
    background-size: 0.2rem;
    background-color: transparent;
    height: 95%;
    top: 0;
  }
  html[dir="ltr"] section[role="region"]#root header:after { background-position: right; }
  html[dir="rtl"] section[role="region"]#root header:after { background-position: left; }

  /* no back button at first level */
  section[role="region"]:not([id*='-']) header > a {
    display: none;
  }

  /**
   * lists
   */
  section[role="region"] header h2 {
    padding-inline-start: 2rem;
  }

  section[role="region"]#root ul li {
    margin: 0 1.5rem 0 3.5rem;
  }

  section[role="region"]:not([id='root']) ul li {
    margin: 0 4rem;
    padding: 0;
  }

  section[role="region"]#root ul li > a.menu-item {
    margin: 0 -3.5rem;
    padding-inline-start: 7.5rem;
  }

  section[role="region"]#root .menu-item::before {
    offset-inline-start: calc(-2.5rem / 2);
  }

  section[role="region"]:not([id='root']) ul li > gaia-checkbox > label {
    padding-inline-start: 1.5rem;
  }

  section[role="region"]:not([id='root']) ul li > a,
  section[role="region"]:not([id='root']) ul li > span:not(.button),
  section[role="region"]:not([id='root']) ul li > p {
    margin: 0 -4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  section[role="region"]:not([id='root']) ul li > progress + span:not(.button) {
    padding-inline-start: 6rem;
  }

  section[role="region"]:not([id='root']) ul:not([class='wifi-availableNetworks']) li > progress {
    width: 100%;
  }

  section[role="region"]:not([id='root']) ul li > a span {
    offset-inline-end: 0;
  }

  section[role="region"]:not([id='root']) ul li > small {
    offset-inline-start: 0;
  }

  section[role="region"]:not([id='root']) ul li.hint .explanation {
    padding-inline-start: 4rem;
  }

  /**
   * button
   */
  section[role="region"]:not([id='root']) ul li button,
  section[role="region"]:not([id='root']) ul li .button {
    width: 29rem;
    offset-inline-start: calc(100% - 29rem);
    height: 3.5rem;
  }

  section[role="region"]#findmydevice ul li button {
    width: 100%;
    offset-inline-start: 0;
  }

  section[role="region"]:not([id='root']) ul li span > select {
    width: 200%;
  }

  /**
   * wifi auth / hotspot wifi settings
   */
  section[role="region"]#hotspot-wifiSettings ul li.password > label > span,
  section[role="region"]#wifi-auth ul li.password > label > span {
    padding-inline-start: 3rem;
  }

  /**
   * wallpaper
   */
  section[role="region"].wallpaper {
    height: 33.5rem;
  }

  section[role="region"].wallpaper .wallpaper-button {
    background-position: 95% 24%;
  }

  html[dir="ltr"] section[role="region"].wallpaper .wallpaper-button {
    background-position: right 4rem top 2.5rem;
  }
  html[dir="rtl"] section[role="region"].wallpaper .wallpaper-button {
    background-position: left 4rem top 2.5rem;
  }

  /**
   * sound
   */
  section[role="region"] ul li.sound-setting {
    min-height: 6rem;
  }

  ul li > label.range-icons.volume span {
    position: absolute;
    offset-inline-start: unset;
    offset-inline-end: 50%;
    height: 100%;
    line-height: 6rem;
  }

  ul li > label.range-icons.volume span:before {
    display: none;
  }

  ul li > label.range-icons.volume input {
    margin-inline-start: 0;
  }

  ul li > label.range-icons.volume p {
    padding-inline-start: 0;
  }

  ul li > label.range-icons span {
    margin: 0;
    text-align: center;
  }

  /**
   * media storage
   */
  section[role="region"]#mediaStorage div[id*='-space-stackedbar'] {
    margin: 1.5rem 0;
    width: 100%;
    border: 0.3rem #e7e7e7;
    border-radius: 5rem;
    height: 2.5rem;
  }

  section[role="region"]#mediaStorage .stackedbar-color-label {
    offset-inline-start: 4rem;
    border-radius: 5rem;
    width: 2.5rem;
    height: 2.5rem;
    top: 1.8rem;
  }

  section[role="region"]#mediaStorage .stackedbar-color-label + a {
    padding-inline-start: 8rem;
  }

  section[role="region"]#mediaStorage .color-music.stackedbar-item,
  section[role="region"]#mediaStorage .color-music > .stackedbar-color-label {
    background-color: #82c82d;
    border: 0.3rem #82c82d;
  }

  section[role="region"]#mediaStorage .color-pictures.stackedbar-item,
  section[role="region"]#mediaStorage .color-pictures > .stackedbar-color-label {
    background-color: #efd600;
    border: 0.3rem #efd600;
  }

  section[role="region"]#mediaStorage .color-videos.stackedbar-item,
  section[role="region"]#mediaStorage .color-videos > .stackedbar-color-label {
    background-color: #00aacc;
    border: 0.3rem #00aacc;
  }

  section[role="region"]#mediaStorage .color-free.stackedbar-item,
  section[role="region"]#mediaStorage .color-free > .stackedbar-color-label {
    background-color: #858585;
    border: 0.3rem #858585;
  }

  section[role="region"]#about-yourPrivacy .privacy-menuitem {
    margin: 0 -4rem;
    padding-inline-start: 8.7rem;
    padding-inline-end: 4rem;
  }

  section[role="region"]#about-yourPrivacy .privacy-menuitem:before {
    offset-inline-start: 0;
  }

  /**
   * display
   */
  section[role="region"] ul li.brightness-manual > label input[type="range"] {
    display: inline;
    width: calc(100% - 8rem);
    offset-inline-start: 4rem;
  }

  /**
   * slider
   */
  section[role="region"] ul li > label input[type='range'] {
    top: 0;
    width: 49.5%;
    height: 100%;
    offset-inline-start: 50%;
    position: absolute;
  }

  /**
   * button
   */
  section[role="region"]:not([id='root']) ul li p + .button {
    position: absolute;
    top: 1.2rem;
  }

  section[role="region"] ul li p + label:not([for]) {
    top: 1.5rem;
  }

  /**
   * description
   */
  section[role="region"]:not([id='root']) .two-column-description {
    color: #6d7374;
  }

}

/*
 * XXX Bug 943173
 * All lines below are polyfill of styles of Building Block.
 * Remove them if bug 905065 were landed.
 */
@media (min-width: 768px) {
  section[role="region"].skin-organic > header:first-child h1,
  .skin-organic section[role="region"] > header:first-child h1,
  section[role="region"].skin-dark > header:first-child,
  .skin-dark section[role="region"] > header:first-child {
    color: white;
  }

  section[role="region"] > header:first-child h1 {
    font-size: 2.4rem;
    line-height: 5rem;
    color: #fff;
    padding: 0 1rem 0 2rem;
  }

  section[role="region"] > header:first-child menu[type="toolbar"] a,
  section[role="region"] > header:first-child menu[type="toolbar"] button {
    width: 8.2rem;
  }

  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:after,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:after  {
    content: "";
    position: absolute;
    offset-inline-start: 0;
    top: 0;
    z-index: -1;
    height: 5rem;
    width: 8.2rem;
    background: url("images/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
  }

  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
  section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
  section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active,
  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
  section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
  section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active {
    background: url("images/ui/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
  }

  section[role="region"] > header:first-child > button,
  section[role="region"] > header:first-child > a {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: none;
    float: left;
    overflow: visible;
    margin: 0;
  }

  section[role="region"] > header:first-child > button:after,
  section[role="region"] > header:first-child > a:after {
    width: 5.2rem;
    height: 5rem;
  }

  section[role="region"] > header:first-child .icon {
    width: 5rem;
  }

  section[role="region"] > header:first-child .icon.icon-back,
  section[role="region"].skin-organic > header:first-child .icon.icon-back,
  .skin-organic section[role="region"] > header:first-child .icon.icon-back {
    background-image: url("images/icon/back_tablet.png");
  }

  section[role="region"].skin-dark  > header:first-child,
  .skin-dark  section[role="region"] > header:first-child,
  section[role="region"].skin-organic > header:first-child,
  .skin-organic section[role="region"] > header:first-child {
    background: url("images/ui/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
  }

  section[role="region"].skin-dark > header:first-child a:after,
  .skin-dark section[role="region"] > header:first-child a:after,
  section[role="region"].skin-dark > header:first-child button:after,
  .skin-dark section[role="region"] > header:first-child button:after,
  section[role="region"].skin-organic > header:first-child a:after,
  .skin-organic section[role="region"] > header:first-child a:after,
  section[role="region"].skin-organic > header:first-child button:after,
  .skin-organic section[role="region"] > header:first-child button:after {
    background: url("images/ui/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
  }
}