Scribd
Upload
5 views26 pages

CSS Styling Guide for Web Design

The document is a CSS stylesheet that defines various styles for a web page, including font imports, color variables, layout, typography, header, banner, callout, categories, widget sections, and footer styles. It includes responsive design rules for different screen sizes, ensuring the layout adapts accordingly. The stylesheet also specifies hover effects and other interactive elements for a cohesive user experience.

Uploaded by

shyam7623
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views26 pages

CSS Styling Guide for Web Design

The document is a CSS stylesheet that defines various styles for a web page, including font imports, color variables, layout, typography, header, banner, callout, categories, widget sections, and footer styles. It includes responsive design rules for different screen sizes, ensuring the layout adapts accordingly. The stylesheet also specifies hover effects and other interactive elements for a cohesive user experience.

Uploaded by

shyam7623
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

@import url('[Link]

family=Inter:wght@400;500;700;800&display=swap');

@font-face {
font-family: HelveticaNeue-base;
src: url([Link]
Documentation/[Link]);
}

@font-face {
font-family: HelveticaNeue-medium;
src: url([Link]
Documentation/[Link]);
}

@font-face {
font-family: HelveticaNeue-heading;
src: url([Link]
Documentation/[Link]);
}

:root {
--font-base: 'Inter', sans-serif;

--color-primary: #183944;
--color-secondary: #00B0B3;
--color-secondary-light: #E6F7F7;

--color-facebook: #1674ea;
--color-twitter: #1a98e8;
--color-linked-in: #0073af;

--color-white: #fff;
--color-white-fog: #fbfbfb;
--color-dark: #000;

--color-gray: #eaeaea;
--color-gray-01: #9c9c9c;

--articles-color-white-smoke: #F2F2F2;
--articles-color-gray: #666;
--articles-color-breadcrum-divider: #E5E5E5;
}

/*Default*/
[Link] h1,
[Link] h2,
[Link] h3,
[Link] h4,
[Link] h5,
[Link] h6 {
font-family: var(--font-base) !important;
font-weight: 700;
}

[Link] p,
[Link] span,
[Link] a,
[Link] input,
[Link] label,
[Link] li {
font-family: var(--font-base) !important;
font-weight: 400;
}

[class*=" doc360column-"],
[class^="doc360column-"] {
font-family: doc360columnicon !important;
}

a{
text-decoration: none;
}

/*Layout*/
[Link] .container {
width: 90%;
max-width: 90%;
}

@media screen and (max-width: 1366px) {


[Link] .container {
width: 1200px;
max-width: 1200px;
}
}

@media screen and (max-width: 1240px) {


[Link] .container {
width: 85%;
max-width: 85%;
}
}
.section__row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 25px;
}

@media screen and (max-width: 600px) {


.section__row {
flex-direction: column;
}
}

.col--3 {
width: calc(33.33% - 25px);
}

.col--4 {
width: calc(25% - 25px);
}

.col--5 {
width: calc(20% - 25px);
}

.col--6 {
width: calc(50% - 25px);
}

@media screen and (max-width: 600px) {

.col--3,
.col--4,
.col--5,
.col--6 {
width: 100%;
}
}

/*Typography*/
[Link] .section--heading,
.landing_widget .widget_block h3 {
font-size: 24px;
font-weight: bold;
line-height: 34px;
margin: 0 0 20px;
}
[Link] .section--description,
[Link] p {
font-size: 16px;
color: var(--color-dark);
line-height: 26px;
margin: 0 0 10px;
}

[Link] .section--description:last-child,
[Link] p:last-child {
margin: 0;
}

/*Global*/
[Link] div#doc_main_content {
min-height: 10px !important;
}

.landing_top_inner {
width: 100%;
}

figure {
margin: 0;
}

section {
padding: 60px 0;
}

.text-trunc {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/*Header*/
header .header_top {
padding: 15px 0;
}

@media screen and (max-width: 768px) {


header .header_top {
display: none;
}
}

header .header_top .header_logo {


height: auto;
}

header .header_top .header_logo img {


width: auto;
max-height: 40px;
}

header .header_top .header_top_nav ul li a {


font-size: 15px;
line-height: 25px;
}

header .header-dropdown-selection .btn-select:hover {


border: 1px solid rgba(0, 0, 0, .1);
}

header .header-dropdown-selection .header-dropdown {


padding: 0;
overflow: hidden;
}

header .header_top .header_top_nav .header-dropdown ul li a {


margin-left: 0;
}

header .header_top .user-dropdown-content {


box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}

.header_top_nav .user-logout,
.slicknav_menu .slicknav_nav .header_top_nav_options .user-dropdown .user-dropdown-
content .user-detail .user-dropdown-link-logout .user-logout a {
margin: 0 !important;
background: var(--color-primary);
padding: 5px 15px;
border-radius: 5px;
}

header .header_top .user-dropdown-content .user-detail .user-name {


font-family: var(--font);
}
header .header_top .user-dropdown-content .user-detail .user-logout a {
background-color: transparent !important;
border: 0;
}

@media screen and (max-width: 768px) {


.slicknav_menu {
padding: 0;
}

.user-logout {
margin: 10px !important;
}
}

.header_top_nav .user-logout a {
color: var(--color-white);
}

body header#doc_header {
background: var(--color-white) !important;
}

/*Banner Section*/
.landing_top.no-cover {
padding: 150px 0;
background: url([Link]
Images/Documentation/banner_img.png) no-repeat !important;
background-size: contain !important;
background-position: 75% 50% !important;
}

@media screen and (max-width: 600px) {


.landing_top.no-cover {
padding: 60px 0;
background: none !important;
}
}

.landing_top_inner.left {
width: 45%;
}

@media screen and (max-width: 600px) {


.landing_top_inner.left {
width: 100%;
}
}

.landing_top_inner.left h1 {
font-size: 42px;
font-weight: 800;
line-height: 52px;
margin: 0 0 15px;
}

@media screen and (max-width: 1240px) {


.landing_top_inner.left h1 {
font-size: 24px;
line-height: 34px;
}
}

.landing_top_inner.left h1 span {
font-weight: bold;
color: var(--color-secondary);
}

.landing_top_inner.left .promo-text {
font-size: 20px;
line-height: 30px;
margin: 0 0 30px;
}

.landing_top .search-sec {
width: 40%;
margin: 0;
}

@media screen and (max-width: 600px) {


.landing_top .search-sec {
width: 100%;
}
}

.landing_top .search-sec .ais-SearchBox-submit svg {


fill: var(--color-gray-01);
}

.landing_top.no-cover .search-sec input[type=search] {


height: auto;
padding: 15px 40px;
}
.landing_top.no-cover .search-sec input[type=search]::placeholder {
position: relative;
top: 1px;
}

/*Callout Section*/
[Link] {
position: relative;
padding-top: 0;
background: linear-gradient(to bottom, var(--color-white-fog) 50%, var(--color-primary)
50%);
}

[Link] .section__row {
justify-content: center;
gap: 0;
position: relative;
background: var(--color-white);
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
z-index: 2;
}

[Link] .col--5 {
width: 20%;
}

@media screen and (max-width: 1240px) {


[Link] .col--5 {
width: 50%;
}
}

@media screen and (max-width: 600px) {


[Link] .col--5 {
width: 100%;
}
}

[Link] a {
text-align: center;
position: relative;
padding: 30px;
}

[Link] a::after {
content: "";
width: 2px;
height: 70%;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: var(--color-gray);
}

[Link] a:last-child::after {
display: none;
}

@media screen and (max-width: 1240px) {


[Link] a:nth-child(2)::after {
display: none;
}
}

[Link] svg {
margin-bottom: 12px;
}

[Link] a h4 {
color: var(--color-dark);
}

[Link] [Link] p {
color: var(--articles-color-gray);
}

[Link] a:hover {
background: var(--color-secondary);
}

[Link] a:hover::after {
display: none;
}

[Link] [Link]:hover * {
color: var(--color-white);
fill: var(--color-white);
}

[Link]-shape {
width: auto;
height: 80px;
position: absolute;
bottom: 10px;
left: 10px;
}

/*Categoreis*/
[Link] {
background: var(--color-white-fog);
}

[Link] .section__row {
gap: 35px 25px;
}

