[Signin Error Dialog] (1/3) Added necessary web components

chrome/browser/resources/sync_confirmation/sync_confirmation.css

-/* Copyright 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-.picture img {
-  border-radius: 50%;
-  max-height: 100%;
-  max-width: 100%;
-}
-
-.container {
-  background-color: white;
-  color: #333;
-  overflow: hidden;
-  width: 448px;
-}
-
-.top-title-bar {
-  align-items: center;
-  border-bottom: 1px solid lightgray;
-  display: flex;
-  font-size: 16px;
-  height: 52px;
-  padding: 0 24px;
-}
-
-.details {
-  padding: 0 24px;
-}
-
-#picture-container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding-bottom: 32px;
-  padding-top: 24px;
-}
-
-.picture {
-  -webkit-margin-start: 84px;
-  height: 96px;
-  position: relative;
-  width: 96px;
-}
-
-#profile-picture,
-.checkmark-circle {
-  position: absolute;
-}
-
-.message-container {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.message-container:last-child {
-  margin-bottom: 32px;
-}
-
-.message-container .logo {
-  -webkit-margin-end: 20px;
-  background-size: cover;
-  flex-shrink: 0;
-  height: 20px;
-  position: relative;
-  top: -2px;
-  width: 20px;
-}
-
-#chrome-logo {
-  background-image: url(../../../../ui/webui/resources/images/200-logo_chrome.png);
-}
-
-#googleg-logo {
-  background-image: url(../../../../ui/webui/resources/images/200-logo_googleg.png);
-}
-
-.message-container .title {
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.message-container .body {
-  color: #646464;
-}
-
-.message-container .text {
-  line-height: 20px;
-}
-
-.message-container #activityControlsCheckbox {
-  -webkit-margin-start: 40px;
-}
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  padding: 16px;
-}
-
-#confirmButton,
-#undoButton {
-  line-height: 16px;
-  margin: 0;
-  padding: 8px 16px;
-}
-
-#undoButton {
-  -webkit-margin-start: 8px;
-}
-
-#illustration {
-  height: 96px;
-  margin: 0 auto;
-  position: relative;
-  width: 264px;
-}
-
-#checkmark-circle {
-  background: rgb(66, 133, 244);
-  border: 2px solid #fff;
-  border-radius: 50%;
-  bottom: 0;
-  height: 24px;
-  position: absolute;
-  right: 0;
-  transform: scale(0);
-  width: 24px;
-}
-
-.loaded #checkmark-circle {
-  animation: scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
-}
-
-@keyframes scale-circle {
-  from { transform: scale(0); }
-  to { transform: scale(1); }
-}
-
-#checkmark-check {
-  left: 5px;
-  position: absolute;
-  top: 7px;
-}
-
-.loaded #checkmark-path {
-  animation: draw-path 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards;
-}
-
-@keyframes draw-path {
-  from { stroke-dashoffset: 16; }
-  to { stroke-dashoffset: 0; }
-}
-
-#icons {
-  height: 96px;
-  position: absolute;
-  width: 264px;
-}
-
-#icons > div {
-  animation-delay: 200ms;
-  animation-duration: 1.4s;
-  animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7);
-  background-size: cover;
-  opacity: 0;
-  position: absolute;
-}
-
-#icon-bookmarks {
-  background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg);
-  height: 36px;
-  left: 58px;
-  top: 0;
-  width: 36px;
-}
-
-#icon-extensions {
-  background: url(../../../../ui/webui/resources/images/icon_extensions.svg);
-  height: 24px;
-  left: 30px;
-  top: 30px;
-  width: 24px;
-}
-
-
-#icon-passwords {
-  background: url(../../../../ui/webui/resources/images/icon_passwords.svg);
-  height: 30px;
-  left: 38px;
-  top: 66px;
-  width: 40px;
-}
-
-#icon-history {
-  background: url(../../../../ui/webui/resources/images/icon_history.svg);
-  height: 36px;
-  left: 190px;
-  top: 6px;
-  width: 36px;
-}
-
-#icon-tabs {
-  background: url(../../../../ui/webui/resources/images/icon_tabs.svg);
-  height: 24px;
-  left: 222px;
-  top: 44px;
-  width: 24px;
-}
-
-#icon-themes {
-  background: url(../../../../ui/webui/resources/images/icon_themes.svg);
-  height: 30px;
-  left: 184px;
-  top: 62px;
-  width: 32px;
-}
-
-#icon-circle-open {
-  border: 2px solid #000;
-  border-radius: 50%;
-  height: 8px;
-  left: 6px;
-  top: 56px;
-  width: 8px;
-}
-
-.icon-circle {
-  background: #000;
-  border-radius: 50%;
-  height: 4px;
-  width: 4px;
-}
-
-#icon-circle-1 {
-  left: 64px;
-  top: 50px;
-}
-
-#icon-circle-2 {
-  left: 178px;
-  top: 18px;
-}
-
-#icon-circle-3 {
-  left: 194px;
-  top: 50px;
-}
-
-#icon-circle-4 {
-  left: 258px;
-  top: 36px;
-}
-
-.loaded .fade-top-left {
-  animation-name: fade-in-icon-top-left;
-}
-
-.loaded .fade-top-right {
-  animation-name: fade-in-icon-top-right;
-}
-
-.loaded .fade-middle-left {
-  animation-name: fade-in-icon-middle-left;
-}
-
-.loaded .fade-middle-right {
-  animation-name: fade-in-icon-middle-right;
-}
-
-.loaded .fade-bottom-left {
-  animation-name: fade-in-icon-bottom-left;
-}
-
-.loaded .fade-bottom-right {
-  animation-name: fade-in-icon-bottom-right;
-}
-
-@keyframes fade-in-icon-top-left {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0.1;
-    transform: translate(-4px, -4px);
-  }
-}
-
-@keyframes fade-in-icon-top-right {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0.1;
-    transform: translate(4px, -4px);
-  }
-}
-
-@keyframes fade-in-icon-middle-left {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0.1;
-    transform: translate(-4px, 0);
-  }
-}
-
-@keyframes fade-in-icon-middle-right {
-  from {
-    opacity: 0;
-     transform: translate(0, 0);
-    }
-  to {
-    opacity: 0.1;
-    transform: translate(4px, 0);
-  }
-}
-
-@keyframes fade-in-icon-bottom-left {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0.1;
-    transform: translate(-4px, 4px);
-  }
-}
-
-@keyframes fade-in-icon-bottom-right {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0.1;
-    transform: translate(4px, 4px);
-  }
-}