static/css/new_style.css - master - BitLittel/bubble

static/css/new_style.css
650 строк12 KB
BitLittel
fix progress bar
02 фев 2024, 12:34
02 фев 2024, 12:34f5159a1
@font-face {
	font-family: montserrat;
	src: url('/static/font/Montserrat-Medium.ttf') format('truetype');
}

@media (max-width: 1000px) {
    .navbar__link {
        width: 3.5rem !important;
    }
    .main_player_timeline {
        width: 38vw !important;
    }
    .navbar__item:last-child:before {
        left: 0 !important;
    }
    .main_content {
        width: calc(100vw - 3.7rem) !important;
        left: 57px !important;
    }
    .cover_playlist {
        height: 100px !important;
        margin-bottom: 4% !important;
    }
    .playlists {
        height: 140px !important;
        padding: 2% 1.5% !important;
    }
    .rounded_add {
        width: 100px !important;
        height: 100px !important;
    }
    .title_add_playlist {
        /*padding: 25.5% !important;*/
        font-size: 83px !important;
    }
    .functions {
        display: none !important;
        width: 0 !important;
    }
    .musics {
        /*margin: 0 0 26% 0 !important;*/
    }
    .music {
        border-radius: 8px !important;
        padding: 1% !important;
    }
    .music_cover {
        height: 35px !important;
        border-radius: 8px !important;
    }
    .music_title {
        font-size: 12px !important;
    }
    .music_timing {
        font-size: 12px !important;
        width: 3rem !important;
    }
    .main_player_controls > img, .main_player_function > img {
        width: 20px !important;
    }
    .main_player > .music_title {
        display: none !important;
        width: 0 !important;
    }
    .main_player_volume {
        display: none !important;
        width: 0 !important;
    }
    .main_player_time > div > span {
        font-size: 9px !important;
    }
    .main_player_function {
        width: 10vw !important;
    }
    .add_playlist > span {
        font-size: 11px !important;
    }
    .add_playlist{
        width: 120px !important;
    }
    .block_playlist {
        width: 100px !important;
        margin-right: 3% !important;
    }
    .main_player_cover_and_title {
        justify-content: normal !important;
    }
    .close_pop_up {
        right: 5.5vh !important;
        top: auto;
    }
    .login_block, .notification_block, .wrap_pop_up_content {
        margin-top: 44% !important;
    }
    .login_pic {
        display: none !important;
    }
    .login_form {
        width: 100% !important;
    }
    .pop_up {
        min-height: 100vh !important;
        padding: 5% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .annotation {
        font-size: 13px !important;
    }
    .main_player_time {
        width: 14% !important;
    }
    .search_container > img {
        margin: .6% !important;
        width: 20px !important;
    }
    .search_container > input {
        padding: .6% 8% !important;
    }
    .title_playlist {
        font-size: 11px !important;
    }
    .search_box {
        padding: 3% 0 !important;
    }
}

.annotation {
    text-align: center;
    padding: 2%;
    font-size: 20px;
}

.header_pop_up {
    text-align: center;
    font-size: 2rem;
}

input[type="range"] {
    -webkit-appearance: none;
    height: 3px;
    background-image: linear-gradient(#000000, #000000);
    background-size: 41% 100%;
    border-radius: 4px;
    background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #000000;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

*::-webkit-scrollbar {
  	width: 8px;
}

.playlists::-webkit-scrollbar {
	height: 8px;
}

.playlists::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #00c6fb, #005bea);
}

*::-webkit-scrollbar-track {
  	background: none;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00c6fb, #005bea);
  	border-radius: 4px;
	position: absolute;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
    font-family: montserrat, serif;
}

.background_cover {
    height: 100%;
    background: #ffffff3d;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
}

.background {
    /*background: url('/static/img/back_ground.svg') no-repeat;*/
    /*background: url('/static/img/test_back.png') no-repeat;*/
    /*background: url('/static/img/wp.jpg') no-repeat;*/
    background: url('/static/img/vlel.jpg') no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.main_menu {
    position: fixed;
    border-right: 1px solid #00000026;
    height: 100%;
    padding: 2%;
    z-index: 3;
    background: #ffffffb5;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 0 50px;
    width: 17vw;
}

.elements_menu > div {
    display: flex;
    align-items: center;
    margin-bottom: 13%;
}

.flex_center {
    display: flex;
    justify-content: center;
}

#list_uploaded_music {
    padding: 4%;
    box-shadow: 0 0 10px rgba(0,0,0,.2) inset;
    border-radius: 20px;
    margin-top: 2%;
    background: #fffae7;
}

.block_upload_music {
    display: flex;
    margin-bottom: .5%;
    align-items: center;
}

.block_upload_music > img {
    box-shadow: 0 0 3px rgba(0,0,0,.4);
}

.elements_menu > div > div {
    margin-right: 12%;
}

.main_content {
    position: absolute;
    top: 0;
    left: 88px;
    width: calc(100vw - 6rem);
    padding: 1%;
}

.playlists {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1%;
    border-bottom: 1px solid #68686861;
}

.block_playlist {
    display: flex;
    flex-direction: column;
    margin-right: 1%;
    transition: 250ms ease all;
    text-align: center;
    cursor: pointer;
    width: 128px;
}

.title_playlist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.block_playlist:hover {
    transform: scale(1.1);
}

.cover_playlist {
    height: 128px;
    border-radius: 20px;
    background-size: contain;
}

.add_playlist {
    text-align: center;
    cursor: pointer;
    width: 140px;
}

.add_playlist > span {
    font-size: 14px;
}

.rounded_add {
    width: 128px;
    height: 128px;
    background: #ffffff8c;
    border-radius: 50%;
    margin: 0 auto;
}

.rounded_add:hover {
    background: #e9e9e98c;
}

.title_add_playlist {
    /*padding: 25.5%;*/
    font-size: 100px;
    color: #b3b3b3;
}

.musics {
    margin: 0 0 5rem 0;
}

/*.main_player_function > img:hover {*/
/*    filter: contrast(1);*/
/*}*/

/*.main_player_controls > img:hover {*/
/*    filter: contrast(0.5);*/
/*}*/

.music {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .2%;
    border-radius: 12px;
    transition: 250ms ease all;
    cursor: pointer;
}

.cover_name_container {
    display: flex;
    align-items: center;
    width: 60vw;
}

.music:hover {
    background: #ffffff73;
}

.music_cover {
    height: 55px;
    border-radius: 12px;
    background-size: contain;
    margin-right: 2%;
}

.music_timing {
    margin-right: 1%;
    width: 5rem;
}

.functions {
    display: flex;
    width: 12rem;
    background: #ffffff73;
    border-radius: 5px;
    padding: .5%;
    justify-content: space-between;
}

.functions > img {
    width: 24px;
    padding: 1%;
    margin: 0 5%;
    border-radius: 5px;
}

.functions > img:hover {
    background: #406ff3;
    color: #fff;
}

.music_title {
    display: flex;
    flex-direction: column;
}

.music_title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main_player {
    position: fixed;
    bottom: 0;
    height: 5rem;
    width: 100%;
    background: #98989854;
    z-index: 1;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: flex;
    align-items: center;
    padding: 0 3%;
    justify-content: space-between;
}

.main_player_cover_and_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_player_cover_and_title > img {
    margin-right: 4.5%;
}

.main_player_controls > img, .main_player_function > img {
    width: 32px;
    cursor: pointer;
}

/*.main_player_function > img {*/
/*    filter: contrast(0.5);*/
/*}*/

.main_player_controls {
    display: flex;
}

.main_player_function {
    display: flex;
    width: 4.5vw;
    justify-content: space-between;
}

.main_player > .music_title {
    width: 15vw;
    font-size: 14px;
}

.main_player_volume {
    display: flex;
    cursor: pointer;
}

.main_player_time > div > span {
    font-size: 14px;
}

.main_player_time {
    width: 7%;
}

.main_player_time > div {
    display: flex;
}

.main_player_timeline {
    width: 40vw;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}

.main_player_full_time_line {
    width: 100%;
    background: #afafafab;
    height: 3px;
    border-radius: 2px;
}

.main_player_cur_time_line {
    width: 100%;
    background: #000;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    transform-origin: 0;
    transition: all .3s linear;
}

.background_pop_up {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 100vh;
    backdrop-filter: blur(3px);
    width: 100%;
    overflow: auto;
}

.pop_up {
    margin: 10vh;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0,0,0,.3);
    padding: 5%;
    background: #fff;
}

.close_pop_up {
    position: absolute;
    right: 11.5vh;
    top: 10.5vh;
    transform: rotate(45deg);
    font-size: 40px;
    cursor: pointer;
}

.close_pop_up:hover {
    filter: contrast(0.1);
}

.profile {
    border-radius: 30%;
    box-shadow: 0 0 5px rgb(106 106 106 / 36%);
}

.login_block {
    display: flex;
}

.login_pic {
    background: url('/static/img/bg.jpg');
    width: 50%;
    background-size: cover;
    border-radius: 20px 0 0 20px;
}

.login_form {
    width: 50%;
}

.login_form_header {
    padding: 6%;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}

.login_form_inputs {
    display: flex;
    flex-direction: column;
    padding: 0 5% 5% 5%;
    font-size: 19px;
}

.login_form_inputs > label {
    display: flex;
    flex-direction: column;
    margin-bottom: 2%;
}

.login_form_inputs > label > input {
    border: 1.7px solid #000;
    border-radius: 10px;
    padding: 1.5%;
    font-size: 16px;
    transition: 250ms ease all;
}

.login_form_inputs > label > input:hover {
    border: 1.7px solid #2400FF;
}

.default_button {
    padding: 1%;
    margin-top: 4%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(91deg, #2400FF 0%, #1C00CB 100%);
    transition: 1s ease all;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.default_button:hover {
    background: linear-gradient(91deg, #1C00CB 0%, #2400FF 100%);
}

#info_reg_log {
    text-align: center;
    padding: 1%;
}

#info_reg_log > span {
    color: #06f;
    cursor: pointer;
}
#info_reg_log > span:hover {
    color: #022e6e;
}

/* --- Search ---*/


.search_box {
    padding: 1% 0;
}

.search_container > img {
    position: absolute;
    margin: .4%;
}

.search_container > input {
    width: 100%;
    padding: .6% 3%;
    border: none;
    border-radius: 6px;
    background: #ffffff9e;
    font-size: 1rem;
}

.profile_pop_up_avatar_user {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.profile_pop_up_avatar {
    width: 140px;
    border-radius: 6px;
    box-shadow: 0 0 10px #00000021;
}

.profile_pop_up_avatar_user > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile_pop_up_body {
    padding: 2%;
    font-size: 1.4rem;
    text-align: center;
    background: #0000000d;
    border-radius: 6px;
    box-shadow: inset 0 0 10px #0000001f;
}