add styling for new chrome UI identity box
[themes.git] / LCARStrek / browser / newtab / newTab.css
1 :root {
2   -moz-appearance: none;
3   font-size: 75%;
4   background-color: transparent;
5   padding: 0;
6 }
7
8 /* SCROLLBOX */
9 #newtab-scrollbox:not([page-disabled]) {
10   background-color: #000000;
11 }
12
13 /* UNDO */
14 #newtab-undo-container {
15   padding: 4px 3px;
16   border: 1px solid;
17   border-color: #9C9CFF;
18   background-color: #000000;
19   color: #8050B0;
20 }
21
22 #newtab-undo-label {
23   margin-top: 0;
24   margin-bottom: 0;
25 }
26
27 .newtab-undo-button {
28   color: #3333FF;
29   cursor: pointer;
30   padding: 0;
31   margin: 0 4px;
32   border: 0;
33   background: transparent;
34   text-decoration: none;
35   min-width: 0;
36 }
37
38 .newtab-undo-button:hover {
39   text-decoration: underline;
40 }
41
42 .newtab-undo-button:-moz-focusring {
43   outline: 1px dotted;
44 }
45
46 .newtab-undo-button > .button-box {
47   padding: 0;
48 }
49
50 #newtab-undo-close-button {
51   padding: 0;
52   border: none;
53   list-style-image: url("chrome://global/skin/icons/close.png");
54   -moz-image-region: rect(0, 16px, 16px, 0);
55   -moz-user-focus: normal;
56 }
57
58 #newtab-undo-close-button:hover {
59   -moz-image-region: rect(0, 32px, 16px, 16px);
60 }
61
62 #newtab-undo-close-button > .toolbarbutton-text {
63   display: none;
64 }
65
66 #newtab-undo-close-button:-moz-focusring {
67   outline: 1px dotted;
68 }
69
70 /* TOGGLE */
71 #newtab-toggle {
72   width: 16px;
73   height: 16px;
74   padding: 0;
75   border: none;
76   background: -216px 0 transparent url("chrome://browser/skin/newtab/controls.png");
77 }
78
79 #newtab-toggle[page-disabled] {
80   background-position: -232px 0;
81 }
82
83 /* ROWS */
84 .newtab-row {
85   margin-bottom: 20px;
86 }
87
88 .newtab-row:last-child {
89   margin-bottom: 0;
90 }
91
92 /* CELLS */
93 .newtab-cell {
94   -moz-margin-end: 20px;
95   background-color: rgba(255,159,0,.2);
96   border: 1px solid;
97   border-color: #9C9CFF;
98   border-radius: 1px;
99   transition: border-color 100ms ease-out;
100 }
101
102 .newtab-cell:empty {
103   border: 1px dashed;
104 }
105
106 .newtab-cell:last-child {
107   -moz-margin-end: 0;
108 }
109
110 .newtab-cell:hover:not(:empty):not([dragged]) {
111   border-color: #FFCF00;
112 }
113
114 /* SITES */
115 .newtab-site {
116   text-decoration: none;
117   transition-property: top, left, opacity, box-shadow, background-color;
118 }
119
120 .newtab-site:hover,
121 .newtab-site[dragged] {
122   box-shadow: 0 0 10px rgba(0,132,132,.3);
123 }
124
125 .newtab-site[dragged] {
126   transition-property: box-shadow, background-color;
127   background-color: #002121;
128 }
129
130 /* THUMBNAILS */
131 .newtab-thumbnail {
132   background-origin: padding-box;
133   background-clip: padding-box;
134   background-repeat: no-repeat;
135   background-size: cover;
136 }
137
138 /* TITLES */
139 .newtab-title {
140   padding: 0 8px;
141   background-color: rgba(255,159,0,.8);
142   color: #000000;
143   line-height: 24px;
144 }
145
146 /* CONTROLS */
147 .newtab-control {
148   width: 24px;
149   height: 24px;
150   padding: 1px 2px 3px;
151   border: none;
152   background: transparent url("chrome://browser/skin/newtab/controls.png");
153 }
154
155 .newtab-control-pin:hover {
156   background-position: -24px 0;
157 }
158
159 .newtab-control-pin:active {
160   background-position: -48px 0;
161 }
162
163 .newtab-control-pin[pinned] {
164   background-position: -72px 0;
165 }
166
167 .newtab-control-pin[pinned]:hover {
168   background-position: -96px 0;
169 }
170
171 .newtab-control-pin[pinned]:active {
172   background-position: -120px 0;
173 }
174
175 .newtab-control-block {
176   background-position: -144px 0;
177 }
178
179 .newtab-control-block:hover {
180   background-position: -168px 0;
181 }
182
183 .newtab-control-block:active {
184   background-position: -192px 0;
185 }