Skip to content
This repository has been archived by the owner on Dec 16, 2020. It is now read-only.

Commit

Permalink
New release - Beta v1.3.2
Browse files Browse the repository at this point in the history
  • Loading branch information
Beelink committed Jun 4, 2019
1 parent 2b09549 commit bdd636b
Show file tree
Hide file tree
Showing 92 changed files with 586 additions and 25 deletions.
1 change: 0 additions & 1 deletion css/about.css
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ label.title {

.about-icon {
border-radius: 50%;
padding: 4px;
}

.about-icon:hover {
Expand Down
262 changes: 262 additions & 0 deletions css/keybinds.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
/*
.########...#######...#######..########
.##.....##.##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.########..##.....##.##.....##....##...
.##...##...##.....##.##.....##....##...
.##....##..##.....##.##.....##....##...
.##.....##..#######...#######.....##...
*/

@font-face {
font-family: SegMDL2;
src: url(../fonts/SegMDL2.ttf);
}

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Semibold.ttf);
}

:root{
--color-back: rgb(255, 255, 255);
--color-over: rgba(0, 0, 0, 0.05);
--color-top: rgb(0, 0, 0);
--color-shadow: rgba(0, 0, 0, 0.5);

--color-red: rgb(255, 63, 52);
--color-green: rgb(11, 232, 129);
--color-blue: rgb(15, 188, 249);
--color-orange: rgb(255, 168, 1);

--px-radius: 4px;
--px-font: 14px;
--px-shadow: 8px;

--opacity-blur: 0.5;
}

* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
-webkit-user-drag: none;

font-family: OpenSans;
font-size: var(--px-font);
}

/*
....###....##....##.####.##.....##....###....########.####..#######..##....##..######.
...##.##...###...##..##..###...###...##.##......##.....##..##.....##.###...##.##....##
..##...##..####..##..##..####.####..##...##.....##.....##..##.....##.####..##.##......
.##.....##.##.##.##..##..##.###.##.##.....##....##.....##..##.....##.##.##.##..######.
.#########.##..####..##..##.....##.#########....##.....##..##.....##.##..####.......##
.##.....##.##...###..##..##.....##.##.....##....##.....##..##.....##.##...###.##....##
.##.....##.##....##.####.##.....##.##.....##....##....####..#######..##....##..######.
*/

@keyframes anim-show {
from {
opacity: 0;
transform: scale(0.75);
}
to {
opacity: 1;
transform: scale(1);
}
}

/*
..######...######..########...#######..##.......##.......########.....###....########.
.##....##.##....##.##.....##.##.....##.##.......##.......##.....##...##.##...##.....##
.##.......##.......##.....##.##.....##.##.......##.......##.....##..##...##..##.....##
..######..##.......########..##.....##.##.......##.......########..##.....##.########.
.......##.##.......##...##...##.....##.##.......##.......##.....##.#########.##...##..
.##....##.##....##.##....##..##.....##.##.......##.......##.....##.##.....##.##....##.
..######...######..##.....##..#######..########.########.########..##.....##.##.....##
*/

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: var(--color-over);
}

::-webkit-input-placeholder {
color: var(--color-over);
}

/*
.########.####.########.##.......########.########.....###....########.
....##.....##.....##....##.......##.......##.....##...##.##...##.....##
....##.....##.....##....##.......##.......##.....##..##...##..##.....##
....##.....##.....##....##.......######...########..##.....##.########.
....##.....##.....##....##.......##.......##.....##.#########.##...##..
....##.....##.....##....##.......##.......##.....##.##.....##.##....##.
....##....####....##....########.########.########..##.....##.##.....##
*/

#titlebar-icon {
float: left;
}

#titlebar-title {
position: absolute;
top: 6px;
left: 32px;
}

#drag-zone {
-webkit-app-region: drag;
position: absolute;
left: 4px;
right: 4px;
top: 4px;
height: 28px;
z-index: -100;
}

#titlebar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 32px;
background-color: var(--color-over);
padding: 4px;
}

#titlebar.blur {
opacity: 0.5;
}

#window-controls {
-webkit-app-region: no-drag;
float: right;
}

#titlebar.blur #window-controls .button {
opacity: var(--opacity-blur);
}

#window-controls.windows {
display: grid;
grid-template-columns: repeat(1, 46px);
margin-top: -4px;
margin-right: -4px;
}
#window-controls.windows .button {
height: 32px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#window-controls.windows .button span {
font-family: SegMDL2;
font-size: 10px;
font-weight: normal;
color: var(--color-top);
}
#window-controls.windows .button:hover {
background: #E81123;
opacity: 1;
}
#window-controls.windows #close-btn:hover span {
color: white;
}

/*
.########...#######..########..##....##
.##.....##.##.....##.##.....##..##..##.
.##.....##.##.....##.##.....##...####..
.########..##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.########...#######..########.....##...
*/

label {
color: var(--color-top);
}

label.subtitle {
font-size: 24px;
}

body {
margin: 4px;
padding: 0;
overflow: hidden;
}

label.link {
color: var(--color-blue);
}

label.link:hover {
text-decoration: underline;
}

.container {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
overflow-y: scroll;
}

.container img {
vertical-align: middle;
}

.key-code {
display: inline-block;
width: 128px;
}

