Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Unified Diff: ui/file_manager/gallery/css/gallery.css

Issue 1173863003: Revert "Gallery: use native header." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | ui/file_manager/gallery/js/background.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: ui/file_manager/gallery/css/gallery.css
diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 8194639b4d1f2e39f0de4b5bac5244f5103c56b0..4bf1cf7736ab34eee8cd6109001805b5089a20b9 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -152,17 +152,14 @@ input[type='checkbox']:checked {
/* Toolbar */
+.gallery > .header,
.gallery > .toolbar {
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
- background-color: rgba(40, 42, 45, 0.9);
- border-top: 1px solid rgba(50, 50, 50, 0.8);
display: flex;
- height: 55px;
left: 0;
opacity: 0;
- overflow: hidden;
padding: 0 10px;
pointer-events: none;
position: absolute;
@@ -170,10 +167,35 @@ input[type='checkbox']:checked {
transition: opacity 300ms ease;
}
-.gallery > .toolbar.top {
+.gallery > .header {
+ -webkit-app-region: drag;
+ -webkit-box-align: center;
+ -webkit-box-pack: end;
+ background-color: rgba(30, 30, 30, 0.8);
+ border-bottom: 1px solid rgba(50, 50, 50, 0.8);
+ display: -webkit-box;
+ height: 45px;
top: 0;
}
+.gallery > .toolbar {
+ background-color: rgba(40, 42, 45, 0.9);
+}
+
+.gallery .header button {
+ -webkit-app-region: no-drag;
+}
+
+.gallery > .toolbar {
+ border-top: 1px solid rgba(50, 50, 50, 0.8);
+ height: 55px;
+ overflow: hidden;
+}
+
+.gallery > .toolbar.top {
+ top: 45px; /* Header height. */
+}
+
.gallery > .toolbar.bottom {
bottom: 0;
}
@@ -204,6 +226,7 @@ input[type='checkbox']:checked {
visibility: visible;
}
+.gallery[tools]:not([slideshow]) > .header,
.gallery[tools]:not([slideshow]) > .toolbar {
opacity: 1;
pointer-events: auto;
@@ -566,7 +589,9 @@ input[type='checkbox']:checked {
visibility: visible;
}
+.gallery .header button,
.gallery .toolbar button,
+.gallery .header button[disabled],
.gallery .toolbar button[disabled] {
background-color: rgba(0, 0, 0, 0);
background-position: center;
@@ -583,12 +608,17 @@ input[type='checkbox']:checked {
z-index: 10;
}
+.gallery .header button,
.gallery .toolbar button {
height: 40px;
min-width: 40px; /* Reset. */
width: 40px;
}
+.gallery .header button {
+ margin: 6px 0;
+}
+
.gallery .toolbar button:focus {
z-index: 11;
}
@@ -617,13 +647,17 @@ input[type='checkbox']:checked {
}
+.gallery .header button:hover,
.gallery .toolbar button:hover {
background-color: rgba(31, 31, 31, 1);
color: white;
}
+.gallery .header button:active,
.gallery .toolbar button:active,
+.gallery .header button[pressed],
.gallery .toolbar button[pressed],
+.gallery .header button[pressed]:hover,
.gallery .toolbar button[pressed]:hover {
background-color: rgba(240, 240, 240, 1);
color: black;
@@ -1169,7 +1203,7 @@ input[type='checkbox']:checked {
overflow-y: hidden;
position: absolute;
right: 0;
- top: 55px; /* Toolbar height. */
+ top: 100px; /* Header + Toolbar height. */
/* transition-duration is set in Javascript. */
transition-property: transform;
@@ -1329,6 +1363,35 @@ input[type='checkbox']:checked {
margin-left: -2px;
}
+.gallery > .header > button {
+ -webkit-margin-start: 10px;
+ cursor: default;
+ height: 32px;
+ min-width: 32px;
+ width: 32px;
+}
+
+.gallery > .header > .minimize-button {
+ background: -webkit-image-set(
+ url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
+ url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x)
+ center;
+}
+
+.gallery > .header > .maximize-button {
+ background: -webkit-image-set(
+ url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
+ url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
+ center;
+}
+
+.gallery > .header > .close-button {
+ background: -webkit-image-set(
+ url(chrome://resources/images/apps/topbar_button_close.png) 1x,
+ url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
+ center;
+}
+
.debug-me .load-target-content-metadata::before,
.debug-me .load-target-external-metadata::before,
.debug-me .load-target-file-entry::before {
« no previous file with comments | « no previous file | ui/file_manager/gallery/js/background.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698