/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "colors"; @import "shared"; * { font-family: 'Open Sans', sans-serif; } .title { font-family: 'Montserrat', sans-serif; } html, body { height: 100vh; margin: 0; padding: 0; background-color: $cerulean; } .clearfix { clear: both; } .clear-xs { @media (max-width: 413px) { clear: both; margin-top: 8px; } } #nav-bar { background-color: $lead; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.1); .home-link { @extend .color-transition; .title { margin: 0; text-align: center; font-size: 3rem; padding: .75rem 0; } } .nav-button { float: right; position: relative; bottom: 50px; font-size: 20px; outline: none; background: transparent; border: none; @extend .color-transition; &:hover { cursor: pointer; } @media (max-width: 991px) { display: none; } } #btn-guide { right: 70px; padding: 0; margin: 0; @media (min-width: 1200px) { right: 110px; } } #btn-monitor-mode, #btn-regular-mode { right: 80px; padding: 1px 7px 2px 7px; @media (min-width: 1200px) { right: 120px; } } } #pagination { text-align: center; margin-top: 2rem; a { color: $main_black; text-decoration: none; background-color: white; padding: 20px; @extend .rounded; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); font-weight: bold; &.active { background-color: $tangerine; color: white; } } .page-links { a { font-size: 1.2rem; margin: 0 2px 0 2px; } #angle-left-link { background: white image-url("sail/angle-left.svg") center no-repeat; margin-right: 6px; padding: 20px 24px 20px 24px; } #angle-right-link { background: white image-url("sail/angle-right.svg") center no-repeat; padding: 20px 24px 20px 24px; } } } .modal { position: fixed; height: 70%; width: 70%; top: 15%; left: 15%; background-color: white; z-index: 1; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); @extend .rounded; @extend .fade-in; padding: 15px; overflow: scroll; @media (max-width: 1200px) { width: 90%; left: 3%; } @media (max-width: 767px) { width: 90%; left: 1%; } } #profiles-modal { @extend .modal; text-align: center; h1 { margin-left: 35px; #response-message { float: right; font-size: 18px; margin-right: 3px; position: relative; top: 5px; min-width: 50px; min-height: 20px; color: $dark_green; } } .profile-entry { padding: 10px; font-size: 20px; border-bottom: 2px solid transparent; margin-bottom: 15px; @extend .border-transition; .inline-form { float: right; } button { float: right; margin-left: 5px; padding: 10px; } .inline-form { @media (max-width: 767px) { margin-right: 3%; } &:first-child { @media (max-width: 767px) { clear: both; } } } .entry-name { position: relative; top: 10px; @media (max-width: 767px) { width: 90%; margin-bottom: 15px; } @media (max-width: 1199px) { float: left; } @media (min-width: 1200px) { margin-left: 250px; } } .active-indicator { float: left; position: relative; top: 7px; &.yellow { color: $light_yellow; } &.green { color: $light_green; } } } #new-profile-input { height: 100%; border: none; font-size: 20px; width: 90%; position: relative; top: 10px; text-overflow: ellipsis; &:focus { outline: none; } @media (max-width: 1200px) { width: 88%; } @media (max-width: 767px) { width: 70%; } } } #guide-modal { @extend .modal; h1 { text-align: center; } details { padding: 15px; summary { font-size: 20px; outline: none; border-bottom: 1px solid transparent; @extend .border-transition; div { padding-bottom: 10px; } label { color: darken($aluminium, 30%); font-size: 18px; float: right; } img { display: none; } &::-webkit-details-marker { display: none; } &:hover { cursor: pointer; } &:focus { border-color: transparent; } } p, .items-container { text-align: center; font-size: 20px; ul { list-style-type: none; li { padding: 10px; } } } } details[open] { summary { border-bottom: 1px solid $tangerine; div { font-size: 28px; text-align: center; } label { display: none; } img { display: block; height: 20px; width: 20px; float: left; position: relative; top: 10px; } } p, p ~ * { @extend .fade-in; } } } hr { border: 0; height: 1px; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }