corso/website/src/css/custom.scss
Abin Simon 489ab6f1c0
Fix font-override in blog and docs (#3448)
This prevents it from overriding font for code blocks and helps retain monosapce font for them.

<!-- PR description-->

---

#### Does this PR need a docs update or release note?

- [ ]  Yes, it's included
- [ ] 🕐 Yes, but in a later PR
- [x]  No

#### Type of change

<!--- Please check the type of change your PR introduces: --->
- [ ] 🌻 Feature
- [ ] 🐛 Bugfix
- [x] 🗺️ Documentation
- [ ] 🤖 Supportability/Tests
- [ ] 💻 CI/Deployment
- [ ] 🧹 Tech Debt/Cleanup

#### Issue(s)

<!-- Can reference multiple issues. Use one of the following "magic words" - "closes, fixes" to auto-close the Github issue. -->
* #<issue>

#### Test Plan

<!-- How will this be tested prior to merging.-->
- [x] 💪 Manual
- [ ]  Unit test
- [ ] 💚 E2E
2023-05-18 16:35:50 +00:00

516 lines
9.0 KiB
SCSS

/**
CUSTOM TO THE NEW HOME PAGE
*/
@import "tailwind.scss";
@import "icons.scss";
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root {
--ifm-font-family-base: 'Nunito', sans-serif;
}
html {
scroll-behavior: smooth !important;
}
.plugin-pages {
.colorModeToggle_---node_modules-\@docusaurus-theme-classic-lib-theme-Navbar-Content-styles-module {
display: none;
}
}
.accordion-button-custom::after {
-ms-flex-shrink: 0;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url("../../static/assets/download.svg");
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform 0.2s ease-in-out;
}
.accordion-button-custom:not(.collapsed)::after {
background-image: url("../../static/assets/download_blue.svg");
transform: rotate(-180deg);
}
.accordion-button-custom:not(.collapsed) {
color: #2563eb;
background-color: #fff;
box-shadow: inset 0 -1px 0 #e5e7eb;
}
.link-underline {
border-bottom-width: 0;
background-image: linear-gradient(transparent, transparent), linear-gradient(#4f46E5, #4f46E5);
background-size: 0 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .5s ease-in-out;
}
.link-underline-black {
background-image: linear-gradient(transparent, transparent), linear-gradient(#4f46E5, #4f46E5);
}
.link-underline:hover {
background-size: 100% 2px;
background-position: 0 100%
}
@tailwind utilities;
@tailwind components;
@layer utilities {
.scale-hover:hover {
transform: scale(1.05);
}
}
.custom-bg_ {
background: url("../../static/assets/images/cta.jpg")
}
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #1e204e;
--ifm-color-primary-dark: #1b1d46;
--ifm-color-primary-darker: #1a1b42;
--ifm-color-primary-darkest: #151637;
--ifm-color-primary-light: #212356;
--ifm-color-primary-lighter: #23255a;
--ifm-color-primary-lightest: #272a65;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
[data-theme='light'] {
--ifm-link-color: #087EA4;
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #cdd4f9;
--ifm-color-primary-dark: #a4b1f4;
--ifm-color-primary-darker: #90a0f2;
--ifm-color-primary-darkest: #536bea;
--ifm-color-primary-light: #f6f7fe;
--ifm-color-primary-lighter: #ffffff;
--ifm-color-primary-lightest: #ffffff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
html[data-theme='dark'] {
--ifm-background-color: #111629;
--ifm-navbar-background-color: #111629;
--ifm-link-color: #087EA4;
--docsearch-primary-color: #5468ff;
}
.footer {
--ifm-footer-background-color: #1b2131;
}
.guideImages {
max-width: 650px;
width: 100%;
}
.markdown {
img {
border: 1px solid #80808029;
}
code {
border-color: transparent;
vertical-align: initial;
font-size: var(--ifm-code-font-size) !important;
}
blockquote {
background-color: var(--rn-note-background);
border-left: 8px solid var(--ifm-color-warning);
padding: 15px 30px 15px 15px;
code {
background-color: rgba(0, 0, 0, 0.07);
}
a code {
background-color: transparent;
white-space: pre;
}
}
strong {
font-weight: 600;
}
table {
border-collapse: collapse;
display: table;
margin: 20px 0;
width: 100%;
thead tr {
background-color: var(--divider);
border: 0;
>.cliFlagsCol {
width: 20%;
}
>.cliShortCol {
width: 5%;
}
>.cliDefaultCol {
width: 20%;
}
>.cliHelpCol {
width: 55%;
}
}
tr th {
text-transform: uppercase;
padding: 6px 10px;
font-size: 0.7rem;
text-align: left;
}
tr td {
font-size: 90%;
line-height: 1.3em;
padding: 10px;
text-align: left;
code {
display: inline-block;
line-height: 1.2em;
vertical-align: top;
color: var(--ifm-color-primary-dark);
background-color: unset;
}
ul {
margin: 8px 0 0 0;
padding: 4px 0 4px 20px;
}
.required {
margin-left: 8px;
margin-right: 0;
position: relative;
padding: 0 6px;
border-width: 1px;
border-radius: 3px;
border-color: #fa5035;
border-style: solid;
color: #fa5035;
display: inline-block;
letter-spacing: .02rem;
font-size: 0.8rem;
}
}
hr {
margin: 12px 0;
}
.wideColumn {
width: 128px;
}
.widerColumn {
width: 180px;
}
.table-heading {
font-weight: var(--ifm-table-head-font-weight);
border-bottom: 2px solid var(--ifm-table-border-color);
}
div[class*="codeBlockContainer"] {
&,
& pre {
margin-bottom: 0;
}
pre code {
padding: 12px 16px;
white-space: break-spaces;
}
button {
display: none;
}
}
}
figure {
text-align: center;
padding: 8px;
figcaption {
padding: 8px;
font-size: 0.9rem;
color: var(--subtle);
code {
color: var(--subtle);
}
}
}
.docusaurus-highlight-code-line {
background-color: var(--light);
}
div[class*="codeBlockContainer"] {
box-shadow: none;
border-radius: 8px;
pre {
border-radius: 8px;
}
button {
border-color: var(--light);
background: var(--deepdark);
}
}
div[class*="codeBlockContent"] {
display: grid;
min-width: 100%;
}
div[class*="codeBlockLines"] {
font-size: 80%;
}
div[class*="codeBlockTitle"] {
color: var(--subtle);
background-color: var(--ifm-color-emphasis-300);
}
.tabs {
border-bottom: 1px solid var(--ifm-table-border-color);
color: var(--ifm-font-color-base);
.tabs__item {
font-weight: normal;
font-size: 15px;
color: var(--ifm-font-color-base);
user-select: none;
&:hover {
border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
}
&.tabs__item--active {
font-weight: 700;
}
}
}
}
html[class*='docs-doc-id-cli'] .markdown table thead tr {
:nth-of-type(1) {
width: 20%;
}
:nth-of-type(2) {
width: 5%;
}
:nth-of-type(3) {
width: 20%;
}
:nth-of-type(4) {
width: 50%;
}
}
/* Tiny-Slider CSS */
.tns-outer {
padding: 0 !important
}
.tns-outer [hidden] {
display: none !important
}
.tns-outer [aria-controls],
.tns-outer [data-action] {
cursor: pointer
}
.tns-slider {
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s
}
.tns-slider>.tns-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.tns-horizontal.tns-subpixel {
white-space: nowrap
}
.tns-horizontal.tns-subpixel>.tns-item {
display: inline-block;
vertical-align: top;
white-space: normal
}
.tns-horizontal.tns-no-subpixel:after {
content: '';
display: table;
clear: both
}
.tns-horizontal.tns-no-subpixel>.tns-item {
float: left
}
.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {
margin-right: -100%
}
.tns-no-calc {
position: relative;
left: 0
}
.tns-gallery {
position: relative;
left: 0;
min-height: 1px
}
.tns-gallery>.tns-item {
position: absolute;
left: -100%;
-webkit-transition: transform 0s, opacity 0s;
-moz-transition: transform 0s, opacity 0s;
transition: transform 0s, opacity 0s
}
.tns-gallery>.tns-slide-active {
position: relative;
left: auto !important
}
.tns-gallery>.tns-moving {
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s
}
.tns-autowidth {
display: inline-block
}
.tns-lazy-img {
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
opacity: 0.6
}
.tns-lazy-img.tns-complete {
opacity: 1
}
.tns-ah {
-webkit-transition: height 0s;
-moz-transition: height 0s;
transition: height 0s
}
.tns-ovh {
overflow: hidden
}
.tns-visually-hidden {
position: absolute;
left: -10000em
}
.tns-transparent {
opacity: 0;
visibility: hidden
}
.tns-fadeIn {
opacity: 1;
filter: alpha(opacity=100);
z-index: 0
}
.tns-normal,
.tns-fadeOut {
opacity: 0;
filter: alpha(opacity=0);
z-index: -1
}
.tns-vpfix {
white-space: nowrap
}
.tns-vpfix>div,
.tns-vpfix>li {
display: inline-block
}
.tns-t-subp2 {
margin: 0 auto;
width: 310px;
position: relative;
height: 10px;
overflow: hidden
}
.tns-t-ct {
width: 2333.3333333%;
width: -webkit-calc(100% * 70 / 3);
width: -moz-calc(100% * 70 / 3);
width: calc(100% * 70 / 3);
position: absolute;
right: 0
}
.tns-t-ct:after {
content: '';
display: table;
clear: both
}
.tns-t-ct>div {
width: 1.4285714%;
width: -webkit-calc(100% / 70);
width: -moz-calc(100% / 70);
width: calc(100% / 70);
height: 10px;
float: left
}
/* Tiny-slider CSS end */