@media screen and (max-width: 1240px) {


[Link] .col--4 {
width: calc(50% - 25px);
}
}

@media screen and (max-width: 600px) {


[Link] .col--4 {
width: 100%;
}
}

[Link] a {
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: var(--color-white);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
transition: all .2s ease;
}

@media screen and (max-width: 1366px) {


[Link] a {
padding: 10px;
}
}

[Link] a:hover {
box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
}

[Link] a .icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-secondary-light);
border-radius: 8px;
}

[Link] a .icon svg {


width: 24px;
height: 24px;
}

[Link] a .icon i {
font-size: 22px;
color: var(--color-dark);
}

[Link] a .content {
width: calc(100% - 80px);
padding-left: 30px;
}

[Link] a h5 {
font-size: 18px;
font-weight: 500;
line-height: 30px;
color: var(--color-dark);
display: inline-block;
position: relative;
}

/*Widget Section*/
.landing_widget {
padding: 60px 0;
background: var(--color-white-smoke);
}

@media screen and (max-width: 768px) {


.landing_widget {
padding: 30px 0;
}
}
.landing_widget .widget_block h3 {
font-size: 24px;
font-weight: 800;
line-height: 34px;
color: var(--color-dark);
margin: 0 0 15px;
}

.innovate .landing_widget .widget_block .widget_links li {


padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 5px;
}

.landing_widget .widget_block .widget_links li::before {


content: "\f0da" !important;
font-size: 16px !important;
font-weight: bold !important;
color: var(--color-primary);
top: 0 !important;
left: 5px !important;
background: transparent !important;
transition: all .01s linear !important;
}

.landing_widget .widget_block .widget_links li:hover::before {


color: var(--color-secondary);
}

.landing_widget .widget_block .widget_links li a {


font-size: 16px;
line-height: 26px;
color: var(--color-dark) !important;
margin-bottom: 0;
}

.landing_widget .widget_block .widget_links li a:hover {


color: var(--color-secondary) !important;
text-decoration: none !important;
}

/*Footer*/
footer {
text-align: center;
padding: 0 0 15px;
background: transparent;
border: 0;
}

footer .container {
padding-top: 30px;
border-top: 1px solid var(--color-gray);
}

.footer__block {
display: flex;
align-items: center;
justify-content: space-between;
}

@media screen and (max-width: 600px) {


.footer__block {
flex-direction: column;
}

.footer__block .terms {
order: 1;
}
}

footer figure img {


width: auto;
height: 40px;
}

.social-media {
margin: 20px 0;
}

.social-media a {
margin: 0 10px;
}

.social-media a i {
font-size: 22px;
color: var(--color-dark);
}

body.dark_theme .social-media a i {
color: var(--color-white);
}

.social-media [Link]:hover i {
color: var(--color-facebook);
}

.social-media [Link]:hover i {
color: var(--color-twitter);
}

.social-media [Link]-in:hover i {
color: var(--color-linked-in);
}

.social-media [Link] svg {


width: 18px;
height: 18px;
position: relative;
top: 2px;
}

.social-media [Link] .shape_1,


.social-media [Link] .shape_2 {
fill: var(--color-dark);
}

body.dark_theme .social-media [Link] .shape_1,


body.dark_theme .social-media [Link] .shape_2 {
fill: var(--color-white);
}

.social-media [Link] .base {


fill: none;
}

.social-media [Link]:hover .shape_1,


