Index: ui/file_manager/file_manager/foreground/css/file_manager.css |
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css |
index 04099eb53395b6c378eaa9ddcc4573868c031ee7..7129a352ecf4ee878f0af51be20251c0071e8890 100644 |
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css |
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css |
@@ -349,25 +349,76 @@ body.selecting .dialog-header { |
#cloud-import-details { |
background-color: white; |
- height: 300px; |
- opacity: .85; |
- padding: 10px; |
+ border-radius: 4px; |
+ box-shadow: 2px 2px 6px #555555; |
+ line-height: 1.5em; |
position: absolute; |
- right: 0px; |
- top: 49px; |
+ right: 75px; /* Positioned in relation to the cloud-import toolbar button */ |
+ top: 38px; /* Positioned just overlapping the top of the toolbar */ |
transition: all 0.2s ease; |
width: 250px; |
z-index: 5; |
} |
-#cloud-import-details.offscreen { |
+#cloud-import-details.hidden { |
+ -webkit-transform: translateX(25px); |
opacity: 0; |
- right: -202px; |
} |
-#cloud-import-details div { |
- border: 0px 0px 1px 0px solid gray; |
- padding: 10px; |
+#cloud-import-details .banner { |
+ background-color: #37474F; |
+ border-radius: 4px 4px 0px 0px; |
+ color: white; |
+ padding: 20px; |
+} |
+ |
+#cloud-import-details .banner .title { |
+ font-size: 122%; |
+ font-weight: bold; |
+ margin-bottom: 5px; |
+} |
+ |
+#cloud-import-details .main { |
+ display: flex; |
+ flex-direction: column; |
+ padding: 20px; |
+} |
+ |
+#cloud-import-details .status { |
+ display: flex; |
+ flex-direction: row; |
+ font-color: #646464; |
+ margin-top: .2em; |
+} |
+ |
+#cloud-import-details .status core-icon { |
+ display: block; |
+ height: 16px; |
+ opacity: .6; |
+ width: 16px; |
+} |
+ |
+#cloud-import-details .status .content { |
+ flex: 1; |
+ padding-left: 10px; |
+} |
+ |
+#cloud-import-details .status .content::first-line { |
+ font-color: #333333; |
+ font-size: 113%; |
+ font-weight: bold; |
+} |
+ |
+#cloud-import-details .status .destination-link { |
+ color: #1BA8F3; |
+ cursor: pointer; |
+} |
+ |
+#cloud-import-details paper-button.import { |
+ align-self: flex-end; |
+ background-color: #1BA8F3; |
+ color: white; |
+ margin-top: 20px; |
} |
#files-selected-label { |