// Vars @color1: #009dff; @color2: #050b12; .transition(@param1: all;@param2: .4s;@param3: linear;) { transition: @param1 @param2 @param3; } .flexbox() { display: flex; flex-flow: row wrap; justify-content: space-between; } @font-face { font-family: 'proxima'; src: url('../fonts/ProximaNova-Regular.ttf'); font-weight: 400; font-style: normal; } @font-face { font-family: 'proxima'; src: url('../fonts/ProximaNova-Light.ttf'); font-weight: 300; font-style: normal; } @font-face { font-family: 'proxima'; src: url('../fonts/ProximaNova-Semibold.ttf'); font-weight: 600; font-style: normal; } @font-face { font-family: 'proxima'; src: url('../fonts/ProximaNova-Bold.ttf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'proxima'; src: url('../fonts/ProximaNova-Black.ttf'); font-weight: 900; font-style: normal; } // basic styles * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'proxima'; outline: none; } body { background: url(../images/main-bg.png) top center no-repeat #00060e; } .flex { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .container { max-width: 1000px; margin-left: auto; margin-right: auto; position: relative; } a, a:hover { text-decoration: none; .transition(); } li { list-style: none; } img {max-width: 100%;} // header header { background: #03070c; padding: 20px 0; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4), 0px 3px 21px 0px rgba(0, 0, 0, 1); border-bottom: 3px solid @color1; .logo { width: 25%; &:hover { opacity: .6; } } .search-box { width: 50%; .search-inner{ position: relative; input { width: 100%; background: #07111a; border-radius: 24px; border:none; color: #8799af; font-weight: 600; font-size: 16px; padding: 15px 60px 15px 40px; } button { position: absolute; color: #8799af; top: 15px; right: 30px; background: transparent; border: none; font-size: 18px; cursor: pointer; } } } .user-block { width: 25%; } } // main main { margin-top: 250px; } // slider section section.slider { margin-bottom: 20px; .item-slider { border-radius: 20px; overflow: hidden; .transition(); border: 1px solid transparent; cursor: pointer; background: @color2; margin-bottom: 20px; margin-top: 20px; .img-box { .size { position: absolute; top: 0px; right: 0; padding: 2px 10px; background: @color1; color: #fff; border-radius: 0 0 0 20px; font-size: 14px; } position: relative; margin-bottom: 10px; img { display: block; height: 180px; } .rating-flag { background: @color1; position: absolute; left: 15px; bottom: -8px; color: #fff; border-radius: 3px; font-weight: 300; font-size: 14px; padding: 3px 10px; } } .cont-item { padding: 15px; .title { color: #fff; font-weight: 700; font-size: 15px; display: block; height: 35px; overflow: hidden; } // .size { // color: @color1; // font-size: 11px; // } } &:hover { .transition(); border-color: @color1; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); } } .owl-nav { position: absolute; top: 50%; margin-top: -11px; left: -42px; right: 0; button{ position: absolute; } button.owl-prev { left: 0; } button.owl-next{ right: -40px; } .slider-img-left { position: relative; content:''; left: 0; width: 22px; height: 22px; background: url(../images/left-arrow.png); .transition; &:hover { opacity: .8; .transition; } } .slider-img-right { position: relative; content:''; width: 22px; right: 0; height: 22px; background: url(../images/right-arrow.png); .transition; &:hover { opacity: .8; .transition; } } } } // slider // content box section.content-box { margin-bottom: 20px; align-items: flex-start; section.left-sidebar { width: 33%; } section.right-box { width: 65%; background: #070d14; border-radius: 0 0 20px 20px; &.fullpage { position: relative; &::before{ position: absolute; top: 0;left: 0;right: 0; background: url('../images/grad.png') top center no-repeat; height: 650px; width: 100%; background-size: cover; content: ''; } } } } // left-sidebar section.left-sidebar { .col-m { .side-col-m { background: #070d14; &:last-child { border-radius: 0 0 20px 20px; margin-bottom: 20px; } .title-box { color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 900; padding: 35px 30px; border-top: 3px solid @color1; border-bottom: 1px solid #1a2431; } .side-m { ul { padding: 15px; li { width: 50%; margin-bottom: 2px; a { display: block; padding: 7px 15px; border-radius: 5px; border: 1px solid transparent; color: #8799af; font-size: 14px; font-weight: 600; &:hover { border-color: #ff00ff ; background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%); box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); font-weight: 900; color: #fff; } } } } } } } .side-col { .title-box { color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 900; padding: 35px 30px; border-top: 3px solid @color1; border-bottom: 1px solid #1a2431; background: #070d14; } .col-items { padding: 8px 0; .col-item { width: 49%; border-radius: 20px; overflow: hidden; .transition(); border: 1px solid transparent; cursor: pointer; background: @color2; margin-bottom: 10px; .img-box { .size { position: absolute; top: 0px; right: 0; padding: 2px 10px; background: @color1; color: #fff; border-radius: 0 0 0 20px; font-size: 14px; } position: relative; margin-bottom: 10px; img { height: 220px; width: 100%; display: block; } .rating-flag { background: @color1; position: absolute; left: 15px; bottom: -8px; color: #fff; border-radius: 3px; font-weight: 300; font-size: 14px; padding: 3px 10px; } } .cont-item { padding: 15px; .title { color: #fff; font-weight: 700; font-size: 15px; display: block; height: 35px; overflow: hidden; // margin-bottom: 15px; } // .size { // color: @color1; // font-size: 13px; // } } &:hover { .transition(); border-color: @color1; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); } } } } } // right content section.right-box { .title-box { align-items: flex-start; color: #fff; text-transform: uppercase; padding: 35px 30px; border-top: 3px solid #009dff; border-bottom: 1px solid #1a2431; h1, h2 { font-size: 18px; font-weight: 900; } .grid-select { margin: -35px -30px -35px 0; cursor: pointer; div { display: inline-block; border-left: 1px solid #1a2431; padding: 35px; border-bottom: 3px solid transparent; &.active { color: @color1; border-bottom-color: @color1; } } } } } .content.grid-thumb { #dle-content{ .flexbox; } padding: 20px 30px; .content-item { width: 24%; margin-bottom: 20px; background: #03070c; border: 1px solid transparent; border-radius: 20px; cursor: pointer; .transition(); &:hover { border-color: @color1; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); .transition(); } .imageside { width: 100%; .img-box { .itemsize { position: absolute; top: 0px; right: 0; padding: 2px 10px; background: @color1; color: #fff; border-radius: 0 20px 0 20px; font-size: 14px; } position: relative; margin-bottom: 10px; img { height: 200px; width: 100%; border-radius: 20px 20px 0 0; } .thumb-block-flag { background: #009dff; position: absolute; left: 15px; bottom: -8px; color: #fff; border-radius: 3px; font-weight: 300; font-size: 14px; padding: 3px 10px; } } .thumb-block { padding: 15px; .title { font-size: 15px; color: #fff; font-weight: 700; margin-bottom: 10px; display: block; height: 35px; overflow: hidden; } .razm-line { .itemsize { color: @color1; font-size: 13px; } } } } .infoside { display: none; } } } .content.grid-list { padding: 20px 30px; .content-item { border: 1px solid transparent; // align-items: flex-start; border-radius: 20px; margin-bottom: 20px; .transition; &:hover { border-color: @color1; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); .transition; } .imageside { width: 24%; img { border-radius: 20px; } .thumb-block, .thumb-block-flag,.img-box .itemsize { display: none; } } .infoside { width: 76%; position: relative; padding: 10px 20px; .title { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 10px; display: block; max-width: 90%; } .janre { margin-bottom: 10px; color: @color1; font-size: 13px; span { color: #2e4056; } a { color: @color1; text-decoration: underline; &:hover { text-decoration: none; } } } .icons-line { margin-bottom: 10px; .rating { background: @color1; padding: 2px 10px; color:#fff; display: inline-block; margin-right: 5px; border-radius: 5px; font-size: 13px; width: unset; height: unset; } .m-item { background: #deff00; position: relative; border-radius: 5px; margin-right: 5px; display: inline-block; font-size: 13px; padding: 2px 10px; &::before{ position: relative; width: 13px; height: 13px; background: url(../images/m-ico.png) no-repeat; content: ''; display: inline-block; top: 2px; margin-right: 8px; } } .version { display: inline-block; border: 1px solid @color1; padding: 2px 10px; border-radius: 5px; color:@color1; font-size: 13px; margin-right: 5px; } .itemsize { display: inline-block; color: @color1; padding: 2px 10px; font-size: 13px; } } .shortstory { color: #8799af; font-size: 13px; margin-bottom: 10px; } .views { position: absolute; top: 10px; right: 20px; font-size: 13px; color: #8799af; span { color: #2e4056; } } .link-section { a { border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 20px; display: inline-block; background: #4e01b9; font-weight: 700; &:hover { background:#6b00fd; } i { position: relative; top: 1px; margin-right: 3px; } } } } } } // navigation .navigation { width: 100%; margin: 30px 0; text-align: center; .load-more { display: inline-block; a { border-radius: 5px; border: 1px solid #ff00ff; color: #fff; display: block; padding: 10px 20px; margin-bottom: 30px; &:hover { background: #ff00ff; } } } .navigation-links { .prev, .next { display: inline-block; color: #fff; a { color: #fff; &:hover { color: @color1; } } span { opacity: .6; } } .links { display: inline-block; margin: 0 30px; span, a { padding: 11px 17px; border-radius: 5px; color: #8799af; display: inline-block; } span, a:hover { background: @color1; font-weight: 900; color: #fff; } } } } // top waiting section.topwaiting { background: #070d14; border-radius: 0 0 20px 20px; margin-bottom: 30px; .title-box { padding: 35px 30px; border-top: 3px solid #009dff; border-bottom: 1px solid #1a2431; h2 { color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 900; } } .top-items { padding: 20px 10px; .top-item { width: 13%; .img-box { margin-bottom: 10px; img { height: 180px; width: 100%; border-radius: 20px 20px 0 0; } } .title { color: #fff; font-size: 13px; font-weight: 700; height: 35px; display: block; overflow: hidden; &:hover { color: @color1; } } } } } // footer footer { border-top: 3px solid @color1; margin-bottom: 30px; border-radius: 0 0 20px 20px; background: #070d14; .title-box { text-align: center; h2 { display: inline-block; color: #fff; font-size: 18px; font-weight: 700; } padding: 30px 0; } .seo-box { padding: 0 30px; margin-bottom: 30px; color: #8799af; font-size: 16px; p { &:not(:last-child) { margin-bottom: 20px; } } } .footer-links { text-align: center; a { display: inline-block; color: @color1; text-decoration: underline; font-size: 18px; &:hover { text-decoration: none; } } .counter { position: absolute; left: 50px; } } .copy { max-width: 90%; margin: 0 auto; color: #8799af; padding: 30px; font-size: 13px; text-align: center; } } // Fullstory .right-box.fullpage{ background: linear-gradient(to bottom, rgba(197, 48, 240, 0.4) 100%, #070d14 0%); } .torrent-page { color: #fff; font-weight: 300; padding: 20px 0px; border-top: 3px solid @color1; position: relative; .favimg { background: @color1; position: absolute; top: 0px; color: #fff; right: 30px; border-radius: 0 0 20px 20px; a { padding: 10px 10px 15px 10px; display: block; color: inherit; } } .topsection { margin-left: 30px; margin-right: 30px; margin-top: 50px; background: rgba(3,7,12,.5); border-radius: 20px; padding: 20px; position: relative; margin-bottom: 30px; .img-box { width: 25%; position: absolute; left: 20px; text-align: center; top: -30px; img { border-radius: 20px; border: 1px solid @color1; box-shadow: rgba(197, 48, 240, 0.4); margin-bottom: 10px; } } .views { font-size: 13px; color: #fff; position: absolute; top: 25px; right: 30px;; } .info-side { width: 75%; margin-left: 30%; .title { font-size: 20px; max-width: 90%; font-weight: 900; color: #fff; display: block; margin-bottom: 10px; } .janre { color: #fff; font-size: 13px; a { text-decoration: underline; color: @color1; &:hover { text-decoration: none; } } margin-bottom: 20px; } .icons-line { margin-bottom: 20px; .m-item { background: #deff00; position: relative; border-radius: 5px; margin-right: 5px; display: inline-block; font-size: 13px; color: #000; padding: 2px 10px; &::before{ position: relative; width: 13px; height: 13px; background: url(../images/m-ico.png) no-repeat; content: ''; display: inline-block; top: 2px; margin-right: 8px; } } .version { display: inline-block; border: 1px solid @color1; padding: 2px 10px; border-radius: 5px; color:@color1; font-size: 13px; margin-right: 5px; } .itemsize { display: inline-block; color: @color1; padding: 2px 10px; font-size: 13px; } } .rating-box { .flexbox; justify-content: left; margin-bottom: 20px; div { display: inline-block; } .rate { margin-left: 10px; line-height: 23px; color: @color1; font-weight: 300; font-size: 16px; span { font-weight: 700; color: #fff; } } } .bottom-line { a { border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 20px; display: inline-block; background: #4e01b9; font-weight: 700; &:hover { background:#6b00fd; } i { position: relative; top: 1px; margin-right: 3px; } } } } } // All fullstory sections basic styles .desc-section, .screen-section, .video-section, .required-section, .related-section { padding: 20px 30px; color: #8799af; font-weight: 300; b { color: #fff; font-weight: 700; } border-bottom: 1px solid #1a2431; .title-sect { font-weight: 900; font-size: 18px; color: #fff; margin-bottom: 30px; text-transform: uppercase; } } .desc-section { li { padding-left: 20px; position: relative; &::before { width: 6px; height: 6px; background: @color1; border-radius: 100%; position: absolute; left: 0px; top: 50%; margin-top: -3px; content: ''; } } .info-fields { li { padding-left: unset; &::before { display: none; } } } } .content-section { .info-fields { margin-bottom: 20px; } p{ margin-bottom: 20px; &:last-child { margin-bottom: 0px; } } } // End basic styles // Screen section .screen-section { .screens { div { .flexbox; a { width: 32%; } } } } // End screen section // Video section .video-section { iframe { width: 49%; } } // end Video section // Required section styles .required-section { .main-download { .flex { align-items: flex-start; } margin: 40px 0; .download-link { width: 40%; text-align: center; .attachment { a{ border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 20px; display: inline-block; background: #4e01b9; font-weight: 700; margin-bottom: 20px; &:hover { background:#6b00fd; } i { position: relative; top: 1px; margin-right: 3px; } } } } .list { width: 55%; } } .infolinks { width: 100%; a { display: inline-block; padding: 5px 7px; border-radius: 5px; border: 1px solid #ff00ff; color: #8799af; font-size: 14px; font-weight: 600; &:hover { background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%); box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); color: #fff; } } } } // End Required section styles // Related styles .related-section { .related-items { width: 100%; .col-item { width: 23%; border-radius: 20px; overflow: hidden; .transition(); border: 1px solid transparent; cursor: pointer; background: @color2; margin-bottom: 10px; .img-box { .size { position: absolute; top: 0px; right: 0; padding: 2px 10px; background: @color1; color: #fff; border-radius: 0 0 0 20px; font-size: 14px; } position: relative; margin-bottom: 10px; img { display: block; width: 100%; height: 190px; } .rating-flag { background: @color1; position: absolute; left: 15px; bottom: -8px; color: #fff; border-radius: 3px; font-weight: 300; font-size: 14px; padding: 3px 10px; } } .cont-item { padding: 15px; .title { color: #fff; font-weight: 700; font-size: 15px; display: block; height: 35px; overflow: hidden; // margin-bottom: 15px; } // .size { // color: @color1; // font-size: 13px; // } } &:hover { .transition(); border-color: @color1; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); } } } } // End related styles } // Comments .comments-section { color: #8799af; font-weight: 300; .title-sect { font-weight: 900; padding: 20px 30px; font-size: 18px; color: #fff; margin-bottom: 30px; text-transform: uppercase; } } .addcomments { padding: 0px 30px; .form-block { .inputs-block { margin-bottom: 20px; input { width: 48%; border-radius: 30.5px; background: #07111a; border: 1px solid @color1; color: #8799af; font-weight: 600; padding: 10px 20px; } } .submit-block { margin: 20px 0; button[type="submit"] { .transition; background: rgba(222, 255,0, .5); border-radius: 22px; border: 3px solid #deff00; display: inline-block; font-size: 13px; color: #fff; cursor: pointer; font-weight: 700; padding: 11px 20px; &:hover { .transition; background: #deff00; color: #000; } } } } } .comments { padding: 20px 30px; border-bottom: 1px solid #1a2431; } .comment { position: relative; margin-bottom: 30px; align-items: flex-start; .img-box { width: 27%; align-items: center; justify-content: left; img { max-width: 20%; } .left-img { width: 79%; font-size: 13px; padding-left: 10px; color: #8799af; .author { a { font-size: 16px; color: #fff; font-weight: 700; } } } } .comment-body { width: 55%; padding: 0 10px; font-size: 14px; color: #fff; line-height: 22px; .news-link { text-decoration: underline; color: #fff; font-weight: 700; margin-bottom: 10px; &:hover { color: @color1; text-decoration: none; } } .actions { a { color: @color1; text-decoration: underline; font-size: 12px; line-height: 25px; margin-right: 10px; &:hover {text-decoration: none;} } } } .comment-rating { position: relative; top: 0; right: 0; font-size: 18px; width: 18%; text-align: right; .body-rat { display: inline-block; border-radius: 5px; border: 2px solid @color1; a { color: #fff; font-size: 14px; // display: inline-block; padding: 10px 5px } span.plus { font-weight: 300; color: #fff; background: @color1; padding: 0 10px; } .ratingzero, .ratingplus { color: #fff; } .ratingminus { color: #000; } } } } .mass_comments_action {margin: 30px 0;} .comments-tree-item { .comments-tree-item { margin-left: 10%; margin-top: 30px; margin-bottom: 30px; .comment { margin-bottom: unset; } } } // feedback #sendmain, .feedback, { width: 100%; .form-group { margin-bottom: 20px; } } #fullsearch, #searchtable, .searchpage { width: 100%; } // Login popup .login { display: none; background: rgba(5,11,18, .8); position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 350; content: ''; &.open { display: block; } } .login-modal { background: #080b19; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.6); position: fixed; top: 100px; width: 500px; left: 50%; margin-left: -250px; z-index: 400; border-radius: 0 0 20px 20px; overflow: hidden; border-top: 3px solid @color1; .title-links { padding: 30px 0; text-align: center; border-bottom: 1px solid #1a2431; font-size: 18px; font-weight: 900; color: #fff; text-transform: uppercase; } .login-form { padding: 60px 40px; text-align: center; .inputs { input { width: 100%; background: #07111a; color: #2e4056; text-align: center; border-radius: 30.5px; border: 1px solid @color1; padding: 22px 40px; margin-bottom: 30px; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.3); &:first-child{ margin-bottom: 10px; } } } .submit { button[type="submit"]{ border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 40px; display: inline-block; background: #4e01b9; cursor: pointer; margin-bottom: 30px; font-weight: 700; .transition; &:hover { .transition; background: #6b00fd; } } } .links { a { color: @color1; text-decoration: underline; font-size: 16px; font-weight: 400; &:hover { text-decoration: none; } } } } } .user-block { padding: 0 12px; align-items: center; width: 25%; justify-content: space-around; .reglink { height: 38px; width: 38px; border: 1px solid @color1; border-radius: 100%; .flexbox; justify-content: center; align-items: center; .reg-icon { width: 21px; height: 23px; fill: #009dff; .transition; &:hover { .transition; fill: #6b00fd; } } &:hover { border-color: #6b00fd; .reg-icon { fill: #6b00fd; } } } .login-btn { border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 20px; display: inline-block; background: #4e01b9; cursor: pointer; font-weight: 700; &:hover { background: #6b00fd; } } } .static-content{ color: #8799af; padding: 20px 30px; b { color: #fff; } } .regtext { color: #8799af; margin-bottom: 20px; a { color: @color1; text-decoration: underline; &:hover { text-decoration: none; } } } // profile box .profile-box { width: 100%; background: #03070c; position: relative; margin-top: -30px; padding-top: 30px; &.open { box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.3); .list { display: block; } } .avabox { align-items: center; width: 100%; justify-content: space-around; .title { color: #fff; cursor: pointer; font-weight: 700; a { color: inherit; } } .close { color: #fff; } } .list { position: absolute; background: #03070c; width: 100%; left: 0; right: 0; box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.3); border-bottom: 3px solid @color1; padding: 10px 20px; display: none; } a { display: block; padding: 13px 15px 13px 15px; border-radius: 5px; border: 1px solid transparent; color: #8799af; font-size: 14px; margin-bottom: 10px; font-weight: 600; &:hover { border-color: #ff00ff ; background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); box-shadow: 0px 3px 28px 0px rgba(197, 48, 240, 0.4); font-weight: 900; color: #fff; } } } // Tracker list .tracker-list { font-size: 16px; font-weight: 400; padding: 20px 30px; .name { width: 45%; .title { position: relative; text-decoration: underline; cursor: pointer; &::after { position: relative; content: '\f0de'; font: normal normal normal 14px/1 FontAwesome; display: inline-block; text-decoration: none; margin-left: 10px; transform: rotate(180deg); font-size: 16px; } &:hover { color: @color1; } } .hide-text { display: none; margin-top: 20px; font-size: 14px; color: #fff; li { position: relative; padding-left: 20px; &::before { position: absolute; content: ''; left: 0; width: 6px; height: 6px; border-radius: 100%; background: @color1; top: 50%; margin-top: -3px; } } } &.open { .hide-text{ display: block; } .title { &::after { transform: rotate(0deg); } } } } .size {width: 10%;} .downloaded {width: 10%;} .link {width: 33%;} .size, .downloaded, .link { text-align: center; font-size: 16px; } .title-list { font-size: 16px; margin-bottom: 20px; font-weight: 600; color: @color1; .name { text-decoration: none; cursor: default; &::after { display: none; } } } .list-item { align-items: center; &:not(:last-child) { margin-bottom: 10px; } .link { a { border-radius: 22px; border: 3px solid #6b00fd; color: #fff; font-size: 13px; padding: 11px 20px; display: inline-block; background: #4e01b9; font-weight: 700; &:hover { background: #6b00fd; } } } } } .fs-link { cursor: pointer; }