src/chrome/browser/resources/options/cookies_view.css

   1 /* Copyright (c) 2012 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 /* Styles for the cookies list page. */
   6 .cookies-view-page {
   7   height: 90%;
   8   margin-left: -15px;
   9   width: 720px;
  10 }
  11
  12 /* Styles for the cookies list elements in cookies_view.html. */
  13 .cookies-list {
  14   -webkit-box-flex: 1;
  15   /* This property overrides the |min-height: 192px;| property above due to
  16    * special behavior of the cookies list. */
  17   border: 1px solid #D9D9D9;
  18   margin: 0;
  19   margin-top: 5px;
  20   min-height: 0;
  21 }
  22
  23 .cookies-list-content-area {
  24   -webkit-box-orient: vertical;
  25   display: -webkit-box;
  26   overflow-y: hidden;
  27 }
  28
  29 .cookies-column-headers {
  30   -webkit-box-align: baseline;
  31   -webkit-box-orient: horizontal;
  32   display: -webkit-box;
  33   position: relative;
  34   width: 100%;
  35 }
  36
  37 .cookies-column-headers > * {
  38   display: block;
  39 }
  40
  41 .cookies-column-headers h3 {
  42   font-size: 105%;
  43   font-weight: bold;
  44   margin: 10px 0;
  45 }
  46
  47 /* Notice the width and padding for these columns match up with those below. */
  48 .cookies-site-column {
  49   -webkit-padding-start: 7px;
  50   width: 14em;
  51 }
  52
  53 .cookies-data-column {
  54   -webkit-box-flex: 1;
  55   -webkit-padding-start: 7px;
  56 }
  57
  58 /* Enable animating the height of items. */
  59 list.cookie-list .deletable-item {
  60   -webkit-transition: height 150ms ease-in-out;
  61 }
  62
  63 /* Disable webkit-box display. */
  64 list.cookie-list .deletable-item > :first-child {
  65   display: block;
  66 }
  67
  68 /* Force the X for deleting an origin to stay at the top. */
  69 list.cookie-list > .deletable-item > .close-button {
  70   position: absolute;
  71   right: 2px;
  72   top: 8px;
  73 }
  74
  75 html[dir=rtl] list.cookie-list > .deletable-item > .close-button {
  76   left: 2px;
  77   right: auto;
  78 }
  79
  80 /* Styles for the site (aka origin) and its summary. */
  81 .cookie-site {
  82   /* Notice that the width, margin, and padding match up with those above. */
  83   -webkit-margin-end: 2px;
  84   -webkit-padding-start: 5px;
  85   display: inline-block;
  86   overflow: hidden;
  87   text-overflow: ellipsis;
  88   width: 14em;
  89 }
  90
  91 list.cookie-list > .deletable-item[selected] .cookie-site {
  92   -webkit-user-select: text;
  93 }
  94
  95 .cookie-data {
  96   display: inline-block;
  97   max-width: 410px;
  98   overflow: hidden;
  99   text-overflow: ellipsis;
 100 }
 101
 102 .cookie-size {
 103   display: inline-block;
 104   float: right;
 105   margin-right: 0;
 106 }
 107
 108 list.cookie-list > .deletable-item[selected] .cookie-data {
 109   -webkit-user-select: text;
 110 }
 111
 112
 113 /* Styles for the individual items (cookies, etc.). */
 114 .cookie-items {
 115   /* Notice that the margin and padding match up with those above. */
 116   -webkit-margin-start: 14em;
 117   -webkit-padding-start: 7px;
 118   -webkit-transition: 150ms ease-in-out;
 119   display: none;
 120   height: 0;
 121   opacity: 0;
 122   /* Make the cookie items wrap correctly. */
 123   white-space: normal;
 124 }
 125
 126 .measure-items .cookie-items {
 127   -webkit-transition: none;
 128   height: auto;
 129   visibility: hidden;
 130 }
 131
 132 .show-items .cookie-items {
 133   display: block;
 134   opacity: 1;
 135 }
 136
 137 .cookie-items .cookie-item {
 138   background: rgb(224, 233, 245);
 139   border: 1px solid rgb(131, 146, 174);
 140   border-radius: 5px;
 141   display: inline-block;
 142   font-size: 85%;
 143   height: auto;
 144   margin: 2px 4px 2px 0;
 145   max-width: 120px;
 146   min-width: 40px;
 147   overflow: hidden;
 148   padding: 0 3px;
 149   text-align: center;
 150   text-overflow: ellipsis;
 151 }
 152
 153 .cookie-items .cookie-item:hover {
 154   background: rgb(238, 243, 249);
 155   border-color: rgb(100, 113, 135);
 156 }
 157
 158 .cookie-items .cookie-item[selected] {
 159   background: rgb(245, 248, 248);
 160   border-color: #B2B2B2;
 161 }
 162
 163 .cookie-items .cookie-item[selected]:hover {
 164   background: rgb(245, 248, 248);
 165   border-color: rgb(100, 113, 135);
 166 }
 167
 168 .cookie-items .cookie-item .protecting-app,
 169 .cookie-data .protecting-app {
 170   margin-bottom: -3px;
 171   margin-left: 4px;
 172 }
 173
 174 /* Styles for the cookie details box. */
 175 .cookie-details {
 176   background: rgb(245, 248, 248);
 177   border: 1px solid #B2B2B2;
 178   border-radius: 5px;
 179   margin-top: 2px;
 180   padding: 5px;
 181 }
 182
 183 list.cookie-list > .deletable-item[selected] .cookie-details {
 184   -webkit-user-select: text;
 185 }
 186
 187 .cookie-details-table {
 188   table-layout: fixed;
 189   width: 100%;
 190 }
 191
 192 .cookie-details-label {
 193   vertical-align: top;
 194   white-space: pre;
 195   width: 10em;
 196 }
 197
 198 .cookie-details-value {
 199   word-wrap: break-word;
 200 }