body.dark_theme .social-media [Link]:hover .shape_1 {
fill: url(#base-gradient);
}

.social-media [Link]:hover .shape_2,


body.dark_theme .social-media [Link]:hover .shape_2 {
fill: url(#brand-gradient);
}

[Link] footer .terms p,


[Link] footer .terms p {
font-family: var(--font-base) !important;
font-size: 12px;
font-weight: 500;
color: var(--color-gray-01);
letter-spacing: 0;
}

/*Articles Page*/
[Link] h1,
[Link] h2,
[Link] h3,
[Link] h4,
[Link] h5,
[Link] h6 {
font-family: HelveticaNeue-heading !important;
font-weight: 700;
letter-spacing: 1px;
}

[Link] p,
[Link] span,
[Link] a,
[Link] input,
[Link] label,
[Link] li,
[Link] [Link],
[Link] [Link] {
font-family: HelveticaNeue-base !important;
font-weight: 400;
letter-spacing: 0.16px;
}

@media screen and (min-width: 769px) {


[Link] {
background: var(--color-white-fog);
}

[Link] p:empty {
display: none;
}

/*Header*/
[Link] #doc_header {
background: var(--color-white-fog) !important;
}

[Link] header .header_top,


[Link] .filter_form,
[Link] .left_sidebar .left_sidebar_nav:after {
display: none;
}

[Link] header .header_bottom {


height: 74px;
background: var(--color-white);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.02);
}

body.dark_theme.articles header .header_bottom {


background: #1b1b1b;
border-bottom: 1px solid #656565;
}

[Link] header .header_bottom .header_bottom_nav {


display: flex;
align-items: center;
justify-content: space-between;
}

[Link] header .header_bottom .header_bottom_nav ul li {


float: none;
}

[Link] header .header_bottom .header_bottom_nav ul li .home-icon {


font-size: 20px;
line-height: 30px;
color: var(--color-dark);
margin-right: 0;
padding: 0;
}

[Link] header .header_bottom .header_bottom_nav ul li .home-icon:hover {


background: transparent;
}

[Link] header .header_bottom .header_bottom_nav ul li .home-icon i::before {


content: "\f00d";
}

body.dark_theme.articles header .header_bottom .header_bottom_nav ul li .home-icon i {


color: var(--articles-color-breadcrum-divider);
}

[Link] div#bread-crumb-container {
width: 50%;
position: absolute;
top: 25px;
left: 8vw;
}

[Link] .breadcrumb-sec {
padding: 0;
}

[Link] .breadcrumb-sec .container {


width: 100%;
max-width: 100%;
}

[Link] .breadcrumb-sec .container span:first-child::before {


content: "";
width: 1px;
height: 42px;
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
background: var(--articles-color-breadcrum-divider);
}

[Link] .breadcrumb-sec a {
font-family: HelveticaNeue-medium !important;
font-size: 18px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.18px;
color: var(--articles-color-gray);
}

[Link] .breadcrumb-sec .container span:last-child a {


color: var(--color-dark);
}

body.dark_theme.articles .breadcrumb-sec .container span:last-child a {


color: var(--color-white);
}

[Link] .breadcrumb-sec span::after {


width: 6.7px;
height: 12.09px;
top: calc(50% + 2px);
transform: translate(4px, -50%) rotate(0);
background: url([Link]
e0fa1d8ccdee/Images/Documentation/[Link]) no-repeat;
background-size: contain;
border-right: 0;
}

[Link] header .header_bottom .header_search {


height: 74px;
}

[Link] header .header_bottom .header_search_box {


width: 378px;
top: 50%;
right: 0;
left: auto;
transform: translateY(-50%);
margin-left: 0;
}

[Link] header .header_bottom .header_search_box .search-form


input[type=search] {
font-size: 16px;
height: 44px;
border: 1px solid var(--articles-color-white-smoke);
border-radius: 4px;
opacity: 1;
}

body.dark_theme.articles header .header_bottom .header_search_box .search-form


input[type=search] {
background: #333131;
border-color: #656565;
}

[Link] header .header_bottom .header_search_box .search-form


input[type=search]::placeholder {
color: var(--color-gray-01);
}

[Link] header .header_bottom .header_search_box .ais-SearchBox-submit {


top: 50%;
transform: translateY(-50%);
}

[Link] header .header_bottom .header_search_box .ais-SearchBox-submit svg {


fill: var(--color-gray-01);
}
/*Layout*/
[Link] .docs-main-content {
gap: 40px;
margin: 30px 0 60px;
}

/*Sidebar*/
[Link] .left_sidebar {
width: 285px;
}

[Link] .left_sidebar .left_sidebar_nav {


height: calc(100% - 100px);
}

[Link] .content_block[style="width: 100%;"] .content_container {


margin: 0;
}

[Link] .left-sidebar-toggle {
top: 110px !important;
}

[Link] .left-sidebar-toggle .left-arrow {


transform: translateX(-40px);
}

[Link] .left-sidebar-toggle .right-arrow {


transform: translateX(-15px);
}

