#FFCF00 66%, #FFCF00);
}
+body.captiveportal .title {
+ background-image: url("wifi.svg");
+}
+
body.certerror .title {
background-image: url("cert-error.svg");
}
display: none;
}
-#certErrorButtonContainer {
+#certErrorAndCaptivePortalButtonContainer {
display: none;
}
-body.certerror #certErrorButtonContainer {
+body:not(.neterror) #certErrorAndCaptivePortalButtonContainer {
display: flex;
}
-body.certerror #netErrorButtonContainer {
+body:not(.neterror) #netErrorAndCaptivePortalButtonContainer {
display: none;
}
display: none;
}
-body.certerror #advancedButton {
+body.captiveportal #returnButton {
+ display: none;
+}
+
+body:not(.captiveportal) #openPortalLoginPageButton {
+ display: none;
+}
+
+#openPortalLoginPageButton {
+ margin-inline-start: 0;
+}
+
+body:not(.neterror) #advancedButton {
display: block;
}
+++ /dev/null
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-body.private > #errorPageContainer {
- background-image: url("chrome://browser/skin/Privacy-48.png");
-}
-
-body.normal > #errorPageContainer {
- background-image: url("chrome://global/skin/icons/alert-question.gif");
-}
-
-#clearRecentHistoryDesc {
- margin-top: 2em;
-}
-
-#clearRecentHistoryDesc > p {
- font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-}
-
-#startPrivateBrowsingDesc > button {
- margin-inline-start: 0;
-}
-
-#footerDesc > p {
- font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-}
-
-#moreInfo {
- font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
- padding-inline-start: 25px;
- background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
-}
-
-#moreInfo:dir(rtl) {
- background-position: top right;
-}
-
-#moreInfoText {
- margin-bottom: 0;
-}
-
-#moreInfoLinkContainer {
- margin-top: 0.5em;
-}
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+body {
+ font-size: 1.25rem;
+}
+
.title {
background-image: url("chrome://browser/skin/tab-crashed.svg");
}
+.title > h1,
+.offers {
+ margin-left: 14px;
+}
+
+.title > h1 {
+ /**
+ * Add commentary?
+ */
+ padding-right: 14px;
+}
+
+.container {
+ width: 45%;
+}
+
#reportSent {
font-weight: bold;
}
-#crash-reporter-container {
+#reportBox {
width: 80%;
background-color: var(--in-content-box-background);
margin: 24px 0;
border-radius: 2px;
}
+#reportBox > h2:first-child {
+ margin-top: 0;
+}
+
#crash-reporter-title {
font-weight: bold;
margin: 0 0 14px 0;
resize: none;
}
+input[type="text"],
+input[type="checkbox"] {
+ -moz-margin-start: 0px;
+}
+
#options {
list-style: none;
margin-inline-start: 0;
}
-input[type="text"],
-#options > li {
- margin: 14px 0 0 0;
+#options > li,
+#email {
+ margin-top: 14px;
+}
+
+.checkbox-with-label {
+ display: flex;
+}
+
+.checkbox-with-label > label {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+/**
+ * Hack alert: the #autoSubmit checkbox has a long label, which means
+ * it often wraps, at least in en-US. Bug 418833 and bug 1317795 allows
+ * us to fix this properly, but bug 418833 didn't uplift in time for this
+ * release. We use some hackery here to make sure that this label wraps
+ * properly, and doesn't end up underneath the checkbox pseudoelement.
+ * We do this by setting a negative margin on the pseudoelement, and then
+ * a positive equivalent margin on the label itself.
+ *
+ * The magic number of 35px is derived from the total width of the checkbox.
+ * The checkbox width is explicitly set at 23px. This, plus the 1px border on either
+ * side gives us 25px. Then there's the 10px margin-inline-end, which gives us 35px.
+ */
+#autoSubmit + label:before {
+ margin-inline-start: -35px;
+}
+
+#autoSubmit + label {
+ margin-inline-start: 35px;
+ line-height: 1.75em;
}
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="fieldtext"
width="16" height="16" viewBox="0 0 16 16">
+<style>
+.fieldtext {
+ fill: #A09090;
+}
+
+.highlighttext {
+ fill: #FFCF00;
+}
+
+.black {
+ fill: #FFCF00;
+}
+
+.white {
+ fill: #FFCF00;
+}
+</style>
<defs>
<path id="shape-notifications-addons" d="M10,15c0.5,0,1-0.4,1-1v-3c0,0,0-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2 c-1.1,0-1.1,0.7-1.8,0.7C11,7.7,11,7,11,7V6c0-0.6-0.5-1-1-1H8c0,0-0.8,0-0.8-0.8C7.2,3.6,8,3.6,8,2.5C8,1.9,7.8,1,6,1 C4.2,1,4,1.9,4,2.5c0,1.1,0.8,1.1,0.8,1.8C4.8,5,4,5,4,5H2C1.5,5,1,5.4,1,6l0,1.5c0,0-0.1,1,1.1,1c0.8,0,0.9-1,1.9-1 C4.5,7.4,5,8,5,9c0,1-0.5,1.6-1,1.6c-1,0-1.1-1.1-1.9-1.1C0.9,9.5,1,10.8,1,10.8V14c0,0.6,0.5,1,1,1l2.6,0c0,0,1.1,0,1.1-1 c0-0.8-1-0.1-1-1.1c0-0.5,0.7-1.2,1.8-1.2s1.8,0.7,1.8,1.2c0,1-1.1,0.3-1.1,1.1c0,1,1.2,1,1.2,1H10z"/>
</defs>
- <use id="default" xlink:href="#shape-notifications-addons"/>
+ <use xlink:href="#shape-notifications-addons"/>
</svg>
--arrowpanel-active: #FF9F00;
--arrowpanel-dimmed: #402000;
--arrowpanel-dimmed-further: #794900;
- --arrowpanel-dimmed-even-further: 603000;
+ --arrowpanel-dimmed-even-further: #603000;
--urlbar-separator-color: #9C9CFF;
}
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
/* padding-inline-end: 17px;*/
}
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
/* horizontal padding + border + icon width */
/* max-width: 43px;*/
}
height: 16px;
}
+#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
+ -moz-image-region: inherit;
+ list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
+ width: 16px;
+ height: 16px;
+}
+
/* SHARING ICON */
#sharing-icon {
padding: 0px 1px 0px 1px;
}
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+ margin-inline-start: 4px;
+ margin-inline-end: 0;
+}
+
#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
font: icon;
- margin-inline-start: 6px;
+ margin-inline-start: 4px;
}
#PopupAutoComplete > richlistbox {
padding: 0;
}
+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+ display: initial;
+ list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+ list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+}
+
+/* Insecure field warning */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
+ background-color: var(--arrowpanel-dimmed);
+ border-bottom: 1px solid var(--panel-separator-color);
+ padding-bottom: 4px;
+ padding-top: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
+ background-color: var(--arrowpanel-dimmed-further);
+ color: #FFCF00;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
+ color: #A09090;
+ font-size: 1em;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
+ color: inherit;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
+ list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+}
+
/* === END autocomplete.inc.css === */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
padding: 0;
}
-.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
-.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
+.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
+.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
transition: opacity .3s linear var(--soundplaying-removal-delay);
opacity: 0;
}
/* INSTALL ADDONS */
.install-icon {
- list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
+ list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
}
.popup-notification-icon[popupid="xpinstall-disabled"],
#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
- padding: 4px 6px;
+ padding: 0 6px;
+ border-width: 0;
+/* font: -moz-list;*/
}
#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
- font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
- font-size: 11px;
- /**
- * Remove the extra vertical padding set by menu.css since
- * the menuitem itself will include enough padding.
- */
- padding-top: 0px;
- padding-bottom: 0px;
+ /* Padding should follow the 4/12 ratio, where 12px is the default font-size
+ with 4px being the preferred padding size. */
+ padding-top: .3333em;
+ padding-bottom: .3333em;
}
#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
color: #A09090;
}
-#ContentSelectDropdown > .isOpenedViaTouch > menucaption,
-#ContentSelectDropdown > .isOpenedViaTouch > menuitem {
- padding-top: 11px;
- padding-bottom: 11px;
+#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
+#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
+ /* Touch padding should follow the 11/12 ratio, where 12px is the default
+ font-size with 11px being the preferred padding size. */
+ padding-top: .9167em;
+ padding-bottom: .9167em;
}
/* === BEGIN allDownloadsViewOverlay.inc.css === */
+/* In the original, this is at the end of the file as a preprocessor-include */
+@import url("progressmeter.inc.css");
+
/*** View and outer controls ***/
#downloadsRichListBox {
}
.downloadTypeIcon {
- margin-top: 8px;
- margin-inline-end: 12px;
- margin-bottom: 8px;
- margin-inline-start: 0;
+ margin: 8px 13px;
width: 32px;
height: 32px;
}
.downloadBlockedBadge {
- margin: 0 4px;
+ margin: 0 5px;
background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
}
}
.downloadTarget {
- margin-bottom: 3px;
- cursor: inherit;
+ margin: 0;
}
.downloadDetails {
opacity: 0.7;
font-size: 95%;
- cursor: inherit;
+ /* Use calc() to keep the height consistent with .downloadTarget, so that the
+ progress bar can be vertically centered. */
+ margin: 4px 0 calc(1em / 0.95 - 1em);
}
.downloadButton {
background: transparent;
min-width: 0;
min-height: 0;
- margin: 3px;
+ margin: 0;
border: none;
- padding: 5px;
+ padding: 0 18px;
color: inherit;
}
-moz-appearance: none;
padding: 2px !important;
border-radius: 50%;
- color: graytext;
}
.downloadButton > .button-box > .button-icon {
background-color: #FF9F00;
}
-richlistitem.download[selected] > .downloadButtonArea > .downloadButton > .button-box {
- color: inherit;
-}
-
richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover > .button-box {
background-color: #FFCF00;
color: #000000;
list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
}
+/*** Progressmeter ***/
+/* %include progressmeter.inc.css - this happens as @import at the start of the file */
+
/* === END allDownloadsViewOverlay.inc.css === */
/*** List items ***/
/* === BEGIN downloads.inc.css === */
+/* In the original, this is at the end of the file as a preprocessor-include */
+@import url("progressmeter.inc.css");
+
/*** Panel and outer controls ***/
#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
#downloadsListBox {
background-color: transparent;
- padding: 0;
color: inherit;
margin: 0;
- border: none;
}
#emptyDownloads {
}
#downloadsSummary {
- padding: 0 12px;
- cursor: pointer;
-moz-user-focus: normal;
}
#downloadsSummary,
richlistitem[type="download"] {
height: var(--downloads-item-height);
- padding-inline-end: 0;
- color: inherit;
}
richlistitem[type="download"] {
- margin: 0;
border-bottom: 1px solid var(--panel-separator-color);
background: transparent;
- padding: 0;
+ color: inherit;
}
richlistitem[type="download"]:last-child {
border-bottom: none;
}
-richlistitem[type="download"] > .downloadMainArea {
- padding: 8px;
-}
-
.downloadTypeIcon {
- margin-top: 8px;
- margin-inline-end: 12px;
- margin-bottom: 8px;
- margin-inline-start: 0;
+ margin: 8px 13px;
width: 32px;
height: 32px;
}
.downloadBlockedBadge {
- margin: 0 4px;
+ margin: 0 5px;
background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
}
font-size of .downloadContainer's parent, we use calc to go from the
smaller font-size back to the original font-size.
*/
-#downloadsSummaryDetails,
.downloadContainer {
font-size: calc(100% * var(--downloads-item-font-size-factor));
+ margin-inline-end: 13px;
}
#downloadsSummaryDescription,
.downloadTarget {
- margin-bottom: var(--downloads-item-target-margin-bottom);
- cursor: inherit;
-}
-
-.downloadTarget {
+ margin: 0;
font-size: calc(100% / var(--downloads-item-font-size-factor));
}
#downloadsSummaryDetails,
.downloadDetails {
- margin-top: var(--downloads-item-details-margin-top);
opacity: var(--downloads-item-details-opacity);
- cursor: inherit;
+ /* Use calc() to keep the height consistent with .downloadTarget, so that the
+ progress bar can be vertically centered. */
+ margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
}
richlistitem[type="download"][verdict] > toolbarseparator {
margin: 0;
/* border: none; */
background: transparent;
- padding: 8px;
- color: #A09090;
+ padding: 0;
+ color: inherit;
}
.downloadButton > .button-box > .button-icon {
padding: 0;
}
-richlistitem[type="download"][state="1"][exists]:hover > .downloadMainArea,
-richlistitem[type="download"]:not([verdict]):hover > .downloadButtonArea {
- background-color: var(--arrowpanel-dimmed);
-}
-
richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
richlistitem[type="download"][verdict]:hover {
- background-color: var(--arrowpanel-dimmed-further);
+ background-color: var(--arrowpanel-dimmed);
}
richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
richlistitem[type="download"][verdict]:hover:active {
- background-color: var(--arrowpanel-dimmed-even-further);
+ background-color: var(--arrowpanel-dimmed-further);
}
richlistitem[type="download"][showingsubview] {
color: #000000;
}
-richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > .downloadButton {
- color: inherit;
-}
-
/*** Button icons ***/
.downloadIconCancel > .button-box > .button-icon {
-moz-margin-end: 16px;
}
+/*** Progressmeter ***/
+/* %include progressmeter.inc.css - this happens as @import at the start of the file */
+
/* === END downloads.inc.css === */
/*** Panel and outer controls ***/
-#downloadsSummary {
-}
-
-#downloadsSummary:hover {
-}
-
-#downloadsSummary:hover:active {
-}
-
#downloadsPanel[keyfocus] #downloadsSummary:focus,
#downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
outline: 1px #008484 dotted;
/*** List items and similar elements in the summary ***/
:root {
- --downloads-item-height: 7em;
+ --downloads-item-height: 5.5em;
--downloads-item-font-size-factor: 0.9;
- --downloads-item-target-margin-bottom: 6px;
- --downloads-item-details-margin-top: 0;
--downloads-item-details-opacity: 0.6;
}
--- /dev/null
+/*** Common-styled progressmeter ***/
+.downloadProgress {
+ height: 8px;
+ border-radius: 1px;
+ margin: 4px 0 0;
+ margin-inline-end: 12px;
+
+ /* for overriding rules in progressmeter.css */
+ -moz-appearance: none;
+ border-style: none;
+ background-color: transparent;
+ min-width: initial;
+ min-height: initial;
+}
+
+.downloadProgress[mode="undetermined"] {
+ /* for overriding rules on global.css in Linux. */
+ -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter");
+}
+
+.downloadProgress > .progress-bar {
+ background-color: #008484;
+
+ /* for overriding rules in progressmeter.css */
+ -moz-appearance: none;
+}
+
+.downloadProgress[paused="true"] > .progress-bar {
+ background-color: #A09090;
+}
+
+.downloadProgress[mode="undetermined"] > .progress-bar {
+ /* Make a white reflecting animation.
+ Create a gradient with 2 identical pattern, and enlarge the size to 200%.
+ This allows us to animate background-position with percentage. */
+ background-image: linear-gradient(90deg, transparent 0%,
+ rgba(255,255,255,0.5) 25%,
+ transparent 50%,
+ rgba(255,255,255,0.5) 75%,
+ transparent 100%);
+ background-blend-mode: lighten;
+ background-size: 200% 100%;
+ animation: downloadProgressSlideX 1.5s linear infinite;
+}
+
+.downloadProgress > .progress-remainder {
+ border: solid #9C9CFF;
+ border-block-start-width: 1px;
+ border-block-end-width: 1px;
+ border-inline-start-width: 0;
+ border-inline-end-width: 1px;
+ background-color: #000000;
+}
+
+.downloadProgress[value="0"] > .progress-remainder {
+ border-width: 1px;
+}
+
+.downloadProgress > .progress-remainder[mode="undetermined"] {
+ border: none;
+}
+
+@keyframes downloadProgressSlideX {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -100% 0;
+ }
+}
background-color: #FFCF00;
}
+/* GRID */
+#topsites-heading {
+ color: #A09090;
+ font-size: 1em;
+ font-weight: normal;
+ /* Position the heading such that it doesn't affect how many cells we
+ can fit into the grid. */
+ position: absolute;
+ /* The top margin moves the heading away from the grid.
+ The horizontal margin aligns the heading with the cells. */
+ margin: -1em 10px 0;
+}
+
/* CELLS */
.newtab-cell {
+ --cell-corner-radius: 10px;
background-color: rgba(255,159,0,.2);
border: 1px solid;
border-color: #9C9CFF;
- border-radius: 10px;
+ border-radius: var(--cell-corner-radius);
+}
+
+body.compact .newtab-cell {
+ --cell-corner-radius: 3px;
}
.newtab-cell:empty {
outline: 2px dashed #A09090;
- -moz-outline-radius: 2px;
+ outline-offset: -2px;
+ -moz-outline-radius: var(--cell-corner-radius);
}
/* SITES */
.newtab-site {
- border-radius: inherit;
+ border-radius: var(--cell-corner-radius);
text-decoration: none;
transition-property: top, left, opacity, box-shadow, background-color;
}
/* LINKS */
.newtab-link {
- border-radius: 10px;
+ border-radius: var(--cell-corner-radius);
overflow: hidden;
}
background-clip: padding-box;
background-repeat: no-repeat;
background-size: cover;
- border-radius: 8px 8px 0px 0px;
height: 180px;
transition: opacity 100ms ease-out;
}
+body.compact .newtab-thumbnail {
+ height: 100%;
+ border-radius: calc(var(--cell-corner-radius) + 1px);
+ outline: 1px solid hsla(0,0%,0%,.1);
+ -moz-outline-radius: var(--cell-corner-radius);
+ outline-offset: -1px;
+}
+
+.newtab-thumbnail.placeholder {
+ color: #FFCF00;
+ font-size: 85px;
+ line-height: 200%;
+}
+
+body.compact .newtab-thumbnail.placeholder {
+ font-size: 45px;
+}
+
.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
opacity: 0;
}
.newtab-site[type=organic] .newtab-thumbnail,
.newtab-site[type=sponsored] .newtab-thumbnail {
background-position: center center;
+}
+
+body.compact .newtab-site[type=affiliate] .newtab-thumbnail {
+ background-position: center 30%;
+}
+
+.newtab-site[type=affiliate] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail {
background-size: auto;
}
/* TITLES */
-.newtab-sponsored,
+.newtab-title {
+ background-color: #FF9F00;
+ font-size: 13px;
+ line-height: 30px;
+ border: 1px solid #9C9CFF;
+ border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
+}
+
+body.compact .newtab-title {
+ background-color: rgba(255,159,0,.85);
+ font-size: 12px;
+ line-height: 21px;
+/* border: 1px solid hsla(0,0%,80%,.8);
+ border-top-color: hsla(0,0%,0%,.1);*/
+ background-clip: padding-box;
+}
+
.newtab-title,
.newtab-suggested {
- padding: 0 8px;
- background-color: rgba(255,159,0,.8);
color: #000000;
- border: none;
- line-height: 24px;
- bottom: 0 !important;
}
-/*
+body.compact .newtab-title,
+body.compact .newtab-suggested {
+ color: #000000;
+}
+
.newtab-suggested {
background-color: #9C9CFF;
}
background-color: #FF9F00;
border: 0;
}
-*/
-.newtab-site:hover .newtab-title {
+
+body:not(.compact) .newtab-site:hover .newtab-title {
background-color: #FFCF00;
+/* border-color: #333;
+ border-top-color: white;*/
+}
+
+body.compact .newtab-site:hover .newtab-title {
+/* color: white;
+ background-color: hsla(0,0%,20%,.85);
+ border-color: hsla(0,0%,0%,.8);
+ border-top-color: white;*/
}
.newtab-site[pinned] .newtab-title {
border: none;
height: 24px;
width: 24px;
+ top: 4px;
+}
+
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+ left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+ right: 4px;
+}
+
+body.compact .newtab-control {
+ top: -8px;
+}
+
+body.compact .newtab-control-pin:dir(ltr),
+body.compact .newtab-control-block:dir(rtl) {
+ left: -8px;
+}
+
+body.compact .newtab-control-block:dir(ltr),
+body.compact .newtab-control-pin:dir(rtl) {
+ right: -8px;
}
.newtab-control-pin,
.blocked {
clip-path: url(#clip);
}
+
+ #login-highlighted {
+ fill: #000000;
+ fill-opacity: 1;
+ }
+
#plugin-blocked,
#plugin-blocked:target ~ #strikeout {
fill: #FF0000;
<use id="indexedDB" xlink:href="#indexedDB-icon" />
<use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" />
<use id="login" xlink:href="#login-icon" />
+ <use id="login-highlighted" class="highlighted" xlink:href="#login-icon" />
<use id="login-detailed" xlink:href="#login-detailed-icon" />
<use id="microphone" xlink:href="#microphone-icon" />
<use id="microphone-sharing" xlink:href="#microphone-icon"/>
background-color: #FF9F00;
}
+/**
+ * We want to hide the checkbox in lieu of the toggle-btn
+ * "slider toggle". We need to make the toggle keyboard
+ * focusable, however, which is not possible if it's
+ * display:none. We work around this by making the toggle
+ * invisible but still present in the display list, allowing
+ * it to receive keyboard events. When it is focused by keyboard,
+ * we use the -moz-focusring selector on the invisible checkbox
+ * to show a focus ring around the slider toggle.
+ */
+.toggle-input {
+ opacity: 0;
+ width: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
.toggle + .toggle-btn {
box-sizing: border-box;
cursor: pointer;
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ width="64"
+ height="64"
+ viewBox="0 0 64 64">
+
+ <style>
+ .gray {
+ fill: #A09090;
+ }
+ </style>
+
+ <defs>
+ <clipPath id="clip-path">
+ <polygon points="32 52.35 78.88 6.06 -14.88 6.06 32 52.35"/>
+ </clipPath>
+ </defs>
+
+ <circle class="gray" cx="32" cy="52" r="6"/>
+
+ <g clip-path="url('#clip-path')">
+ <path class="gray" d="M71.63,52A39.63,39.63,0,1,1,32,12.38,39.63,39.63,0,0,1,71.63,52ZM32,7.63A44.38,44.38,0,1,0,76.38,52,44.38,44.38,0,0,0,32,7.63Z"/>
+ <path class="gray" d="M47.75,52A15.75,15.75,0,1,1,32,36.25,15.75,15.75,0,0,1,47.75,52ZM32,31.65A20.35,20.35,0,1,0,52.35,52,20.35,20.35,0,0,0,32,31.65Z"/>
+ <path class="gray" d="M59.58,52A27.58,27.58,0,1,1,32,24.42,27.58,27.58,0,0,1,59.58,52ZM32,19.38A32.63,32.63,0,1,0,64.63,52,32.63,32.63,0,0,0,32,19.38Z"/>
+ </g>
+</svg>
projects / themes.git / commitdiff
