ODE/Lightbox-Remastered
ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

Compare commits

base: ODE:frame-only
Branches Tags
ODE:master
ODE:pages
ODE:frame-only
ODE:1.0.0
ODE:0.1
..
compare: ODE:master
Branches Tags
ODE:pages
ODE:frame-only
ODE:master
ODE:1.0.0
ODE:0.1

22 Commits
frame-only ... master

Author SHA1 Message Date
Simon
865837a6ac Update README.md 2021-08-10 12:04:49 +00:00
Thoscellen
fdbdcae7cd fix: 📝 Updated Readme.md images and alts to use thoses of Pages. They are not hosted on the branch for now. 2021-08-09 21:43:09 +02:00
Thoscellen
0dd3454003 chore: 👷 Removed stuff that moved in pages branch instead. 2021-08-09 21:19:33 +02:00
Simon
5589df8076 Update README.md 2021-08-09 16:51:26 +00:00
Simon
342d029ae0 Update README.md 2021-08-09 16:51:11 +00:00
Thoscellen
a8cdb24c94 chore: Updated readme with Behance link and fresh links and demo resources. 2021-08-09 18:49:34 +02:00
Thoscellen
125601885d feat: ✨ Implemented Juxtapose.js for a before/after Page showcase. 2021-08-09 17:59:12 +02:00
Thoscellen
52b1983d1d ci: ♻️ Moved out main code (css, assets and html) to the home repo to make it more accessible. Edited the pipeline to move them in public for Pages. 2021-08-09 17:58:14 +02:00
Thoscellen
d8da2a8010 fix: 📝 Updated the ReadMe to test if codepens works on it. Not sure thought. 2021-08-09 16:52:55 +02:00
Thoscellen
7fcc418043 fix: ♻️ Fixed buttons to link to # and avoid useless reload on click (they are no suposed to be interactive). 
Changed the 'View' toolbar to square buttons instead of text links. There is no images yet.
 2021-08-09 16:51:56 +02:00
Thoscellen
50060c76ad refactor: ♻️ Moved content to public folder 2021-08-09 15:54:15 +02:00
Thoscellen
d5d2f6d21e Merge branch 'master' of https://gitlab.com/Thoscellen/Lightbox-Remastered 2021-08-09 14:55:30 +02:00
Thoscellen
cc5d416a2a refactor: ♻️ Moved demo content to public in order to be an entry point to serve the page module of GitLab 2021-08-09 14:55:22 +02:00
Simon
47730caf44 Init .gitlab-ci.yml file 2021-08-09 12:50:39 +00:00
Thoscellen
3b81fae077 refactor: ♻️ Clean up public folder to separate content for each targets 2021-08-09 14:40:49 +02:00
Thoscellen
c0376bfe13 fixed edge & chrome overflow on grid content 2021-04-29 17:10:27 +02:00
Thoscellen
706ff667e7 Used new font from google and local fallbacks 2021-04-29 16:40:22 +02:00
Thoscellen
7315d9243a fix h3 closing tag, added a lot of dimmy files 2021-04-29 16:39:51 +02:00
Thoscellen
2b0ff70520 renamed com folder to public for gitlab 2021-02-18 01:13:10 +01:00
Thomas d'Alexis
d92423eb3a fix crédits des polices 2021-01-27 13:59:14 +00:00
Thomas d'Alexis
2a8045fc8f Mise à jour de 'README.md' 2021-01-27 13:57:07 +00:00
Thomas d'Alexis
3a883183e2 Fix une référence 
Modification d'une mauvaise référence de *One Pocket* et *Neo Pocket* à *One* et *Neo*.
 2021-01-27 13:50:50 +00:00
14 changed files with 307 additions and 148 deletions
Show Stats Expand all files Collapse all files

24
README.md
View File

