@import layout @import colors .app background: $cBackground color: $cOnBackground user-select: none ::-webkit-scrollbar width: 12px height: 12px ::-webkit-scrollbar-thumb background: $cSecondary ::-webkit-scrollbar-track background: lighten($cPrimary, 10%) .mainview transition-duration: 1s box-shadow: 0 5px 5px $cOnSurfaceShadow background: $cBackground .mainview[state=retracted] width: 80% .accentBar @extend .bar background: $cSecondary height: 10px .navigationBar @extend .bar background: $cPrimary color: $cOnPrimary min-height: 35px box-shadow: 0 5px 5px $cOnSurfaceShadow position: relative z-index: 999 text-align: center .menu height: 2em width: 2em padding: calc(0.5em + 5px) $sPadding 0.5em background: url("/icons/menu.svg") no-repeat center, $cPrimary transition-duration: 0.3s cursor: pointer .menu:hover background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%) .menu:active background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%) .button background: $cPrimary padding: 1em $sPadding 0 height: 2em float: left text-align: center transition-duration: 0.3s cursor: pointer border-bottom: 5px solid $cPrimary span vertical-align: middle display: inline-block .button:hover background: darken($cPrimary, 4%) border-bottom: 5px solid darken($cPrimary, 4%) .button:active background: lighten($cPrimary, 4%) border-bottom: 5px solid lighten($cPrimary, 4%) .current border-bottom: 5px solid $cSurface !important .title padding: 0.5em $sPadding 0.5em font-size: 18pt font-weight: bold text-align: center width: 100% .actionList background: $cPrimary color: $cOnPrimary width: 20% ul list-style: none padding-left: 0 li padding: $sPadding width: 100% cursor: pointer transition-duration: 0.3s li:hover background: darken($cPrimary, 4%) li:active background: lighten($cPrimary, 4%) .panelContainer background: $cSurface color: $cOnSurface .panel transition-duration: 0.3s background: $cPrimary color: $cOnPrimary display: inline-block position: relative min-height: 225px min-width: 225px padding: $sPadding max-width: 100vw max-height: 100vw margin: 25px border-radius: $sPadding box-shadow: 0 5px 5px $cOnSurfaceShadow cursor: pointer text-align: justify .panel:hover background: darken($cPrimary, 4%) .panel:active background: lighten($cPrimary, 4%) box-shadow: 0 7px 5px $cOnSurfaceShadow .panel .title position: absolute padding: $sPadding text-align: center width: calc(100% - 25px) top: 0 left: 0 font-size: 16pt font-weight: bold .icon position: absolute padding: $sPadding left: 0 top: calc(1em + 12.5px) height: calc(50% - 50px) width: calc(100% - 25px) img height: 100% width: auto margin: 0 calc(50% - 25px) .description position: absolute padding: $sPadding top: 50% height: calc(50% - 37.5px) left: 0 overflow: auto