[Link] .left_sidebar .left_sidebar_nav .left_sidebar_nav_menu {


margin-top: 0;
}

[Link] .sidebar__heading {
margin-top: 5px;
}

[Link] [Link]--heading {
font-family: HelveticaNeue-heading !important;
font-size: 22px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.22px;
margin: 0 0 20px;
}

[Link] .left_sidebar .[Link]-scrollbar-cornerless,


[Link] .left_sidebar .[Link]-
scrollbar-rtl {
right: 0;
visibility: hidden;
}

[Link] [Link] li a {
margin-bottom: 20px;
}

[Link] .left_sidebar .left_sidebar_nav ul li a .article-title {


font-family: HelveticaNeue-medium !important;
font-size: 16px;
line-height: 24px;
font-weight: 500;
}

[Link] .left_sidebar .left_sidebar_nav ul li a:hover .article-title {


text-decoration: none;
color: var(--color-secondary);
}

[Link] .left_sidebar .left_sidebar_nav ul li a .article-title span {


font-family: HelveticaNeue-base !important;
font-weight: 400;
}

[Link] .left_sidebar .left_sidebar_nav ul li a {


padding: 0 0 0 20px;
}

[Link] .left_sidebar .left_sidebar_nav ul li [Link] {


background: transparent;
color: var(--color-secondary);
}

[Link] .left_sidebar .left_sidebar_nav ul a[data-option=off]:after,


[Link] .left_sidebar .left_sidebar_nav ul a[data-option=on]:after {
content: "\f0da";
font-weight: 900;
color: var(--articles-color-gray);
}

[Link] .left-sidebar-toggle .left-arrow:hover,


[Link] .left-sidebar-toggle .right-arrow:hover {
background: var(--color-secondary) !important;
border-color: var(--color-secondary) !important;
}

[Link] .progress-container .progress-bar {


background: var(--color-secondary);
}

[Link] .watermark_logo {
border: 0;
}

body.dark_theme.articles .watermark_logo img {


filter: brightness(0) invert(1);
}

/*Content block*/
[Link] .content_block {
width: calc(100% - 285px) !important;
padding: 0;
}

[Link] .content_block .content_container .content_container_text_sec {


width: calc(100% - 255px);
}

[Link] .content_block .content_container .content_container_text_sec.no-page-


action {
width: 100%;
}

body.dark_theme .content_block .content_container .content_block_head hr {


background: #616161;
}

[Link] .content_block .content_container .content_container_text_sec .content_conta


iner_text_sec_in,
[Link] .content_block .content_container .page-action .article_action_links {
padding: 40px 40px 32px;
background: var(--color-white);
border: 1px solid var(--articles-color-white-smoke);
border-radius: 8px;
}
body.dark_theme.articles .content_block .content_container .content_container_text_sec .c
ontent_container_text_sec_in,
body.dark_theme.articles .content_block .content_container .page-
action .article_action_links {
background: #333131;
border-color: #656565;
}

[Link] .content_block .content_container .page-action .article_action_links {


padding: 40px 20px;
margin: 5px 0 15px 0;
}

/*TOC*/
[Link] .content_block .content_container .page-action {
width: 229px;
padding: 0;
padding-left: 25px;
}

[Link] .content_block .content_container .page-action .right_sidebar_sticky {


width: 229px !important;
top: 98px;
}

[Link] .content_block .content_container .page-action .article_action_links div {


padding-top: 30px;
border-width: 2px;
}

body.dark_theme.articles .content_block .content_container .page-


action .article_action_links div {
border-color: #656565;
}

[Link] .content_block .content_container .page-action .article_action_links div ul a {


font-size: 12px;
font-weight: 400;
line-height: 20px;
color: var(--color-gray-01);
padding-left: 15px;
}

[Link] .content_block .content_container .page-action .article_action_links ul


[Link]>a {
font-family: HelveticaNeue-medium !important;
font-weight: 500;
color: var(--color-dark);
}

body.dark_theme.articles .content_block .content_container .page-


action .article_action_links ul [Link]>a {
color: var(--color-white)
}

[Link] .content_block .content_container .page-action .article_action_links div ul {


padding: 0;
}