@ -2,26 +2,34 @@
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered). > This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
You are viewing the frame-only branch. This branch feature a wireframe version of this prototype. This small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI.
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe.html) The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width.
This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product.
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely. On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/juxtaposejs/)
## Gallery ## Gallery
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png) ![Example of a full ranged lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%201.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png) ![Example of a comfty lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%202.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png) ![Example of a neat lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%203.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png) ![Example of a tight lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%204.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png) ![Example of a narrow lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%205.png)
![Example of a cramped lightbox](https://khosmon.gitlab.io/Lightbox-Remastered/readme_assets/Lightbox%206.png)
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
## Credits ## Credits
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula * Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education * Originals Design, Assets, Codes, Graphics: Open Digital Education

BIN
assets/closebutton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
assets/fake-home.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
assets/folder-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
assets/unknown-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

200
lightbox-demo.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./main.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="fake">
<img src="./assets/fake-home.jpg" />
</div>
<div id="lbmod1" class="lb-mod softener">
<div class="lb-container">
<div class="lb-header">
<h2>Importer des documents</h2>
<a href="#" class="close-button"><img src="./assets/closebutton.png"></a>
<div id="tabs-container">
<span></span>
<span><a href="#">Intégrer un contenu externe</a></span>
<span><a href="#">Filmer depuis la caméra</a></span>
<span class="active"><a href="">Parcourir son Espace Doc</a></span>
<span></span>
</div>
</div>
<div class="lb-body doc-file-browse">
<div id="doc-file-search">
<input type="search" placeholder="Rechercher" />
<button>🔍</button>
</div>
<div id="doc-file-viewmode">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="doc-file-nav" class="list-nav scrollable">
<ul class="">
<li class="active">
<span>Mes documents</span>
<ul>
<li><span>Mes Images</span></li>
<li><span>Mes Enregistrements</span></li>
<li><span>Mes Vidéos</span></li>
<li><span>Mes Devoirs</span></li>
<li><span>Mes Archives</span></li>
<li><span>Mes Affaires</span></li>
<li><span>Mes Mots</span></li>
<li><span>Mes Classeurs</span></li>
</ul>
</li>
<li><span>Documents partagés</span></li>
<li><span>Documents des applis</span></li>
</ul>
</div>
<div id="doc-file-dominos" class="domino-container scrollable">
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Images</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Enregistrements</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Vidéos</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Devoirs</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Archives</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Affaires</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Mots</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title">Mes Classeurs</h3>
</div>
<div class="domino-item type-file">
<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h4>
<p class="subtitle">Fichier Word</p>
</div>
<div class="domino-item type-file">
<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h4>
<span class="subtitle">Fichier Excel</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
<div class="domino-item">
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
<span class="subtitle">Fichier fichier</span>
</div>
</div>
</div>
<div class="lb-footer">
<button>Annuler</button>
<button>Ok</button>
</div>
</div>
</div>
</body>
</html>

101
lightbox-wireframe.html
View File

@ -1,101 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./main.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="lbmod1" class="lb-mod softener">
<div class="lb-container">
<div class="lb-header">
<h2><span class="text-ph">Importer des documents</span></h2>
<div class=" "><span class="text-ph close-button">x</span></div>
<div id="tabs-container">
<span></span>
<span><a href="#" class="text-ph">Onglet 1</a></span>
<span><a href="#" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="#" class="text-ph">Onglet actif</a></span>
<span></span>
</div>
</div>
<div class="lb-body doc-file-browse">
<div id="doc-file-search">
<input type="search" placeholder="Rechercher" />
<button>🔍</button>
</div>
<div id="doc-file-viewmode">
Vue :
<a href="#" class="active">Mosaïque</a>
<a href="#">Grille</a>
<a href="#">Liste</a>
</div>
<div id="doc-file-nav" class="list-nav scrollable ">
<ul class="">
<li class="active">
<span class="text-ph">Mes documents</span>
<ul>
<li><span class="text-ph">Mes Images</span></li>
<li><span class="text-ph">Mes Enregistrements</span></li>
<li><span class="text-ph">Mes Vidéos</span></li>
<li><span class="text-ph">Mes Devoirs</span></li>
<li><span class="text-ph">Mes Archives</span></li>
<li><span class="text-ph">Mes Affaires</span></li>
<li><span class="text-ph">Mes Mots</span></li>
<li><span class="text-ph">Mes Classeurs</span></li>
</ul>
</li>
<li><span class="text-ph">Un dossier racine</span></li>
<li><span class="text-ph">Un autre dossier racine</span></li>
</ul>
</div>
<div id="doc-file-dominos" class="domino-container scrollable">
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Images</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Enregistrements</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Vidéos</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Devoirs</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Archives</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Affaires</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Mots</h4>
</div>
<div class="domino-item type-folder">
<h4 class="domino-title text-ph">Mes Classeurs</h3>
</div>
<div class="domino-item type-file">
<h4 class="domino-title text-ph">Consigne trigonométrie</h3>
<p class="subtitle text-ph">Fichier Word</p>
</div>
<div class="domino-item type-file">
<h4 class="domino-title text-ph">Suivit des notes</h3>
<span class="subtitle text-ph">Fichier Excel</span>
</div>
<div class="domino-item">
<h4 class="domino-title text-ph">Dummy file</h3>
<span class="subtitle text-ph">Fichier fichier</span>
</div>
</div>
</div>
<div class="lb-footer">
<button>Annuler</button>
<button>Ok</button>
</div>
</div>
</div>
</body>
</html>

130
main.css
View File

@ -1,4 +1,6 @@
/* Faking a real website */ /* Faking a real website */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mallanna&display=swap');
html { html {
height: 100%; height: 100%;
@ -9,15 +11,20 @@ body {
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-family: Calibri, Mallanna, sans-serif;
} }
.text-ph { h1,
background-color: rgb(236, 236, 236); h2,
color: transparent !important; h3,
button {
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
/* letter-spacing: -0.5px; */
text-transform: uppercase;
font-weight: 700;
} }
/* The body of the fake website consist of a scrollable big picture */ /* The body of the fake website consist of a scrollable big picture */
#fake { #fake {
/* background: url(./fake-home.jpg); */ /* background: url(./fake-home.jpg); */
z-index: 9; z-index: 9;
@ -41,24 +48,27 @@ body {
/* overflow: auto; */ /* overflow: auto; */
z-index: 10; z-index: 10;
} }
/*
.softener { .softener {
backdrop-filter: blur(5px); /* backdrop-filter: blur(5px); */
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} */ }
/* lightbox itself */ /* lightbox itself */
.lb-container { .lb-container {
display: grid; display: grid;
margin: 5em; margin: 5em auto;
grid-template-rows: min-content auto min-content; grid-template-rows: min-content auto min-content;
position: static; position: static;
z-index: 11; z-index: 11;
max-width: 1030px; max-width: 1030px;
background-color: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
border: 1px solid lightgray; 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
border-radius: 1em; 0 8px 16px rgba(0, 0, 0, 0.11);
/* background-color: white; */
/*border: 1px solid white;*/
border-radius: 1em;
} }
.scrollable { .scrollable {
@ -66,35 +76,44 @@ body {
} }
.lb-header { .lb-header {
position: relative; background: white;
backdrop-filter: blur(10px);
border-radius: 1em 1em 0 0;
} }
.lb-header h2 { .lb-header h2 {
margin: 0.5em 1em; margin: 0.5em 1em;
color: rgb(56, 137, 193);
overflow: hidden; overflow: hidden;
} }
.lb-header .close-button { .lb-header .close-button {
position: absolute; position: absolute;
right:.5em; right:.5em;
top:.5em; top:.5em;
width: 20px; }
height: 20px;
.close-button img {
height: 30px;
width: 30px;
} }
#tabs-container { #tabs-container {
display: flex; display: flex;
letter-spacing: -0.5px; font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
/* letter-spacing: -0.5px; */
overflow-x: auto; overflow-x: auto;
font-weight: 600;
} }
#tabs-container a { #tabs-container a {
text-decoration: none; text-decoration: none;
color: rgb(56, 137, 193);
} }
/* #tabs-container > span.active a { #tabs-container > span.active a {
color: rgb(255, 141, 46); color: rgb(255, 141, 46);
} */ }
#tabs-container > span { #tabs-container > span {
flex-grow: 1; flex-grow: 1;
@ -108,13 +127,15 @@ body {
flex-grow: 1; flex-grow: 1;
min-width: min-content; min-width: min-content;
text-align: center; text-align: center;
border-radius: 0.5em 0.5em 0 0;
border: 1px solid lightgray; border: 1px solid lightgray;
border-top: 2px solid rgb(255, 141, 46);
border-bottom: none; border-bottom: none;
background-color: white; background-color: white;
} }
.lb-body { .lb-body {
/* padding: 1em; */ padding: 1em;
padding-bottom: 0; padding-bottom: 0;
/* max-height: 350px; */ /* max-height: 350px; */
max-height: calc(100vh - 10em - 200px); max-height: calc(100vh - 10em - 200px);
@ -130,47 +151,59 @@ body {
} }
.doc-file-browse #doc-file-viewmode { .doc-file-browse #doc-file-viewmode {
visibility: hidden;
grid-row: toolbar; grid-row: toolbar;
grid-column: side; grid-column: side;
justify-self: start; justify-self: start;
} }
.doc-file-browse #doc-file-search { .doc-file-browse #doc-file-search {
visibility: hidden;
grid-row: toolbar; grid-row: toolbar;
grid-column: central; grid-column: central;
justify-self: start; justify-self: start;
} }
.doc-file-browse #doc-file-nav { .doc-file-browse #doc-file-nav {
grid-row: toolbar / span 2; grid-row: main;
grid-column: side; grid-column: side;
} }
.doc-file-browse #doc-file-dominos { .doc-file-browse #doc-file-dominos {
grid-row: toolbar / span 2; grid-row: main;
grid-column: central; grid-column: central;
} }
input[type="text"], input {
input[type="password"], border-radius: 5px;
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"] {
border: 1px solid #c9ced5; border: 1px solid #c9ced5;
line-height: 25px; line-height: 25px;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: 40px;
text-transform: initial;
font-size: initial; font-size: initial;
font-family: Calibri, Mallanna, "Segoe UI", sans-serif;
} }
#doc-file-viewmode a {
background-image: linear-gradient(#fff, #e9ebef);
border-radius: 15px;
height: 40px;
min-width: 40px;
display: inline-block;
}
#doc-file-viewmode a.active {
background-image: linear-gradient(#3889c1, #43b9e7);
}
button { button {
/* height: 40px; */ /* height: 40px; */
box-sizing: border-box; box-sizing: border-box;
background-image: linear-gradient(#3889c1, #43b9e7);
color: #fff;
border: none; border: none;
border-radius: 15px;
font-size: initial; font-size: initial;
padding:9px 12px; padding:9px 12px;
} }
@ -190,16 +223,18 @@ button {
} }
.list-nav li span { .list-nav li span {
border-radius: 4px;
padding: 3px 9px; padding: 3px 9px;
cursor: pointer; cursor: pointer;
height: 100%;
} }
.list-nav li:not(.active) span:hover { .list-nav li:not(.active) span:hover {
background: lightgray; background-image: linear-gradient(#fff, #e9ebef);
} }
.list-nav .active > span { .list-nav .active > span {
background: lightgray; background-image: linear-gradient(#3889c1, #43b9e7);
color: white; color: white;
} }
@ -207,26 +242,33 @@ button {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
align-content: flex-start; height: 100%;
} }
.domino-item { .domino-item {
margin: 5px; margin: 5px;
border: 1px solid #ebebeb; border: 1px solid lightgray;
width: 150px; width: 150px;
height: 80px; height: 80px;
background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat; background: url(https://via.placeholder.com/80) no-repeat;
padding-left: 86px; padding-left: 86px;
border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.domino-item h4 { .domino-item h4 {
text-transform: initial;
/* font-family: Calibri, "Segoe UI", sans-serif; */
font-weight: normal;
font-size: 11pt;
letter-spacing: initial;
margin: 6px 0 ; margin: 6px 0 ;
color: rgb(53, 53, 53); color: rgb(53, 53, 53);
} }
.domino-item h4 span.extension { .domino-item h4 span.extension {
color:gray; color:gray;
text-transform: uppercase;
font-size: 70%; font-size: 70%;
} }
@ -238,12 +280,22 @@ button {
.lb-footer { .lb-footer {
padding: 1em; padding: 1em;
justify-self: end;
overflow: hidden; overflow: hidden;
background-color: white;
backdrop-filter: blur(20px);
border-radius: 0 0 1em 1em;
}
.type-folder {
border: 1px solid #efdd77;
background: left / contain no-repeat url("./assets/folder-large.png") ;
}
.type-file {
/* border: 1px solid lightgray; */
background: left / contain no-repeat url("./assets/unknown-large.png") ;
} }

BIN
public/readme_assets/Frame 1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
public/readme_assets/Frame 3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
public/readme_assets/Frame 4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
public/readme_assets/Frame 5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
public/readme_assets/Frame 6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB