internet-dhier-et-daujourd-hui-les-dangers-du-web/assets/css/sass/app/desktop.scss

@import "includes/_fonts";
@import "includes/_globalElements";
@import "includes/_startMenu";
// Z-INDEXs:
// 100 - main
// 200 - windows
// 300 - header, menu
// 400 - screensaver
// 1000 - overlay

// THEMING VARIABLES

//https://wiki.debian.org/DebianArt/Themes/softWaves?action=AttachFile&do=view&target=attachment_wallpaper.png
$desktopBackground: url("../img/wallpapers/background_desktop.png");

//https://wiki.debian.org/DebianArt/Themes/DotsAndStars
$screensaverBackground: url("../img/wallpapers/background_screensaver.png");

$headerBackground: rgba(255, 255, 255, 0.3);

$menuBackground: rgba(255, 255, 255, 0.3);
$menuFooterBackground: rgba(255, 255, 255, 0.3);

$windowBackground: rgba(255, 255, 255, 0.3);
$windowTextColor: whitesmoke;

// STYLES

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: auto;
  -moz-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  color: whitesmoke;
  font: 400 normal 16px/20px 'Raleway', 'Quicksand', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
}

// HEADER

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
  color: whitesmoke;
  background: $headerBackground;
  //background: #333;
  //border-bottom: 2px solid #709AD1;
  
  > * {
    margin: 0 0.5rem;
  }
  > span {
    display: inline-block;
    cursor: pointer;

    &:hover {
      color: gold;
    }
  }
}

// MENU

#menu {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  width: 70%;
  min-height: 300px;
  height: 70%;
  background: $menuBackground;
  overflow: hidden;
  z-index: 300;

  .menu-item {
    display: inline-block;
    width: 64px;
    height: 64px;
    color: black;
    text-align: center;
    cursor: pointer;
    margin: 1rem;
    outline: 1px dotted red;

    i {
      
    }
    p {
      
    }
  }
  .menu-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
    padding: 1rem;
  }
  .menu-footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: $menuFooterBackground;
    overflow: hidden;
    padding: 1rem;
    text-align: center;

    .menu-item {
      margin: 0 1rem;
    }
  }
}

// MAIN

main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 30px 0 0 0;
  background: $desktopBackground;
}

.screensaver {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  width: 100%;
  height: 100%;
  background-image: $screensaverBackground;
  text-align: center;
  color: whitesmoke;
  font-weight: 300;
  
  > .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    time {
      display: block;
      font-size: 1.5rem;
      line-height: 1.25 * 1.5rem;

      &:first-of-type {
        font-size: 5rem;
        line-height: 1.25 * 5rem;
      }
    }
  }
  > .unlock {
    position: absolute;
    top: 75%;
    left: 51%;
    transform: translateX(-50%);
  }
}

@keyframes flash {
  0% { opacity: 0; }  
  75% { opacity: 1; }
}

// MISCELLANEOUS

button {
  color: inherit;
  font: inherit;
  padding: 0.5rem;
  margin: 1rem 0 0 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  &:active {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) inset;
  }
}

a {
  text-decoration: none;
  color: #666;
  &:hover {}
  &:active {}
}

// WINDOW

.window {
  position: absolute;
  z-index: 200;
  min-width: 200px;
  max-width: 100%;
  max-height: 100%;
  background: $windowBackground;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
  color: $windowTextColor;
  font-size: 14px;
  resize: both;
  overflow: auto;

  .header {
    position: absolute;
    width: 100%;
    padding: 0.5rem;
    cursor: move;
    background: rgba(255, 255, 255, 0.1);
    //background: #333;
    //border-bottom: 2px solid #709AD1;
    //color: gold;

    h1 {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 400;
      //text-shadow: rgba(0, 0, 0, 0.3) -1px -2px, rgba(255, 255, 255, 0.7) 0px 1px 2px;
    }
    > .close {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      cursor: pointer;
    }
  }
  .sub-header {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
  }
  .content {
    padding: 2.5rem 0 0 0;
    overflow: auto;

    .file-item {
      display: inline-block;
      position: relative;
      width: 100px;
      margin: 1rem;
      text-align: center;
      cursor: pointer;
      resize: none;

      > .icon {
        display: block;
        position: relative;
        width: 100px;
        height: 100px;
        text-align: center;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        &:active {
          background: rgba(255, 255, 255, 0.2);
        }
        &.folder {
          background: linear-gradient(rgba(34, 201, 232, 0.5), rgba(20, 85, 219, 0.5));
          //background: linear-gradient(#22c9e8, #1455db);
          border-radius: 0 0 4px 4px;

          &:before {
            content: '';
            display: block;
            position: absolute;
            top: -3px;
            left: 3px;
            background: rgba(255, 255, 255, 0.5);
            width: 94px;
            height: 3px;
          }
          > * {
            color: rgba(0, 0, 0, 0.1);
            //text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
          }
        }
        > * {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      > .label {
        display: inline-block;
        color: whitesmoke;
        padding: 0.2rem 0.5rem;
        min-width: 5rem;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50px;
        text-align: center;
        font-size: 0.63rem;
        margin: 0.3rem 0 0 0;

        overflow: hidden;
      }
    }
  }
}