mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-08 20:28:42 +02:00
333 lines
11 KiB
SCSS
333 lines
11 KiB
SCSS
// Photon colors from http://design.firefox.com/photon/visuals/color.html
|
|
$blue-40: #45A1FF;
|
|
$blue-50: #0A84FF;
|
|
$blue-60: #0060DF;
|
|
$blue-70: #003EAA;
|
|
$blue-80: #002275;
|
|
$grey-10: #F9F9FA;
|
|
$grey-20: #EDEDF0;
|
|
$grey-30: #D7D7DB;
|
|
$grey-40: #B1B1B3;
|
|
$grey-50: #737373;
|
|
$grey-60: #4A4A4F;
|
|
$grey-70: #38383D;
|
|
$grey-80: #2A2A2E;
|
|
$grey-90: #0C0C0D;
|
|
$teal-10: #A7FFFE;
|
|
$teal-60: #00C8D7;
|
|
$teal-70: #008EA4;
|
|
$teal-80: #005A71;
|
|
$red-60: #D70022;
|
|
$yellow-50: #FFE900;
|
|
$violet-20: #CB9EFF;
|
|
|
|
// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
|
|
$grey-10-00: rgba($grey-10, 0);
|
|
$grey-10-10: rgba($grey-10, 0.1);
|
|
$grey-10-20: rgba($grey-10, 0.2);
|
|
$grey-10-30: rgba($grey-10, 0.3);
|
|
$grey-10-40: rgba($grey-10, 0.4);
|
|
$grey-10-50: rgba($grey-10, 0.5);
|
|
$grey-10-60: rgba($grey-10, 0.6);
|
|
$grey-10-80: rgba($grey-10, 0.8);
|
|
$grey-10-95: rgba($grey-10, 0.95);
|
|
$grey-20-60: rgba($grey-20, 0.6);
|
|
$grey-20-80: rgba($grey-20, 0.8);
|
|
$grey-30-60: rgba($grey-30, 0.6);
|
|
$grey-60-60: rgba($grey-60, 0.6);
|
|
$grey-60-70: rgba($grey-60, 0.7);
|
|
$grey-70-40: rgba($grey-70, 0.4);
|
|
$grey-70-60: rgba($grey-70, 0.6);
|
|
$grey-80-95: rgba($grey-80, 0.95);
|
|
$grey-90-00: rgba($grey-90, 0);
|
|
$grey-90-10: rgba($grey-90, 0.1);
|
|
$grey-90-20: rgba($grey-90, 0.2);
|
|
$grey-90-30: rgba($grey-90, 0.3);
|
|
$grey-90-40: rgba($grey-90, 0.4);
|
|
$grey-90-50: rgba($grey-90, 0.5);
|
|
$grey-90-60: rgba($grey-90, 0.6);
|
|
$grey-90-70: rgba($grey-90, 0.7);
|
|
$grey-90-80: rgba($grey-90, 0.8);
|
|
$grey-90-90: rgba($grey-90, 0.9);
|
|
|
|
$blue-40-40: rgba($blue-40, 0.4);
|
|
$blue-50-50: rgba($blue-50, 0.5);
|
|
$blue-50-30: rgba($blue-50, 0.3);
|
|
$blue-50-50: rgba($blue-50, 0.5);
|
|
|
|
$black: #000;
|
|
$black-5: rgba($black, 0.05);
|
|
$black-10: rgba($black, 0.1);
|
|
$black-12: rgba($black, 0.12);
|
|
$black-15: rgba($black, 0.15);
|
|
$black-20: rgba($black, 0.2);
|
|
$black-25: rgba($black, 0.25);
|
|
$black-30: rgba($black, 0.3);
|
|
|
|
// Other colors
|
|
$white: #FFF;
|
|
$white-0: rgba($white, 0);
|
|
$white-10: rgba($white, 0.1);
|
|
$white-50: rgba($white, 0.5);
|
|
$white-60: rgba($white, 0.6);
|
|
$white-70: rgba($white, 0.7);
|
|
$white-100: rgba($white, 1);
|
|
$ghost-white: #FAFAFC;
|
|
$pocket-teal: #50BCB6;
|
|
$pocket-red: #EF4056;
|
|
$shadow-10: rgba(12, 12, 13, 0.1);
|
|
$bookmark-icon-fill: #0A84FF;
|
|
$download-icon-fill: #12BC00;
|
|
$pocket-icon-fill: #D70022;
|
|
$email-input-focus: rgba($blue-50, 0.3);
|
|
$email-input-invalid: rgba($red-60, 0.3);
|
|
$aw-extra-blue-1: #004EC2;
|
|
$aw-extra-blue-2: #0080FF;
|
|
$aw-extra-blue-3: #00C7FF;
|
|
$about-welcome-gradient: linear-gradient(to bottom, $blue-70 40%, $aw-extra-blue-1 60%, $blue-60 80%, $aw-extra-blue-2 90%, $aw-extra-blue-3 100%);
|
|
$about-welcome-extra-links: #676F7E;
|
|
$firefox-wordmark-default-color: #363959;
|
|
$firefox-wordmark-darktheme-color: $white;
|
|
|
|
// New New Tab Experience colors.
|
|
$newtab-background-button-default-color: rgba(223, 223, 223, 0.5);
|
|
$newtab-background-button-darktheme-color: rgba(80, 80, 80, 0.5);
|
|
$newtab-background-button-default-text-color: #484848;
|
|
$newtab-background-button-darktheme-text-color: #CDCDD4;
|
|
$newtab-background-button-default-hover-color: rgba(196, 196, 196, 0.5);
|
|
$newtab-background-button-darktheme-hover-color: rgba(114, 114, 114, 0.5);
|
|
$newtab-background-button-default-active-color: rgba(151, 151, 151, 0.5);
|
|
$newtab-background-button-darktheme-active-color: rgba(173, 173, 173, 0.5);
|
|
$newtab-background-primary-text-color: #151515;
|
|
$newtab-background-darktheme-primary-text-color: #CDCDD4;
|
|
$newtab-wordmark-default-color: #20123A;
|
|
|
|
$in-content-page-color: rgb(21, 20, 26);
|
|
$in-content-page-color-dark: rgb(251, 251, 254);
|
|
|
|
// These colors should match the colors in the default themes
|
|
// (toolkit/mozapps/extensions/...). Note that they could get replaced by other
|
|
// themes. The color set in --tabpanel-background-color (tabs.inc.css) should
|
|
// match these colors here to avoid flashing.
|
|
$in-content-page-background: #F9F9FB;
|
|
$in-content-page-background-dark: #2A2A2E;
|
|
|
|
$newtab-card-primary-text-color: #20123A;
|
|
$newtab-card-darktheme-primary-text-color: #E0E0E6;
|
|
$newtab-card-line-color: #716F87;
|
|
$newtab-card-darktheme-line-color: #B9B7CC;
|
|
$newtab-card-separator-line-color: #E1E0E6;
|
|
$newtab-card-darktheme-separator-line-color: #53515F;
|
|
$newtab-card-tint: rgba(0, 0, 0, 0.15);
|
|
$newtab-card-firstshadow: rgba(9, 32, 77, 0.12);
|
|
$newtab-card-darktheme-firstshadow: rgba(21, 20, 26, 0.5);
|
|
$newtab-card-secondshadow: rgba(29, 17, 51, 0.12);
|
|
$newtab-darktheme-card-secondshadow: rgba(21, 20, 26, 0.75);
|
|
$newtab-focus-outline-color: rgba(0, 96, 223, 0.25);
|
|
$newtab-darktheme-focus-outline-color: rgba(80, 145, 241, 0.5);
|
|
$newtab-darktheme-focus-border: #B5D3FF;
|
|
$newtab-darktheme-focus-border-selected: #B5D3FF;
|
|
$newtab-darktheme-primary-action-background: #4484E2;
|
|
$newtab-primary-action-background-off: #E9E9E9;
|
|
$newtab-darktheme-primary-action-background-off: #6A6A6F;
|
|
$newtab-card-darktheme-secondary-action-background: #515156;
|
|
$newtab-card-darktheme-secondary-action-background-hover: #606065;
|
|
$newtab-card-secondary-action-background-active: #E2E2E6;
|
|
$newtab-card-darktheme-secondary-action-background-active: #6F6F74;
|
|
$newtab-card-darktheme-hover-color: rgba(180, 180, 180, 0.1);
|
|
$newtab-card-hover-color: rgba(0, 0, 0, 0.05);
|
|
$newtab-tile-shadow-secondary: rgba(29, 17, 51, 0.2);
|
|
$newtab-tile-darktheme-shadow-secondary: rgba(21, 20, 26, 0.75);
|
|
$newtab-card-secondary-text-color: #585165;
|
|
$newtab-card-darktheme-secondary-text-color: #B1B1BD;
|
|
|
|
// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html
|
|
$photon-easing: cubic-bezier(0.07, 0.95, 0, 1);
|
|
|
|
$border-radius: 3px;
|
|
$border-radius-new: 8px;
|
|
|
|
// Grid related styles
|
|
$base-gutter: 32px;
|
|
$section-horizontal-padding: 25px;
|
|
$section-vertical-padding: 10px;
|
|
$section-spacing: 40px - $section-vertical-padding * 2;
|
|
$grid-unit: 96px; // 1 top site
|
|
// New Tab Experience grid unit needs to be smaller, but for now we are changing this UI with a pref, so requires duplication.
|
|
$grid-unit-small: 80px; // 1 top site
|
|
|
|
$icon-size: 16px;
|
|
$smaller-icon-size: 12px;
|
|
$larger-icon-size: 32px;
|
|
|
|
$searchbar-width-small: $grid-unit * 2 + $base-gutter * 1;
|
|
$searchbar-width-medium: $grid-unit * 4 + $base-gutter * 3;
|
|
$searchbar-width-large: $grid-unit * 6 + $base-gutter * 5;
|
|
|
|
$searchbar-width-small-new: ($grid-unit * 2 + $base-gutter * 1) - 24px;
|
|
$searchbar-width-medium-new: ($grid-unit * 4 + $base-gutter * 3) - 120px;
|
|
$searchbar-width-large-new: ($grid-unit * 6 + $base-gutter * 5) - 136px;
|
|
$searchbar-width-largest-new: ($grid-unit * 6 + $base-gutter * 5) - 16px;
|
|
|
|
$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $section-horizontal-padding * 2; // 2 top sites
|
|
$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $section-horizontal-padding * 2; // 4 top sites
|
|
$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $section-horizontal-padding * 2; // 6 top sites
|
|
$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizontal-padding * 2; // 8 top sites
|
|
// For the breakpoints, we need to add space for the scrollbar to avoid weird
|
|
// layout issues when the scrollbar is visible. 16px is wide enough to cover all
|
|
// OSes and keeps it simpler than a per-OS value.
|
|
$scrollbar-width: 16px;
|
|
|
|
// Breakpoints
|
|
// If updating these breakpoints, don't forget to update uses of DSImage, which
|
|
// might choose the right image src to use depending on the viewport size.
|
|
$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px
|
|
$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px
|
|
$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px
|
|
|
|
$section-title-font-size: 13px;
|
|
|
|
$card-width: $grid-unit * 2 + $base-gutter;
|
|
$card-width-nte: $grid-unit-small * 2 + $base-gutter;
|
|
|
|
$card-height: 266px;
|
|
$card-preview-image-height: 122px;
|
|
$card-title-margin: 2px;
|
|
$card-text-line-height: 19px;
|
|
// Larger cards for wider screens:
|
|
$card-width-large: 309px;
|
|
$card-height-large: 370px;
|
|
$card-preview-image-height-large: 155px;
|
|
// Compact cards for Highlights
|
|
$card-height-compact: 160px;
|
|
$card-preview-image-height-compact: 108px;
|
|
|
|
$topic-margin-top: 12px;
|
|
|
|
$context-menu-button-size: 27px;
|
|
$context-menu-button-boxshadow: 0 2px $grey-90-10;
|
|
$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20;
|
|
$context-menu-font-size: 14px;
|
|
$context-menu-border-radius: 5px;
|
|
$context-menu-outer-padding: 5px;
|
|
$context-menu-item-padding: 3px 12px;
|
|
|
|
$error-fallback-font-size: 12px;
|
|
$error-fallback-line-height: 1.5;
|
|
|
|
$image-path: 'chrome://activity-stream/content/data/content/assets/';
|
|
|
|
$snippets-container-height: 120px;
|
|
|
|
$textbox-shadow-size: 4px;
|
|
|
|
$customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96);
|
|
$customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895);
|
|
$customize-menu-border-tint: 1px solid $newtab-card-tint;
|
|
|
|
@mixin fade-in {
|
|
box-shadow: inset $inner-box-shadow, $shadow-primary;
|
|
transition: box-shadow 150ms;
|
|
}
|
|
|
|
@mixin fade-in-card {
|
|
box-shadow: $shadow-primary;
|
|
transition: box-shadow 150ms;
|
|
}
|
|
|
|
@mixin ds-focus-nte {
|
|
border: 0;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
|
|
}
|
|
|
|
@mixin context-menu-button-newtab-experience {
|
|
.context-menu-button {
|
|
background-image: url('chrome://global/skin/icons/more.svg');
|
|
border: 0;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
fill: var(--newtab-icon-primary-color);
|
|
-moz-context-properties: fill;
|
|
height: 20px;
|
|
width: 20px;
|
|
inset-inline-end: -9px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -20px;
|
|
transition: opacity 200ms;
|
|
|
|
&:is(:active, :focus) {
|
|
outline: 0;
|
|
opacity: 1;
|
|
background-color: var(--newtab-topsites-context-menu-hover);
|
|
fill: var(--newtab-primary-action-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin context-menu-button {
|
|
.context-menu-button {
|
|
background-clip: padding-box;
|
|
background-color: var(--newtab-contextmenu-button-color);
|
|
background-image: url('chrome://global/skin/icons/more.svg');
|
|
background-position: 55%;
|
|
border: $border-primary;
|
|
border-radius: 100%;
|
|
box-shadow: $context-menu-button-boxshadow;
|
|
cursor: pointer;
|
|
fill: var(--newtab-icon-primary-color);
|
|
height: $context-menu-button-size;
|
|
inset-inline-end: -($context-menu-button-size / 2);
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -($context-menu-button-size / 2);
|
|
transform: scale(0.25);
|
|
transition-duration: 150ms;
|
|
transition-property: transform, opacity;
|
|
width: $context-menu-button-size;
|
|
|
|
&:is(:active, :focus) {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin context-menu-button-hover {
|
|
.context-menu-button {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition-delay: 333ms;
|
|
}
|
|
}
|
|
|
|
@mixin nt-experience-context-menu-button-hover {
|
|
.context-menu-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@mixin context-menu-open-middle {
|
|
.context-menu {
|
|
margin-inline-end: auto;
|
|
margin-inline-start: auto;
|
|
inset-inline-end: auto;
|
|
inset-inline-start: -$base-gutter;
|
|
}
|
|
}
|
|
|
|
@mixin context-menu-open-left {
|
|
.context-menu {
|
|
margin-inline-end: 5px;
|
|
margin-inline-start: auto;
|
|
inset-inline-end: 0;
|
|
inset-inline-start: auto;
|
|
}
|
|
}
|
|
|
|
@mixin flip-icon {
|
|
&:dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|