mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-25 02:31:59 -05:00
🎨 Admin visual design updates (#21987)
ref DES-797 A lot of visual details of the Admin is outdated and inconsistent with newer UI components such as settings. This PR improves several of these inconsistencies and refreshes the visual design of the Admin outside settings. In details the following components have been updated: - Input fields and dropdowns use grey background color in Post settings menu when not in-focus - Got rid of the grey background for sections in Member details and Tag details - Updated typography details esp. as font-weights and sizes - Updated modal corners, shadows - Added a way to close the main navigation - Updated main navigation styles - Added flat background color for list items on hover - Updated subscription cards in Member details - Further smaller visual design changes
This commit is contained in:
Peter Zimon
GitHub
parent
83d7691fe9
commit
9f13ad0716
35 changed files with 584 additions and 264 deletions
|
|
@ -13,7 +13,7 @@ const SettingGroupHeader: React.FC<SettingGroupHeaderProps> = ({title, descripti
|
|||
<div className="flex items-start justify-between gap-4">
|
||||
{(title || description) &&
|
||||
<div>
|
||||
<Heading level={5}>{title}{beta && <sup className='ml-0.5 text-[10px] font-semibold uppercase tracking-wide'>Beta</sup>}</Heading>
|
||||
<Heading className='font-semibold' level={5}>{title}{beta && <sup className='ml-0.5 text-[10px] font-semibold uppercase tracking-wide'>Beta</sup>}</Heading>
|
||||
{description && <p className="mt-1 hidden max-w-md group-[.is-not-editing]/setting-group:!visible group-[.is-not-editing]/setting-group:!block md:!visible md:!block">{description}</p>}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ const SettingNavItem = forwardRef<HTMLLIElement, SettingNavItemProps>(function S
|
|||
...props
|
||||
}, ref) {
|
||||
const classNames = clsx(
|
||||
'w-100 mt-1 flex h-[38px] cursor-pointer items-center rounded-lg px-3 py-2 text-left text-[14px] font-medium transition-all hover:bg-grey-200 focus:bg-grey-100 dark:text-grey-600 dark:hover:bg-grey-950 dark:focus:bg-grey-925',
|
||||
isCurrent ? 'bg-grey-250 text-black dark:bg-grey-925 dark:text-white' : 'text-grey-800',
|
||||
'w-100 mt-px flex h-[36px] cursor-pointer items-center rounded-md px-3 py-2 text-left text-[14px] font-medium transition-all hover:bg-grey-200 focus:bg-grey-100 dark:text-grey-600 dark:hover:bg-grey-950 dark:focus:bg-grey-925',
|
||||
isCurrent ? 'bg-grey-200 text-black dark:bg-grey-950 dark:text-white' : 'text-grey-800',
|
||||
!isVisible && 'hidden'
|
||||
);
|
||||
|
||||
return (
|
||||
<li ref={ref} {...props}><a className={classNames} id={navid} onClick={onClick}>
|
||||
{icon && <Icon className='mr-[7px] h-[18px] w-[18px]' name={icon} size='custom' />}
|
||||
{icon && <Icon className='mr-[7px] h-[16px] w-[16px]' name={icon} size='custom' />}
|
||||
{title}
|
||||
</a></li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export interface SettingSectionHeaderProps {
|
|||
|
||||
const SettingSectionHeader: React.FC<SettingSectionHeaderProps> = ({title, sticky = false}) => {
|
||||
const classNames = clsx(
|
||||
'z-20 mb-px pb-10 text-3xl font-bold tracking-tighter',
|
||||
'z-20 mb-px pb-10 text-3xl font-bold tracking-tight',
|
||||
(sticky ? 'sticky top-0 mt-[calc(-8vmin-4px)] bg-gradient-to-t from-transparent via-white via-20% to-white pt-[calc(8vmin-4px)] dark:bg-black' : 'mt-[-5px]')
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -88,11 +88,13 @@
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
Used to be for fixed bottom mobile menu bar
|
||||
@media (max-width: 800px) {
|
||||
.admin-x-base {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.admin-x-base.dark {
|
||||
color: #FAFAFB;
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ module.exports = {
|
|||
lg: '1.65rem',
|
||||
xl: '2rem',
|
||||
'2xl': '2.4rem',
|
||||
'3xl': '3.2rem',
|
||||
'3xl': '2.8rem',
|
||||
'4xl': '3.6rem',
|
||||
'5xl': ['4.2rem', '1.15'],
|
||||
'6xl': ['6rem', '1'],
|
||||
|
|
|
|||
|
|
@ -72,12 +72,12 @@ const MainContent: React.FC = () => {
|
|||
return (
|
||||
<Page>
|
||||
{loadingModal && <div className={`fixed inset-0 z-40 h-[calc(100vh-55px)] w-[100vw] tablet:h-[100vh] ${topLevelBackdropClasses}`} />}
|
||||
<div className="no-scrollbar fixed inset-x-0 top-0 z-[35] flex-1 basis-[320px] bg-white p-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:py-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
|
||||
<div className="no-scrollbar fixed inset-x-0 top-0 z-[35] flex-1 basis-[320px] bg-white p-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:py-0 dark:tablet:bg-[#101114]" id="admin-x-settings-sidebar-scroller">
|
||||
<div className="relative w-full">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-full flex-1 overflow-y-scroll bg-white pt-11 dark:bg-black tablet:basis-[800px]" id="admin-x-settings-scroller">
|
||||
<div className="relative h-full flex-1 overflow-y-scroll bg-white pt-12 dark:bg-black tablet:basis-[800px]" id="admin-x-settings-scroller">
|
||||
<Settings />
|
||||
</div>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ const Sidebar: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className='ml-auto flex w-full flex-col pt-0 tablet:max-w-[240px]' data-testid="sidebar">
|
||||
<div className='sticky top-0 flex content-stretch items-end dark:bg-grey-975 tablet:h-20 tablet:bg-grey-50 dark:tablet:bg-black xl:h-20'>
|
||||
<div className='sticky top-0 flex content-stretch items-end dark:bg-grey-975 tablet:h-20 tablet:bg-grey-50 dark:tablet:bg-[#101114] xl:h-20'>
|
||||
<div className='relative w-full'>
|
||||
<Icon className='absolute left-3 top-3 z-10' colorClass='text-grey-500' name='magnifying-glass' size='sm' />
|
||||
<TextField
|
||||
|
|
|
|||
|
|
@ -201,3 +201,6 @@ remove|ember-template-lint|no-action|10|110|10|110|4bbb6ad1f623335866ac715f34f2c
|
|||
remove|ember-template-lint|no-action|31|30|31|30|8eee88dbd40609f8ddc00330f4a47b1d30c483f0|1728345600000|1738717200000|1743897600000|app/components/gh-nav-menu/main.hbs
|
||||
remove|ember-template-lint|no-invalid-interactive|31|30|31|30|929269f70336deb9f640bc0b5d54a0bd5336d27a|1728345600000|1738717200000|1743897600000|app/components/gh-nav-menu/main.hbs
|
||||
remove|ember-template-lint|no-invalid-link-title|27|24|27|24|17a357b69040eb9e19a79fe08468c698eab84939|1728345600000|1738717200000|1743897600000|app/components/gh-nav-menu/main.hbs
|
||||
add|ember-template-lint|no-invalid-interactive|41|26|41|26|da9f7c0f319619ff98a53fd679c47841cfaa3c1d|1736380800000|1746745200000|1751929200000|app/components/gh-nav-menu/main.hbs
|
||||
add|ember-template-lint|no-redundant-fn|5|70|5|70|d8c5269c9b4ca3aec0fc5b8e3d6a997e115dbc92|1736380800000|1746745200000|1751929200000|app/components/gh-nav-menu/main.hbs
|
||||
remove|ember-template-lint|no-invalid-interactive|34|26|34|26|0c04fbca90264398b6b5033632f3170c73d1769b|1734307200000|1744671600000|1749855600000|app/components/gh-nav-menu/main.hbs
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
</div>
|
||||
<div class="gh-dashboard-tooltip-value">
|
||||
<span class="indicator line"></span>
|
||||
<span class="value">–</span>
|
||||
<span class="metric">{{this.selectedDisplayOption.name}}</span>
|
||||
<span class="value">–</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -250,8 +250,8 @@ export default class Anchor extends Component {
|
|||
const canvasFill = document.createElement('canvas');
|
||||
const ctxFill = canvasFill.getContext('2d');
|
||||
const gradientFill = ctxFill.createLinearGradient(0, 0, 1000, 0);
|
||||
gradientFill.addColorStop(0, 'rgba(250, 45, 142, 0.2');
|
||||
gradientFill.addColorStop(1, 'rgba(143, 66, 255, 0.1');
|
||||
gradientFill.addColorStop(0, 'rgba(250, 45, 142, 0');
|
||||
gradientFill.addColorStop(1, 'rgba(143, 66, 255, 0');
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
|
|
@ -259,7 +259,7 @@ export default class Anchor extends Component {
|
|||
data: data,
|
||||
tension: 1,
|
||||
cubicInterpolationMode: 'monotone',
|
||||
fill: true,
|
||||
fill: false,
|
||||
fillColor: gradientFill,
|
||||
backgroundColor: gradientFill,
|
||||
pointRadius: 0,
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@
|
|||
-
|
||||
</div>
|
||||
<div class="gh-dashboard-tooltip-value">
|
||||
<div class="gh-dashboard-tooltip-value-1"><span class="indicator solid"></span><span class="value"></span></div>
|
||||
<div class="gh-dashboard-tooltip-value-1"><span class="metric">New</span></div>
|
||||
<div class="gh-dashboard-tooltip-value-2"><span class="indicator solid"></span><span class="value"></span></div>
|
||||
<div class="gh-dashboard-tooltip-value-2"><span class="metric">Canceled</span></div>
|
||||
<div class="gh-dashboard-tooltip-value-1"><span class="indicator solid"></span><span class="metric">New</span></div>
|
||||
<div class="gh-dashboard-tooltip-value-1"><span class="value"></span></div>
|
||||
<div class="gh-dashboard-tooltip-value-2"><span class="indicator solid"></span><span class="metric">Canceled</span></div>
|
||||
<div class="gh-dashboard-tooltip-value-2"><span class="value"></span></div>
|
||||
<div class="gh-dashboard-tooltip-value-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -486,7 +486,7 @@ export default class PaidMix extends Component {
|
|||
} else {
|
||||
value += '%';
|
||||
}
|
||||
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="value">${value}</span><span class="metric">${label}</span>`;
|
||||
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="metric">${label}</span><span class="value">${value}</span>`;
|
||||
},
|
||||
title: () => {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="flex flex-column">
|
||||
<div class="gh-canvas-title-container">
|
||||
{{#if this.customViews.activeView}}
|
||||
<div class="gh-canvas-breadcrumb">
|
||||
<LinkTo @route={{this.router.currentRouteName}} @query={{@query}}>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<LinkTo @route="dashboard" data-test-mobile-nav="dashboard">{{svg-jar "house"}}Dashboard</LinkTo>
|
||||
<LinkTo @route="dashboard" data-test-mobile-nav="dashboard">{{svg-jar "house"}}</LinkTo>
|
||||
{{#if (eq this.router.currentRouteName "posts")}}
|
||||
<LinkTo @route="posts" @query={{hash type=null}} class="active" data-test-mobile-nav="posts">{{svg-jar "posts"}}Posts</LinkTo>
|
||||
<LinkTo @route="posts" @query={{hash type=null}} class="active" data-test-mobile-nav="posts">{{svg-jar "posts"}}</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route="posts">{{svg-jar "content" data-test-mobile-nav="posts"}}Posts</LinkTo>
|
||||
<LinkTo @route="posts">{{svg-jar "posts" data-test-mobile-nav="posts" class="mobile-nav-posts-icon"}}</LinkTo>
|
||||
{{/if}}
|
||||
<LinkTo @route="members" class="gh-nav-main-users" data-test-mobile-nav="members">{{svg-jar "members"}}Members</LinkTo>
|
||||
<div
|
||||
role="button"
|
||||
class="gh-mobile-nav-bar-more"
|
||||
<LinkTo @route="members" class="gh-nav-main-users" data-test-mobile-nav="members">{{svg-jar "members" class="mobile-nav-members-icon"}}</LinkTo>
|
||||
<div
|
||||
role="button"
|
||||
class="gh-mobile-nav-bar-more"
|
||||
{{on "click" this.ui.toggleMobileMenu}}
|
||||
data-test-mobile-nav="more"
|
||||
>
|
||||
{{svg-jar "icon" class="icon-gh"}}More
|
||||
{{svg-jar "dotdotdot"}}
|
||||
</div>
|
||||
{{yield}}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<nav class="gh-nav {{if this.session.user.isContributor "gh-nav-contributor"}}" {{did-insert this.updateFirstRender}} ...attributes>
|
||||
<nav class="gh-nav {{if this.session.user.isContributor "gh-nav-contributor"}} {{unless this.navigation.settings.menu.visible "gh-nav-hidden"}}" {{did-insert this.updateFirstRender}} ...attributes>
|
||||
<GhNavMenu::Main @icon={{this.settings.settledIcon}} @firstRender={{this.firstRender}} />
|
||||
</nav>
|
||||
|
|
@ -5,6 +5,7 @@ import {inject as service} from '@ember/service';
|
|||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class GhNavMenuComponent extends Component {
|
||||
@service navigation;
|
||||
@service settings;
|
||||
@service ui;
|
||||
@service session;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<div class="flex flex-column h-100" {{css-transition (unless @firstRender "gh-nav-main" )}} data-test-nav-menu="main"
|
||||
...attributes>
|
||||
|
||||
<div class="gh-toggle-nav-menu">
|
||||
<button type="button" class="gh-btn-toggle-menu" {{on "click" (fn this.navigation.toggleMenu)}} title="Toggle sidebar">
|
||||
<div class="segment-1"></div>
|
||||
<div class="segment-2"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{#unless this.session.user.isContributor}}
|
||||
<header class="gh-nav-menu">
|
||||
<div class="gh-nav-menu-details">
|
||||
|
|
@ -31,7 +38,7 @@
|
|||
</li>
|
||||
{{/if}}
|
||||
<li class="relative">
|
||||
<span {{action "transitionToOrRefreshSite" on="click" }}>
|
||||
<span {{action "transitionToOrRefreshSite" on="click" }} class="{{if this.isOnSite "active"}}">
|
||||
<LinkTo @route="site" data-test-nav="site" @current-when={{this.isOnSite}}
|
||||
@preventDefault={{false}}>
|
||||
{{svg-jar "view-site"}} View site
|
||||
|
|
@ -57,9 +64,9 @@
|
|||
{{/if}}
|
||||
</ul>
|
||||
<ul class="gh-nav-list gh-nav-manage">
|
||||
<li class="gh-nav-list-new relative">
|
||||
<li class="gh-nav-list-new gh-nav-list-posts relative">
|
||||
<GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts" }}
|
||||
data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
|
||||
data-test-nav="posts">{{svg-jar "posts" class="gh-nav-posts-icon"}}Posts</GhLinkToCustomViewsIndex>
|
||||
<LinkTo @route="lexical-editor.new" @model="post" class="gh-secondary-action gh-nav-new-post"
|
||||
@alt="New post" title="New post" data-test-nav="new-story"><span>{{svg-jar "plus"}}</span>
|
||||
</LinkTo>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default class SourceAttributionChart extends Component {
|
|||
value = -value;
|
||||
}
|
||||
|
||||
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor[tooltipItems.index]}"></span><span class="value">${value}%</span><span class="metric">${label}</span>`;
|
||||
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor[tooltipItems.index]}"></span><span class="metric">${label}</span><span class="value">${value}%</span>`;
|
||||
},
|
||||
title: () => {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -16,4 +16,10 @@ export default class SettingsXRoute extends AuthenticatedRoute {
|
|||
super.deactivate(...arguments);
|
||||
this.ui.set('isFullScreen', false);
|
||||
}
|
||||
|
||||
buildRouteInfoMetadata() {
|
||||
return {
|
||||
bodyClasses: ['gh-body-fullscreen']
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ import {tracked} from '@glimmer/tracking';
|
|||
const DEFAULT_SETTINGS = {
|
||||
expanded: {
|
||||
posts: true
|
||||
},
|
||||
menu: {
|
||||
visible: true
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -44,6 +47,17 @@ export default class NavigationService extends Service {
|
|||
return await this._saveNavigationSettings();
|
||||
}
|
||||
|
||||
@action
|
||||
async toggleMenu() {
|
||||
if (!this.settings.menu) {
|
||||
this.settings.menu = {};
|
||||
}
|
||||
|
||||
this.settings.menu.visible = !this.settings.menu.visible;
|
||||
|
||||
return await this._saveNavigationSettings();
|
||||
}
|
||||
|
||||
async _saveNavigationSettings() {
|
||||
let user = this.session.user;
|
||||
let userSettings = JSON.parse(user.get('accessibility')) || {};
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@
|
|||
|
||||
--main-bg-color: #15171A;
|
||||
--dark-main-bg-color: #15171A;
|
||||
--nav-bg-color: #101114;
|
||||
--hairline-color-1: #22252A;
|
||||
--hairline-color-2: #5E6874;
|
||||
|
||||
|
|
@ -167,11 +168,11 @@ input:focus,
|
|||
|
||||
@media (max-width: 800px) {
|
||||
.gh-mobile-nav-bar {
|
||||
background: #191b1f;
|
||||
background: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar a.active {
|
||||
background: #111213;
|
||||
background: var(--whitegrey-l2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -233,7 +234,6 @@ input:focus,
|
|||
}
|
||||
|
||||
.gh-main:not(.gh-main-white),
|
||||
.gh-nav,
|
||||
.gh-unsplash-window {
|
||||
background: var(--dark-main-bg-color);
|
||||
}
|
||||
|
|
@ -636,13 +636,36 @@ input:focus,
|
|||
}
|
||||
|
||||
.gh-nav {
|
||||
border-color: var(--hairline-color-1);
|
||||
background: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.gh-nav-hidden {
|
||||
background: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.gh-nav-hidden:hover,
|
||||
.mobile-menu-expanded .gh-nav {
|
||||
box-shadow:
|
||||
100px 0px 80px 0px rgba(0, 0, 0, 0.06),
|
||||
41.78px 0px 33.422px 0px rgba(0, 0, 0, 0.05),
|
||||
22.34px 0px 17.869px 0px rgba(0, 0, 0, 0.05),
|
||||
12.52px 0px 10.017px 0px rgba(0, 0, 0, 0.05),
|
||||
6.65px 0px 5.32px 0px rgba(0, 0, 0, 0.05),
|
||||
2.77px 0px 2.214px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.gh-nav-list a {
|
||||
color: color-mod(var(--middarkgrey-d1));
|
||||
}
|
||||
|
||||
.gh-nav-list a:hover {
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-nav-list .active {
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
|
||||
.gh-nav-list .gh-secondary-action:hover span,
|
||||
.gh-nav-bottom .ember-basic-dropdown-trigger:hover,
|
||||
|
|
@ -655,15 +678,15 @@ input:focus,
|
|||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover {
|
||||
background: var(--whitegrey);
|
||||
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
|
||||
.gh-nav-menu-dropdown .dropdown-menu>li>a:hover, .gh-nav-menu-dropdown .dropdown-menu>li>button:hover {
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-nav-btn-search:hover {
|
||||
background: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-nav,
|
||||
.gh-contentfilter-menu-trigger,
|
||||
.gh-contentfilter-menu-trigger--active,
|
||||
.gh-contentfilter-menu-trigger:focus,
|
||||
|
|
@ -678,34 +701,12 @@ input:focus,
|
|||
border-color: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:first-child::before,
|
||||
.gh-list-scrolling tbody .gh-list-data:first-child::before {
|
||||
background: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-posts-list-item:hover,
|
||||
.ember-power-select-group .ember-power-select-option[aria-current=true],
|
||||
.settings-tag .tag-edit-button.active,
|
||||
.gh-portal-site-frame-cover {
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-list-row:not(.loading):hover .gh-list-data:first-of-type {
|
||||
background: linear-gradient(315deg, var(--whitegrey) 60%, var(--white) 100%);
|
||||
}
|
||||
|
||||
.gh-list-row:not(.loading):hover .gh-list-data:not(:first-of-type) {
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:first-of-type {
|
||||
background: linear-gradient(315deg, var(--whitegrey) 60%, var(--white) 100%);
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:not(:first-of-type) {
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-list-nodata {
|
||||
color: #5b6167;
|
||||
}
|
||||
|
|
@ -847,12 +848,6 @@ input:focus,
|
|||
background: var(--dark-main-bg-color) !important;
|
||||
}
|
||||
|
||||
.gh-list-header,
|
||||
.gh-list-row:not(.header):hover .gh-list-cell,
|
||||
.gh-list-row:not(.header):hover .gh-list-data {
|
||||
background: var(--dark-main-bg-color);
|
||||
}
|
||||
|
||||
.gh-list-header {
|
||||
border-bottom: 1px solid var(--hairline-color-1);
|
||||
}
|
||||
|
|
@ -1213,7 +1208,7 @@ kbd {
|
|||
}
|
||||
|
||||
.gh-dashboard-tooltip {
|
||||
background: var(--whitegrey);
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
|
|
@ -1367,6 +1362,14 @@ kbd {
|
|||
color: #626D79;
|
||||
}
|
||||
|
||||
.posts-list[data-ctrl] .gh-posts-list-item-group:hover::after {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group[data-selected]::after {
|
||||
opacity: 0.13 !important;
|
||||
}
|
||||
|
||||
.gh-portal-settings-stripefooter {
|
||||
border-color: var(--lightgrey);
|
||||
}
|
||||
|
|
@ -1573,4 +1576,4 @@ New form styles */
|
|||
|
||||
.gh-expandable-block {
|
||||
border-bottom: 1px solid var(--grey-925);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ ul.nostyle li {
|
|||
list-style: none;
|
||||
background: var(--white);
|
||||
width: 100%;
|
||||
border-bottom: var(--main-color-area-divider) 1px solid;
|
||||
}
|
||||
|
||||
.gh-list.tabbed {
|
||||
|
|
@ -28,6 +27,7 @@ ul.nostyle li {
|
|||
|
||||
.gh-list-row {
|
||||
display: table-row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-list-row:not(.header):first-of-type {
|
||||
|
|
@ -81,7 +81,7 @@ ul.nostyle li {
|
|||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 16px 20px;
|
||||
border-top: var(--whitegrey) 1px solid;
|
||||
border-top: var(--whitegrey-l1) 1px solid;
|
||||
transition: none !important;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
|
@ -105,12 +105,27 @@ ul.nostyle li {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-list-row:not(.loading):hover .gh-list-data:first-of-type {
|
||||
background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%);
|
||||
.gh-list-row > * {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.gh-list-row:not(.loading):hover .gh-list-data:not(:first-of-type) {
|
||||
background: var(--whitegrey-l2);
|
||||
.gh-list-row:not(.header):hover:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
right: -16px;
|
||||
bottom: -1px;
|
||||
left: -16px;
|
||||
background-color: var(--whitegrey-l2);
|
||||
z-index: 0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.gh-list-row:not(.header):hover .gh-list-data,
|
||||
.gh-list-row:not(.header):hover + .gh-list-row:not(.header) .gh-list-data {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gh-list-data-attribution {
|
||||
|
|
@ -285,7 +300,7 @@ ul.nostyle li {
|
|||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: var(--whitegrey) 1px solid;
|
||||
border-top: var(--whitegrey-l1) 1px solid;
|
||||
}
|
||||
|
||||
.gh-flex-list-row:first-of-type {
|
||||
|
|
@ -418,7 +433,7 @@ ul.nostyle li {
|
|||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--black);
|
||||
border-bottom: var(--whitegrey) 1px solid;
|
||||
/* border-bottom: var(--whitegrey) 1px solid; */
|
||||
padding: 10px 20px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
|
@ -434,13 +449,30 @@ ul.nostyle li {
|
|||
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:first-child::after {
|
||||
.gh-list-scrolling thead th:first-child::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
background: green;
|
||||
left: -16px;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
display: block;
|
||||
content: "";
|
||||
background: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:last-child {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:last-child::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -16px;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
display: block;
|
||||
content: "";
|
||||
background: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody .gh-list-data:first-child {
|
||||
|
|
@ -454,7 +486,7 @@ ul.nostyle li {
|
|||
z-index: 99;
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:first-child::before,
|
||||
/* .gh-list-scrolling thead th:first-child::before,
|
||||
.gh-list-scrolling tbody .gh-list-data:first-child::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
|
@ -463,7 +495,7 @@ ul.nostyle li {
|
|||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
} */
|
||||
|
||||
.gh-list-scrolling td:not(.wrap),
|
||||
.gh-list-scrolling th:not(.wrap),
|
||||
|
|
@ -477,18 +509,53 @@ ul.nostyle li {
|
|||
}
|
||||
|
||||
.gh-list-scrolling tbody .gh-list-data {
|
||||
border-top: none;
|
||||
border-bottom: var(--whitegrey) 1px solid;
|
||||
border-bottom: none;
|
||||
border-top: var(--whitegrey-l1) 1px solid;
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:first-of-type {
|
||||
background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%);
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:not(:first-of-type) {
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:first-of-type:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: -16px;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
background-color: var(--whitegrey-l2);
|
||||
z-index: 0;
|
||||
border-radius: 7px 0 0 7px;
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:last-of-type {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > a:last-of-type:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
right: -16px;
|
||||
bottom: 0;
|
||||
width: 16px;
|
||||
background-color: var(--whitegrey-l2);
|
||||
z-index: 0;
|
||||
border-radius: 0 7px 7px 0;
|
||||
}
|
||||
|
||||
.gh-list-scrolling tbody tr:hover > .gh-list-data,
|
||||
.gh-list-scrolling tbody tr:hover + tr > .gh-list-data {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 1441px) {
|
||||
.gh-list-sticky,
|
||||
.gh-list-scrolling {
|
||||
|
|
@ -507,7 +574,7 @@ ul.nostyle li {
|
|||
padding-left: 0;
|
||||
padding-right: 4vw;
|
||||
}
|
||||
|
||||
|
||||
.gh-list-scrolling thead {
|
||||
position: relative;
|
||||
z-index: 780;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.ember-power-select-trigger:not(.gh-input-x) {
|
||||
padding: 0 16px 0 8px;
|
||||
padding: 0 12px;
|
||||
border: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
|
|
|
|||
|
|
@ -499,7 +499,6 @@ li.nav-list-item .for-switch.xs label {
|
|||
z-index: 900;
|
||||
opacity: 0;
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
background: rgba(0,0,0,0.02);
|
||||
/* Not off the screen, to give a parallax effect */
|
||||
animation: coverFadeIn 0.3s ease 0.1s 1 forwards;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 16px;
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -53,7 +53,6 @@
|
|||
font-weight: 500;
|
||||
height: 34px;
|
||||
padding: 6px 12px 6px;
|
||||
margin-right: 6px;
|
||||
outline: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px !important;
|
||||
|
|
@ -204,17 +203,54 @@
|
|||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group > * {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group:after {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
right: -16px;
|
||||
bottom: -1px;
|
||||
left: -16px;
|
||||
background-color: var(--whitegrey-l2);
|
||||
z-index: 0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.gh-posts-list-item::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group:hover:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.posts-list .gh-posts-list-item-group:hover {
|
||||
background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.posts-list[data-ctrl] .gh-posts-list-item-group:hover {
|
||||
background: linear-gradient(300deg, var(--whitegrey-l1) 75%, var(--white) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group[data-selected] {
|
||||
background: linear-gradient(300deg, var(--whitegrey-l1) 75%, var(--white) 100%) !important;
|
||||
user-select: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.posts-list[data-ctrl] .gh-posts-list-item-group:hover::after {
|
||||
opacity: 0.05;
|
||||
background: #6E78E5;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group[data-selected]::after {
|
||||
opacity: 0.1 !important;
|
||||
background: #6E78E5;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group .gh-posts-list-item:hover .gh-list-data {
|
||||
|
|
@ -226,12 +262,29 @@
|
|||
}
|
||||
|
||||
.gh-posts-list-item-group {
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
border-color: var(--whitegrey-l1);
|
||||
border-style: solid;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group {
|
||||
position: relative;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group:last-of-type {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group:hover + .gh-posts-list-item-group {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group[data-selected]:not(:first-of-type),
|
||||
.gh-posts-list-item-group[data-selected] + .gh-posts-list-item-group:hover {
|
||||
border-top: 1px solid var(--white) !important;
|
||||
border-top: 1px solid var(--transparent) !important;
|
||||
}
|
||||
/* END Temporary styles to move post list to use flex instead of tables */
|
||||
|
||||
|
|
@ -335,7 +388,7 @@
|
|||
.gh-list-data.gh-post-list-button {
|
||||
vertical-align: top;
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-list .gh-content-entry-title {
|
||||
|
|
@ -761,8 +814,8 @@
|
|||
|
||||
.gh-canvas-title.gh-post-title {
|
||||
max-width: 880px;
|
||||
padding: 20px 0 0 0;
|
||||
font-size: 3.2rem;
|
||||
padding: 0;
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.2em;
|
||||
overflow: inherit;
|
||||
white-space: inherit;
|
||||
|
|
@ -770,7 +823,7 @@
|
|||
|
||||
.post-header .gh-canvas-title.gh-post-title {
|
||||
display: block;
|
||||
padding: 6px 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
white-space: initial;
|
||||
}
|
||||
|
|
@ -778,7 +831,7 @@
|
|||
@media (max-width: 1280px) {
|
||||
.post-header .gh-canvas-title.gh-post-title {
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1497,14 +1550,14 @@
|
|||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 1px 14px;
|
||||
padding: 1px 12px;
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
background: var(--white);
|
||||
color: var(--darkgrey);
|
||||
border-radius: var(--border-radius);
|
||||
transition: all .2s ease;
|
||||
white-space: nowrap;
|
||||
height: 36px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
transition: all .1s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,11 +112,6 @@ Dashboard Layout */
|
|||
}
|
||||
}
|
||||
|
||||
.gh-dashboard-box.is-secondary {
|
||||
background: var(--main-color-content-greybg);
|
||||
border-color: var(--main-color-content-greybg);
|
||||
}
|
||||
|
||||
.gh-dashboard-resource-box {
|
||||
background: var(--main-color-content-greybg);
|
||||
border-color: var(--main-color-content-greybg);
|
||||
|
|
@ -369,17 +364,18 @@ Dashboard Layout */
|
|||
.gh-dashboard-select-title .ember-power-select-selected-item {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
letter-spacing: -0.3px;
|
||||
letter-spacing: -0.1px;
|
||||
white-space: nowrap;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-dashboard .ember-power-select-trigger {
|
||||
transition: none;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.gh-dashboard-layout > .gh-dashboard-select {
|
||||
|
|
@ -567,14 +563,14 @@ Dashboard Metric */
|
|||
|
||||
.gh-dashboard-metric-label {
|
||||
align-items: center;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
color: var(--black);
|
||||
white-space: nowrap;
|
||||
letter-spacing: -.3px;
|
||||
letter-spacing: -.1px;
|
||||
}
|
||||
|
||||
.gh-dashboard-metric.is-reverse .gh-dashboard-metric-label {
|
||||
|
|
@ -596,8 +592,8 @@ Dashboard Metric */
|
|||
.gh-dashboard-metric-value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 2.6rem;
|
||||
font-weight: 700;
|
||||
font-size: 2.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.4px;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
|
|
@ -610,7 +606,7 @@ Dashboard Metric */
|
|||
}
|
||||
|
||||
.gh-dashboard-metric.is-large .gh-dashboard-metric-value {
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.7rem;
|
||||
letter-spacing: -0.8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -655,19 +651,14 @@ Dashboard Metric */
|
|||
display: none;
|
||||
}
|
||||
|
||||
.gh-dashboard-metric.is-embedded .gh-dashboard-metric-value {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.gh-dashboard-hero.source-attribution:not(.is-solo) {
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.gh-dashboard-metric-minivalue {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
color: var(--darkgrey);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
min-width: 54px;
|
||||
}
|
||||
|
|
@ -744,10 +735,9 @@ Dashboard List */
|
|||
}
|
||||
|
||||
.gh-dashboard-list-text {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
color: var(--darkgrey);
|
||||
padding: 0 32px 0 0;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -1052,6 +1042,12 @@ Dashboard Attribution */
|
|||
padding: 32px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-dashboard .gh-canvas-header.sticky {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-dashboard .gh-canvas-header.sticky .gh-dashboard-select {
|
||||
top: 0px !important;
|
||||
right: -6px !important;
|
||||
|
|
@ -1485,6 +1481,7 @@ Dashboard Recents */
|
|||
height: 100%;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-dashboard-recents .gh-dashboard-list-item a > span {
|
||||
|
|
@ -1787,12 +1784,6 @@ Dashboard Latest Newsletters */
|
|||
|
||||
/* ---------------------------------
|
||||
Dashboard What's New */
|
||||
|
||||
.gh-dashboard-whats-new .gh-dashboard-resource-box {
|
||||
background: var(--main-color-content-greybg);
|
||||
border-color: var(--main-color-content-greybg);
|
||||
}
|
||||
|
||||
.gh-dashboard-whats-new .gh-dashboard-list-body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
@ -1815,8 +1806,8 @@ Dashboard What's New */
|
|||
}
|
||||
|
||||
.gh-dashboard-whats-new .gh-dashboard-list-link span {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
|
|
@ -2029,7 +2020,7 @@ Dashboard Resource */
|
|||
|
||||
.gh-dashboard-resource-bigarticle h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
transition: all 0.25 ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -2038,7 +2029,7 @@ Dashboard Resource */
|
|||
}
|
||||
|
||||
.gh-dashboard-resource-bigarticle p {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.55;
|
||||
color: var(--middarkgrey);
|
||||
|
|
@ -2071,7 +2062,7 @@ Dashboard Resource */
|
|||
|
||||
.gh-dashboard-resource-secondary {
|
||||
margin-top: .4rem;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 400;
|
||||
color: var(--midgrey);
|
||||
|
|
@ -2248,7 +2239,7 @@ Dashboard Resource */
|
|||
margin: 8px 0 16px;
|
||||
padding: 0;
|
||||
color: var(--middarkgrey);
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.55;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -2261,7 +2252,8 @@ Dashboard Resource */
|
|||
}
|
||||
|
||||
.gh-dashboard-explore-title h5 {
|
||||
font-weight: 800;
|
||||
font-weight: 600;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.gh-dashboard-explore-footer {
|
||||
|
|
@ -2329,11 +2321,11 @@ Dashboard Tooltips */
|
|||
}
|
||||
|
||||
.gh-dashboard-tooltip-label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
letter-spacing: 0;
|
||||
color: var(--midlightgrey);
|
||||
color: var(--black);
|
||||
white-space: nowrap;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
|
@ -2341,9 +2333,9 @@ Dashboard Tooltips */
|
|||
.gh-dashboard-tooltip-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
|
|
@ -2369,15 +2361,16 @@ Dashboard Tooltips */
|
|||
}
|
||||
|
||||
.gh-dashboard-tooltip-value .value {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0;
|
||||
margin-right: 8px;
|
||||
margin-left: 12px;
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.gh-dashboard-tooltip-value .metric {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: var(--middarkgrey);
|
||||
color: var(--midgrey);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -2401,11 +2394,11 @@ Dashboard Tooltips */
|
|||
}
|
||||
|
||||
.gh-dashboard-totals .value {
|
||||
font-size: 1.7rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-dashboard-totals .metric {
|
||||
font-size: 1.45rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.gh-dashboard-mrr .indicator {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
--mainmenu-color-active: var(--black);
|
||||
--mainmenu-color-active-bg: var(--whitegrey);
|
||||
--mainmenu-width: 320px;
|
||||
--mainmenu-padding: var(--main-layout-area-padding);
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
|
@ -50,6 +49,10 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
body:not(.gh-body-fullscreen) .gh-viewport {
|
||||
background-color: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-main-white {
|
||||
background: var(--white);
|
||||
}
|
||||
|
|
@ -100,10 +103,95 @@
|
|||
flex-direction: column;
|
||||
min-width: 0;
|
||||
/* background: linear-gradient(315deg,var(--whitegrey-l2),var(--white)); */
|
||||
/* background: var(--whitegrey-l2); */
|
||||
transform: translateX(0);
|
||||
border-right: 1px solid var(--main-color-area-divider);
|
||||
transition: flex-basis 250ms;
|
||||
overflow: hidden;
|
||||
transition: flex-basis ease-in-out 250ms, opacity ease-in-out 250ms, transform ease-in-out 250ms, box-shadow ease-in-out 250ms;
|
||||
}
|
||||
|
||||
.gh-nav-hidden {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(-320px);
|
||||
width: 320px;
|
||||
background-color: var(--white);
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.gh-nav-hidden:hover {
|
||||
transform: translateX(0px);
|
||||
box-shadow: 100px 0px 80px 0px rgba(0, 0, 0, 0.02), 41.78px 0px 33.422px 0px rgba(0, 0, 0, 0.01), 22.34px 0px 17.869px 0px rgba(0, 0, 0, 0.01), 12.52px 0px 10.017px 0px rgba(0, 0, 0, 0.01), 6.65px 0px 5.32px 0px rgba(0, 0, 0, 0.01), 2.77px 0px 2.214px 0px rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.gh-toggle-nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 32px;
|
||||
right: -32px;
|
||||
transition: opacity ease-in-out 150ms;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-nav:hover .gh-toggle-nav-menu,
|
||||
.gh-nav-hidden .gh-toggle-nav-menu {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu {
|
||||
width: 18px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-nav-hidden:hover .gh-btn-toggle-menu {
|
||||
transform: translateX(-22px);
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu .segment-1,
|
||||
.gh-btn-toggle-menu .segment-2 {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: var(--midlightgrey);
|
||||
transition: transform ease-in-out 150ms;
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu .segment-1 {
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu .segment-2 {
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu:hover .segment-1 {
|
||||
transform: rotate(45deg) translateY(2px) scaleY(1.2);
|
||||
}
|
||||
|
||||
.gh-btn-toggle-menu:hover .segment-2 {
|
||||
transform: rotate(-45deg) translateY(-2px) scaleY(1.2);
|
||||
}
|
||||
|
||||
.gh-nav-hidden .gh-btn-toggle-menu .segment-1,
|
||||
.gh-nav-hidden .gh-btn-toggle-menu .segment-2 {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.gh-nav-hidden .gh-btn-toggle-menu:hover .segment-1 {
|
||||
transform: rotate(-45deg) translateY(2px) scaleY(1.2) translateX(0);
|
||||
}
|
||||
|
||||
.gh-nav-hidden .gh-btn-toggle-menu:hover .segment-2 {
|
||||
transform: rotate(45deg) translateY(-2px) scaleY(1.2) translateX(0);
|
||||
}
|
||||
|
||||
.gh-nav-contributor {
|
||||
|
|
@ -127,8 +215,8 @@
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--main-layout-vpanel-height);
|
||||
padding: var(--mainmenu-padding);
|
||||
/* height: var(--main-layout-vpanel-height); */
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.gh-nav-menu-dropdown .dropdown-menu {
|
||||
|
|
@ -137,7 +225,8 @@
|
|||
margin: 10px 0 0;
|
||||
box-shadow: var(--box-shadow-m);
|
||||
min-width: 290px;
|
||||
padding: 6px 0;
|
||||
padding: 4px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.gh-nav-menu-dropdown-contributor .dropdown-menu {
|
||||
|
|
@ -147,17 +236,19 @@
|
|||
.gh-nav-menu-dropdown .dropdown-menu>li>a,
|
||||
.gh-nav-menu-dropdown .dropdown-menu>li>button {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
margin: 1px 4px 0;
|
||||
width: unset;
|
||||
padding: 8px 24px 9px;
|
||||
padding: 8px 14px 9px;
|
||||
height: 36px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.gh-nav-menu-dropdown .dropdown-menu>li>button {
|
||||
width: 100%;
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
|
||||
.gh-nav-menu-dropdown .dropdown-menu .divider {
|
||||
margin: 6px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.gh-nav-menu-dropdown .dropdown-menu svg {
|
||||
|
|
@ -177,15 +268,19 @@
|
|||
|
||||
.gh-nav-menu-icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
margin-right: 12px;
|
||||
margin-left: -6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
border-radius: 6px;
|
||||
transition: all ease-in-out 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gh-nav-menu-details {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -200,7 +295,7 @@
|
|||
font-size: 1.5rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.3em;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
|
|
@ -244,7 +339,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 24px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.gh-account-menu-header .gh-user-avatar {
|
||||
|
|
@ -273,7 +368,7 @@
|
|||
word-break: break-all;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +401,7 @@
|
|||
}
|
||||
|
||||
.gh-nav-btn-search svg path {
|
||||
fill: var(--black);
|
||||
fill: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-nav-btn-search:hover {
|
||||
|
|
@ -388,6 +483,7 @@
|
|||
list-style: none;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6em;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.gh-nav-list:first-of-type {
|
||||
|
|
@ -416,14 +512,14 @@
|
|||
.gh-nav-list button.main-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--darkgrey-l1);
|
||||
color: var(--middarkgrey);
|
||||
transition: none;
|
||||
font-weight: 400;
|
||||
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
|
||||
font-weight: 500;
|
||||
padding: 7px 14px;
|
||||
font-size: 1.4rem;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
margin: 1px 0 0;
|
||||
border-radius: var(--border-radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -433,10 +529,9 @@
|
|||
|
||||
.gh-nav-list .active {
|
||||
position: relative;
|
||||
color: var(--mainmenu-color-active);
|
||||
font-weight: 700;
|
||||
/* border: 1px solid var(--black);
|
||||
padding: 7px calc(var(--mainmenu-padding) - 2px) 7px calc(var(--mainmenu-padding) + 5px); */
|
||||
color: var(--black);
|
||||
background-color: var(--mainmenu-color-active-bg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-nav-list a:not(.active):hover,
|
||||
|
|
@ -448,7 +543,7 @@
|
|||
|
||||
/* Icons */
|
||||
.gh-nav-list svg {
|
||||
margin-right: 17px;
|
||||
margin-right: 11px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
/* fill: var(--midgrey); */
|
||||
|
|
@ -485,20 +580,28 @@
|
|||
height: 16px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 9px;
|
||||
top: 10px;
|
||||
z-index: 999;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-nav-button-expand.expanded {
|
||||
.gh-nav-button-expand {
|
||||
padding-left: 9px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-nav:hover .gh-nav-button-expand {
|
||||
.gh-nav-list-posts:hover .gh-nav-button-expand {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-nav-posts-icon {
|
||||
transition: all ease 0.2s !important;
|
||||
}
|
||||
|
||||
.gh-nav-list-posts:hover .gh-nav-posts-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-nav-button-expand svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
|
|
@ -523,7 +626,7 @@
|
|||
z-index: 999;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
right: 12px;
|
||||
right: -6px;
|
||||
top: 0px;
|
||||
opacity: 0;
|
||||
transition: opacity ease 0.2s;
|
||||
|
|
@ -553,6 +656,10 @@
|
|||
background: var(--mainmenu-color-hover-bg);
|
||||
}
|
||||
|
||||
.gh-nav-list .active + .gh-secondary-action:hover span {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gh-nav-list .gh-secondary-action:hover,
|
||||
.gh-nav-list a.gh-secondary-action:hover {
|
||||
background: none;
|
||||
|
|
@ -592,9 +699,9 @@
|
|||
z-index: 999;
|
||||
padding: 2px 7px;
|
||||
margin: 0;
|
||||
right: 30px;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
background: var(--mainmenu-color-hover-bg);
|
||||
background: var(--mainmenu-color-active-bg);
|
||||
color: var(--middarkgrey);
|
||||
border-radius: 999px;
|
||||
font-weight: 500;
|
||||
|
|
@ -627,7 +734,7 @@
|
|||
|
||||
.gh-nav-view-list a {
|
||||
position: relative;
|
||||
padding-left: calc(var(--mainmenu-padding) + 40px);
|
||||
padding-left: 42px;
|
||||
}
|
||||
|
||||
.gh-nav-viewname {
|
||||
|
|
@ -646,7 +753,7 @@
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0;
|
||||
right: 36px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.gh-nav-view-list .svg-midgrey .circle {
|
||||
|
|
@ -694,19 +801,29 @@
|
|||
background: var(--pink);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-nav-button-expand {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-nav-posts-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bottom nav
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-nav-bottom {
|
||||
margin: 0;
|
||||
padding: var(--mainmenu-padding);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.gh-nav-bottom .ember-basic-dropdown-trigger {
|
||||
padding: 4px 8px 4px 4px;
|
||||
margin: -4px -8px -4px -4px;
|
||||
border-radius: 999px;
|
||||
background: var(--main-bg-color);
|
||||
/* background: var(--main-bg-color); */
|
||||
}
|
||||
|
||||
.gh-nav-bottom .ember-basic-dropdown-trigger:hover {
|
||||
|
|
@ -878,16 +995,17 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 260px;
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: var(--white);
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transform: translate3d(-260px, 0px, 0px);
|
||||
transform: translate3d(-320px, 0px, 0px);
|
||||
}
|
||||
|
||||
.mobile-menu-expanded .gh-nav {
|
||||
transform: translate3d(0,0,0);
|
||||
z-index: 1000;
|
||||
box-shadow: 100px 0px 80px 0px rgba(0, 0, 0, 0.02), 41.78px 0px 33.422px 0px rgba(0, 0, 0, 0.01), 22.34px 0px 17.869px 0px rgba(0, 0, 0, 0.01), 12.52px 0px 10.017px 0px rgba(0, 0, 0, 0.01), 6.65px 0px 5.32px 0px rgba(0, 0, 0, 0.01), 2.77px 0px 2.214px 0px rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.mobile-menu-expanded .content-cover {
|
||||
|
|
@ -895,14 +1013,9 @@
|
|||
cursor: pointer;
|
||||
transform: translate3d(260px, 0, 0);
|
||||
}
|
||||
|
||||
.gh-nav-list .active {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 460px) {
|
||||
.gh-mobilemenu-button {
|
||||
padding: 24px 15px 24px 16px;
|
||||
}
|
||||
|
|
@ -950,15 +1063,17 @@
|
|||
.gh-mobile-nav-bar { display: none; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-toggle-nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Make space for the mobile nav bar */
|
||||
.gh-viewport {
|
||||
padding-bottom: 55px;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-contributor) .gh-nav-body {
|
||||
/* .gh-nav:not(.gh-nav-contributor) .gh-nav-body {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
} */
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
.gh-viewport {
|
||||
|
|
@ -966,17 +1081,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* .gh-main {
|
||||
margin-bottom: 64px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
} */
|
||||
|
||||
.gh-mobile-nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border-top: var(--lightgrey) 1px solid;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
background: var(--whitegrey-l2);
|
||||
z-index: 800;
|
||||
height: 72px;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in-out 150ms;
|
||||
}
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
|
|
@ -987,44 +1110,44 @@
|
|||
|
||||
.gh-mobile-nav-bar a,
|
||||
.gh-mobile-nav-bar-more {
|
||||
height: 55px;
|
||||
padding: 10px 10px 5px;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--darkgrey);
|
||||
color: var(--middarkgrey);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 1.2rem;
|
||||
flex-basis: 25%;
|
||||
margin: 4px;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar a.active {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
background: var(--mainmenu-color-active-bg);
|
||||
color: var(--mainmenu-color-active);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar a.active svg {
|
||||
fill: var(--white);
|
||||
fill: var(--mainmenu-color-active);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar a.active.gh-nav-main-users g,
|
||||
.gh-mobile-nav-bar a.active.gh-nav-main-users path {
|
||||
fill: transparent;
|
||||
stroke: var(--white);
|
||||
stroke: var(--mainmenu-color-active);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar svg,
|
||||
.gh-mobile-nav-bar svg g {
|
||||
width: 15px;
|
||||
width: 18px;
|
||||
fill: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar svg g path {
|
||||
stroke: var(--white);
|
||||
stroke: var(--black);
|
||||
}
|
||||
|
||||
.gh-mobile-nav-bar .gh-mobile-nav-bar-more svg path {
|
||||
|
|
@ -1041,6 +1164,15 @@
|
|||
.gh-body-fullscreen .gh-mobile-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-nav-posts-icon {
|
||||
transform: translateY(-1px) translateX(1px);
|
||||
}
|
||||
|
||||
.mobile-nav-members-icon {
|
||||
width: 20px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1055,9 +1187,15 @@
|
|||
|
||||
.gh-canvas {
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--main-layout-content-sidepadding) 48px;
|
||||
padding: 0 var(--main-layout-content-sidepadding) var(--main-layout-content-sidepadding);
|
||||
margin: 0 auto;
|
||||
max-width: var(--main-layout-content-maxwidth);
|
||||
transition: padding ease-in-out 250ms;
|
||||
}
|
||||
|
||||
.gh-nav.close + .gh-main .gh-canvas {
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.gh-canvas.gh-canvas-sticky {
|
||||
|
|
@ -1079,9 +1217,9 @@
|
|||
}
|
||||
|
||||
.gh-canvas-header {
|
||||
min-height: calc(var(--main-layout-vpanel-height) - 1px);
|
||||
/* min-height: calc(var(--main-layout-vpanel-height) - 1px); */
|
||||
margin: 0 calc(-1 * var(--main-layout-content-sidepadding));
|
||||
padding: 32px var(--main-layout-content-sidepadding);
|
||||
padding: var(--main-layout-content-sidepadding);
|
||||
top: 0;
|
||||
background: var(--main-bg-color);
|
||||
z-index: 700;
|
||||
|
|
@ -1148,6 +1286,7 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.gh-main-width {
|
||||
|
|
@ -1449,18 +1588,23 @@
|
|||
}
|
||||
|
||||
/* Canvas */
|
||||
.gh-canvas-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-canvas-title {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
margin: -0.1em 0 0;
|
||||
margin: 0 0 0;
|
||||
padding: 0 6px 0 0;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.25em;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
letter-spacing: -0.02em;
|
||||
/* match button height to avoid jump on navigation between screens*/
|
||||
min-height: 35px;
|
||||
color: var(--black);
|
||||
|
|
@ -1495,6 +1639,12 @@
|
|||
opacity: 1.0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-canvas-title {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.gh-canvas-title svg {
|
||||
margin: 0 5px;
|
||||
|
|
@ -1572,9 +1722,11 @@
|
|||
}
|
||||
|
||||
.view-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.view-actions-secondary {
|
||||
|
|
@ -1587,7 +1739,7 @@
|
|||
position: relative;
|
||||
flex-grow: 1;
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--main-layout-area-padding);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.gh-canvas-sticky .view-container {
|
||||
|
|
@ -1691,20 +1843,60 @@
|
|||
.view-actions-top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-actions-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
@media (max-width: 800px) {
|
||||
.gh-canvas-header.break.tablet {
|
||||
padding: 32px var(--main-layout-content-sidepadding) 12px;
|
||||
padding: 16px var(--main-layout-content-sidepadding) 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .gh-canvas-header.break.tablet .gh-canvas-header-content {
|
||||
min-height: 72px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .gh-canvas-title.gh-post-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .gh-canvas-header.break.tablet .view-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
max-height: 100px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .gh-canvas-header.break.tablet .view-actions-bottom-row {
|
||||
position: relative;
|
||||
order: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .view-actions-bottom-row {
|
||||
justify-content: flex-end;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .view-actions-top-row > *:last-child,
|
||||
.gh-nav:not(.gh-nav-hidden) + .gh-main .view-actions-bottom-row > *:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.gh-canvas-header.break.tablet .gh-canvas-header-content {
|
||||
min-height: calc(var(--main-layout-vpanel-height) - 1px);
|
||||
min-height: 72px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
|
@ -1716,6 +1908,7 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
max-height: 100px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.gh-canvas-header.break.tablet .view-actions-bottom-row {
|
||||
|
|
@ -1723,14 +1916,10 @@
|
|||
order: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: calc(100vw - 390px);
|
||||
/* max-width: calc(100vw - 390px); */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-actions-top-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.view-actions-bottom-row {
|
||||
justify-content: flex-end;
|
||||
order: 2;
|
||||
|
|
@ -1740,9 +1929,7 @@
|
|||
.view-actions-bottom-row > *:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.gh-canvas-header.break.tablet .gh-canvas-breadcrumb {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1752,12 +1939,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.gh-canvas-header.break.post-header .view-actions-bottom-row {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.gh-canvas-header.break.mobile .gh-canvas-header-content {
|
||||
border-bottom: 1px solid var(--main-color-area-divider);
|
||||
}
|
||||
|
|
@ -1821,14 +2002,10 @@
|
|||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-canvas-header {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gh-canvas {
|
||||
padding: 0 4vw 4vw;
|
||||
}
|
||||
|
||||
|
||||
.gh-canvas-header.break.tablet .view-actions {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -2043,7 +2220,7 @@ section.gh-ds h2 {
|
|||
|
||||
.gh-done-panel {
|
||||
margin: 8px 0 24px;
|
||||
padding: 52px var(--main-layout-area-padding) 16px;
|
||||
padding: 52px 32px 16px;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
.gh-members-activity-description {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0;
|
||||
color: var(--middarkgrey);
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -194,10 +194,6 @@ p.gh-members-list-email {
|
|||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.members-header .gh-members-header-search {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.gh-members-chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -2832,7 +2828,7 @@ a.gh-members-emailpreview-subscription-link {
|
|||
.members-header .gh-canvas-title {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
|
||||
.members-header .view-actions .gh-members-header-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
align-items: center;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
padding: var(--main-layout-area-padding);
|
||||
padding: 32px;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -349,10 +349,6 @@ svg.gh-btn-icon-right {
|
|||
color: var(--red);
|
||||
}
|
||||
|
||||
.gh-btn-action-icon {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.gh-btn-action-icon svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
@ -718,4 +714,4 @@ Usage: CTA buttons grouped together horizontally.
|
|||
margin: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
border: 1px solid var(--main-bg-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -303,6 +303,10 @@ textarea.gh-input-x {
|
|||
padding-block: 8px;
|
||||
}
|
||||
|
||||
.ember-power-select-multiple-trigger {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* Radio / Checkboxes
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -180,14 +180,13 @@
|
|||
--errorbg-lightred: rgba(240, 82, 48, 0.05);
|
||||
|
||||
/* Global layout values */
|
||||
--main-layout-content-sidepadding: 48px;
|
||||
--main-layout-content-maxwidth: 1320px;
|
||||
--main-layout-area-padding: 32px;
|
||||
--main-layout-content-sidepadding: 32px;
|
||||
--main-layout-content-maxwidth: 1480px;
|
||||
--main-layout-vpanel-height: 96px;
|
||||
--main-layout-section-vpadding: 3vw;
|
||||
|
||||
/* Style values */
|
||||
--border-radius: 5px;
|
||||
--border-radius: 6px;
|
||||
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
|
||||
|
|
@ -417,8 +416,8 @@ h6 {
|
|||
|
||||
.gh-data-summary {
|
||||
color: var(--black);
|
||||
font-size: 4rem;
|
||||
line-height: 4.4rem;
|
||||
font-size: 2.7rem;
|
||||
line-height: 1.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
{{/if}}
|
||||
|
||||
<GhExploreModal />
|
||||
|
||||
</main>
|
||||
|
||||
<GhNotifications />
|
||||
|
|
|
|||
1
ghost/admin/public/assets/icons/hamburger.svg
Normal file
1
ghost/admin/public/assets/icons/hamburger.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>navigation-menu</title><line x1="2.25" y1="18.003" x2="21.75" y2="18.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="2.25" y1="12.003" x2="21.75" y2="12.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="2.25" y1="6.003" x2="21.75" y2="6.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
|
||||
|
After Width: | Height: | Size: 587 B |
Loading…
Add table
Reference in a new issue