Skip to content

Commit

Permalink
Merge pull request #41 from onesounds/20240620-Update
Browse files Browse the repository at this point in the history 
Add plugins link
  • Loading branch information
@onesounds
onesounds authored Jun 20, 2024
2 parents 8580123 + 4ea64ce commit 823c5ef
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 62 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,4 @@ yarn-error.log*
.history
/.vs/ProjectSettings.json
/.vs/slnx.sqlite
/.vs
105 changes: 62 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
<meta name="description" content="#">
<meta name="referrer" content="unsafe-url">
<meta name="robots" content="index, follow">

<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

<!-- Primary Meta Tags -->
<title>Flow Launcher</title>
<meta name="title" content="Flow Launcher">
Expand Down Expand Up @@ -102,6 +109,12 @@
options
)}`
);
$("#releaseInfo2").text(
`${name} - ${publishedAt.toLocaleDateString(
undefined,
options
)}`
);
$("#installer").attr('href', installerDownload);
$("#portable").attr('href', portableDownload);
$("#installerSize").text(installerSize);
Expand All @@ -121,59 +134,64 @@
<!-- Modal content -->
<div class="modal-content">
<div class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="#000">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" class="CloseBtn">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" />
</svg>
</div>
<div class="details-modal-title">
<h3 style="margin:0px;">Downloads</h3>
</div>
<div class="details-modal-content">
<div style="display: flex; margin: 8px;">
<p id="releaseInfo2" style="white-space: nowrap; font-size:12px; margin:0px;"></p>
<a class="infolink" style="white-space: nowrap; font-size:12px; margin:0px 0px 0px 8px; display: inline;" href="https://github.com/Flow-Launcher/Flow.Launcher/releases" target="_blank" ><p>Release Note</p></a>
</div>
<a id="installer" class="installerBtn">
<i class="fa fa-download" style="margin:0px 5px; color:white;"></i><span style="color:white;">Installer</span>
<p id="installerSize" style="white-space: nowrap; font-size:12px; margin-top:0px; opacity: 0.8; color:white;"></p>
<i class="fa fa-download" style="margin:0px 5px;"></i><span>Installer</span>
<p id="installerSize" style="color:#fff !important; white-space: nowrap; font-size:12px; margin-top:0px; opacity: 0.8; "></p>
</a>
<a id="portable" class="portableBtn">
<i class="fa fa-file-archive-o" style="margin:0px 10px; color:white;"></i><span style="color:white;">Portable</span>
<p id="portableSize" style="white-space: nowrap; font-size:12px; margin-top:0px; opacity: 0.8; color:white;"></p>
<i class="fa fa-file-archive-o" style="margin:0px 10px;"></i><span>Portable</span>
<p id="portableSize" style="color:#fff !important; white-space: nowrap; font-size:12px; margin-top:0px; opacity: 0.8;"></p>
</a>
<hr class="modal-sep" />
<a href="https://github.com/Flow-Launcher/Flow.Launcher/releases" target="_blank" style="text-align:center; display:block; margin:0; font-size:12px;"><i class="fa fa-list" style="margin:0px 8px"></i>Release Notes</a>
<hr class="modal-sep" />

<div class="cmdInstallDiv" id="winget">
<p>
<span style="display: inline; user-select: none">&gt;</span>
<code><span style="color: rgb(252, 255, 155)">winget</span>
install "Flow Launcher"</code>
<button class="btn" data-clipboard-text="winget install &quot;Flow Launcher&quot;" aria-label="Copied!">
<i class="fa fa-copy"></i>
</button>
</p>
</div>
<div class="cmdInstallDiv" id="scoop">
<p>
<span style="display: inline; user-select: none">&gt;</span>
<code><span style="color: rgb(252, 255, 155)">scoop</span>
install Flow-Launcher</code>
<button class="btn" data-clipboard-text="scoop install flow-launcher" aria-label="Copied!">
<i class="fa fa-copy"></i>
</button>
</p>
</div>
<div class="cmdInstallDiv" id="choco">
<p>
<span style="display: inline; user-select: none">&gt;</span><code>
<span style="color: rgb(252, 255, 155)">choco</span>
install Flow-Launcher</code>
<button class="btn" data-clipboard-text="choco install flow-launcher" aria-label="Copied!">
<i class="fa fa-copy"></i>
</button>
</p>
</div>
<hr class="modal-sep"/>
<p style="margin:0; font-size:11px; text-align:center;">Supports Windows 7+ / Downloads are via GitHub</p>

</div>
<div class="details-modal-content-winget">
<div style="margin-bottom:4px;">Windows Package Manager</div>
<div class="cmdInstallDiv" id="winget">
<p>
<span style="display: inline; user-select: none">&gt;</span>
<code><span style="color: rgb(252, 255, 155)">winget</span>
install "Flow Launcher"</code>
<button class="btn" data-clipboard-text="winget install &quot;Flow Launcher&quot;" aria-label="Copied!">
<p>Copy</p>
</button>
</p>
</div>
<div class="cmdInstallDiv" id="scoop">
<p>
<span style="display: inline; user-select: none">&gt;</span>
<code><span style="color: rgb(252, 255, 155)">scoop</span>
install Flow-Launcher</code>
<button class="btn" data-clipboard-text="scoop install flow-launcher" aria-label="Copied!">
<p>Copy</p>
</button>
</p>
</div>
<div class="cmdInstallDiv" id="choco">
<p>
<span style="display: inline; user-select: none">&gt;</span>
<code><span style="color: rgb(252, 255, 155)">choco</span>
install Flow-Launcher</code>
<button class="btn" data-clipboard-text="choco install flow-launcher" aria-label="Copied!">
<p>Copy</p>
</button>
</p>
</div>
</div>
<div class="details-modal-content-winget" style="padding:1em;">
<p class="supportText">Supports Windows 7+ / Downloads are via GitHub</p>
</div>
</div>

</div>
Expand All @@ -190,6 +208,7 @@ <h3 style="margin:0px;">Downloads</h3>
<!-- MENU -->
<nav role="navigation" class="ui-section-header--nav ui-layout-flex">
<a href="#" id="myBtn" role="link" aria-label="#" class="ui-section-header--nav-link">Download</a>
<a href="https://www.flowlauncher.com/docs/#/plugins" role="link" aria-label="#" class="ui-section-header--nav-link">Plugins</a>
<a href="https://www.flowlauncher.com/docs/" role="link" aria-label="#" class="ui-section-header--nav-link">Docs</a>
<a href="https://github.com/Flow-Launcher/Flow.Launcher" role="link" aria-label="#" class="ui-section-header--nav-link">GitHub</a>
<a href="#" id="mobile-darkbtn" role="link" aria-label="#" onclick="toggle()" class="ui-section-header--nav-link mobile-darkbtn">Toggle Theme</a>
Expand Down Expand Up @@ -218,7 +237,7 @@ <h1 class="ui-text-title">Flow Launcher</h1>

<button id="myBtn2" class="downloadBtn">
<i class="fa fa-download"></i> Download
<p id="releaseInfo" style="white-space: nowrap; font-size:12px; margin-top:2px; opacity: 0.8;"></p>
<p id="releaseInfo" style="color:#fff !important; white-space: nowrap; font-size:12px; margin-top:2px; "></p>
</button>

</div>
Expand Down
102 changes: 83 additions & 19 deletions public/style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ TABLE OF CONTENT
--bkg-for-dark: #0d1117;
--link-for-dark: #c9d1d9;
--sep-for-light: #cecece;
--sep-for-dark: #1c2128;
--sep-for-dark: #0f1115;
--card-for-light: #fff;
--card-for-dark: #161b22;

Expand All @@ -51,9 +51,12 @@ TABLE OF CONTENT
--modal-for-dark: #2c2c2c;
}

body {color: var(--text-for-light); background-color: var(--bkg-for-light); transition: all 200ms linear;}
body {font-family: "Noto Sans", sans-serif !important; color: var(--text-for-light); background-color: var(--bkg-for-light); transition: all 200ms linear;}
a {color: var(--link-for-light);}

p {color: var(--text-for-light) !important;}
.dark-mode p {color: var(--text-for-dark) !important;}

.dark-mode {color: var(--text-for-dark); background-color: var(--bkg-for-dark);}
.dark-mode a {color: var(--link-for-dark);}
.light-mode {color: var(--text-for-light); background-color: var(--bkg-for-light);}
Expand Down Expand Up @@ -217,6 +220,8 @@ a {color: var(--link-for-light);}


.downloadBtn {
text-align: left;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
background-color: DodgerBlue;
border: none;
border-radius: 6px;
Expand All @@ -227,12 +232,19 @@ a {color: var(--link-for-light);}
transition: all 200ms linear;
}

.installerBtn i, span, p{color:White}
.portableBtn i, span, p{color:White}

/* Darker background on mouse-over */
.downloadBtn:hover {
background-color: RoyalBlue;
}

code {
font-size:1em;
font-family: "Source Code Pro", monospace;
}
.installerBtn {
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
text-align:center;
display:inline-block;
background-color: DodgerBlue;
Expand All @@ -250,11 +262,13 @@ a {color: var(--link-for-light);}
background-color: RoyalBlue;
}
.portableBtn {
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
text-align:center;
display:inline-block;
background-color: #9a5dd6;
background-color: rgb(49, 81, 176);
border: none;
width:100%;
margin-top: 6px;
border-radius: 6px;
color: white;
padding: 20px 20px;
Expand All @@ -263,38 +277,60 @@ a {color: var(--link-for-light);}
}

.portableBtn:hover {
background-color: #7e36ca;
background-color: rgb(31, 60, 146);
}

.is-unselectable{
user-select: none;
}

.cmdInstallDiv {
background-color: rgba(0, 0, 0, 0.649);
margin-top: 12px;
background-color: rgba(0, 0, 0, 0.849);
margin-top: 6px;
padding: 10px;
border-radius: 5px;
width: 100%;
text-align: left;
position: relative;

left: -2;
}
.cmdInstallDiv p {
font-size: 0.65em;
font-size: 0.75em;
margin-left: 8px;
color: #ffffffbb;
color: #ffffffbb !important;
text-align: left;
vertical-align: middle;
letter-spacing: 0.5;
white-space: nowrap;
}

.supportText {
margin:0px 0px 0px 8px; font-size:11px; text-align:left;
}
.cmdInstallDiv .btn {
display: inline;
position: relative;
right: .5em;
top: 50%;
transform: translate(20%,-5%);
display:none;
border: solid 0px #cecece;
background-color: transparent;
padding: 4px 8px;
border-radius: 4px;
background-color: #4f4f4f;
float: right;
}

.cmdInstallDiv .btn:hover {
background-color: #7e7e7e;
}
.cmdInstallDiv .btn:active {
background-color: #131313;
}

.btn p {
margin:0px;
font-size:11px !important;
}
.cmdInstallDiv i {
font-size:16px;
color:#fff;
Expand Down Expand Up @@ -373,8 +409,8 @@ a {
position: relative;
color: #fff;
transition: all 200ms linear;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-family: "Noto Sans", sans-serif !important;
font-weight: 400;
font-size: 15px;
border-radius: 2px;
margin: 2px 0;
Expand Down Expand Up @@ -436,7 +472,13 @@ a .uil {
filter: brightness(10%);
}

@media screen and (max-width: 991px) {
@media screen and (min-width: 400px) {
.cmdInstallDiv .btn {
display:block;
}
.supportText {
margin:0px 0px 0px 8px; font-size:11px; text-align:center;
}
.logo {
top: 30px;
left: 20px;
Expand All @@ -454,6 +496,7 @@ a .uil {
/* The Modal (background) */

.modal {
backdrop-filter: blur(50px);
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
Expand All @@ -464,15 +507,16 @@ a .uil {
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
position: relative;
background-color:var(--modal-for-light);
Width:86%;
Max-width:400px;
Max-width:450px;
border-radius: 6px;
left: 50%;
margin-top:5%;
Expand Down Expand Up @@ -528,13 +572,33 @@ a .uil {
width: calc(100% - 4.5em);
}

.CloseBtn {
fill:var(--text-for-light);
}
.dark-mode .CloseBtn {
fill:var(--text-for-dark);
}

.infolink p:hover{text-decoration: underline;}

.details-modal-content {
border-top: 1px solid #e0e0e0;
padding: 10px 2em 2em 2em;
padding: 10px 2em 1em 2em;
pointer-events: all;
overflow: auto;
}

.details-modal-content-winget {
border-top: 1px solid #e0e0e0;
padding: 1.2em 2em 2em 2em;
pointer-events: all;
overflow: auto;
}

.dark-mode .details-modal-content-winget {
border-color: var(--sep-for-dark);
}

@media (prefers-color-scheme: dark) {
.details-modal-content {border-color:var(--sep-for-dark)}
}
Expand Down Expand Up @@ -1393,7 +1457,7 @@ div label[for=ui-component-toggle__yearly] {
--------------------------------------------------------------*/

@media screen and (min-width: 640px) {

/*------------------------------------------------------------
VARIABLE
------------------------------------------------------------*/
Expand Down

0 comments on commit 823c5ef

Please sign in to comment.