[Link] .content_block .content_container .page-action .article_action_links ul ul li ul


[Link] a:before,
[Link] .content_block .content_container .page-action .article_action_links ul ul ul
[Link] a:before,
[Link] .content_block .content_container .page-action .article_action_links ul ul
[Link] a:before {
background-color: var(--color-dark);
top: 50%;
left: -2px;
transform: translateY(-50%);
}

body.dark_theme.articles .content_block .content_container .page-


action .article_action_links ul ul li ul [Link] a:before,
body.dark_theme.articles .content_block .content_container .page-
action .article_action_links ul ul ul [Link] a:before,
body.dark_theme.articles .content_block .content_container .page-
action .article_action_links ul ul [Link] a:before {
background-color: var(--color-white);
}

[Link] .content_block .content_container .page-action .right_sidebar_sticky .os-


[Link]-scrollbar-handle-
[Link]-scrollbar-cornerless {
visibility: hidden;
}

[Link] .article-vote-container {
padding: 30px 0 0;
border-top: 1px solid var(--articles-color-breadcrum-divider);
}

[Link] .article-vote-container .txt {


padding-right: 15px;
}

[Link] .article-vote-container .actions .btn {


width: auto;
margin: 0 15px;
}

[Link] .prev-next-container {
justify-content: space-between;
padding: 0;
margin: 30px 0 0;
}

[Link] .prev-next-container i {
font-weight: 500;
color: var(--color-dark);
}

body.dark_theme.articles .prev-next-container i {
color: var(--color-white);
}

[Link] .prev-next-container .previous-nav,


[Link] .prev-next-container .next-nav {
max-width: 25%;
margin: 0;
border-color: var(--articles-color-breadcrum-divider);
border-radius: 4px;
}

[Link] .prev-next-container .next-nav {


margin-left: auto;
}

[Link] .previous-nav:hover .flex-col .previous-nav-link,


[Link] .next-nav:hover .flex-col .next-nav-link {
color: var(--color-dark);
}

body.dark_theme .prev-next-container .previous-nav .flex-col .previous-nav-link,


body.dark_theme .prev-next-container .next-nav .flex-col .next-nav-link {
color: var(--color-white);
}

[Link] .sperator {
display: none;
}
/*Index pages*/
[Link] .content_block .content_container .content_block_head .category-title-
content .category-icon,
[Link] .content_block .content_container .content_block_text .category-index-
view .category-index-item .category-index-title .category-index-icon {
display: none;
}

[Link] .content_block .content_container .content_block_head .title-article-count,


[Link] .content_block .content_container .content_block_text .category-index-
view .category-index-item .index-article-count {
margin: 0;
}

[Link] .content_block .content_container .content_block_head .category-


contributor-info,
[Link] .content_block .content_container .content_block_text .category-index-
view .category-index-item .index-article-contributors {
margin: 5px 0;
}

[Link] .content_block .content_container .content_block_head h1 {


font-size: 30px;
line-height: 40px;
margin-bottom: 15px;
}

[Link] .content_block .content_container .content_block_text .category-index-


view .category-index-item .category-index-title h2 {
font-size: 22px;
line-height: 32px;
}

[Link] .content_block .content_container .content_block_text a,


[Link] .content_block .content_container .content_block_text a:visited:hover {
color: var(--color-dark);
}

body.dark_theme.articles .content_block .content_container .content_block_text a,


body.dark_theme.articles .content_block .content_container .content_block_text
a:visited:hover {
color: #c3c3c3;
}

[Link] .content_block .content_container .content_block_text a {


width: 75%;
display: inline-block;
}

[Link] .content_block .content_container .content_block_text .category-index-


view .category-index-item .index-article-snippet {
color: var(--articles-color-gray);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding: 0;
overflow: hidden;
}

[Link] .content_block .content_container .content_block_text .category-index-


view .category-index-item::before {
content: "\f061";
font-family: 'Font Awesome 5 Pro';
font-size: 16px;
color: var(--color-gray-01);
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}

[Link] .index-article-snippet:empty {
display: none !important;
}
}

@media screen and (min-width: 1600px) {


[Link] div#bread-crumb-container {
left: 10vw;
}
}

You might also like