Update icon
This commit is contained in:
Nate Butler
parent
f6f09e8661
commit
6497ca8ccb
4 changed files with 296 additions and 292 deletions
|
|
@ -1,3 +1,5 @@
|
||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M4.2 6.00001C5.52563 6.00001 6.6 4.92545 6.6 3.60001C6.6 2.27457 5.52563 1.20001 4.2 1.20001C2.87438 1.20001 1.8 2.27457 1.8 3.60001C1.8 4.92545 2.87438 6.00001 4.2 6.00001ZM5.15063 6.90001H3.24938C1.45519 6.90001 0 8.35501 0 10.1494C0 10.5094 0.291 10.8 0.649875 10.8H7.7505C8.10938 10.8 8.4 10.5094 8.4 10.1494C8.4 8.35501 6.945 6.90001 5.15063 6.90001ZM11.55 4.95001H10.65V4.05001C10.65 3.80251 10.4494 3.60001 10.2 3.60001C9.95063 3.60001 9.75 3.80157 9.75 4.05001V4.95001H8.85C8.6025 4.95001 8.4 5.15251 8.4 5.40001C8.4 5.64751 8.60156 5.85001 8.85 5.85001H9.75V6.75001C9.75 6.99939 9.9525 7.20001 10.2 7.20001C10.4475 7.20001 10.65 6.99845 10.65 6.75001V5.85001H11.55C11.7994 5.85001 12 5.64939 12 5.40001C12 5.15064 11.7994 4.95001 11.55 4.95001Z" fill="white"/>
|
<path d="M5.75062 7.09998H3.24938C1.45519 7.09998 0 8.55498 0 10.3493C0 10.7093 0.291 11 0.649875 11H8.3505C8.70938 11 9 10.7093 9 10.3493C9 8.55498 7.545 7.09998 5.75062 7.09998Z" fill="white"/>
|
||||||
|
<path d="M7 3.5C7 4.82544 5.82562 6 4.5 6C3.17438 6 2 4.82544 2 3.5C2 2.17456 3.17438 1 4.5 1C5.82562 1 7 2.17456 7 3.5Z" fill="white"/>
|
||||||
|
<path d="M9.5 3.75V5.5M9.5 7.25V5.5M9.5 5.5H11.25M9.5 5.5H7.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 882 B After Width: | Height: | Size: 564 B |
|
|
@ -1,3 +1,5 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M5.9 8.00002C7.44656 8.00002 8.7 6.74637 8.7 5.20002C8.7 3.65368 7.44656 2.40002 5.9 2.40002C4.35344 2.40002 3.1 3.65368 3.1 5.20002C3.1 6.74637 4.35344 8.00002 5.9 8.00002ZM7.00906 9.05002H4.79094C2.69772 9.05002 1 10.7475 1 12.841C1 13.261 1.3395 13.6 1.75819 13.6H10.0422C10.4609 13.6 10.8 13.261 10.8 12.841C10.8 10.7475 9.1025 9.05002 7.00906 9.05002ZM14.475 6.77502H13.425V5.72502C13.425 5.43627 13.1909 5.20002 12.9 5.20002C12.6091 5.20002 12.375 5.43518 12.375 5.72502V6.77502H11.325C11.0363 6.77502 10.8 7.01127 10.8 7.30002C10.8 7.58877 11.0352 7.82502 11.325 7.82502H12.375V8.87502C12.375 9.16596 12.6112 9.40002 12.9 9.40002C13.1887 9.40002 13.425 9.16487 13.425 8.87502V7.82502H14.475C14.7659 7.82502 15 7.59096 15 7.30002C15 7.00909 14.7659 6.77502 14.475 6.77502Z" fill="white"/>
|
<path d="M7.00906 8.99999H4.79094C2.69772 8.99999 1 11.1475 1 13.2409C1 13.6609 1.3395 14 1.75819 14H10.0422C10.4609 14 10.8 13.6609 10.8 13.2409C10.8 11.1475 9.1025 8.99999 7.00906 8.99999Z" fill="white"/>
|
||||||
|
<path d="M9 5C9 6.54634 7.44657 7.99998 5.90001 7.99998C4.35344 7.99998 3 6.54634 3 5C3 3.45366 4.45344 2 6 2C7.54656 2 9 3.45366 9 5Z" fill="white"/>
|
||||||
|
<path d="M13.025 6H14.475C14.7659 6 15 6.20906 15 6.5C15 6.79094 14.7659 7 14.475 7H13V8.49995C13 8.7898 12.7638 9.02495 12.475 9.02495C12.1863 9.02495 11.95 8.79089 11.95 8.49995V7H10.525C10.2352 7 10 6.78875 10 6.5C10 6.21125 10.2362 6 10.525 6H11.975V4.525C11.975 4.23516 12.2091 4 12.5 4C12.7909 4 13.025 4.23625 13.025 4.525V6Z" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 907 B After Width: | Height: | Size: 810 B |
|
|
@ -379,7 +379,7 @@ impl CollabTitlebarItem {
|
||||||
let style = titlebar
|
let style = titlebar
|
||||||
.toggle_contacts_button
|
.toggle_contacts_button
|
||||||
.style_for(state, self.contacts_popover.is_some());
|
.style_for(state, self.contacts_popover.is_some());
|
||||||
Svg::new("icons/plus_8.svg")
|
Svg::new("icons/user_plus_16.svg")
|
||||||
.with_color(style.color)
|
.with_color(style.color)
|
||||||
.constrained()
|
.constrained()
|
||||||
.with_width(style.icon_width)
|
.with_width(style.icon_width)
|
||||||
|
|
|
||||||
|
|
@ -5,302 +5,302 @@ import statusBar from "./statusBar"
|
||||||
import tabBar from "./tabBar"
|
import tabBar from "./tabBar"
|
||||||
|
|
||||||
export default function workspace(colorScheme: ColorScheme) {
|
export default function workspace(colorScheme: ColorScheme) {
|
||||||
const layer = colorScheme.lowest
|
const layer = colorScheme.lowest
|
||||||
const itemSpacing = 8
|
const itemSpacing = 8
|
||||||
const titlebarButton = {
|
const titlebarButton = {
|
||||||
cornerRadius: 6,
|
cornerRadius: 6,
|
||||||
padding: {
|
padding: {
|
||||||
top: 1,
|
top: 1,
|
||||||
bottom: 1,
|
bottom: 1,
|
||||||
left: 8,
|
left: 8,
|
||||||
right: 8,
|
right: 8,
|
||||||
|
},
|
||||||
|
...text(layer, "sans", "variant", { size: "xs" }),
|
||||||
|
background: background(layer, "variant"),
|
||||||
|
border: border(layer),
|
||||||
|
hover: {
|
||||||
|
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
|
||||||
|
background: background(layer, "variant", "hovered"),
|
||||||
|
border: border(layer, "variant", "hovered"),
|
||||||
|
},
|
||||||
|
clicked: {
|
||||||
|
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
|
||||||
|
background: background(layer, "variant", "pressed"),
|
||||||
|
border: border(layer, "variant", "pressed"),
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
||||||
|
background: background(layer, "variant", "active"),
|
||||||
|
border: border(layer, "variant", "active"),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const avatarWidth = 18
|
||||||
|
const avatarOuterWidth = avatarWidth + 4
|
||||||
|
const followerAvatarWidth = 14
|
||||||
|
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||||
|
|
||||||
|
return {
|
||||||
|
background: background(colorScheme.lowest),
|
||||||
|
blankPane: {
|
||||||
|
logoContainer: {
|
||||||
|
width: 256,
|
||||||
|
height: 256,
|
||||||
|
},
|
||||||
|
logo: {
|
||||||
|
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||||
|
icon: "icons/logo_96.svg",
|
||||||
|
dimensions: {
|
||||||
|
width: 256,
|
||||||
|
height: 256,
|
||||||
},
|
},
|
||||||
...text(layer, "sans", "variant", { size: "xs" }),
|
},
|
||||||
background: background(layer, "variant"),
|
logoShadow: {
|
||||||
border: border(layer),
|
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
||||||
|
icon: "icons/logo_96.svg",
|
||||||
|
dimensions: {
|
||||||
|
width: 256,
|
||||||
|
height: 256,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
keyboardHints: {
|
||||||
|
margin: {
|
||||||
|
top: 96,
|
||||||
|
},
|
||||||
|
cornerRadius: 4,
|
||||||
|
},
|
||||||
|
keyboardHint: {
|
||||||
|
...text(layer, "sans", "variant", { size: "sm" }),
|
||||||
|
padding: {
|
||||||
|
top: 3,
|
||||||
|
left: 8,
|
||||||
|
right: 8,
|
||||||
|
bottom: 3
|
||||||
|
},
|
||||||
|
cornerRadius: 8,
|
||||||
hover: {
|
hover: {
|
||||||
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
|
...text(layer, "sans", "active", { size: "sm" }),
|
||||||
background: background(layer, "variant", "hovered"),
|
}
|
||||||
border: border(layer, "variant", "hovered"),
|
},
|
||||||
|
keyboardHintWidth: 320,
|
||||||
|
},
|
||||||
|
joiningProjectAvatar: {
|
||||||
|
cornerRadius: 40,
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
joiningProjectMessage: {
|
||||||
|
padding: 12,
|
||||||
|
...text(layer, "sans", { size: "lg" }),
|
||||||
|
},
|
||||||
|
externalLocationMessage: {
|
||||||
|
background: background(colorScheme.middle, "accent"),
|
||||||
|
border: border(colorScheme.middle, "accent"),
|
||||||
|
cornerRadius: 6,
|
||||||
|
padding: 12,
|
||||||
|
margin: { bottom: 8, right: 8 },
|
||||||
|
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
||||||
|
},
|
||||||
|
leaderBorderOpacity: 0.7,
|
||||||
|
leaderBorderWidth: 2.0,
|
||||||
|
tabBar: tabBar(colorScheme),
|
||||||
|
modal: {
|
||||||
|
margin: {
|
||||||
|
bottom: 52,
|
||||||
|
top: 52,
|
||||||
|
},
|
||||||
|
cursor: "Arrow",
|
||||||
|
},
|
||||||
|
sidebar: {
|
||||||
|
initialSize: 240,
|
||||||
|
border: border(layer, { left: true, right: true }),
|
||||||
|
},
|
||||||
|
paneDivider: {
|
||||||
|
color: borderColor(layer),
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
statusBar: statusBar(colorScheme),
|
||||||
|
titlebar: {
|
||||||
|
itemSpacing,
|
||||||
|
facePileSpacing: 2,
|
||||||
|
height: 33, // 32px + 1px for overlaid border
|
||||||
|
background: background(layer),
|
||||||
|
border: border(layer, { bottom: true, overlay: true }),
|
||||||
|
padding: {
|
||||||
|
left: 80,
|
||||||
|
right: itemSpacing,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Project
|
||||||
|
title: text(layer, "sans", "variant"),
|
||||||
|
|
||||||
|
// Collaborators
|
||||||
|
leaderAvatar: {
|
||||||
|
width: avatarWidth,
|
||||||
|
outerWidth: avatarOuterWidth,
|
||||||
|
cornerRadius: avatarWidth / 2,
|
||||||
|
outerCornerRadius: avatarOuterWidth / 2,
|
||||||
|
},
|
||||||
|
followerAvatar: {
|
||||||
|
width: followerAvatarWidth,
|
||||||
|
outerWidth: followerAvatarOuterWidth,
|
||||||
|
cornerRadius: followerAvatarWidth / 2,
|
||||||
|
outerCornerRadius: followerAvatarOuterWidth / 2,
|
||||||
|
},
|
||||||
|
inactiveAvatarGrayscale: true,
|
||||||
|
followerAvatarOverlap: 8,
|
||||||
|
leaderSelection: {
|
||||||
|
margin: {
|
||||||
|
top: 4,
|
||||||
|
bottom: 4,
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
left: 2,
|
||||||
|
right: 2,
|
||||||
|
top: 4,
|
||||||
|
bottom: 4,
|
||||||
|
},
|
||||||
|
cornerRadius: 6,
|
||||||
|
},
|
||||||
|
avatarRibbon: {
|
||||||
|
height: 3,
|
||||||
|
width: 12,
|
||||||
|
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
||||||
|
},
|
||||||
|
|
||||||
|
// Sign in buttom
|
||||||
|
// FlatButton, Variant
|
||||||
|
signInPrompt: {
|
||||||
|
...titlebarButton,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Offline Indicator
|
||||||
|
offlineIcon: {
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
width: 16,
|
||||||
|
margin: {
|
||||||
|
left: itemSpacing,
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
right: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Notice that the collaboration server is out of date
|
||||||
|
outdatedWarning: {
|
||||||
|
...text(layer, "sans", "warning", { size: "xs" }),
|
||||||
|
background: withOpacity(background(layer, "warning"), 0.3),
|
||||||
|
border: border(layer, "warning"),
|
||||||
|
margin: {
|
||||||
|
left: itemSpacing,
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
left: 8,
|
||||||
|
right: 8,
|
||||||
|
},
|
||||||
|
cornerRadius: 6,
|
||||||
|
},
|
||||||
|
callControl: {
|
||||||
|
cornerRadius: 6,
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
iconWidth: 12,
|
||||||
|
buttonWidth: 20,
|
||||||
|
hover: {
|
||||||
|
background: background(layer, "variant", "hovered"),
|
||||||
|
color: foreground(layer, "variant", "hovered"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toggleContactsButton: {
|
||||||
|
margin: { left: itemSpacing },
|
||||||
|
cornerRadius: 6,
|
||||||
|
color: foreground(layer, "variant"),
|
||||||
|
iconWidth: 14,
|
||||||
|
buttonWidth: 20,
|
||||||
|
active: {
|
||||||
|
background: background(layer, "variant", "active"),
|
||||||
|
color: foreground(layer, "variant", "active"),
|
||||||
},
|
},
|
||||||
clicked: {
|
clicked: {
|
||||||
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
|
background: background(layer, "variant", "pressed"),
|
||||||
background: background(layer, "variant", "pressed"),
|
color: foreground(layer, "variant", "pressed"),
|
||||||
border: border(layer, "variant", "pressed"),
|
|
||||||
},
|
},
|
||||||
active: {
|
hover: {
|
||||||
...text(layer, "sans", "variant", "active", { size: "xs" }),
|
background: background(layer, "variant", "hovered"),
|
||||||
background: background(layer, "variant", "active"),
|
color: foreground(layer, "variant", "hovered"),
|
||||||
border: border(layer, "variant", "active"),
|
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
const avatarWidth = 18
|
userMenuButton: {
|
||||||
const avatarOuterWidth = avatarWidth + 4
|
buttonWidth: 20,
|
||||||
const followerAvatarWidth = 14
|
iconWidth: 12,
|
||||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
...titlebarButton,
|
||||||
|
},
|
||||||
|
toggleContactsBadge: {
|
||||||
|
cornerRadius: 3,
|
||||||
|
padding: 2,
|
||||||
|
margin: { top: 3, left: 3 },
|
||||||
|
border: border(layer),
|
||||||
|
background: foreground(layer, "accent"),
|
||||||
|
},
|
||||||
|
shareButton: {
|
||||||
|
...titlebarButton,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
return {
|
toolbar: {
|
||||||
background: background(colorScheme.lowest),
|
height: 34,
|
||||||
blankPane: {
|
background: background(colorScheme.highest),
|
||||||
logoContainer: {
|
border: border(colorScheme.highest, { bottom: true }),
|
||||||
width: 256,
|
itemSpacing: 8,
|
||||||
height: 256,
|
navButton: {
|
||||||
},
|
color: foreground(colorScheme.highest, "on"),
|
||||||
logo: {
|
iconWidth: 12,
|
||||||
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
buttonWidth: 24,
|
||||||
icon: "icons/logo_96.svg",
|
cornerRadius: 6,
|
||||||
dimensions: {
|
hover: {
|
||||||
width: 256,
|
color: foreground(colorScheme.highest, "on", "hovered"),
|
||||||
height: 256,
|
background: background(
|
||||||
},
|
colorScheme.highest,
|
||||||
},
|
"on",
|
||||||
logoShadow: {
|
"hovered"
|
||||||
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
),
|
||||||
icon: "icons/logo_96.svg",
|
|
||||||
dimensions: {
|
|
||||||
width: 256,
|
|
||||||
height: 256,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
keyboardHints: {
|
|
||||||
margin: {
|
|
||||||
top: 96,
|
|
||||||
},
|
|
||||||
cornerRadius: 4,
|
|
||||||
},
|
|
||||||
keyboardHint: {
|
|
||||||
...text(layer, "sans", "variant", { size: "sm" }),
|
|
||||||
padding: {
|
|
||||||
top: 3,
|
|
||||||
left: 8,
|
|
||||||
right: 8,
|
|
||||||
bottom: 3
|
|
||||||
},
|
|
||||||
cornerRadius: 8,
|
|
||||||
hover: {
|
|
||||||
...text(layer, "sans", "active", { size: "sm" }),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
keyboardHintWidth: 320,
|
|
||||||
},
|
},
|
||||||
joiningProjectAvatar: {
|
disabled: {
|
||||||
cornerRadius: 40,
|
color: foreground(colorScheme.highest, "on", "disabled"),
|
||||||
width: 80,
|
|
||||||
},
|
},
|
||||||
joiningProjectMessage: {
|
},
|
||||||
padding: 12,
|
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||||
...text(layer, "sans", { size: "lg" }),
|
},
|
||||||
},
|
breadcrumbs: {
|
||||||
externalLocationMessage: {
|
...text(layer, "mono", "variant"),
|
||||||
background: background(colorScheme.middle, "accent"),
|
padding: { left: 6 },
|
||||||
border: border(colorScheme.middle, "accent"),
|
},
|
||||||
cornerRadius: 6,
|
disconnectedOverlay: {
|
||||||
padding: 12,
|
...text(layer, "sans"),
|
||||||
margin: { bottom: 8, right: 8 },
|
background: withOpacity(background(layer), 0.8),
|
||||||
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
|
},
|
||||||
},
|
notification: {
|
||||||
leaderBorderOpacity: 0.7,
|
margin: { top: 10 },
|
||||||
leaderBorderWidth: 2.0,
|
background: background(colorScheme.middle),
|
||||||
tabBar: tabBar(colorScheme),
|
cornerRadius: 6,
|
||||||
modal: {
|
padding: 12,
|
||||||
margin: {
|
border: border(colorScheme.middle),
|
||||||
bottom: 52,
|
shadow: colorScheme.popoverShadow,
|
||||||
top: 52,
|
},
|
||||||
},
|
notifications: {
|
||||||
cursor: "Arrow",
|
width: 400,
|
||||||
},
|
margin: { right: 10, bottom: 10 },
|
||||||
sidebar: {
|
},
|
||||||
initialSize: 240,
|
dock: {
|
||||||
border: border(layer, { left: true, right: true }),
|
initialSizeRight: 640,
|
||||||
},
|
initialSizeBottom: 304,
|
||||||
paneDivider: {
|
wash_color: withOpacity(background(colorScheme.highest), 0.5),
|
||||||
color: borderColor(layer),
|
panel: {
|
||||||
width: 1,
|
border: border(colorScheme.middle),
|
||||||
},
|
},
|
||||||
statusBar: statusBar(colorScheme),
|
maximized: {
|
||||||
titlebar: {
|
margin: 32,
|
||||||
itemSpacing,
|
border: border(colorScheme.highest, { overlay: true }),
|
||||||
facePileSpacing: 2,
|
shadow: colorScheme.modalShadow,
|
||||||
height: 33, // 32px + 1px for overlaid border
|
},
|
||||||
background: background(layer),
|
},
|
||||||
border: border(layer, { bottom: true, overlay: true }),
|
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
||||||
padding: {
|
}
|
||||||
left: 80,
|
|
||||||
right: itemSpacing,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Project
|
|
||||||
title: text(layer, "sans", "variant"),
|
|
||||||
|
|
||||||
// Collaborators
|
|
||||||
leaderAvatar: {
|
|
||||||
width: avatarWidth,
|
|
||||||
outerWidth: avatarOuterWidth,
|
|
||||||
cornerRadius: avatarWidth / 2,
|
|
||||||
outerCornerRadius: avatarOuterWidth / 2,
|
|
||||||
},
|
|
||||||
followerAvatar: {
|
|
||||||
width: followerAvatarWidth,
|
|
||||||
outerWidth: followerAvatarOuterWidth,
|
|
||||||
cornerRadius: followerAvatarWidth / 2,
|
|
||||||
outerCornerRadius: followerAvatarOuterWidth / 2,
|
|
||||||
},
|
|
||||||
inactiveAvatarGrayscale: true,
|
|
||||||
followerAvatarOverlap: 8,
|
|
||||||
leaderSelection: {
|
|
||||||
margin: {
|
|
||||||
top: 4,
|
|
||||||
bottom: 4,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
left: 2,
|
|
||||||
right: 2,
|
|
||||||
top: 4,
|
|
||||||
bottom: 4,
|
|
||||||
},
|
|
||||||
cornerRadius: 6,
|
|
||||||
},
|
|
||||||
avatarRibbon: {
|
|
||||||
height: 3,
|
|
||||||
width: 12,
|
|
||||||
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
|
|
||||||
},
|
|
||||||
|
|
||||||
// Sign in buttom
|
|
||||||
// FlatButton, Variant
|
|
||||||
signInPrompt: {
|
|
||||||
...titlebarButton,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Offline Indicator
|
|
||||||
offlineIcon: {
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
width: 16,
|
|
||||||
margin: {
|
|
||||||
left: itemSpacing,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
right: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// Notice that the collaboration server is out of date
|
|
||||||
outdatedWarning: {
|
|
||||||
...text(layer, "sans", "warning", { size: "xs" }),
|
|
||||||
background: withOpacity(background(layer, "warning"), 0.3),
|
|
||||||
border: border(layer, "warning"),
|
|
||||||
margin: {
|
|
||||||
left: itemSpacing,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
left: 8,
|
|
||||||
right: 8,
|
|
||||||
},
|
|
||||||
cornerRadius: 6,
|
|
||||||
},
|
|
||||||
callControl: {
|
|
||||||
cornerRadius: 6,
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
iconWidth: 12,
|
|
||||||
buttonWidth: 20,
|
|
||||||
hover: {
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
color: foreground(layer, "variant", "hovered"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
toggleContactsButton: {
|
|
||||||
margin: { left: itemSpacing },
|
|
||||||
cornerRadius: 6,
|
|
||||||
color: foreground(layer, "variant"),
|
|
||||||
iconWidth: 8,
|
|
||||||
buttonWidth: 20,
|
|
||||||
active: {
|
|
||||||
background: background(layer, "variant", "active"),
|
|
||||||
color: foreground(layer, "variant", "active"),
|
|
||||||
},
|
|
||||||
clicked: {
|
|
||||||
background: background(layer, "variant", "pressed"),
|
|
||||||
color: foreground(layer, "variant", "pressed"),
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
background: background(layer, "variant", "hovered"),
|
|
||||||
color: foreground(layer, "variant", "hovered"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
userMenuButton: {
|
|
||||||
buttonWidth: 20,
|
|
||||||
iconWidth: 12,
|
|
||||||
...titlebarButton,
|
|
||||||
},
|
|
||||||
toggleContactsBadge: {
|
|
||||||
cornerRadius: 3,
|
|
||||||
padding: 2,
|
|
||||||
margin: { top: 3, left: 3 },
|
|
||||||
border: border(layer),
|
|
||||||
background: foreground(layer, "accent"),
|
|
||||||
},
|
|
||||||
shareButton: {
|
|
||||||
...titlebarButton,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
toolbar: {
|
|
||||||
height: 34,
|
|
||||||
background: background(colorScheme.highest),
|
|
||||||
border: border(colorScheme.highest, { bottom: true }),
|
|
||||||
itemSpacing: 8,
|
|
||||||
navButton: {
|
|
||||||
color: foreground(colorScheme.highest, "on"),
|
|
||||||
iconWidth: 12,
|
|
||||||
buttonWidth: 24,
|
|
||||||
cornerRadius: 6,
|
|
||||||
hover: {
|
|
||||||
color: foreground(colorScheme.highest, "on", "hovered"),
|
|
||||||
background: background(
|
|
||||||
colorScheme.highest,
|
|
||||||
"on",
|
|
||||||
"hovered"
|
|
||||||
),
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
color: foreground(colorScheme.highest, "on", "disabled"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
|
||||||
},
|
|
||||||
breadcrumbs: {
|
|
||||||
...text(layer, "mono", "variant"),
|
|
||||||
padding: { left: 6 },
|
|
||||||
},
|
|
||||||
disconnectedOverlay: {
|
|
||||||
...text(layer, "sans"),
|
|
||||||
background: withOpacity(background(layer), 0.8),
|
|
||||||
},
|
|
||||||
notification: {
|
|
||||||
margin: { top: 10 },
|
|
||||||
background: background(colorScheme.middle),
|
|
||||||
cornerRadius: 6,
|
|
||||||
padding: 12,
|
|
||||||
border: border(colorScheme.middle),
|
|
||||||
shadow: colorScheme.popoverShadow,
|
|
||||||
},
|
|
||||||
notifications: {
|
|
||||||
width: 400,
|
|
||||||
margin: { right: 10, bottom: 10 },
|
|
||||||
},
|
|
||||||
dock: {
|
|
||||||
initialSizeRight: 640,
|
|
||||||
initialSizeBottom: 304,
|
|
||||||
wash_color: withOpacity(background(colorScheme.highest), 0.5),
|
|
||||||
panel: {
|
|
||||||
border: border(colorScheme.middle),
|
|
||||||
},
|
|
||||||
maximized: {
|
|
||||||
margin: 32,
|
|
||||||
border: border(colorScheme.highest, { overlay: true }),
|
|
||||||
shadow: colorScheme.modalShadow,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue