$breakpoint-mobile: 720px; $breakpoint-tablet: 1540px; .App { height: auto; text-align: center; //background: black; } a { text-decoration: none; color: white; } span { color: #dbc9c9; margin-left: 5px; } a:hover { color: lawngreen; text-decoration: none; } h3 { color: white; @media(max-width: $breakpoint-tablet) { font-size: 20px; } } h2 { color: white; @media(max-width: $breakpoint-tablet) { font-size: 20px; } } button { min-width: 30px; color: white; background: none; font-weight: 70; text-decoration: none; outline: none; border: 2px solid; border-radius: 1px; transition: 0.2s; } button:hover { background: rgba(255,255,255,.2); } button:active { background: white; } input { background: rgba(26, 26, 26, 0.82); color: white; } .search-input { @media(max-width: $breakpoint-mobile) { display: flex; input { width: 100%; } } } .App-logo { margin: 6px; height: 100px; @media(max-width: $breakpoint-tablet) { height: 80px; } } .logo-large { height: auto; max-height: 700px; @media (max-width: $breakpoint-tablet) { max-height: 400px; } } .musicImage { opacity: 0.3; margin-top: 50px; height: 600px; @media (max-width: $breakpoint-tablet) { height: 400px; } } .music-load-image { margin-top: 60px; height: 600px; @media (max-width: $breakpoint-tablet) { margin-left: 50px; max-height: 300px; } } .Header { width: 100%; display: flex; justify-content: space-between; background: #000000; -webkit-box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.37); box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.376); h3 { margin-top: 30px; } h3:hover { color: lawngreen; } @media (max-width: $breakpoint-mobile) { display: flex; flex-direction: column; h3 { margin: 8px; font-size: 20px; } } } main { background-image: url("background.jpg"); background-attachment:fixed; background-position: top 0px; background-position: right 0px; display: flex; flex-direction: row; min-height: 90vh; @media (max-width: $breakpoint-tablet) { } @media(max-width: $breakpoint-mobile) { flex-direction: column; } } .Aside { min-width: 22%; background-color: red; @media (max-width: $breakpoint-tablet) { width: 320px; min-width: 30%; } @media (max-width: $breakpoint-mobile) { width: 100% } } .Content { margin-bottom: 120px; @media (max-width: $breakpoint-tablet) { } } .Avatar { img { min-height: 60px; min-width: 60px; max-height: 60px; max-width: 60px; border-radius: 30px; } } .Spoiler { cursor: pointer; } .SpoilerContent { cursor: pointer; background: dodgerblue; } footer { width: 100%; background-color: #303030; position: fixed; bottom: 0px; @media (max-width: $breakpoint-mobile) { display: flex; flex-direction: column; } } .Player { margin-top: 10px; button { margin: 5px; } @media (max-width: $breakpoint-mobile) { h3 { font-size: 14px; } } } .currentTime { width: 70vh; @media (max-width: $breakpoint-tablet) { width: 50vh; } @media (max-width: $breakpoint-mobile) { width: 80%; } } .player-nav { display: flex; justify-content: center; @media (max-width: $breakpoint-mobile) { flex-direction: column; font-size: 10px; } } .track-timer { margin-top: 8px; @media (max-width: $breakpoint-mobile) { margin-top: 2px; } } .player-current-time { display: flex; @media (max-width: $breakpoint-mobile) { justify-content: center; display: flex; flex-direction: row; } } .volume { width: 100px; } .vol-buttons { display: flex; justify-content: center; } .LoginButtons { display: flex; flex-direction: row; margin-top: 40px; margin-right: 20px; } .RegColumn { display: flex; flex-direction: column; @media (max-width: $breakpoint-mobile) { width: 50%; } } .LoginColumn { display: flex; flex-direction: column; margin-top: 30px; margin-right: 20px; } .Tracks { width: 800px; text-align: left; padding: 8px; margin: 2px; border: 1px solid dodgerblue; @media (max-width: $breakpoint-tablet) { padding: 6px; width: 600px; } @media (max-width: $breakpoint-mobile) { width: auto; font-size: 14px; } } .btn { background: none; border: none; } .dropdown-menu { font-size: 14px; width: 40px; z-index: 1000; border: 1px solid rgba(255, 255, 255, 0.4); background: #000000; text-align: center; h2 { color: lawngreen; } } .change-password-input { width: 100%; } .dropdown-button { font-size: 20px; width: 100%; border-radius: 3px; } .checkpass { color: white; } .my-playlists { margin-top: 8px; input { width: auto; } } .drop-zone { p { color: rgba(124, 252, 0, 0.76); } } .Users { margin-top: 40px; margin-right: 100px; display: flex; flex-wrap: wrap; } .hello-column { display: flex; @media (max-width: $breakpoint-mobile) { flex-direction: column; } } .hello-user-page { text-align: center; } .list1a { overflow: auto; margin: 4px; padding:4px; list-style-type: none; counter-set: none; } .list1a-li { background: rgba(139, 0, 0, 0.47); position: relative; margin: 2px; padding: 4px; } .list1a-li:hover { z-index: 1; } .list1a-li:before { border: 2px solid #337AB7; position: absolute; top: -14px; padding: 2px 10px; font-size: 11px; font-weight: bold; color: #337AB7; background: rgba(247, 250, 253, 0.44); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .list1a-li:hover:before { background: #337AB7; color: #ffffff; -webkit-transform: translate(-12px, 0); -ms-transform: translate(-12px, 0); -o-transform: translate(-12px, 0); transform: translate(-12px, 0); } .list1a-li:after { content: ""; position: absolute; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: width; transition-property: width; z-index: -1; background: #FFF; height: 100%; left: 0; top: 0; width: 0; } .list1a-li:hover:after { width: 100%; }