extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-27 17:19:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve menu and modal

Browse Source
This commit is contained in:
Kuldeep M 2019-06-20 14:03:40 +01:00
parent 11007ac008
commit ab9c9199ab
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/menu.css
View File

@ -22,6 +22,7 @@
.menu-area { .menu-area {
background-color: rgba(var(--gray-01), 0.95); background-color: rgba(var(--gray-01), 0.95);
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
box-shadow: var(--shadow-large);
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;

21
css/modal.css
View File

@ -4,7 +4,7 @@
left: 50%; left: 50%;
font-size: 1em; font-size: 1em;
width: 45em; width: 45em;
max-width: calc(100% - 6em); max-width: calc(100% - 2em);
min-width: 10em; min-width: 10em;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0; opacity: 0;
@ -23,9 +23,18 @@
} }
.modal-wrapper { .modal-wrapper {
box-sizing: border-box; background-color: rgb(var(--gray-01));
border-radius: var(--theme-radius);
box-shadow: var(--shadow-large);
position: relative; position: relative;
transition: all var(--animation-speed-fast); max-height: calc(100vh - 2em);
overflow-y: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
justify-items: stretch;
align-items: stretch;
transition: opacity var(--animation-speed-fast);
} }
.modal-wrapper .container { .modal-wrapper .container {
@ -33,14 +42,12 @@
} }
.is-transition-end .modal-wrapper { .is-transition-end .modal-wrapper {
transition: all var(--animation-speed-fast) ease-in-out; transition: opacity var(--animation-speed-fast) ease-in-out;
} }
.modal-body { .modal-body {
background-color: rgb(var(--gray-01));
border-radius: var(--theme-radius) var(--theme-radius) 0 0; border-radius: var(--theme-radius) var(--theme-radius) 0 0;
padding: 2em; padding: 2em;
max-height: calc(90vh - 3.6666666667em);
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
@ -57,9 +64,9 @@
.modal-controls { .modal-controls {
background-color: rgb(var(--gray-01)); background-color: rgb(var(--gray-01));
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
position: relative; position: relative;
z-index: 2; z-index: 2;
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
display: flex; display: flex;
} }

2
js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "3.18.0"; var current = "3.19.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

2
manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.18.0", "version": "3.19.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"