extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2025-02-18 18:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

add dock

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 08:06:36 +08:00
parent 49a2462854
commit 12dbdbd79f
4 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/bar.css
View File

@ -1,4 +1,5 @@
.bar { .bar {
z-index: 5; background: var(--panel-bg);
backdrop-filter: blur(var(--blur-strength)); backdrop-filter: blur(var(--blur-strength));
z-index: 5;
} }

31
css/dock.css Normal file
View File

@ -0,0 +1,31 @@
.dockContainer {
background: transparent;
position: absolute;
z-index: 5;
margin: 0 auto;
bottom: 0;
/*On bottom, center horizontally*/
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
/*Add transition*/
transition: opacity var(--transition-speed);
}
#dock {
background: var(--panel-bg);
border-radius: var(--rounded-radius);
display: flex;
position: relative;
height: auto;
width: auto;
padding: 5px;
margin: 10px;
transition: transform var(--transition-speed);
z-index: 1 !important;
}

1
css/style.css
View File

@ -3,6 +3,7 @@
@import url('bar.css'); @import url('bar.css');
@import url('top-panel.css'); @import url('top-panel.css');
@import url('clock.css'); @import url('clock.css');
@import url('dock.css');
:root { :root {
/* Colors */ /* Colors */

13
index.html
View File

@ -34,10 +34,17 @@
<body> <body>
<!-- The place where we set the background/image --> <!-- The place where we set the background/image -->
<div id="bodyBackground"></div> <div id='bodyBackground'></div>
<div class="bar" id="topPanel"> <div class='bar' id='topPanel'>
<div id="clock"></div> <div id='clock'></div>
</div>
<div class='dockContainer'>
<div class='bar' id='dock'>
<h4>gag</h4>
<!-- Javascript will generate a list here -->
</div>
</div> </div>