| OLD | NEW |
| (Empty) | |
| 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. |
| 4 */ |
| 5 |
| 6 * { |
| 7 font-family: 'Roboto Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif; |
| 8 margin: 0; |
| 9 padding: 0; |
| 10 } |
| 11 |
| 12 a { |
| 13 color: rgb(85, 149, 254); |
| 14 text-decoration: none; |
| 15 } |
| 16 |
| 17 .picture img { |
| 18 border-radius: 50%; |
| 19 max-height: 100%; |
| 20 max-width: 100%; |
| 21 } |
| 22 |
| 23 .container { |
| 24 background-color: white; |
| 25 height: 360px; |
| 26 overflow: hidden; |
| 27 width: 450px; |
| 28 } |
| 29 |
| 30 .top-title-bar { |
| 31 align-items: center; |
| 32 border-bottom: 1px solid lightgray; |
| 33 color: #333; |
| 34 display: flex; |
| 35 font-size: 17px; |
| 36 height: 60px; |
| 37 padding-left: 22px; |
| 38 } |
| 39 |
| 40 .details { |
| 41 display: flex; |
| 42 flex-direction: column; |
| 43 height: 276px; |
| 44 justify-content: space-between; |
| 45 padding-bottom: 12px; |
| 46 padding-top: 12px; |
| 47 } |
| 48 |
| 49 .sync-message { |
| 50 color: #595959; |
| 51 font-size: 13.5px; |
| 52 padding-left: 22px; |
| 53 padding-right: 22px; |
| 54 } |
| 55 |
| 56 .picture-container { |
| 57 align-items: center; |
| 58 display: flex; |
| 59 justify-content: center; |
| 60 padding-bottom: 22px; |
| 61 padding-top: 22px; |
| 62 } |
| 63 |
| 64 .picture { |
| 65 height: 96px; |
| 66 position: relative; |
| 67 width: 96px; |
| 68 } |
| 69 |
| 70 #profile-picture, |
| 71 .checkmark-bubble { |
| 72 position: absolute; |
| 73 } |
| 74 |
| 75 .checkmark-bubble { |
| 76 background-color: white; |
| 77 background-image: url(chrome://resources/images/check_circle.svg); |
| 78 background-size: 100%; |
| 79 border: 1px solid white; |
| 80 border-radius: 50%; |
| 81 display: inline-block; |
| 82 height: 30px; |
| 83 left: 64px; |
| 84 top: 66px; |
| 85 width: 30px; |
| 86 } |
| 87 |
| 88 .action-container { |
| 89 align-items: baseline; |
| 90 display: flex; |
| 91 justify-content: flex-end; |
| 92 padding-left: 22px; |
| 93 padding-right: 22px; |
| 94 } |
| 95 |
| 96 .action-button-wrapper { |
| 97 display: inline-block; |
| 98 } |
| 99 |
| 100 .action-button { |
| 101 background-color: rgb(66, 133, 244); |
| 102 border-color: white; |
| 103 border-radius: 2px; |
| 104 border-style: none; |
| 105 border-width: 0; |
| 106 color: white; |
| 107 cursor: pointer; |
| 108 display: inline-block; |
| 109 margin-bottom: 16px; |
| 110 margin-top: 16px; |
| 111 min-width: 88px; |
| 112 } |
| 113 |
| 114 .action-button-label { |
| 115 -webkit-user-select: none; |
| 116 display: block; |
| 117 font-size: 13.5px; |
| 118 line-height: 24px; |
| 119 padding-bottom: 6px; |
| 120 padding-left: 16px; |
| 121 padding-right: 16px; |
| 122 padding-top: 6px; |
| 123 position: static; |
| 124 text-align: center; |
| 125 text-decoration: none; |
| 126 text-transform: uppercase; |
| 127 } |
| 128 |
| 129 .link-wrapper { |
| 130 display: inline-block; |
| 131 } |
| 132 |
| 133 .link { |
| 134 -webkit-user-select: none; |
| 135 color: #5A5A5A; |
| 136 cursor: pointer; |
| 137 font-size: 13.5px; |
| 138 line-height: 24px; |
| 139 padding-bottom: 6px; |
| 140 padding-left: 16px; |
| 141 padding-right: 16px; |
| 142 padding-top: 6px; |
| 143 text-transform: uppercase; |
| 144 } |
| OLD | NEW |