Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Convert media button CSS from px to rem.

Browse Source
This commit is contained in:
Daniel Scalzi 2020-09-14 00:51:06 -04:00
parent 6a04ef0f62
commit df74b0e67c
No known key found for this signature in database
GPG Key ID: D18EA3FB4B142A57
2 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/landing/Landing.css
View File

@ -285,8 +285,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 25px; margin-top: 1.5625rem;
height: calc(100% - 95px);
width: 70px; width: 70px;
align-items: center; align-items: center;
} }
@ -299,10 +298,10 @@
/* Divider bar between the external and internal icons. */ /* Divider bar between the external and internal icons. */
.mediaDivider { .mediaDivider {
height: 1px; height: 0.0625rem;
width: 14px; width: 0.875rem;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
margin: 10px 0; margin: 0.625rem 0;
} }
/******************************************************************************* /*******************************************************************************

25
src/renderer/components/landing/mediabutton/MediaButton.css
View File

@ -3,23 +3,22 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 27px; height: 1.6875rem;
position: relative; position: relative;
} }
/* Social media icon shared styles. */ /* Social media icon shared styles. */
.mediaSVG { .mediaSVG {
fill: #ffffff; fill: #ffffff;
height: 12px;
transition: 0.25s ease; transition: 0.25s ease;
cursor: pointer; cursor: pointer;
height: 12px; height: 0.75rem;
width: 25px; width: 1.5625rem;
} }
.mediaSVG:hover, .mediaSVG:hover,
.mediaURL:focus .mediaSVG, .mediaURL:focus .mediaSVG,
.mediaSVG:active { .mediaSVG:active {
height: 20px; height: 1.25rem;
} }
/* Social media URL shared styles. */ /* Social media URL shared styles. */
@ -79,27 +78,27 @@
/* Settings icon colors. */ /* Settings icon colors. */
.settingsSVG { .settingsSVG {
stroke: #ffffff; stroke: #ffffff;
height: 15px; height: 0.9375rem;
} }
.mediaButton:hover .settingsSVG, .mediaButton:hover .settingsSVG,
.mediaButton:focus .settingsSVG, .mediaButton:focus .settingsSVG,
.mediaButton:active .settingsSVG { .mediaButton:active .settingsSVG {
height: 23px; height: 1.4375rem;
} }
.mediaTooltip { .mediaTooltip {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
width: 75px; width: 4.6875rem;
height: 20px; height: 1.25rem;
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
right: 130%; right: 130%;
font-size: 12px; font-size: 0.75rem;
line-height: 20px; line-height: 1.25rem;
transition: visibility 0s linear 0.25s, opacity 0.25s ease; transition: visibility 0s linear 0.25s, opacity 0.25s ease;
color: #fff; color: #fff;
} }
@ -108,8 +107,8 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 100%; left: 100%;
margin-top: -5px; margin-top: -0.3125rem;
border-width: 5px; border-width: 0.3125rem;
border-style: solid; border-style: solid;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.75); border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
} }