CoolFace
Apppublic

ArchitSharma/Movie-Recommendation-System

sourceHugging Faceupdated 1mo agoView on Hugging Face
2likes
style.css336 linesDownload Raw Back to static
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