/*
.########..##........#######...######..##....##
.##.....##.##.......##.....##.##....##.##...##.
.##.....##.##.......##.....##.##.......##..##..
.########..##.......##.....##.##.......#####...
.##.....##.##.......##.....##.##.......##..##..
.##.....##.##.......##.....##.##....##.##...##.
.########..########..#######...######..##....##
*/

hr {
border: 1px solid var(--color-over);
margin: 4px 8px;
}

.block-title {
padding: 4px;
}

.block-title label {
vertical-align: super;
}

/*
.########.##.....##.########....########.##....##.########.
....##....##.....##.##..........##.......###...##.##.....##
....##....##.....##.##..........##.......####..##.##.....##
....##....#########.######......######...##.##.##.##.....##
....##....##.....##.##..........##.......##..####.##.....##
....##....##.....##.##..........##.......##...###.##.....##
....##....##.....##.########....########.##....##.########.
*/
10 changes: 10 additions & 0 deletions css/settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,16 @@ label.title {
font-size: 48px;
}

label.link {
color: var(--color-blue);
display: inline-block;
margin: 0 4px;
}

label.link:hover {
text-decoration: underline;
}

/*
.########..##........#######...######..##....##
.##.....##.##.......##.....##.##....##.##...##.
Expand Down
1 change: 0 additions & 1 deletion css/welcome.css
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,6 @@ hr {

.about-icon {
border-radius: 50%;
padding: 4px;
}

.about-icon:hover {
Expand Down
5 changes: 2 additions & 3 deletions html/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@
<title>About</title>
<link rel="shortcut icon" type="image/png" href="../imgs/icons16/about.png"/>
<link rel="stylesheet" href="../css/about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
<label class="subtitle">About</label>
<hr>
<img class="about-icon" src="../imgs/icon128.png" onclick="openAppPage()" title="App page"><br>
<img class="about-icon" src="../imgs/icon96.png" onclick="openAppPage()" title="App page"><br>
<label class="nav-label">Arrow Browser</label><br>
<label class="nav-label" id="about-app"></label><br>
<label class="nav-label" id="about-app"></label><br><br>
<div class="nav-btn" onclick="checkForUpdates()" title="Check for new version">
<img class="nav-btn-icon theme-icon" name="check-updates">
<label class="nav-btn-label">Check for updates</label>
Expand Down
1 change: 0 additions & 1 deletion html/bookmarks.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<link rel="shortcut icon" type="image/png" href="../imgs/icons16/bookmarks.png"/>
<link rel="stylesheet" href="../css/bookmarks.css">
<link rel="stylesheet" href="../node_modules/dragula/dist/dragula.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
Expand Down
1 change: 0 additions & 1 deletion html/downloads.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<title>Downloads</title>
<link rel="shortcut icon" type="image/png" href="../imgs/icons16/download.png"/>
<link rel="stylesheet" href="../css/downloads.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
Expand Down
59 changes: 59 additions & 0 deletions html/keybinds.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/keybinds.css">
<title>Key binds</title>
</head>
<body>
<div id="drag-zone"></div>

<div id="titlebar">
<img id="titlebar-icon" class="theme-icon" name="keyboard">
<label id="titlebar-title">Key binds</label>
<div id="window-controls"></div>
</div>

<div class="container">
<div class="key-code">Ctrl + T</div>Create new tab<br>
<div class="key-code">F5</div>Reload active page<br>
<div class="key-code">Ctrl + Shift + D</div>Duplicate active tab<br>
<div class="key-code">Ctrl + W</div>Close active tab<br>
<hr>
<div class="key-code">Ctrl + B</div>Open bookmarks<br>
<div class="key-code">Ctrl + Shift + B</div>Add active page to bookmarks<br>
<hr>
<div class="key-code">Ctrl + D</div>Open downloads<br>
<hr>
<div class="key-code">Ctrl + -</div>Zoom out active page<br>
<div class="key-code">Ctrl + =</div>Zoom in active page<br>
<div class="key-code">Ctrl + Backspace</div>Change active page zoom to original<br>
<div class="key-code">F11</div>Toggle fullscreen mode<br>
<hr>
<div class="key-code">Ctrl + X</div>Cut<br>
<div class="key-code">Ctrl + C</div>Copy<br>
<div class="key-code">Ctrl + V</div>Paste<br>
<div class="key-code">Ctrl + Z</div>Undo<br>
<div class="key-code">Ctrl + Shift + Z</div>Redo<br>
<div class="key-code">Ctrl + A</div>Select all<br>
<div class="key-code">Backspace</div>Delete<br>
<hr>
<div class="key-code">Ctrl + F</div>Find text in active page<br>
<div class="key-code">F12</div>Open developer tools for active page<br>
<hr>
<div class="key-code">Ctrl + Shift + S</div>Open settings<br>
<hr>
<div class="key-code">Ctrl + K</div>Show key binds window<br>
<div class="key-code">Ctrl + U</div>Check for app updates<br>
<div class="key-code">Ctrl + Shift + A</div>Open about app page<br>
<hr>
<div class="key-code">Ctrl + Shift + F</div>Focus address bar<br>
<div class="key-code">Esc</div>Close active panel<br>
<hr>
<div class="key-code">Ctrl + Shift + E</div>Exit app
</div>
<script type="text/javascript" src="../js/keybinds.js"></script>
</body>
</html>

0 comments on commit bdd636b

Please sign in to comment.