From 6c39ef2f97eb6da46274a1972a6634c012be9b82 Mon Sep 17 00:00:00 2001 From: Maria Yurlava Date: Mon, 16 Oct 2023 14:01:09 +0200 Subject: [PATCH 01/10] WEB-4462 Test --- src/app/components/documentation/documentation.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/documentation/documentation.component.html b/src/app/components/documentation/documentation.component.html index c2bc2391..95bfa64d 100644 --- a/src/app/components/documentation/documentation.component.html +++ b/src/app/components/documentation/documentation.component.html @@ -25,7 +25,7 @@
Chosen image
From 1631cbf83e7deae47c2fa0292ed2496cfd24507c Mon Sep 17 00:00:00 2001 From: Maria Yurlava Date: Mon, 16 Oct 2023 16:57:21 +0200 Subject: [PATCH 02/10] WEB-4462 Fix hubspot --- .../documentation.component.html | 2 +- src/index.html | 23 +++++++++++-------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/app/components/documentation/documentation.component.html b/src/app/components/documentation/documentation.component.html index 95bfa64d..c2bc2391 100644 --- a/src/app/components/documentation/documentation.component.html +++ b/src/app/components/documentation/documentation.component.html @@ -25,7 +25,7 @@
Chosen image
diff --git a/src/index.html b/src/index.html index 3d9f53e1..f8e5f6b7 100644 --- a/src/index.html +++ b/src/index.html @@ -52,16 +52,16 @@ document.getElementsByTagName('body')[0].appendChild(awMastertag); })(); - /* Hubspot script */ - (function () { - var script = document.createElement('script'); - script.type = 'text/javascript'; - script.id = 'hs-script-loader'; - script.async = true; - script.defer = true; - script.src = '//js.hs-scripts.com/4202168.js'; - document.body.appendChild(script); - })(); + // /* Hubspot script */ + // (function () { + // var script = document.createElement('script'); + // script.type = 'text/javascript'; + // script.id = 'hs-script-loader'; + // script.async = true; + // script.defer = true; + // script.src = '//js.hs-scripts.com/4202168.js'; + // document.body.appendChild(script); + // })(); @@ -113,5 +113,8 @@ + + + From 9da4f11b4da1398d954699f30dc7e1e3f6c28cc8 Mon Sep 17 00:00:00 2001 From: Maria Yurlava Date: Tue, 17 Oct 2023 08:44:23 +0200 Subject: [PATCH 03/10] WEB-4462 Fix hubspot --- src/index.html | 26 ++++---------------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/src/index.html b/src/index.html index f8e5f6b7..96fefc46 100644 --- a/src/index.html +++ b/src/index.html @@ -42,32 +42,12 @@ y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y); })(window, document, 'clarity', 'script', 'cro1v394gg'); - - /* Awin script */ - (function () { - var awMastertag = document.createElement('script'); - awMastertag.setAttribute('defer', 'defer'); - awMastertag.src = 'https://www.dwin1.com/38236.js'; - awMastertag.type = 'text/javascript'; - document.getElementsByTagName('body')[0].appendChild(awMastertag); - })(); - - // /* Hubspot script */ - // (function () { - // var script = document.createElement('script'); - // script.type = 'text/javascript'; - // script.id = 'hs-script-loader'; - // script.async = true; - // script.defer = true; - // script.src = '//js.hs-scripts.com/4202168.js'; - // document.body.appendChild(script); - // })(); - + - + + From 9fa07259bc801d2cfb2deeb723a3babfdcd03d6e Mon Sep 17 00:00:00 2001 From: justuserdgaf <141834929+justuserdgaf@users.noreply.github.com> Date: Tue, 17 Oct 2023 12:20:08 +0400 Subject: [PATCH 04/10] Update add-edit-or-delete-an-invited-user.md From 36dfb52afbfef5257f418140335ddd69ab9372ae Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 18 Oct 2023 12:33:06 +0200 Subject: [PATCH 05/10] 1 --- .../virtual-instances/create-an-instance.md | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/documentation/cloud/virtual-instances/create-an-instance.md b/documentation/cloud/virtual-instances/create-an-instance.md index 3ab10588..38416c2a 100644 --- a/documentation/cloud/virtual-instances/create-an-instance.md +++ b/documentation/cloud/virtual-instances/create-an-instance.md @@ -27,28 +27,37 @@ Regions can be of two types: Core and Edge. A region determines the equipment sp | Designed for high scalability on the fly | Yes | Not | | Available resources | 1000 cores and 30 TB of RAM | Up to 300 cores and 1 TB of RAM | | Ports for user traffic and storage | Separate | Shared | -| Choice of configurations | 8 types, 45 configurations | 1 type (Standard), 4 configurations | | Price | Higher | Lower | \* We can always transform an edge region to core upon your request. -3. Select an **Image**. +3. Configure the image. - +Select the type of hardware architecture on which your instance will be running: -* Choose an OS template, a volume, a snapshot, a custom image, or a template from the marketplace. -* (for a Linux instance) Remember the login from the **For login to OS** field to connect to your instance on Linux OS via SSH from another Linux device. For details, refer to the article: Connect to your instance via SSH. +- **x86-64**: This architecture is known for its broad compatibility with Linux operating systems and Windows distributions. It is commonly used in general purpose computing applications. +- **ARM**: ARM architecture is designed for energy efficiency and low power consumption, which also supports strong performance, making it ideal for high-performance computing tasks. However, ARM instances are compatible with fewer OS distributions. -**Important!** If you want to connect to a Linux instance from a Windows device, use a special application such as PuTTY. +Choose x86-64 or ARM architecture -4. For **Type**, choose the configuration. +Your choice of hardware architecture will affect the available OS options and instance flavors. Choose an OS distribution, a volume, a snapshot, a custom image, or a template from the marketplace. - +4. Configure the instance type. -Select the CPU generation and a flavor. +Select the appropriate CPU generation: - +- **Intel® Xeon® Scalable, 3rd Gen or 2nd Gen** if you’ve selected x-86-64 architecture at the previous step. + +VM based on Intel® Xeon® Scalable, 3rd Gen or 2nd Gen + +- **ARM Ampere® Altra® Max Family** if you’ve selected ARM architecture at the previous step. + +VM based on Ampere® Altra® Max Family + +Choose one of the available flavors. + + * **Shared**. VMs that share a core of a physical machine with other VMs, designed for workloads that do not require high performance. Availability: Luxembourg From 4ad501aae22ff0da9b9bfa53e633ec2641b6f9dc Mon Sep 17 00:00:00 2001 From: Ilia Kotiashkin Date: Thu, 19 Oct 2023 15:20:25 +0300 Subject: [PATCH 06/10] made rebranding twiks --- .../bread-crumbs/bread-crumbs.component.scss | 2 +- .../documentation.component.scss | 40 +++--- .../components/header/header.component.html | 28 ++-- .../components/header/header.component.scss | 30 +++-- src/app/components/home/home.component.scss | 16 ++- .../dropdown-menu-item.component.scss | 4 +- .../left-bar-menu.component.html | 8 +- .../left-bar-menu.component.scss | 10 +- .../modal-login/modal-login.component.html | 38 +++--- .../modal-login/modal-login.component.scss | 34 ++--- .../components/search/search.component.scss | 12 +- .../call-to-action-box.component.html | 2 +- .../call-to-action-box.component.scss | 6 +- src/app/ui-kit/loader/loader.component.scss | 14 +- src/app/ui-kit/modal/modal.component.scss | 4 +- .../pagination/pagination.component.scss | 2 +- .../redirect-link-button.component.html | 19 +-- .../redirect-link-button.component.scss | 20 +-- .../redirect-link-button.component.ts | 2 +- .../search-box/search-box.component.html | 8 +- .../search-box/search-box.component.scss | 17 +-- .../exandable-element.component.scss | 2 +- .../icons/category/account-settings.svg | 26 ++-- src/assets/icons/category/cdn.svg | 10 +- src/assets/icons/category/cloud.svg | 4 +- src/assets/icons/category/ddos-protection.svg | 12 +- src/assets/icons/category/dns.svg | 6 +- src/assets/icons/category/hosting.svg | 10 +- .../icons/category/reseller-support.svg | 9 -- src/assets/icons/category/storage.svg | 2 +- .../icons/category/streaming-platform.svg | 6 +- src/assets/icons/category/web-security.svg | 6 +- src/scss/buttons.scss | 122 ++++++++++++++++++ src/scss/code.scss | 2 +- src/scss/variables.scss | 121 +++++++++++++---- src/styles.scss | 17 ++- 36 files changed, 431 insertions(+), 240 deletions(-) delete mode 100644 src/assets/icons/category/reseller-support.svg create mode 100644 src/scss/buttons.scss diff --git a/src/app/components/bread-crumbs/bread-crumbs.component.scss b/src/app/components/bread-crumbs/bread-crumbs.component.scss index 93d3ecd5..7c85e39b 100644 --- a/src/app/components/bread-crumbs/bread-crumbs.component.scss +++ b/src/app/components/bread-crumbs/bread-crumbs.component.scss @@ -29,6 +29,6 @@ } &:active { - color: $contentSecondaryActive; + color: $contentSecondary; } } diff --git a/src/app/components/documentation/documentation.component.scss b/src/app/components/documentation/documentation.component.scss index 7c09c257..85698ee5 100644 --- a/src/app/components/documentation/documentation.component.scss +++ b/src/app/components/documentation/documentation.component.scss @@ -147,7 +147,7 @@ gcore-loader { font-weight: 600; font-size: 1.5rem; line-height: 2rem; - color: $secondaryContrastFocus; + color: $actionPrimary; margin-top: 1.5rem; } @@ -157,36 +157,46 @@ gcore-loader { margin-top: 1.25rem; .doc-estimate-button { - width: 3rem; - height: 2.25rem; - border: 1px solid $secondaryContrastFocus; - border-radius: 0.25rem; + width: 3.5rem; + height: 2.5rem; + border: 1px solid $actionPrimary; + border-radius: $borderButtonRadius; display: flex; align-items: center; justify-content: center; - transition: all 0.3s ease-in-out; + transition: 0.15s; background: transparent; cursor: pointer; &:nth-child(1) { - margin-right: 1rem; + margin-right: 0.5rem; } svg { path { - fill: $secondaryContrastFocus; - transition: all 0.3s ease-in-out; + fill: $actionPrimary; + transition: 0.15s; } } - &.active { - background: $secondaryContrastFocus; - transition: all 0.3s ease-in-out; + &:hover { + border: 1px solid $actionPrimaryHover; svg { path { - fill: $secondaryContrastActive; - transition: all 0.3s ease-in-out; + fill: $actionPrimaryHover; + } + } + } + + &.active, + &:active { + background: $actionPrimaryActive; + border: 1px solid $actionPrimaryActive; + + svg { + path { + fill: $contentContrastPrimary; } } } @@ -269,7 +279,7 @@ gcore-loader { top: 0; width: 1px; height: 100%; - background: $greyPurple; + background: $bgSurfaceLight2; position: absolute; } diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 3f8700aa..da8683f7 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -7,22 +7,22 @@ Gcore Docs - + + >
- - - + +
- {{ label }} - + + {{ label }} + - diff --git a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss index 994d0600..e2f8bfc8 100644 --- a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss +++ b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss @@ -15,15 +15,15 @@ white-space: nowrap; color: #fff; text-decoration: none; - border: 1px solid $secondaryContrast; + border: 1px solid $borderDark; width: 100%; &:hover { - border-color: $secondaryContrastHover; + border-color: $border; } &:active { - border-color: $secondaryContrastActive; + border-color: $contentContrastPrimary; } svg { @@ -32,7 +32,7 @@ } &-white { - border: 1px solid $borderNormal; + border: 1px solid $border; color: $contentPrimary; svg { @@ -43,9 +43,9 @@ } &-brand { - border: 1px solid $contentLink; + border: 1px solid $actionPrimary; color: #fff; - background-color: $contentLink; + background-color: $actionPrimary; svg { path { @@ -54,13 +54,13 @@ } &:hover { - background-color: $contentLinkHover; - border-color: $contentLinkHover; + background-color: $actionPrimaryHover; + border-color: $actionPrimaryHover; } &:active { - border-color: $contentLinkActive; - background-color: $contentLinkActive; + border-color: $actionPrimaryActive; + background-color: $actionPrimaryActive; } } } diff --git a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts index 43c3ee2b..bc2d9145 100644 --- a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts +++ b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts @@ -10,5 +10,5 @@ export class RedirectLinkButtonComponent { @Input() public href: string; @Input() public label: string; @Input() public hideIcon: boolean; - @Input() public variant: 'white' | 'brand'; + @Input() public variant: 'primary' | 'secondary' | 'contrast-secondary' = 'secondary'; } diff --git a/src/app/ui-kit/search-box/search-box.component.html b/src/app/ui-kit/search-box/search-box.component.html index 044e7752..d7f205ec 100644 --- a/src/app/ui-kit/search-box/search-box.component.html +++ b/src/app/ui-kit/search-box/search-box.component.html @@ -3,14 +3,14 @@ class="search-icon search-icon-{{ variant }}" width="20" height="20" - viewBox="0 0 20 20" + viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/app/ui-kit/search-box/search-box.component.scss b/src/app/ui-kit/search-box/search-box.component.scss index 30763edc..913a95c5 100644 --- a/src/app/ui-kit/search-box/search-box.component.scss +++ b/src/app/ui-kit/search-box/search-box.component.scss @@ -9,23 +9,24 @@ width: 100%; font-size: 0.875rem; line-height: 1.25rem; - border: 1px solid $secondaryContrast; - border-radius: 6px; + border: 1px solid $borderDark; + border-radius: $borderButtonRadius; outline: none; - background: $secondaryContrast; - color: #fff; + background: $bgSurfaceDark; + color: $contentContrastPrimary; padding: 9px 44px 9px 16px; + transition: 0.15s; &:hover { - border-color: $secondaryContrastHover; + border-color: $border; } &:active { - border-color: $secondaryContrastActive; + border-color: $contentContrastPrimary; } &:focus { - border-color: $secondaryContrastFocus; + border-color: $actionPrimary; } &::placeholder { @@ -33,7 +34,7 @@ } &.search-input-contrast { - border-color: $greyPurple; + border-color: $bgSurfaceLight2; color: $mutedPurple; &::placeholder { diff --git a/src/app/web-components/exandable-element/exandable-element.component.scss b/src/app/web-components/exandable-element/exandable-element.component.scss index 83fecbfe..d34c0570 100644 --- a/src/app/web-components/exandable-element/exandable-element.component.scss +++ b/src/app/web-components/exandable-element/exandable-element.component.scss @@ -11,7 +11,7 @@ border-top: 1px solid #d6d7d8; .accordion-plus { - background: $sidebarPurple; + background: $bgSurfaceLight1; border-radius: 100%; width: 1.25rem; height: 1.25rem; diff --git a/src/assets/icons/category/account-settings.svg b/src/assets/icons/category/account-settings.svg index 8f43e697..bf27f630 100644 --- a/src/assets/icons/category/account-settings.svg +++ b/src/assets/icons/category/account-settings.svg @@ -1,14 +1,14 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/assets/icons/category/cdn.svg b/src/assets/icons/category/cdn.svg index b67195d2..3f77bd13 100644 --- a/src/assets/icons/category/cdn.svg +++ b/src/assets/icons/category/cdn.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/assets/icons/category/cloud.svg b/src/assets/icons/category/cloud.svg index d3b911ce..f5c483fc 100644 --- a/src/assets/icons/category/cloud.svg +++ b/src/assets/icons/category/cloud.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/category/ddos-protection.svg b/src/assets/icons/category/ddos-protection.svg index ce72894b..90251f3b 100644 --- a/src/assets/icons/category/ddos-protection.svg +++ b/src/assets/icons/category/ddos-protection.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/src/assets/icons/category/dns.svg b/src/assets/icons/category/dns.svg index d69df16b..98b1269b 100644 --- a/src/assets/icons/category/dns.svg +++ b/src/assets/icons/category/dns.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/icons/category/hosting.svg b/src/assets/icons/category/hosting.svg index 197dae51..eeaf46fb 100644 --- a/src/assets/icons/category/hosting.svg +++ b/src/assets/icons/category/hosting.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/assets/icons/category/reseller-support.svg b/src/assets/icons/category/reseller-support.svg deleted file mode 100644 index c85e98de..00000000 --- a/src/assets/icons/category/reseller-support.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/icons/category/storage.svg b/src/assets/icons/category/storage.svg index a76e9ffc..9a518457 100644 --- a/src/assets/icons/category/storage.svg +++ b/src/assets/icons/category/storage.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/category/streaming-platform.svg b/src/assets/icons/category/streaming-platform.svg index 7b2a776b..fca89054 100644 --- a/src/assets/icons/category/streaming-platform.svg +++ b/src/assets/icons/category/streaming-platform.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/icons/category/web-security.svg b/src/assets/icons/category/web-security.svg index e28105cc..a1030a63 100644 --- a/src/assets/icons/category/web-security.svg +++ b/src/assets/icons/category/web-security.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss new file mode 100644 index 00000000..77406221 --- /dev/null +++ b/src/scss/buttons.scss @@ -0,0 +1,122 @@ +@import 'variables'; + +.button { + display: inline-block; + padding: 0.5rem 1.25rem; + min-width: 2rem; + + background: none; + border: 1px solid transparent; + border-radius: $borderButtonRadius; + outline-offset: 0; + outline: 4px solid transparent; + + font-size: 0.875rem; + line-height: 1.5rem; + font-weight: 600; + text-decoration: none; + + cursor: pointer; + transition: 0.15s; + + &_large { + padding: 0.75rem 1.5rem; + font-size: 1rem; + min-width: 3rem; + } + + &_small { + padding: 0.25rem 1rem; + min-width: 1.75rem; + } + + svg { + display: inline-block; + width: 1.25rem; + height: 1.25rem; + margin: 0 -0.5rem; + + > * { + stroke: currentColor; + } + } + + span { + vertical-align: middle; + } + + span + svg { + margin-left: 0.25rem; + } + + svg + span { + margin-left: 0.75rem; + } +} + +.button_primary { + background-color: $actionPrimary; + color: $contentContrastPrimary; + + &:hover { + background-color: $actionPrimaryHover; + } + + &:active, + &.active { + background-color: $actionPrimaryActive; + } + + &:focus-visible { + background-color: $orange-500; + outline-color: $orange-300; + } + + &.disabled { + background-color: $actionPrimaryDisabled; + } +} + +.button_secondary { + color: $contentPrimary; + border: 1px solid $midnightPurple-200; + + &:hover { + border-color: $contentPrimary; + } + + &:active, + &.active { + border-color: $midnightPurple-400; + } + + &:focus-visible { + border-color: $midnightPurple-300; + outline-color: $midnightPurple-300; + } + + &.disabled { + border-color: $midnightPurple-200; + color: $midnightPurple-100; + } +} + +.button_contrast-secondary { + background: none; + color: $contentContrastPrimary; + border: 1px solid $contentContrastSecondary; + + &:hover { + border-color: $contentContrastSecondaryHover; + } + + &:active, + &.active { + border-color: $contentContrastPrimary; + } + + &:focus-visible { + border-color: $actionPrimary; + outline-color: $actionPrimary; + } +} diff --git a/src/scss/code.scss b/src/scss/code.scss index e98c7e09..288fae6d 100644 --- a/src/scss/code.scss +++ b/src/scss/code.scss @@ -33,7 +33,7 @@ :not(pre) > code, pre { - background: $sidebarPurple; + background: $bgSurfaceLight1; } /* Inline code */ diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 2522fb1d..16d1bf34 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -1,27 +1,96 @@ -$lightGreyBG: #f3f4f5; -$sidebarPurple: #f7f7f8; -$greyPurple: #eae9ec; -$standartPurple: #5d40bf; -$mutedPurple: #767283; -$shadowPurple: #dfdcec; -$contentLink: #ff5913; -$contentLinkActive: #db4100; -$contentLinkHover: #ff6c2e; -$contentPrimary: #22174a; -$borderNormal: #d7dbdf; -$contentSecondary: #56535f; -$contentSecondaryHover: #656c71; -$contentSecondaryActive: #51575c; -$contentContrastSecondary: rgba(255, 255, 255, 0.72); -$borderLine: #d6d7d8; -$contentDisabled: #a5a6a8; -$secondaryContrast: rgba(255, 255, 255, 0.24); -$secondaryContrastHover: rgba(255, 255, 255, 0.72); -$secondaryContrastActive: #ffffff; -$secondaryContrastFocus: #ff5913; -$contentContrastPrimary: #ffffff; -$bgSurfaceDark: #5d40bf; -$actionNeutral: #6e767d; -$border: #d7dbdf; -$brandColor: #ff5913; +// Core Colors +$orange: #ff4c00; +$orange-500: #f87239; +$orange-400: #f58a5c; +$orange-300: #ffb69a; +$orange-200: #ffd8c9; +$orange-100: #ffeee8; + +$midnightPurple: #251b29; +$midnightPurple-500: #3b3540; +$midnightPurple-400: #53505c; +$midnightPurple-300: #6d6b77; +$midnightPurple-200: #878590; +$midnightPurple-100: #a1a0a5; + +$cloudLight: #ffc090; +$cloudLight-500: #f8c9a5; +$cloudLight-400: #f7d6be; +$cloudLight-300: #fadcc4; +$cloudLight-200: #fce7d6; +$cloudLight-100: #fdf1e8; + +$black: #161616; +$grey-700: #4d4d4d; +$grey-600: #939393; +$grey-500: #cecece; +$grey-400: #dddddd; +$grey-300: #eeeeee; +$grey-200: #f6f6f6; +$white: #ffffff; +$polarWhite: #fffef8; + +// Additional +$darkEarth: #3c1414; +$darkPlum: #81265d; +$violet: #3b2b42; +$violet-500: #5b4265; +$violet-400: #856292; + +$purple-600: #cabafd; +$purple-500: #d7cbfd; +$purple-400: #dfd6fe; +$purple-300: #e7e0fe; +$purple-200: #efeafe; +$purple-100: #f7f5ff; + +$darkGreen: #163311; +$green-600: #6ad47e; +$green-500: #80db91; +$green-400: #9ee3ab; +$green-300: #b4e9be; +$green-200: #daf4df; +$green-100: #f0fbf2; + +$red-400: #b3261e; +$red-300: #c95f5a; +$red-200: #de8f8d; +$red-100: #f7c0be; + +// Action Primary +$actionPrimary: $orange; +$actionPrimaryHover: $orange-500; +$actionPrimaryActive: $orange-400; +$actionPrimaryDisabled: $orange-200; + +// Content +$contentPrimary: $midnightPurple; +$contentSecondary: $grey-700; +$contentSecondaryHover: $grey-600; +$contentDisabled: $grey-500; + +$contentContrastPrimary: $white; +$contentContrastSecondary: $grey-400; +$contentContrastSecondaryHover: $grey-200; + +$standartPurple: $violet; +$mutedPurple: $midnightPurple-200; +$actionNeutral: $grey-600; + +// Background +$bgSurfaceDark: $midnightPurple-400; +$bgSurfaceDark1: $midnightPurple-500; +$bgSurfaceDark2: $midnightPurple; + +$bgSurfaceLight: $white; +$bgSurfaceLight1: $grey-200; +$bgSurfaceLight2: $grey-300; + +// Border + +$border: $grey-500; +$borderDark: $midnightPurple-400; +$borderLine: $grey-400; $pointCheckmark: #dfdcec; + +$borderButtonRadius: 6.25rem; diff --git a/src/styles.scss b/src/styles.scss index 8c867ed1..a13a78c0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,5 @@ @import './scss/variables'; +@import './scss/buttons'; @import './scss/code'; html { @@ -120,7 +121,11 @@ p { } a { - color: $secondaryContrastFocus; + color: $actionPrimary; +} + +svg { + vertical-align: middle; } .gc-title-with-anchor { @@ -181,7 +186,7 @@ a { padding: 0.25rem 0.75rem; width: auto; background-color: $contentSecondary; - color: $secondaryContrastActive; + color: $contentContrastPrimary; text-align: center; border-radius: 6px; position: absolute; @@ -221,7 +226,7 @@ a { color: $contentSecondary; border-left: 0.25em solid $borderLine; margin-left: 0; - background: $lightGreyBG; + background: $bgSurfaceLight1; display: block; } } @@ -262,8 +267,8 @@ table { text-align: center; color: $contentPrimary; padding: 0.5rem; - background: $sidebarPurple; - border: 1px solid $borderNormal; + background: $bgSurfaceLight1; + border: 1px solid $border; } td { @@ -274,7 +279,7 @@ table { text-align: center; color: $contentPrimary; padding: 0.5rem; - border: 1px solid $borderNormal; + border: 1px solid $border; ul, ol { From 5acfd2748d29d100e5e1536f08a8d0c485fc3bb0 Mon Sep 17 00:00:00 2001 From: Ilia Kotiashkin Date: Thu, 19 Oct 2023 16:19:45 +0300 Subject: [PATCH 07/10] rebranding fixes --- src/app/components/header/header.component.html | 2 +- src/app/components/header/header.component.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index da8683f7..20fe913c 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -48,7 +48,7 @@ > path { - stroke: $borderDark; + stroke: $contentSecondaryHover; } } &:active { svg > path { - stroke: $borderDark; + stroke: $contentContrastPrimary; } } } From ed2a8b536f8ed7818f30c0ef07e58a32a72f340a Mon Sep 17 00:00:00 2001 From: Dasha Karpova Date: Thu, 19 Oct 2023 17:23:11 +0400 Subject: [PATCH 08/10] Request of the solution architector of the streaming platform --- ...netization-to-your-live-streams-and-videos.md | 2 +- ...ustomize-appearance-of-the-built-in-player.md | 2 +- .../combine-multiple-live-streams.md | 16 ++++++++++++++-- .../pause-and-rewind-the-live-streams.md | 2 +- ...-your-live-streams-and-save-them-as-videos.md | 4 ++-- ...n-of-a-live-broadcast-with-uploaded-videos.md | 2 +- .../create-and-configure-playlists-for-videos.md | 2 +- 7 files changed, 21 insertions(+), 9 deletions(-) diff --git a/documentation/streaming-platform/extra-features/add-monetization-to-your-live-streams-and-videos.md b/documentation/streaming-platform/extra-features/add-monetization-to-your-live-streams-and-videos.md index 7a61ef6c..979293f5 100644 --- a/documentation/streaming-platform/extra-features/add-monetization-to-your-live-streams-and-videos.md +++ b/documentation/streaming-platform/extra-features/add-monetization-to-your-live-streams-and-videos.md @@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on how to add monetization to your video c ## What is the Ads feature? -Ads is a paid feature for adding custom ads in any part of videos (VOD) and live streams that allows you to monetize content. We support different ad formats: Videos, banners, hyperlinks, and various advertising vendors such as Google, Criteo, Adfox, etc. +Ads is a free feature for adding custom ads in any part of videos (VOD) and live streams that allows you to monetize content. We support different ad formats: Videos, banners, hyperlinks, and various advertising vendors such as Google, Criteo, Adfox, etc. We use VAST (Video Ad Serving Template) integration, which contains all the information about the ad: Its physical location, format, URLs that will be invoked when different events occur, and more. diff --git a/documentation/streaming-platform/extra-features/customize-appearance-of-the-built-in-player.md b/documentation/streaming-platform/extra-features/customize-appearance-of-the-built-in-player.md index 0e762135..e001635d 100644 --- a/documentation/streaming-platform/extra-features/customize-appearance-of-the-built-in-player.md +++ b/documentation/streaming-platform/extra-features/customize-appearance-of-the-built-in-player.md @@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on configuring custom players with your br ## What is a Players feature -Player is a paid feature that allows customizing the default player. +Player is a free feature that allows customizing the default player. Let’s compare the default and custom player. To show you the customization options: diff --git a/documentation/streaming-platform/live-streaming/combine-multiple-live-streams.md b/documentation/streaming-platform/live-streaming/combine-multiple-live-streams.md index ed94520d..d48d635c 100644 --- a/documentation/streaming-platform/live-streaming/combine-multiple-live-streams.md +++ b/documentation/streaming-platform/live-streaming/combine-multiple-live-streams.md @@ -5,6 +5,7 @@ published: true order: 40 toc: --1--What is Multicamera?: "what-is-multicamera" + --1--Enable: "enable-the-multicamera-feature" --1--Configure: "configure-multicamera" pageTitle: Overview of the Multicamera Feature and Its Setup | Gcore pageDescription: A step-by-step guide on how to combine several live streams in one interface. @@ -13,14 +14,25 @@ pageDescription: A step-by-step guide on how to combine several live streams in ## What is Multicamera?  -Multicamera is a free option used to combine two or more live streams. You deliver several streams at once, and a user can switch between them using a button in the player.  +Multicamera is a free feature used to combine two or more live streams. You deliver several streams at once, and a user can switch between them using a button in the player.  -This option is useful when you need to stream the event simultaneously from several angles or in different languages.  +This feature is useful when you need to stream the event simultaneously from several angles or in different languages.  **Multiple angles.** You are broadcasting a film award ceremony. Your audience wants to see not only the stage, where the host announces winners but also the hall with celebrities. With a Multicamera, you stream from two cameras at once — one shoots the stage, and the other films the hall.  Each viewer can click a button in the player to switch between cameras at any time.  **Multiple languages.** You are broadcasting for a multilingual audience: Germans, English and French. You create three live streams dubbed into English, German and French, respectively. You send these streams through Multicamera, and viewers get the opportunity to instantly switch between different voice-overs.  +## Enable the Multicamera feature + +Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your control panel. + +Enable the Record feature + +The message template: *"Good afternoon! Please enable the Multicamera feature for an account with ID … (your ID)"*. + +We will notify you when we activate the Multicamera feature. After that, you will be able to work with several live streams in one player. + + ## Configure Multicamera Create at least two live streams before you configure the Multicamera. To do this, you can use our guide: Create a live stream.  diff --git a/documentation/streaming-platform/live-streaming/pause-and-rewind-the-live-streams.md b/documentation/streaming-platform/live-streaming/pause-and-rewind-the-live-streams.md index 47c1786e..d9c75e47 100644 --- a/documentation/streaming-platform/live-streaming/pause-and-rewind-the-live-streams.md +++ b/documentation/streaming-platform/live-streaming/pause-and-rewind-the-live-streams.md @@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on how to pause and rewind the live stream ## What is the DVR feature? -DVR (Digital Video Recorder) is a paid feature that allows your viewers to pause and rewind the broadcast. +DVR (Digital Video Recorder) is a free feature that allows your viewers to pause and rewind the broadcast. DVR is based on caching technology. When you enable the feature, we start caching your live streams for 1 hour by default. This means that viewers can rewind your broadcast for up to one hour. diff --git a/documentation/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos.md b/documentation/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos.md index 26217b0c..a62e0017 100644 --- a/documentation/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos.md +++ b/documentation/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos.md @@ -17,11 +17,11 @@ pageDescription: A step-by-step guide on how to record your live streams and whe ## What is the Record feature -Record is a paid feature that allows you to record your live streams and store them in the Streaming storage. You can automatically record entire streams or manually record only desired fragments. +Record is a free feature that allows you to record your live streams and store them in the Streaming storage. You can automatically record entire streams or manually record only desired fragments. ## Enable the Record feature -Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your Control panel. +Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your control panel. Enable the Record feature diff --git a/documentation/streaming-platform/video-hosting/create-an-illusion-of-a-live-broadcast-with-uploaded-videos.md b/documentation/streaming-platform/video-hosting/create-an-illusion-of-a-live-broadcast-with-uploaded-videos.md index 51530c52..1822b3e1 100644 --- a/documentation/streaming-platform/video-hosting/create-an-illusion-of-a-live-broadcast-with-uploaded-videos.md +++ b/documentation/streaming-platform/video-hosting/create-an-illusion-of-a-live-broadcast-with-uploaded-videos.md @@ -13,7 +13,7 @@ pageDescription: A step-by-step guide on creating an illusion of live mode for y ## What is Live imitation? -Live imitation is a paid feature that is used for broadcasting videos uploaded to your account in live mode. +Live imitation is a free feature that is used for broadcasting videos uploaded to your account in live mode. Example: You are the owner of a movie streaming service. On September 1, you are going to premiere a new series for your viewers. One way to do it is to use the Live imitation feature. In this case, you upload episodes to our Streaming Platform as usual videos and select the start date and time (e.g., September 1 at 9 pm). So, up to this moment, videos will not be shown. Your viewers will be able to see it only at a fixed time. From their point of view, it would not look like watching a video but like a live stream. diff --git a/documentation/streaming-platform/video-hosting/create-and-configure-playlists-for-videos.md b/documentation/streaming-platform/video-hosting/create-and-configure-playlists-for-videos.md index 8c9158b4..d947fe62 100644 --- a/documentation/streaming-platform/video-hosting/create-and-configure-playlists-for-videos.md +++ b/documentation/streaming-platform/video-hosting/create-and-configure-playlists-for-videos.md @@ -14,7 +14,7 @@ pageDescription: A step-by-step guide to creating and customizing playlists that ## What is the Playlists feature? -Playlists are a paid feature that allows you to merge several videos into one playlist and play them alternately. +Playlists are a free feature that allows you to merge several videos into one playlist and play them alternately. ## Enable the Playlists feature From 24af2c837cdd6d20c6b53bf6b044211bd10535be Mon Sep 17 00:00:00 2001 From: IliaSysoevQA <145036021+IliaSysoevQA@users.noreply.github.com> Date: Fri, 20 Oct 2023 12:42:17 +0500 Subject: [PATCH 09/10] Update create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md --- ...m-a-template-to-configure-settings-for-particular-files.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md b/documentation/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md index b098c34e..4cb90789 100644 --- a/documentation/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md +++ b/documentation/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md @@ -41,7 +41,7 @@ A new page will open. Follow the remaining steps on that page. 2\. Enter the rule name. -3\. Specify the path to the file or folder for which the rule will be applied. The path muststart with “**^/**” or “**/**” and cannot contain the domain name of your origin. You can specify a URI or use regular expressions (regex). +3\. Specify the path to the file or folder for which the rule will be applied. The path must start with “**^/**” or “**/**” and cannot contain the domain name of your origin. You can specify a URI or use regular expressions (regex). **Note**: If a URI matches multiple rules, the one higher in the order of the rules will be applied. For example, there are two rules on the resource: ```/folder/.*``` (the first rule) and ```/folder/image.jpg``` (the second rule). The first rule will be applied to the ```/folder/image file.jpg``` file. @@ -119,4 +119,4 @@ To disable or enable a rule: Disabled rules will have a Suspended status and enabled rules will have an Active status. -Suspended status and \ No newline at end of file +Suspended status and From 55b6860bbdcb08a9fab584a3d5e2be4538b8c93d Mon Sep 17 00:00:00 2001 From: Maria Yurlava Date: Mon, 23 Oct 2023 10:08:36 +0200 Subject: [PATCH 10/10] WEB-4462 Fix scroll + support button --- .../documentation/documentation.component.ts | 47 +++++++++---------- .../left-bar-menu.component.html | 6 --- 2 files changed, 22 insertions(+), 31 deletions(-) diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts index d6e198a2..3ef848a5 100644 --- a/src/app/components/documentation/documentation.component.ts +++ b/src/app/components/documentation/documentation.component.ts @@ -13,7 +13,7 @@ import { } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { isScullyRunning, ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib'; -import { combineLatest, first, map, Observable, of, Subscription, take } from 'rxjs'; +import { combineLatest, filter, first, map, Observable, of, Subscription, take } from 'rxjs'; import { categories, DOCS_GITHUB_REPO, HEADER_HEIGHT, METADATA_FILE_TITLE } from '../../constants'; import { MenuItem, MenuTreeItem, TableOfContents } from '../../models'; import { GitHubAPIService } from '../../services'; @@ -51,6 +51,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr public isArticleRated: boolean = false; private routerSubscription: Subscription; + private hasScrolled = false; @ViewChild('scullyContainer') public scullyContainer: ElementRef; @ViewChild('fullSizeImage') public fullSizeImage: ElementRef; @@ -61,42 +62,38 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr private route: ActivatedRoute, private githubApiService: GitHubAPIService, private viewportScroller: ViewportScroller, - private ngZone: NgZone, private renderer: Renderer2, private changeDetectorRef: ChangeDetectorRef, private data: MenuService, + private elementRef: ElementRef, ) {} public ngAfterViewChecked(): void { - this.route.fragment.pipe(first()).subscribe((fragment) => { - this.viewportScroller.scrollToAnchor(fragment); - }); + const contentElement = this.elementRef.nativeElement.querySelector('h1'); + if (contentElement && !this.hasScrolled) { + this.route.fragment.pipe(first()).subscribe((fragment) => { + this.viewportScroller.scrollToAnchor(fragment); + this.hasScrolled = true; + }); - if (this.scullyContainer.nativeElement) { this.scullyContainer.nativeElement.querySelectorAll(':not(.gc-gallery p) > img').forEach((img: Element) => { - this.ngZone.runOutsideAngular(() => { - this.renderer.listen(img, 'click', (event) => this.expandImage(event)); - }); + this.renderer.listen(img, 'click', (event) => this.expandImage(event)); }); - this.ngZone.runOutsideAngular(() => { - window.document.addEventListener('scroll', this.handlePageScroll, true); - }); + window.document.addEventListener('scroll', this.handlePageScroll, true); - this.ngZone.runOutsideAngular(() => { - this.renderer.listen(this.fullSizeImage.nativeElement, 'click', () => this.closeFullSizeModal()); - }); + this.renderer.listen(this.fullSizeImage.nativeElement, 'click', () => this.closeFullSizeModal()); + } - if (this.tableOfContents) { - this.tableOfContentsHeaders = this.tableOfContents - .map(({ fragment }) => { - if (fragment) { - return document.getElementById(`${fragment}`); - } - return null; - }) - .filter((item: Element) => item); - } + if (this.tableOfContents && contentElement) { + this.tableOfContentsHeaders = this.tableOfContents + .map(({ fragment }) => { + if (fragment) { + return document.getElementById(`${fragment}`); + } + return null; + }) + .filter((item: Element) => item); } } diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.html b/src/app/components/left-bar-menu/left-bar-menu.component.html index 3fc192ab..b30eb8ed 100644 --- a/src/app/components/left-bar-menu/left-bar-menu.component.html +++ b/src/app/components/left-bar-menu/left-bar-menu.component.html @@ -47,12 +47,6 @@
-