/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Site styles */ html { width:100%; height:100%; border:0; padding:0; } html.fullscreen { background:#6d8191 no-repeat center center fixed; background-size:cover; } html.theme-1 { background-image: url(/images/bg/bg1.jpg); } html.theme-2 { background-image: url(/images/bg/bg2.jpg); } html.theme-3 { background-image: url(/images/bg/bg3.jpg); } html.theme-4 { background-image: url(/images/bg/bg4.jpg); } html.theme-5 { background-image: url(/images/bg/bg5.jpg); } html.theme-6 { background-image: url(/images/bg/bg6.jpg); } html.theme-7 { background-image: url(/images/bg/bg7.jpg); } html.theme-8 { background-image: url(/images/bg/bg8.jpg); } body { font-family: 'Roboto', sans-serif; width: 100%; height: 100%; border: 0; padding: 0; overflow: hidden; } /* Colours */ :root { --main-text-col: color:rgba(255, 255, 255, 0.9); --secondary-text-col: color:rgba(255, 255, 255, 0.8); --link-col: #54a1ab; --status-col: rgba(255,217,105, 0.7); } /* Layouts */ main.modal-layout { display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:2rem; } main.standard-page-layout { width:100%; height:100%; padding:2rem; overflow-y:auto; } .w10 { width:10%; } .w20 { width:20%; } .w30 { width:30%; } .w33 { width:33%; } .w40 { width:40%; } .w50 { width:50%; } .w60 { width:60%; } .w66 { width:66%; } .w70 { width:70%; } .w80 { width:80%; } .w90 { width:90%; } .w100 { width:100%; } /* Fonts */ h1 { color: rgba(255, 255, 255, 0.9); font-size:2rem; margin-bottom:1rem; } h2 { color: rgba(255, 255, 255, 0.9); font-size: 1.7rem; margin-bottom:1rem; } h3 { color: rgba(255, 255, 255, 0.9); font-size: 1.4rem; margin-bottom:1rem; } h4 { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: 1rem; } p { margin-bottom:1rem; } .warning { color:#c3a270; margin-top:1em; } .edit { transform:rotateZ(90deg); font-size:1.3rem; opacity:0.75; transition:opacity linear 0.1s; &:hover { opacity:1; transition:opacity linear 0.1s; } } .upload-image img { width: 26px; opacity: 0.5; } .upload-image img:hover { opacity:0.7 } /* Panels */ .panel { position:relative; background-color:rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter:blur(5px); border-radius:1rem; color:rgba(255, 255, 255, 0.8); padding:2rem; overflow:hidden; box-shadow:0 0 10px rgb(0 0 0 / 20%); a { color:#54a1ab; } a:hover { color:#72c4cf; } .panel-label { position:absolute; opacity:0.4; font-weight:bold; right:1rem; bottom:1rem; } .panel-rhs-link { position:absolute; right:1rem; top:1rem; padding:0.5rem; } } .modal-panel { width:100%; max-width:600px; min-height:200px; } .page-panel { width:100%; max-width:1200px; min-height:200px; margin:0 auto 2rem auto; } .message-panel { background-color: rgba(25,127,29,0.5); max-width: 1200px; margin: 0 auto 2rem auto; font-weight: bold; text-align: center; } /* Modals */ .modal { display:none; &.is-open { display:block; } .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0, 0, 0, 0.5); } .container .dialog { width:100%; color:#bbb; max-width:600px; max-height:88vh; -webkit-backdrop-filter:blur(50px); backdrop-filter:blur(50px); box-shadow:0 0 4em rgba(0, 0, 0, 0.5); margin:6vh auto; padding:1.5em 2em; border-radius:1em; overflow-y:auto; } .dialog h2 { color: #ccc; } .dialog a { color: #54a1ab; } .dialog .close { float:right; cursor:pointer; padding:8px; margin:-8px -8px 0 0; } .dialog input { background-color:rgba(255, 255, 255, 0.1); color:#ccc; } } /* Forms */ input, select, textarea { background-color:rgba(255, 255, 255, 0.3); border-radius:2rem; padding:0.7rem 1.4rem; color:#fff; } input[type='submit'] { text-align:center; } select option { background-color:#9fa7b5; color:#fff; } input[type='checkbox'] { width:20px; height:20px; border-radius:0px; vertical-align:middle; margin-right:10px; margin-top:-2px; appearance:auto; opacity:0.8; } .green-button { background-color:rgba(76, 175, 80, 0.5) !important; cursor:pointer; } .small-button { font-size:0.7rem; padding:0.5rem 1rem; } .form-row { margin-bottom:1em; label { display:block; font-weight:bold; color:#ccc; margin-bottom:0.2em; } } .conversation-form { .item-title { font-weight:bold; font-size:1.2em; color:#ccc; } img { max-width: 200px; max-height: 200px; } .user-image { width: 50px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0.8; } } /* Profile page */ .profile-image { position:relative; width:20%; min-width:140px; margin:1rem auto; text-align:center; .user-image { width:100%; border-radius:50%; box-shadow:0 0 2rem rgb(0 0 0 / 70%); aspect-ratio:1/1; } span { display:block; font-size:24px; font-weight:bold; text-align:center; text-shadow:0 0 10px rgba(0, 0, 0, 0.8); padding-top:4px; color:rgba(255, 255, 255, 0.9); } .edit { position:absolute; right:0px; bottom:1.5rem; } } .group-list { display: flex; gap: 1rem; justify-content:center; flex-wrap:wrap; margin:-1.2rem 0 1rem 0; } /* TV, book, music styles */ .tv-show-container, .book-container, .music-container { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:2rem; margin-bottom:2rem; } .detail-container { flex-wrap:nowrap; justify-content:inherit; flex-direction:column; gap:0; } .music-container .group-heading { flex-basis: 100%; } .music-container h4 { margin:1em 0 0 0; } .tv-show { position:relative; width: 120px; height: 178px; background-size: cover; border-top: solid 2px #000; border-right: solid 2px #000; border-bottom: solid 2px #000; border-radius: 0 6px 6px 0; box-shadow: 4px 4px 8px rgb(0 0 0 / 20%); background-color: rgba(0, 0, 0, 0.5); cursor:pointer; &:hover { box-shadow:0 0 20px rgba(84, 161, 171, 0.8); } } .book { position:relative; width: 120px; height: 180px; background-size: cover; box-shadow: 8px 8px 10px rgb(0 0 0 / 20%); background-color: rgba(0, 0, 0, 0.5); cursor:pointer; &:hover { box-shadow:0 0 20px rgba(84, 161, 171, 0.8); } } .book-detail-row { max-width:600px; width:100%; margin:0 auto; padding:1.5rem; &:hover { cursor:pointer; background-color:rgba(255, 255, 255, 0.1); } .book { float:left; margin:0 2rem 0 1rem; } .book-detail h4 { font-weight:bold; margin-bottom:0.5rem; } .book-detail .author { display:inline-block; color:#bbb; margin-bottom:0.5rem; } .book-detail .published { display:inline-block; font-size:0.8rem; margin-top:0.5rem; opacity:0.5; } } .song { position:relative; width: 120px; height: 120px; background-size: cover; box-shadow: 8px 8px 10px rgb(0 0 0 / 20%); border: solid 2px #000; background-color: rgba(0, 0, 0, 0.5); &:hover { box-shadow:0 0 20px rgba(84, 161, 171, 0.8); } .artist-indicator { background-color:rgba(0, 0, 0, 0.75); height:20px; border-radius:10px; text-align:center; color:rgba(255, 255, 255, 0.9); line-height:20px; font-size:0.8em; box-shadow:0 0 2px #000; margin:4px; overflow:hidden; } .track-indicator { padding: 4px 6px; color: #000; font-size: 0.8em; background-color: rgba(255, 255, 255, 0.75); position: absolute; right: 0; bottom: 0; border: solid 1px #000; max-height: 25px; overflow: hidden; line-height: 16px;} } .currently-watching:before { content:''; display:block; height:21px; width:30px; position:absolute; bottom:2px; left:4px; background-image:url(/images/currently-watching.png); background-size:cover; opacity:0.4; } .currently-watching:hover:before { opacity:0.7; } .highly-recommended:after { content: ''; display: block; height: 33px; width: 30px; position: absolute; bottom: -4px; right:4px; background-image: url(/images/highly-recommended-badge.png); background-size:cover; } .recent-activity0 { box-shadow:0 0 20px rgba(255, 193, 7, 0.6); } .recent-activity1 { box-shadow:0 0 20px rgba(255, 193, 7, 0.4); } .recent-activity2 { box-shadow:0 0 20px rgba(255, 193, 7, 0.2); } .section-status { text-align:center; color:rgba(255,217,105, 0.7); text-shadow:0 0 20px #000; min-height:18px; input { color: rgba(255,217,105, 0.7); background-color: rgba(255, 255, 255, 0.1); } i { font-style: italic; } u { text-decoration:underline; } } .title-editor { text-align:center; text-shadow:0 0 20px #000; min-height:18px; input { color:rgba(255,255,255, 0.6); background-color:rgba(255, 255, 255, 0.1); font-size:1.4rem; margin-top:-0.7rem; } } .filter-component{ .filter-icon { width: 20px; opacity: 0.5; margin: 0 0 -2px 2px; cursor: pointer; } .filter-icon:hover { opacity:0.8; } .filter-options { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; row-gap:1.5em; text-align: left; border-radius: 0.8rem; font-size: 0.8rem; background-color: rgba(255, 255, 255, 0.1); padding: 1.5rem; margin: 0.5rem 0 -0.5rem 0; } .filter-options li { margin:0.8rem; } } .search-type { li { float: left; padding: 8px 16px; background-color: rgba(69,93,121,0.5); margin: -0.6em 1px 0.6em 0; } li:hover { background-color:rgba(69,93,121,0.6); cursor:pointer; } li.active { color:#ddd; background-color: rgba(69, 93, 121, 0.75); } } #music-modal-component h2 { color:rgba(255, 255, 255, 0.9); margin-bottom:0.2em; } #music-modal-component h3 { color: rgba(255, 255, 255, 0.8); } #music-modal-component h3 .year { font-size: 0.6em; font-weight: normal; color: #bbb; vertical-align:middle; } /* Detail modal */ .detail-modal { .image-placeholder { min-height:236px; background-color:rgba(255, 255, 255, 0.8); } .detail-image { width: 160px; float: left; margin: 0 1rem 1rem 0; border: solid 2px #000; } .detail-title { color: #ddd !important; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); margin-right: 0.6rem; } .detail-title .five-star-rating { margin-bottom:-2px; } .detail-genres { font-size:0.9rem; color:#999; } .detail-summary { color:#ccc; text-align:justify; } .detail-links { text-align:center; font-size:0.8rem; color:#54a1ab; } .detail-links a:hover { color:#72c4cf; } .author { color: #ccc; font-weight: bold; } .published-date { color: #999; margin-bottom: 1rem; } } .episodes-modal, .tracks-modal { clear:both; margin-top:0.6rem; background:rgb(52,66,82); background:linear-gradient(180deg, rgba(52,66,82,1) 0%, rgba(63,84,107,1) 71%, rgba(69,93,121,1) 100%); opacity:0.95; z-index:100; padding:1rem; border-radius:1rem; } .episodes-modal h5, .tracks-modal h5 { font-weight:bold; color:#eee; margin-bottom:0.5rem; text-align:center; } .episode-list .episode-number, .track-list .track-number { color: rgba(215,197,41,0.8); font-weight: bold; margin-right: 0.5rem; width: 28px; display: inline-block; } .episode-list .season-section { color: #ddd; font-weight: bold; margin-top: 1em; } .episode-list li, .track-list li { padding:0.2rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .episode-list li.can-select:hover { background-color:rgba(255, 255, 255, 0.2); cursor:pointer; } .episode-list li.most-recent { color:rgba(215,197,41,0.8); background-color:rgba(255,255,255,0.05); } .track-list li.selected { color:#eee; background-color:rgba(255, 255, 255, 0.2); } .modal .detail-divider { height: 2px; background-color: rgba(255, 255, 255, 0.1); clear: both; margin: 0.7rem 0 1rem 0; } .user-details { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0 1rem; .user-image { width: 50px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0.8; } .rating-container { min-width:135px; } .detail-rating { margin: 0 0 -4px 0.5rem; } .user-episode { display:flex; gap:3px; align-items:center; font-size:0.9rem; opacity:0.6; color:#d7c529; font-weight:bold; &.is-editing { font-size:1.1rem; gap:8px; line-height:1.6rem; .epi-btn { padding:4px; } } .epi-btn { text-align: center; background-color: rgba(255, 255, 255, 0.2); border-radius: 18px; } .epi-btn:hover { background-color: rgba(255,255,255, 0.4); } div input { width: 60px; padding: 11px 2px 10px 11px; text-align: center; } } .user-state { position:relative; font-size: 0.9rem; color: #779ea3; font-style: italic; padding:10px 0; span { opacity:0.6; } ul { position: absolute; bottom: 2.5rem; right: -1rem; min-width:196px; padding: 0.5rem; text-align: center; border-radius: 1rem; box-shadow: 0 0 10px #000; background: rgb(52,66,82); background: linear-gradient(180deg, rgba(52,66,82,1) 0%, rgba(63,84,107,1) 71%, rgba(69,93,121,1) 100%); opacity: 0.95; z-index: 100; } ul li { padding:0.5rem; cursor:pointer; } ul li:hover { color:#82cbd5; } ul li.selected { color:#82cbd5; } } } .user-details #season-number, .user-details #episode-number, .user-details .episode-controls { display: inline-block; } .episode-controls { .episode-btn { display: inline-block; padding: 4px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; margin-left: 4px; } .cancel { background-color:rgba(249, 134, 134, 0.5); } .save { background-color:rgba(76, 175, 80, 0.5); } .cancel:hover { background-color:rgba(249, 134, 134, 0.7); } .save:hover { background-color:rgba(76, 175, 80, 0.7); } } .detail-actions { font-size:0.8rem; display:flex; justify-content:space-evenly; margin-bottom:-0.6rem; a:hover { color:#54a1ab; } .more-actions { position:relative; a { font-weight:bold; font-size:1.2rem; } ul { position: absolute; bottom: 2rem; right: -3.5rem; min-width: 130px; padding: 0.5rem; text-align: center; border-radius: 1rem; margin: 0.5rem 0 0 -1rem; box-shadow: 0 0 10px #000; background: rgb(52,66,82); background: linear-gradient(180deg, rgba(52,66,82,1) 0%, rgba(63,84,107,1) 71%, rgba(69,93,121,1) 100%); opacity: 0.95; z-index: 100; } ul li { padding: 0.5rem; cursor: pointer; } ul.is-recommending { height: 400px; overflow: auto; } ul li h6 { margin-bottom:0.4em; } .user-image { width:40px; height:40px; border-radius:50%; vertical-align:middle; margin-right:1rem; } ul li.recommend-modal { cursor: default; } ul li .hidden { display:none; } .user-recommend { margin-top:0.5rem; text-align:left; font-weight:bold; } .user-recommend:hover { background-color:rgba(255, 255, 255, 0.05); } ul .selected { background-color:rgba(250, 219, 111, 0.1); } } a img { opacity: 0.3; } a img:hover { opacity: 0.5; } .remove-link { color: #c13939; } .remove-link:hover { color: #d95353; } a.selected img { opacity: 0.8 !important; } } .friend-actions { color:#519f54; font-size:0.9rem; line-height:2rem; b { text-shadow:0 0 4px #000; } .already-added-msg { color: #779ea3; opacity: 0.6; } } /* Social Post */ .social-feed { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1em; overflow:hidden; } .collapsed-feed { height: 273px; } .social-post { width: 210px; height: 260px; background-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px rgb(0, 0, 0, 0.2); border:solid 1px rgba(0, 0, 0, 0.2); overflow: hidden; font-size: 0.8rem; &:hover { background-color: rgba(90, 90, 90, 0.2); } a { display:block; width:100%; height:100%; color:#ccc; } a:hover {color:#ddd; } img { max-height:158px; display:block; margin:0 auto 0.5em auto; } video { width: 100%; background-color: rgba(0, 0, 0, 0.5); } .date { display:block; text-align:center; margin-top:0.8rem; color:#999; font-size:0.7rem; } } #social-post-modal { text-align:center; .date { font-size: 0.9em; color: #aaa; margin: 0.5em; } .desc { color:#ddd; font-size:1.2em; } .external-link { font-size:0.9em; } } /* Conversations */ .conversation-container { text-align:center; margin-bottom:2em; .user-image { width: 50px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0.8; margin-right:0.5em; } } .conversation-thread { margin-bottom:1em; .message { padding:0.7em; strong { color:#aaa; } img { width: 50px; height:50px; border-radius: 50%; float: left; margin-right: 1rem; background-color:rgba(255, 255, 255, 0.3); } .time { color:#999; font-style:italic; font-size:0.9em; } .body { color:#eee; } .contains-spoilers { color:#f90; } .green-button { float:right; } } .message:nth-child(odd) { background-color: rgba(255, 255, 255, 0.1); } } .conversation-controls { display:flex; margin:1em 1em 2em 1em; gap:2em; background-color: rgba(0, 0, 0, 0.4); padding: 1em; border-radius: 2em; align-items:center; .poster-details { line-height:50px; font-weight:bold; text-wrap:nowrap; img { width: 50px; height:50px; border-radius: 50%; float: left; margin-right: 1rem; background-color:rgba(255, 255, 255, 0.3); } } .field-details { flex-grow:2; } .anon-name { width: 75%; } small { color:#666; } } /* Rating */ .five-star-rating { position: relative; display: inline-block; width: 70px; height: 1rem; .gold-star { width: 70px; height: 13px; position: absolute; left: 0px; top: 0px; background-image: url(/images/rating-gold.png); } .grey-star { width: 70px; height: 13px; position: absolute; left: 0px; top: 0px; background-image: url(/images/rating-grey.png); opacity: 0.4; } } /* Friends */ .friend-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-bottom:2rem; } .friend-card { a { display: block; color: #ccc; } a:hover { color:#ccc; } img { border-radius:50%; width:100px; box-shadow:0 0 10px rgba(0, 0, 0, 0.2); } img:hover { box-shadow:0 0 20px rgba(200, 200, 200, 0.5); } span { display:block; text-align:center; font-weight:bold; } } /* Search results */ #search-results { margin: 0 -2rem; } /* 320px � 480px: Mobile devices. 481px � 768px: iPads, Tablets. 769px � 1024px: Small screens, laptops. 1025px � 1200px: Desktops, large screens. 1201px and more � Extra large screens, TV. */ /* iPads, Tablets */ @media (max-width: 1200px) { html.theme-1 { background-image: url(/images/bg/bg1-m.jpg); } html.theme-2 { background-image: url(/images/bg/bg2-m.jpg); } html.theme-3 { background-image: url(/images/bg/bg3-m.jpg); } html.theme-4 { background-image: url(/images/bg/bg4-m.jpg); } html.theme-5 { background-image: url(/images/bg/bg5-m.jpg); } html.theme-6 { background-image: url(/images/bg/bg6-m.jpg); } html.theme-7 { background-image: url(/images/bg/bg7-m.jpg); } html.theme-8 { background-image: url(/images/bg/bg8-m.jpg); } } /* Mobile devices */ @media (max-width: 768px) { html.theme-1 { background-image: url(/images/bg/bg1-s.jpg); } html.theme-2 { background-image: url(/images/bg/bg2-s.jpg); } html.theme-3 { background-image: url(/images/bg/bg3-s.jpg); } html.theme-4 { background-image: url(/images/bg/bg4-s.jpg); } html.theme-5 { background-image: url(/images/bg/bg5-s.jpg); } html.theme-6 { background-image: url(/images/bg/bg6-s.jpg); } html.theme-7 { background-image: url(/images/bg/bg7-s.jpg); } html.theme-8 { background-image: url(/images/bg/bg8-s.jpg); } main.modal-layout, main.standard-page-layout { padding: 1rem; } h1 { font-size: 1.3rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.1rem; } h4 { font-size:1rem; } form input, form select, form textarea { width: 100% !important; margin-bottom: 1em; } .login-form a.bottom-2 { bottom:1rem; } .detail-line label span { margin-bottom:0.5em; } .profile-image span { font-size: 20px; } .detail-modal .detail-image { width:140px; } .friend-card { font-size:0.9rem; } .friend-card img { width:80px; } .section-status { margin-bottom:0.75rem; } .filter-options div { width: 100%; text-align: right; } .song-search-result img { min-width:140px !important; } #search-results .green-button { font-size: 0.8em; padding: 0.6rem 1.2rem; margin-bottom: 0.5rem; } #tv-search-component #search-term, #book-search-component #search-term, #song-search-component #search-term { margin-bottom:1rem; width:100%; } .panel.thin-mobile .conversation-thread { margin: 0 -1em 1em -1em; } .message .time { display:block; margin-bottom:0.5em; } .conversation-controls { flex-wrap:wrap; gap:1em; margin: 1em -1em 2em -1em; > div { width:100%; } .post-btn input { width:100%; text-align:center; } .poster-details { text-align:center; img { float:none; vertical-align:middle; margin-right:0.5em; } } } } @media (max-width: 480px){ main.modal-layout, main.standard-page-layout { padding: 0.6rem; } .modal .container .dialog { height:100% !important; max-height:100%; margin:0; } .detail-modal .detail-image { width: 120px; } .user-details { justify-content:center; flex-direction:column; gap:1.5rem 1rem; } .user-details .user-state ul { right:auto; left:-4rem; } .friend-card { font-size: 0.8rem; } .friend-card img { width: 60px; } .group-list li { width:100%; text-align:center; } } /*! * CropSelectJs - https://zara4.com/projects/crop-select-js * * Copyright (c) 2017 Zara 4 * * Released under the GNU GPL 3.0 License * https://github.com/zara-4/crop-select-js/blob/master/LICENSE.md * */ .crop-select-js .crop-wrapper { display: block; max-width: 100%; max-height: 100%; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: #f1f1f1; img.crop-image { display: block; margin: auto; max-width: 100%; max-height: 100%; position: relative; top: 0 } .crop-selection { position: absolute; box-sizing: border-box; display: block; width: 100px; height: 100px; cursor: move; top: 0; z-index: 5 } .crop-selection.animated { border: 0 } .crop-selection .border { display: block; position: absolute; z-index: 10 } .crop-selection .border.left { top: 0; bottom: 0; left: 0; width: 1px; border-left: 1px dashed #000 } .crop-selection .border.top { top: 0; right: 0; left: 0; height: 1px; border-top: 1px dashed #000 } .crop-selection .border.right { top: 0; bottom: 0; right: 0; width: 1px; border-right: 1px dashed #000 } .crop-selection .border.bottom { bottom: 0; right: 0; left: 0; height: 1px; border-bottom: 1px dashed #000 } .crop-selection.animated .border.bottom, .crop-select-js .crop-wrapper .crop-selection.animated .border.left, .crop-select-js .crop-wrapper .crop-selection.animated .border.right, .crop-select-js .crop-wrapper .crop-selection.animated .border.top { border: 0 } .crop-selection.animated .border { background: url(img/selection.gif) } .crop-selection .handle { position: absolute; display: block; width: 7px; height: 7px; background-color: rgba(255,255,255,.8); border: 1px solid #000; z-index: 20 } .crop-selection .handle.top-left { top: 0; left: 0; cursor: nwse-resize } .crop-selection .handle.top { left: calc(50% - 5px); top: 0; cursor: ns-resize } .crop-selection .handle.top-right { top: 0; right: 0; cursor: nesw-resize } .crop-selection .handle.right { top: calc(50% - 5px); right: 0; cursor: ew-resize } .crop-selection .handle.bottom-right { bottom: 0; right: 0; cursor: nwse-resize } .crop-selection .handle.bottom { bottom: 0; left: calc(50% - 5px); cursor: ns-resize } .crop-selection .handle.bottom-left { bottom: 0; left: 0; cursor: nesw-resize } .crop-selection .handle.left { top: calc(50% - 5px); left: 0; cursor: ew-resize } .shadow { display: block; position: absolute; background-color: rgba(0,0,0,.6); width: 0; height: 0; z-index: 10 } .shadow.left { left: 0; top: 0; height: 100% } .shadow.right { right: 0; top: 0; height: 100% } .shadow.top { left: 30px; top: 0 } .shadow.bottom { left: 60px; bottom: 0 } } /* Custom image upload styles */ #crop-select { margin: 0 auto; background-color: #ccc; }