mirror of
https://github.com/Grasscutters/Cultivation.git
synced 2025-12-14 16:14:48 +01:00
Added a welcome message to the rightbar in order to make it look more comfy
This commit is contained in:
@@ -13,17 +13,16 @@
|
|||||||
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, 0.250);
|
background-color: rgba(0, 0, 0, 0.25);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.RightBarInner > div {
|
.RightBarInner > div {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.RightBar img {
|
.RightBar img {
|
||||||
height: 35px;
|
height: 30px;
|
||||||
filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
|
filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%);
|
||||||
transition: filter 0.2s ease-in-out;
|
transition: filter 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
@@ -43,8 +42,8 @@
|
|||||||
.BarImg {
|
.BarImg {
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 50px;
|
width: 40px;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
background-color: rgba(0, 0, 0, 0.685);
|
background-color: rgba(0, 0, 0, 0.685);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -52,13 +51,66 @@
|
|||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.BarImg:hover {
|
.BarImg:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid #ffc920;
|
border: 2px solid #ffc920;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.BarImg:hover img {
|
.BarImg:hover img {
|
||||||
filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%);
|
filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.WelcomeMessage {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: white;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-pan {
|
||||||
|
from {
|
||||||
|
background-position: 0% center;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
background-position: -200% center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale {
|
||||||
|
from,
|
||||||
|
to {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic-text {
|
||||||
|
animation: background-pan 3s linear infinite;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#fff,
|
||||||
|
#ffc920,
|
||||||
|
#fff,
|
||||||
|
#fff
|
||||||
|
);
|
||||||
|
background-size: 200%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -24,6 +24,10 @@ export default class RightBar extends React.Component {
|
|||||||
<div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
|
<div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
|
||||||
<img src={Github} />
|
<img src={Github} />
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user