X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=src%2Fchrome%2Fbrowser%2Fresources%2Fchromeos%2Flogin%2Fuser_pod_row.css;h=4de8727a2e2ecf6d6bb6bd087973da95a0b8aada;hb=ff3e2503a20db9193d323c1d19c38c68004dec4a;hp=e9d1cf2c080deef504118dd47d7eec7168f59b4d;hpb=4b53d56b8a1db20d4089f6d4f37126d43f907125;p=platform%2Fframework%2Fweb%2Fcrosswalk.git diff --git a/src/chrome/browser/resources/chromeos/login/user_pod_row.css b/src/chrome/browser/resources/chromeos/login/user_pod_row.css index e9d1cf2..4de8727 100644 --- a/src/chrome/browser/resources/chromeos/login/user_pod_row.css +++ b/src/chrome/browser/resources/chromeos/login/user_pod_row.css @@ -6,26 +6,12 @@ */ podrow { - -webkit-box-align: center; - -webkit-box-pack: center; /* Temporarily disabled because animation interferes with updating screen's size. */ - /* -webkit-transition: width 180ms ease; */ - display: -webkit-box; - max-height: 650px; + height: 100%; overflow: visible; -} - -podrow[ncolumns='4'] { - width: 880px; -} - -podrow[ncolumns='5'] { - width: 1100px; -} - -podrow[ncolumns='6'] { - width: 1152px; + position: absolute; + width: 100%; } /* Hide the pod row while images are loading. */ @@ -36,22 +22,31 @@ podrow.images-loading { .pod { -webkit-tap-highlight-color: transparent; -webkit-transform: scale3d(0.9, 0.9, 0.9); - -webkit-transition: all 180ms ease; background-color: white; border-radius: 2px; box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15), 0 3px 0 rgba(0, 0, 0, 0.08); cursor: pointer; - display: inline-block; - margin: 0 20px; + display: flex; + flex-flow: row; + outline: none; padding: 10px 10px 3px; - position: relative; + position: absolute; vertical-align: middle; width: 160px; z-index: 0; } +html[run=firstExecAfterBoot] .pod { + -webkit-transition: -webkit-transform 180ms ease, + opacity 180ms ease; +} + +.account-picker.flying-pods .pod { + -webkit-transition: all 180ms ease; +} + .pod .main-pane { position: relative; text-align: center; @@ -60,7 +55,6 @@ podrow.images-loading { podrow[ncolumns='6'] .pod { -webkit-transform: scale3d(0.8, 0.8, 0.8); - margin: 0 6px; } .pod.focused { @@ -70,9 +64,17 @@ podrow[ncolumns='6'] .pod { z-index: 1; } +.pod .user-image-container { + height: 160px; + line-height: 160px; + text-align: center; + width: 160px; +} + .pod .user-image { height: 160px; opacity: 0.7; + vertical-align: middle; width: 160px; } @@ -84,6 +86,10 @@ podrow[ncolumns='6'] .pod { opacity: 1; } +.pod.not-focusable .user-image { + -webkit-filter: grayscale(100%); +} + .pod.init { -webkit-transform: scale3d(2.4, 2.4, 2.4); opacity: 0; @@ -126,33 +132,69 @@ podrow[ncolumns='6'] .pod { display: none; } +.password-area { + display: none; +} + +.password-input-container { + -webkit-box-flex: 1; + /* This relative position is so the capslock hint is positioned correctly. */ + position: relative; +} + +.custom-button { + -webkit-box-align: center; + background-color: rgba(0, 0, 0, 0); + background-image: none; + cursor: pointer; + display: -webkit-box; + height: 40px; + margin: 0; + max-width: 40px; + min-height: 0; + min-width: 0; + padding: 0; +} + +button.custom-button:focus:active, +button.custom-button:focus:hover { + border: 1px solid transparent !important; +} + +.custom-button img { + max-height: 100%; + max-width: 100%; +} + .pod input[type='password'] { -webkit-transition: opacity linear 150ms; background: white; border: none; box-sizing: border-box; - display: none; + display: inline-block; height: 40px; outline: none; padding: 4px 6px; width: 100%; } -.pod.need-password.focused input[type='password'] { - display: inline-block; +.pod.need-password.focused .password-area { + display: -webkit-box; } -.pod .signin-button { +.pod .signin-button, +.pod .launch-app-button { box-sizing: border-box; display: inline-block; height: 26px; - margin: 6px 0; + margin: 6px 0 !important; max-width: 100%; min-width: 72px !important; padding: 4px 8px; } -.pod:not(.focused) .signin-button { +.pod:not(.focused) .signin-button, +.pod:not(.focused) .launch-app-button { display: none; } @@ -174,6 +216,10 @@ html[dir=rtl] .pod .capslock-hint { visibility: visible; } +.capslock-on .pod.focused .password { + padding: 4px 27px 4px 6px; +} + .action-box-area { -webkit-transition: opacity 100ms ease-in-out; background-color: white; @@ -222,9 +268,13 @@ html[dir=rtl] .pod .capslock-hint { z-index: 1; } +html[dir=rtl] .user-type-icon-area { + left: auto; + right: 0; +} + .user-type-icon-image { background-color: transparent; - background-image: url('chrome://theme/IDR_MANAGED_MODE_ICON'); border: 0 !important; height: 16px; margin: 5px; @@ -232,6 +282,51 @@ html[dir=rtl] .pod .capslock-hint { width: 16px; } +.user-type-icon-area.supervised .user-type-icon-image { + background-image: url('chrome://theme/IDR_MANAGED_MODE_ICON'); +} + +.user-type-icon-area.policy .user-type-icon-image { + background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); +} + +.user-type-icon-area.app .user-type-icon-image { + background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON'); +} + +.user-type-icon-area.policy:hover ~ .user-type-bubble { + opacity: 1; + visibility: visible; +} + +.user-type-bubble { + -webkit-transition: all 100ms ease-in-out; + background-color: white; + border: 1px solid lightgray; + border-radius: 2px; + box-shadow: none; + font-size: 14px; + left: 5px; + margin: 0; + opacity: 0; + padding: 17px; + position: absolute; + top: 20px; + visibility: hidden; + width: 200px; + z-index: 1; +} + +html[dir=rtl] .user-type-bubble { + left: auto; + right: 5px; +} + +.user-type-bubble-header { + font-weight: bold; + margin-bottom: 14px; +} + html[dir=rtl] .action-box-area { left: 0; right: auto; @@ -265,6 +360,11 @@ html[dir=rtl] .action-box-area { z-index: 1; } +html[dir=rtl] .action-box-menu { + left: 5px; + right: auto; +} + .action-box-area.active ~ .action-box-menu { opacity: 1; visibility: visible; @@ -346,6 +446,10 @@ html[oobe=old] .pod.focused .action-box-area { /**** Public account user pod rules *******************************************/ +.pod.public-account .name { + width: 140px; +} + .pod.public-account .name, .side-pane-name { -webkit-padding-end: 16px; @@ -357,7 +461,7 @@ html[oobe=old] .pod.focused .action-box-area { .learn-more, .side-pane-learn-more { - background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY'); + background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); height: 16px; position: absolute; width: 16px; @@ -386,9 +490,9 @@ html[dir=rtl] .learn-more { } .side-pane-divider { + -webkit-margin-start: 10px; border-left: 1px solid lightgray; left: 180px; - position: absolute; right: auto; width: 1px; } @@ -402,7 +506,6 @@ html[dir=rtl] .side-pane-divider { left: 185px; overflow: hidden; padding: 5px; - position: absolute; right: auto; } @@ -452,9 +555,7 @@ html[dir=rtl] .side-pane-learn-more { .side-pane-container .enter-button { bottom: 5px; display: block; - left: auto; - position: absolute; - right: 5px; + float: right; } html[dir=rtl] .side-pane-container .enter-button { @@ -467,6 +568,10 @@ html[dir=rtl] .side-pane-container .enter-button { width: 400px; } +.pod.public-account:not(.expanded) { + max-height: 204px; +} + .pod.public-account.expanded .name, .pod.public-account.expanded .learn-more { display: none;