gecko/browser/base/content/newtab/newTab.css

174 lines
2.5 KiB
CSS

:root {
-moz-appearance: none;
}
#scrollbox:not([page-disabled]) {
overflow: auto;
}
#body {
position: relative;
margin: 0;
min-width: 675px;
-moz-user-select: none;
}
.button {
cursor: pointer;
}
/* TOOLBAR */
#toolbar {
position: absolute;
}
#toolbar[page-disabled] {
position: fixed;
}
#toolbar:-moz-locale-dir(rtl) {
left: 8px;
right: auto;
}
.toolbar-button {
position: absolute;
cursor: pointer;
-moz-transition: opacity 200ms ease-out;
}
#toolbar-button-show,
#toolbar-button-reset {
opacity: 0;
pointer-events: none;
}
#toolbar-button-reset[modified],
#toolbar-button-show[page-disabled] {
opacity: 1;
pointer-events: auto;
}
#toolbar-button-hide[page-disabled],
#toolbar-button-reset[page-disabled] {
opacity: 0;
pointer-events: none;
}
/* GRID */
#grid {
width: 637px;
height: 411px;
overflow: hidden;
list-style-type: none;
-moz-transition: opacity 200ms ease-out;
}
#grid[page-disabled] {
opacity: 0;
}
#grid[page-disabled],
#grid[locked] {
pointer-events: none;
}
/* CELLS */
.cell {
float: left;
width: 201px;
height: 127px;
margin-bottom: 15px;
-moz-margin-end: 16px;
}
.cell:-moz-locale-dir(rtl) {
float: right;
}
.cell:nth-child(3n+3) {
-moz-margin-end: 0;
}
/* SITES */
.site {
display: block;
position: relative;
width: 201px;
height: 127px;
}
.site[frozen] {
position: absolute;
pointer-events: none;
}
.site[ontop] {
z-index: 10;
}
/* SITE IMAGE */
.site-img {
display: block;
opacity: 0.75;
-moz-transition: opacity 200ms ease-out;
}
.site:hover > .site-img,
.site[ontop] > .site-img,
.site:-moz-focusring > .site-img {
opacity: 1;
}
.site-img[loading] {
display: none;
}
/* SITE TITLE */
.site-title {
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
}
/* SITE STRIP */
.site-strip {
position: absolute;
left: 0;
top: 0;
width: 195px;
height: 17px;
overflow: hidden;
opacity: 0;
-moz-transition: opacity 200ms ease-out;
}
.site:hover:not([frozen]) > .site-strip {
opacity: 1;
}
.strip-button-pin,
.strip-button-block:-moz-locale-dir(rtl) {
float: left;
}
.strip-button-block,
.strip-button-pin:-moz-locale-dir(rtl) {
float: right;
}
/* DRAG & DROP */
/*
* This is just a temporary drag element used for dataTransfer.setDragImage()
* so that we can use custom drag images and elements. It needs an opacity of
* 0.01 so that the core code detects that it's in fact a visible element.
*/
.drag-element {
width: 1px;
height: 1px;
background-color: #fff;
opacity: 0.01;
}