Dark mode tweaks

Summary: Went over all plugins and did superficial fixes to make most plugins look decent or at least usable in dark mode, which before they weren't :)

Reviewed By: priteshrnandgaonkar

Differential Revision: D29456680

fbshipit-source-id: 3952e5da512c68b89434eea081faf121d1049908

desktop/app/src/chrome/SettingsSheet.tsx

@@ -246,7 +246,7 @@ class SettingsSheet extends Component<Props, State> {
           }}
         />
         <ToggledSection
-          label="Enable dark theme (experimental)"
+          label="Enable dark theme"
           toggled={darkMode}
           onChange={(enabled) => {
             this.setState((prevState) => ({

desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -9,10 +9,10 @@ exports[`load PluginInstaller list 1`] = `
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
-        class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
+        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
       >
         <input
-          class="css-184o3nx-Input-SearchInput e271nro3"
+          class="css-84x0xt-Input-SearchInput e271nro3"
           placeholder="Search Flipper plugins..."
           type="text"
           value=""
@@ -252,7 +252,7 @@ exports[`load PluginInstaller list 1`] = `
       class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
     >
       <input
-        class="css-phqpi-Input-FileInputBox ersmi540"
+        class="css-sli06x-Input-FileInputBox ersmi540"
         placeholder="Specify path to a Flipper package or just drag and drop it here..."
         type="text"
         value=""
@@ -316,10 +316,10 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
-        class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
+        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
       >
         <input
-          class="css-184o3nx-Input-SearchInput e271nro3"
+          class="css-84x0xt-Input-SearchInput e271nro3"
           placeholder="Search Flipper plugins..."
           type="text"
           value=""
@@ -559,7 +559,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
     >
       <input
-        class="css-phqpi-Input-FileInputBox ersmi540"
+        class="css-sli06x-Input-FileInputBox ersmi540"
         placeholder="Specify path to a Flipper package or just drag and drop it here..."
         type="text"
         value=""

desktop/app/src/chrome/settings/KeyboardShortcutInput.tsx

@@ -9,6 +9,7 @@
 
 import {FlexColumn, styled, FlexRow, Text, Glyph, colors} from '../../ui';
 import React, {useRef, useState, useEffect} from 'react';
+import {theme} from 'flipper-plugin';
 
 type PressedKeys = {
   metaKey: boolean;
@@ -62,7 +63,7 @@ const ShortcutKeysContainer = styled(FlexRow)<{invalid: boolean}>(
 
 const ShortcutKeyContainer = styled.div({
   border: `1px solid ${colors.light20}`,
-  backgroundColor: colors.light05,
+  backgroundColor: theme.backgroundWash,
   padding: 3,
   margin: '0 1px',
   borderRadius: 3,

desktop/app/src/ui/components/Button.tsx

@@ -10,10 +10,8 @@
 import React, {useState, useCallback, useMemo} from 'react';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import styled from '@emotion/styled';
-import {keyframes} from '@emotion/css';
 import {Button as AntdButton, Dropdown, Menu} from 'antd';
 
-import {colors} from './colors';
 import Glyph, {IconSize} from './Glyph';
 import type {ButtonProps} from 'antd/lib/button';
 import {DownOutlined, CheckOutlined} from '@ant-design/icons';
@@ -21,171 +19,6 @@ import {theme} from 'flipper-plugin';
 
 type ButtonType = 'primary' | 'success' | 'warning' | 'danger';
 
-const borderColor = (props: {
-  windowIsFocused?: boolean;
-  disabled?: boolean;
-  type?: ButtonType;
-  depressed?: boolean;
-}) => {
-  if (!props.windowIsFocused) {
-    return colors.macOSTitleBarButtonBorderBlur;
-  } else if (props.type === 'danger' && !props.disabled) {
-    return colors.red;
-  } else if (props.type === 'primary' && !props.disabled) {
-    return '#237FF1';
-  } else if (props.depressed) {
-    return colors.macOSTitleBarButtonBorderBottom;
-  } else {
-    return colors.macOSTitleBarButtonBorder;
-  }
-};
-const borderBottomColor = (props: {
-  windowIsFocused?: boolean;
-  disabled?: boolean;
-  type?: ButtonType;
-  depressed?: boolean;
-}) => {
-  if (!props.windowIsFocused) {
-    return colors.macOSTitleBarButtonBorderBlur;
-  } else if (props.type === 'danger' && !props.disabled) {
-    return colors.red;
-  } else if (props.type === 'primary' && !props.disabled) {
-    return '#237FF1';
-  } else {
-    return colors.macOSTitleBarButtonBorderBottom;
-  }
-};
-
-const backgroundImage = (props: {
-  windowIsFocused?: boolean;
-  disabled?: boolean;
-  type?: ButtonType;
-  depressed?: boolean;
-}) => {
-  if (props.windowIsFocused && !props.disabled) {
-    if (props.depressed) {
-      return `linear-gradient(to bottom, ${colors.macOSTitleBarBorderBlur} 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${colors.macOSTitleBarButtonBackgroundActive} 100%)`;
-    } else if (props.type === 'primary') {
-      return `linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)`;
-    } else {
-      return `linear-gradient(to bottom, transparent 0%,${colors.macOSTitleBarButtonBackground} 100%)`;
-    }
-  } else {
-    return 'none';
-  }
-};
-
-const color = (props: {
-  windowIsFocused?: boolean;
-  type?: ButtonType;
-  disabled?: boolean;
-}) => {
-  if (props.type === 'danger' && props.windowIsFocused && !props.disabled) {
-    return colors.red;
-  } else if (
-    props.type === 'primary' &&
-    props.windowIsFocused &&
-    !props.disabled
-  ) {
-    return colors.white;
-  } else if (props.disabled) {
-    return colors.macOSTitleBarIconBlur;
-  } else {
-    return colors.light50;
-  }
-};
-
-const pulse = keyframes({
-  '0%': {
-    boxShadow: `0 0 4px 0 ${colors.macOSTitleBarIconSelected}`,
-  },
-  '70%': {
-    boxShadow: '0 0 4px 6px transparent',
-  },
-  '100%': {
-    boxShadow: '0 0 4px 0 transparent',
-  },
-});
-
-const StyledButton = styled.div<{
-  windowIsFocused?: boolean;
-  compact?: boolean;
-  inButtonGroup?: boolean;
-  padded?: boolean;
-  pulse?: boolean;
-  disabled?: boolean;
-  dropdown?: Array<MenuItemConstructorOptions>;
-}>((props) => ({
-  userSelect: 'none',
-  backgroundColor:
-    props.windowIsFocused && !props.disabled
-      ? colors.white
-      : colors.macOSTitleBarButtonBackgroundBlur,
-  backgroundImage: backgroundImage(props),
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: borderColor(props),
-  borderBottomColor: borderBottomColor(props),
-  color: color(props),
-  borderRadius: 4,
-  position: 'relative',
-  padding: props.padded ? '0 15px' : '0 6px',
-  height: props.compact === true ? 24 : 28,
-  margin: 0,
-  minWidth: 34,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-
-  boxShadow:
-    props.pulse && props.windowIsFocused
-      ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
-      : '',
-  animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
-
-  '&:not(:first-child)': {
-    marginLeft: props.inButtonGroup === true ? 0 : 10,
-    borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
-    borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
-  },
-
-  '&:not(:last-child)': {
-    borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
-    borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
-    borderRight: props.inButtonGroup === true ? 0 : '',
-  },
-
-  '&:first-of-type': {
-    marginLeft: 0,
-  },
-
-  '&:active': props.disabled
-    ? null
-    : {
-        borderColor: colors.macOSTitleBarButtonBorder,
-        borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
-        background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
-      },
-
-  '&:disabled': {
-    borderColor: borderColor(props),
-    borderBottomColor: borderBottomColor(props),
-    pointerEvents: 'none',
-  },
-
-  '&:hover::before': {
-    content: props.dropdown ? "''" : 'normal',
-    position: 'absolute',
-    bottom: 1,
-    right: 2,
-    borderStyle: 'solid',
-    borderWidth: '4px 3px 0 3px',
-    borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
-  },
-}));
-StyledButton.displayName = 'Button:StyledButton';
-
 const Icon = styled(Glyph)<{hasText: boolean}>(({hasText}) => ({
   marginRight: hasText ? 3 : 0,
 }));

desktop/app/src/ui/components/Input.tsx

@@ -8,24 +8,26 @@
  */
 
 import styled from '@emotion/styled';
-import {colors} from './colors';
+import {theme} from 'flipper-plugin';
 
 export const inputStyle = (props: {
   compact: boolean;
   valid: boolean;
   readOnly: boolean;
 }) => ({
-  border: `1px solid ${props.valid ? colors.light15 : colors.red}`,
+  border: `1px solid ${props.valid ? theme.dividerColor : theme.errorColor}`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
 
   height: props.compact ? '17px' : '28px',
   lineHeight: props.compact ? '17px' : '28px',
-  backgroundColor: props.readOnly ? colors.light02 : undefined,
+  backgroundColor: props.readOnly
+    ? theme.backgroundWash
+    : theme.backgroundDefault,
   '&:disabled': {
-    backgroundColor: '#ddd',
+    backgroundColor: theme.disabledColor,
-    borderColor: '#ccc',
+    borderColor: theme.disabledColor,
     cursor: 'not-allowed',
   },
 });

desktop/app/src/ui/components/Select.tsx

@@ -11,6 +11,7 @@ import {Component, CSSProperties} from 'react';
 import Text from './Text';
 import styled from '@emotion/styled';
 import React from 'react';
+import {theme} from 'flipper-plugin';
 
 const Label = styled.label({
   display: 'flex',
@@ -26,6 +27,8 @@ LabelText.displayName = 'Select:LabelText';
 
 const SelectMenu = styled.select<{grow?: boolean}>((props) => ({
   flexGrow: props.grow ? 1 : 0,
+  background: theme.backgroundDefault,
+  border: `1px solid ${theme.dividerColor}`,
 }));
 SelectMenu.displayName = 'Select:SelectMenu';
 

desktop/app/src/ui/components/Sidebar.tsx

@@ -9,7 +9,6 @@
 
 import {theme, _Interactive, _InteractiveProps} from 'flipper-plugin';
 import FlexColumn from './FlexColumn';
-import {colors} from './colors';
 import {Component} from 'react';
 import styled from '@emotion/styled';
 import {Property} from 'csstype';
@@ -33,8 +32,7 @@ const SidebarContainer = styled(FlexColumn)<{
   ...(props.unstyled
     ? undefined
     : {
-        backgroundColor:
+        backgroundColor: props.backgroundColor || theme.backgroundDefault,
-          props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
         borderLeft: props.position === 'right' ? borderStyle : 'none',
         borderTop: props.position === 'bottom' ? borderStyle : 'none',
         borderRight: props.position === 'left' ? borderStyle : 'none',

desktop/app/src/ui/components/Tabs.tsx

@@ -16,7 +16,7 @@ import Tab, {Props as TabProps} from './Tab';
 import {Property} from 'csstype';
 import React, {useContext} from 'react';
 import {TabsContext} from './TabsContainer';
-import {_wrapInteractionHandler} from 'flipper-plugin';
+import {theme, _wrapInteractionHandler} from 'flipper-plugin';
 
 const TabList = styled(FlexRow)({
   justifyContent: 'center',
@@ -35,14 +35,22 @@ const TabListItem = styled.div<{
       ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
       : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
     : props.active
-    ? colors.light15
+    ? theme.primaryColor
-    : colors.light02,
+    : theme.backgroundWash,
-  borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
+  borderBottom: props.container
+    ? '1px solid #B8B8B8'
+    : `1px solid ${theme.dividerColor}`,
   boxShadow:
     props.active && props.container
       ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
       : 'none',
-  color: props.container && props.active ? colors.white : colors.dark80,
+  color: props.container
+    ? props.active
+      ? colors.white
+      : colors.dark80
+    : props.active
+    ? colors.white
+    : theme.textColorPrimary,
   flex: props.container ? 'unset' : 1,
   top: props.container ? -11 : 0,
   fontWeight: 500,
@@ -63,7 +71,7 @@ const TabListItem = styled.div<{
     borderBottomRightRadius: props.container ? 3 : 0,
   },
   '&:hover': {
-    backgroundColor: props.active ? colors.light15 : colors.light05,
+    backgroundColor: theme.backgroundTransparentHover,
   },
 }));
 TabListItem.displayName = 'Tabs:TabListItem';
@@ -77,7 +85,7 @@ const TabListAddItem = styled(TabListItem)({
 TabListAddItem.displayName = 'Tabs:TabListAddItem';
 
 const CloseButton = styled.div({
-  color: '#000',
+  color: theme.textColorPrimary,
   float: 'right',
   fontSize: 10,
   fontWeight: 'bold',

desktop/app/src/ui/components/searchable/FilterToken.tsx

@@ -11,18 +11,18 @@ import {Filter} from '../filter/types';
 import {PureComponent} from 'react';
 import Text from '../Text';
 import styled from '@emotion/styled';
-import {colors} from '../colors';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import React from 'react';
 import {Property} from 'csstype';
+import {theme} from 'flipper-plugin';
 
 const Token = styled(Text)<{focused?: boolean; color?: Property.Color}>(
   (props) => ({
     display: 'inline-flex',
     alignItems: 'center',
     backgroundColor: props.focused
-      ? colors.macOSHighlightActive
+      ? theme.textColorActive
-      : props.color || colors.macOSHighlight,
+      : props.color || theme.buttonDefaultBackground,
     borderRadius: 4,
     marginRight: 4,
     padding: 4,
@@ -30,8 +30,8 @@ const Token = styled(Text)<{focused?: boolean; color?: Property.Color}>(
     height: 21,
     color: props.focused ? 'white' : 'inherit',
     '&:active': {
-      backgroundColor: colors.macOSHighlightActive,
+      backgroundColor: theme.textColorActive,
-      color: colors.white,
+      color: theme.textColorPrimary,
     },
     '&:first-of-type': {
       marginLeft: 3,
@@ -57,7 +57,7 @@ const Key = styled(Text)<{
     fontSize: 14,
   },
   '&:active:after': {
-    backgroundColor: colors.macOSHighlightActive,
+    backgroundColor: theme.textColorActive,
   },
 }));
 Key.displayName = 'FilterToken:Key';
@@ -83,7 +83,7 @@ const Chevron = styled.div<{focused?: boolean}>((props) => ({
   top: -2,
   height: 'auto',
   lineHeight: 'initial',
-  color: props.focused ? colors.white : 'inherit',
+  color: props.focused ? theme.textColorActive : 'inherit',
   '&:hover, &:active, &:focus': {
     color: 'inherit',
     border: 0,

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -11,7 +11,6 @@ import {Filter} from '../filter/types';
 import {TableColumns} from '../table/types';
 import {PureComponent} from 'react';
 import Input from '../Input';
-import {colors} from '../colors';
 import Text from '../Text';
 import FlexBox from '../FlexBox';
 import Glyph from '../Glyph';
@@ -34,10 +33,10 @@ export const SearchBox = styled(FlexBox)<{isInvalidInput?: boolean}>(
       flex: `1 0 auto`,
       minWidth: 150,
       height: 30,
-      backgroundColor: colors.white,
+      backgroundColor: theme.backgroundDefault,
       borderRadius: '999em',
       border: `1px solid ${
-        !props.isInvalidInput ? colors.light15 : colors.red
+        !props.isInvalidInput ? theme.dividerColor : theme.errorColor
       }`,
       alignItems: 'center',
       paddingLeft: 4,
@@ -61,9 +60,12 @@ export const SearchInput = styled(Input)<{
   marginLeft: 2,
   marginRight: 8,
   width: '100%',
-  color: props.regex && !props.isValidInput ? colors.red : colors.black,
+  color:
+    props.regex && !props.isValidInput
+      ? theme.errorColor
+      : theme.textColorPrimary,
   '&::-webkit-input-placeholder': {
-    color: colors.placeholder,
+    color: theme.textColorPlaceholder,
     fontWeight: 300,
   },
 }));
@@ -81,7 +83,7 @@ const Clear = styled(Text)({
   lineHeight: '15.5px',
   textAlign: 'center',
   backgroundColor: 'rgba(0,0,0,0.1)',
-  color: colors.white,
+  color: theme.textColorPrimary,
   display: 'block',
   '&:hover': {
     backgroundColor: 'rgba(0,0,0,0.15)',
@@ -479,7 +481,7 @@ export default function Searchable(
             <SearchBox tabIndex={-1}>
               <SearchIcon
                 name="magnifying-glass"
-                color={colors.macOSTitleBarIcon}
+                color={theme.textColorSecondary}
                 size={16}
               />
               {this.state.filters.map((filter, i) => (

desktop/plugins/public/navigation/components/BookmarksSidebar.tsx

@@ -11,7 +11,6 @@ import {
   DetailSidebar,
   FlexCenter,
   styled,
-  colors,
   FlexRow,
   FlexColumn,
   Text,
@@ -20,6 +19,7 @@ import {
 import {Bookmark, URI} from '../types';
 import {IconButton} from './';
 import React from 'react';
+import {theme} from 'flipper-plugin';
 
 type Props = {
   bookmarks: Map<string, Bookmark>;
@@ -29,14 +29,14 @@ type Props = {
 
 const NoData = styled(FlexCenter)({
   fontSize: 18,
-  color: colors.macOSTitleBarIcon,
+  color: theme.textColorSecondary,
 });
 
 const BookmarksList = styled.div({
   overflowY: 'scroll',
   overflowX: 'hidden',
   height: '100%',
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
 });
 
 const BookmarkContainer = styled(FlexRow)({
@@ -45,16 +45,12 @@ const BookmarkContainer = styled(FlexRow)({
   height: 55,
   alignItems: 'center',
   cursor: 'pointer',
-  borderBottom: `1px ${colors.greyTint} solid`,
+  borderBottom: `1px ${theme.dividerColor} solid`,
   ':last-child': {
     borderBottom: '0',
   },
   ':active': {
-    backgroundColor: colors.highlight,
+    backgroundColor: theme.backgroundWash,
-    color: colors.white,
-  },
-  ':active *': {
-    color: colors.white,
   },
 });
 
@@ -70,7 +66,7 @@ const BookmarkSubtitle = styled(Text)({
   overflowX: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  color: colors.greyTint3,
+  color: theme.textColorSecondary,
   marginTop: 4,
 });
 
@@ -110,7 +106,7 @@ export default (props: Props) => {
                     )}
                   </TextContainer>
                   <IconButton
-                    color={colors.macOSTitleBarButtonBackgroundActive}
+                    color={theme.textColorSecondary}
                     outline={false}
                     icon="cross-circle"
                     size={16}

desktop/plugins/public/navigation/components/NavigationInfoBox.tsx

@@ -19,6 +19,7 @@ import {
 } from 'flipper';
 import {parseURIParameters, stripQueryParameters} from '../util/uri';
 import React from 'react';
+import {theme} from 'flipper-plugin';
 
 const BOX_HEIGHT = 240;
 
@@ -81,7 +82,7 @@ const NavigationInfoBoxContainer = styled.div({
   flexGrow: 1,
   position: 'relative',
   marginBottom: 10,
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });
 
@@ -117,7 +118,7 @@ const TimelineCircle = styled.div({
   height: 18,
   top: 11,
   left: -33,
-  backgroundColor: colors.light02,
+  backgroundColor: theme.backgroundWash,
   border: `4px solid ${colors.highlight}`,
   borderRadius: '50%',
   position: 'absolute',
@@ -129,7 +130,7 @@ const TimelineMiniCircle = styled.div({
   top: 1,
   left: -30,
   borderRadius: '50%',
-  backgroundColor: colors.highlight,
+  backgroundColor: theme.textColorActive,
   position: 'absolute',
 });
 

desktop/plugins/public/navigation/components/Timeline.tsx

@@ -7,10 +7,11 @@
  * @format
  */
 
-import {colors, FlexCenter, styled} from 'flipper';
+import {FlexCenter, styled} from 'flipper';
 import {NavigationInfoBox} from './';
 import {Bookmark, NavigationEvent, URI} from '../types';
 import React, {useRef} from 'react';
+import {theme} from 'flipper-plugin';
 
 type Props = {
   bookmarks: Map<string, Bookmark>;
@@ -21,7 +22,7 @@ type Props = {
 
 const TimelineLine = styled.div({
   width: 2,
-  backgroundColor: colors.highlight,
+  backgroundColor: theme.textColorActive,
   position: 'absolute',
   top: 38,
   bottom: 0,
@@ -32,7 +33,7 @@ const TimelineContainer = styled.div({
   paddingLeft: 25,
   overflowY: 'scroll',
   flexGrow: 1,
-  backgroundColor: colors.light02,
+  backgroundColor: theme.backgroundWash,
   scrollBehavior: 'smooth',
   '&>div': {
     position: 'relative',
@@ -53,8 +54,8 @@ const NavigationEventContainer = styled.div({
 const NoData = styled(FlexCenter)({
   height: '100%',
   fontSize: 18,
-  backgroundColor: colors.macOSTitleBarBackgroundBlur,
+  backgroundColor: theme.backgroundWash,
-  color: colors.macOSTitleBarIcon,
+  color: theme.textColorSecondary,
 });
 
 export default (props: Props) => {

desktop/themes/dark.less

@@ -47,7 +47,7 @@
 // Divider color
 @divider-color: #181818; // white 10%
 
-::-webkit-scrollbar { width: 8px;}
+::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track-piece { background-color: transparent; }
-::-webkit-scrollbar-thumb { height: 50px; background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}
+::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}
 ::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.7);}