ArchitSharma/Movie-Recommendation-System
2
1/* width */2::-webkit-scrollbar {3 width: 15px;4}5 6/* Track */7::-webkit-scrollbar-track {8 border-radius: 10px;9}10 11/* Handle */12::-webkit-scrollbar-thumb {13 background: #e50914; 14 border-radius: 10px;15}16 17/* Handle on hover */18::-webkit-scrollbar-thumb:hover {19 background: #b30000; 20}21 22.movie {23 color: #fff;24 margin-left: auto;25 margin-right: auto;26 resize: none;27}28 29.movie-content {30 display: flex;31 flex-wrap: wrap;32 justify-content:center;33}34 35.movie-content > div {36 margin:20px;37}38 39.btn-block{40 width: 15%;41 text-align: center;42 margin-left: auto;43 margin-right: auto;44 color: #e4e0e0;45}46 47.dataset-note {48 color: #e8e8e8;49 background: rgba(0, 0, 0, 0.55);50 border: 1px solid rgba(255, 255, 255, 0.2);51 border-radius: 6px;52 font-size: 0.95rem;53 line-height: 1.5;54 margin: 0 auto;55 max-width: 720px;56 padding: 10px 14px;57 text-align: center;58}59 60.dataset-note__label {61 color: #ffffff;62 font-weight: 700;63 margin-right: 6px;64 text-transform: uppercase;65}66 67#content {68 background-image: url("/static/image.jpg");69 background-color: #181818;70 font-family: 'Noto Sans JP', sans-serif;71}72 73#details {74 margin-left: 50px;75}76 77.body-content {78 position: relative;79 min-height: 100%;80}81 82.footer {83 color: #e4e0e0;84 background-color: #e50914d1;85 text-align:center;86 position: fixed;87 bottom: 0;88 width: 100%;89}90 91.social-icons {92 margin-left: 15px;93}94 95h1 {96 font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;97 color: #e50914;98 font-weight: bold;99 margin-top: 30px;100 text-shadow: #000000 0px 0px 13px;101 }102 103.github-corner:hover .octo-arm {104 animation: octocat-wave 560ms ease-in-out;105}106 107.fa-arrow-up {108 font-size: 1.5em;109 color: #ffffff;110 background: #e50914;111 padding: 10px;112 border-radius: 50%;113 float: right;114 bottom: 25px;115 position: relative;116}117 118.fa-arrow-up:hover {119 cursor: pointer;120}121 122.app-title:hover {123 cursor: pointer;124}125 126@keyframes octocat-wave {127 0%,128 100% {129 transform: rotate(0)130 }131 132 20%,133 60% {134 transform: rotate(-25deg)135 }136 137 40%,138 80% {139 transform: rotate(10deg)140 }141}142 143#autoComplete {144 background-position: 98% ;145}146 147#name {148 color: white;149 padding: 1px;150}151 152h6 {153 margin-bottom: 20px; 154}155 156@media only screen and (max-width: 650px) {157 #mcontent {158 display: block;159 }160 .poster-lg {161 display: none;162 }163 #details {164 margin-left: 30px;165 }166 #loader {167 display: none;168 position: fixed;169 z-index: 100;170 left: 0;171 top:0;172 width: 100%;173 height: 100%;174 background-image: url("/static/loader.gif");175 background-size: 40%;176 background-position: 50% 50%;177 background-color: rgba(255, 255, 255, 1);178 background-repeat: no-repeat;179 -webkit-transition: background-image 0.2s ease-in-out;180 transition: background-image 0.2s ease-in-out;181 }182 183 #loader-text {184 vertical-align: middle;185 color:white;186 }187 188 #autoComplete {189 background-position: 97% ;190 }191 192 svg[data-toggle=tooltip] {193 width: 50px;194 height: 50px;195 }196 197 .fa-arrow-up{198 font-size: 1em;199 color: #ffffff;200 background: #e50914;201 padding: 10px;202 border-radius: 50%;203 float: right;204 bottom: 10px;205 position: relative;206 }207 208 .dataset-note {209 font-size: 0.85rem;210 margin: 0 18px;211 }212}213 214@media only screen and (max-width: 991px) {215 .modal-body{216 display: block;217 }218 .profile-pic {219 margin-left: auto;220 margin-right: auto;221 display: block;222 margin-bottom: 20px;223 }224}225@media only screen and (min-width: 992px) {226 .modal-body {227 display: flex;228 }229}230 231@media only screen and (min-width: 651px) {232 .poster-sm {233 display: none;234 }235 236 #mcontent {237 display: flex;238 flex-wrap: nowrap;239 }240 241 #loader {242 display: none;243 position: fixed;244 z-index: 100;245 left: 0;246 top:0;247 width: 100%;248 height: 100%;249 background-image: url("/static/loader.gif");250 background-size: 20%;251 background-position: 50% 50%;252 background-color: rgba(255, 255, 255, 1);253 background-repeat: no-repeat;254 -webkit-transition: background-image 0.2s ease-in-out;255 transition: background-image 0.2s ease-in-out;256 }257 258 #loader-text {259 vertical-align: middle;260 color:white;261 }262 263}264 265.poster{266 -webkit-box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);267 -moz-box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);268 box-shadow: 0px 1px 15px 4px rgba(250,250,250,1);269}270 271.card:hover {272 cursor: pointer;273}274 275.castcard:hover {276 cursor: pointer;277}278 279.cast-img {280 filter: brightness(100%);281 -moz-transition: all 0.75s ease;282 -webkit-transition: all 0.75s ease;283 transition: all 0.75s ease;284}285 286 287.cast-img:hover {288 filter: brightness(50%);289 -moz-transition: all 0.75s ease;290 -webkit-transition: all 0.75s ease;291 transition: all 0.75s ease;292}293 294.fig {295 display: flex;296 align-items: center;297 justify-content: center;298 backdrop-filter: brightness(50%);299 position: absolute;300 bottom: 0px;301 top: 0px;302 right: 0px;303 left: 0px;304 opacity: 0;305 -moz-transition: all 0.75s ease;306 -webkit-transition: all 0.75s ease;307 transition: all 0.75s ease;308}309 310.fig:hover {311 opacity: 1;312 backdrop-filter:br;313 -moz-transition: all 0.75s ease;314 -webkit-transition: all 0.75s ease;315 transition: all 0.75s ease;316}317 318.card-btn {319 border-radius: 20px;320}321 322.imghvr {323 position: relative;324}325 326.table td {327 border-color: white;328 border-style:solid; 329 border-width:1px;330}331 332.fail {333 display: none;334 color: white;335}336 