Enabled Right Click + Disabled Selection + Card Image hover
This commit is contained in:
parent
a145dcccc8
commit
98a2372128
|
@ -1,11 +1,6 @@
|
||||||
/*=============== GOOGLE FONTS ===============*/
|
/*=============== GOOGLE FONTS ===============*/
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Monsterrat");
|
@import url("https://fonts.googleapis.com/css2?family=Monsterrat");
|
||||||
|
|
||||||
::selection {
|
|
||||||
color: #fff;
|
|
||||||
background-color: aqua;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*=============== VARIABLES CSS ===============*/
|
/*=============== VARIABLES CSS ===============*/
|
||||||
:root {
|
:root {
|
||||||
--header-height: 3.5rem;
|
--header-height: 3.5rem;
|
||||||
|
|
|
@ -17,7 +17,7 @@ return (
|
||||||
<Column>
|
<Column>
|
||||||
<img src="https://cdn.discordapp.com/attachments/985501610455224389/1041882683166445699/logo2.png" width="130" alt="Akio"></img>
|
<img src="https://cdn.discordapp.com/attachments/985501610455224389/1041882683166445699/logo2.png" width="130" alt="Akio"></img>
|
||||||
|
|
||||||
<Heading>Miruro</Heading>
|
<Heading>MIRURO</Heading>
|
||||||
</Column>
|
</Column>
|
||||||
<Column>
|
<Column>
|
||||||
<Heading> </Heading>
|
<Heading> </Heading>
|
||||||
|
|
|
@ -16,6 +16,15 @@ export const Container = styled.div`
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: 0.5s;
|
||||||
|
|
||||||
|
:hover {
|
||||||
|
box-shadow: 0 0px 20px rgba(150, 150, 150, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Column = styled.div`
|
export const Column = styled.div`
|
||||||
|
@ -47,11 +56,13 @@ export const FooterLink = styled.a`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Heading = styled.p`
|
export const Heading = styled.p`
|
||||||
font-size: 24px;
|
color: #CCC;
|
||||||
width: 130px;
|
width: 130px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #aaa;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-weight: bold;
|
|
||||||
`;
|
`;
|
|
@ -69,7 +69,7 @@ function AnimeCards(props) {
|
||||||
: item.title.english)
|
: item.title.english)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<img src={item.coverImage.large} alt="" />
|
<img className="card-img" src={item.coverImage.large} alt="" />
|
||||||
</Link>
|
</Link>
|
||||||
<p>
|
<p>
|
||||||
{item.title.english !== null
|
{item.title.english !== null
|
||||||
|
@ -92,11 +92,6 @@ const Wrapper = styled.div`
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
|
@ -10,13 +10,14 @@ root.render(
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
window.addEventListener(
|
//* Function to disable right click on website
|
||||||
|
/* window.addEventListener(
|
||||||
'contextmenu',
|
'contextmenu',
|
||||||
function (e) {
|
function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
); */
|
||||||
|
|
||||||
// register the service worker
|
// register the service worker
|
||||||
serviceWorkerRegistration.register();
|
serviceWorkerRegistration.register();
|
||||||
|
|
|
@ -94,7 +94,7 @@ function AnimeDetails() {
|
||||||
/>
|
/>
|
||||||
<ContentWrapper>
|
<ContentWrapper>
|
||||||
<Poster>
|
<Poster>
|
||||||
<img src={animeDetails[0].gogoResponse.image} alt="" />
|
<img className="card-img" src={animeDetails[0].gogoResponse.image} alt="" />
|
||||||
{localStorageDetails !== 0 &&
|
{localStorageDetails !== 0 &&
|
||||||
animeDetails[0].gogoResponse.numOfEpisodes > 1 ? (
|
animeDetails[0].gogoResponse.numOfEpisodes > 1 ? (
|
||||||
<Button
|
<Button
|
||||||
|
@ -287,10 +287,10 @@ const Button = styled(Link)`
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -25%;
|
top: -25%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: 0.5s;
|
transition: 0.2s;
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(0.95);
|
||||||
background-color: rgb(155 0 59);
|
background-color: rgb(155 0 59);
|
||||||
color: rgb(255 255 255);
|
color: rgb(255 255 255);
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,7 +38,7 @@ function FavouriteAnime() {
|
||||||
: item.title.english)
|
: item.title.english)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<img src={item.coverImage.large} alt="" />
|
<img className="card-img" src={item.coverImage.large} alt="" />
|
||||||
<p>
|
<p>
|
||||||
{item.title.english !== null
|
{item.title.english !== null
|
||||||
? item.title.english
|
? item.title.english
|
||||||
|
|
|
@ -38,7 +38,7 @@ function PopularAnime() {
|
||||||
: item.title.english)
|
: item.title.english)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<img src={item.coverImage.large} alt="" />
|
<img className="card-img" src={item.coverImage.large} alt="" />
|
||||||
<p>
|
<p>
|
||||||
{item.title.english !== null
|
{item.title.english !== null
|
||||||
? item.title.english
|
? item.title.english
|
||||||
|
@ -93,6 +93,7 @@ const Links = styled(Link)`
|
||||||
height: 235px;
|
height: 235px;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
|
|
|
@ -38,7 +38,7 @@ function TrendingAnime() {
|
||||||
: item.title.english)
|
: item.title.english)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<img src={item.coverImage.large} alt="" />
|
<img className="card-img" src={item.coverImage.large} alt="" />
|
||||||
<p>
|
<p>
|
||||||
{item.title.english !== null
|
{item.title.english !== null
|
||||||
? item.title.english
|
? item.title.english
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
import { createGlobalStyle } from 'styled-components';
|
import { createGlobalStyle } from 'styled-components';
|
||||||
|
|
||||||
const GlobalStyle = createGlobalStyle`
|
const GlobalStyle = createGlobalStyle`
|
||||||
|
::selection {
|
||||||
|
color: none;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -63,7 +67,7 @@ const GlobalStyle = createGlobalStyle`
|
||||||
}
|
}
|
||||||
.swiper-button-next,
|
.swiper-button-next,
|
||||||
.swiper-button-prev {
|
.swiper-button-prev {
|
||||||
color: #FFFFFF !important;
|
color: #FFFFFF !important;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
.swiper-wrapper{
|
.swiper-wrapper{
|
||||||
|
@ -88,6 +92,14 @@ const GlobalStyle = createGlobalStyle`
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
transition: 0.2s;
|
||||||
|
|
||||||
|
:hover {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.skip-button {
|
.skip-button {
|
||||||
padding: 0.3rem 1rem;
|
padding: 0.3rem 1rem;
|
||||||
|
|
Loading…
Reference in New Issue