Last active
October 30, 2023 14:23
-
-
Save mst-mkt/bc20c274074ec847024812fa65816855 to your computer and use it in GitHub Desktop.
CustomCSS for INIAD-Moocs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;900&family=Ubuntu+Mono&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap'); | |
| @layer layout { | |
| html { | |
| overflow: hidden; | |
| } | |
| .wrapper { | |
| --mcs-gap-width: 1px; | |
| --mcs-header-height: 50px; | |
| --mcs-sidebar-width: 50px; | |
| --mcs-footer-height: 30px; | |
| --mcs-scrollbar-width: 6px; | |
| --mcs-breadcrumb-height: 30px; | |
| display: grid; | |
| grid-template: | |
| "header header" var(--mcs-header-height, 50px) | |
| "aside ." var(--mcs-breadcrumb-height, 30px) | |
| "aside main" calc(100svh - var(--mcs-header-height, 50px) - var(--mcs-breadcrumb-height, 30px) - var(--mcs-footer-height, 30px)) | |
| "aside footer" var(--mcs-footer-height, 30px) | |
| / var(--mcs-sidebar-width) calc(100vw - var(--mcs-sidebar-width)); | |
| overflow: hidden !important; | |
| gap: var(--mcs-gap-width, 0); | |
| > header { | |
| grid-area: header; | |
| position: static !important; | |
| width: 100%; | |
| height: 100%; | |
| display: flex !important; | |
| > .logo { | |
| float: none !important; | |
| padding: 0 !important; | |
| width: var(--mcs-sidebar-width, 50px) !important; | |
| > .logo-mini { | |
| display: block !important; | |
| margin: 0 !important; | |
| width: var(--mcs-sidebar-width, 50px) !important; | |
| height: var(--mcs-header-height, 50px) !important; | |
| } | |
| > .logo-lg { | |
| display: none !important; | |
| } | |
| } | |
| > .navbar { | |
| margin: 0 !important; | |
| display: contents !important; | |
| > .navbar-custom-menu { | |
| flex: 1 1 100%; | |
| > .nav { | |
| float: none !important; | |
| > li { | |
| float: none !important; | |
| margin: 0 0 0 auto !important; | |
| width: fit-content; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| > aside.main-sidebar { | |
| grid-area: aside; | |
| position: static !important; | |
| width: 100% !important; | |
| height: 100%; | |
| transform: none !important; | |
| padding: 0 !important; | |
| } | |
| > div.content-wrapper { | |
| grid-area: main; | |
| width: 100%; | |
| height: 100%; | |
| min-height: auto !important; | |
| margin: 0 !important; | |
| padding: 32px max(16px, 50vw - 40svh) !important; | |
| overflow-y: scroll; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| > .content-header { | |
| padding: 0 !important; | |
| display: contents !important; | |
| > .breadcrumb { | |
| position: fixed !important; | |
| top: calc(var(--mcs-header-height, 50px) + var(--mcs-gap-width, 0)) !important; | |
| left: calc(var(--mcs-sidebar-width, 50px) + var(--mcs-gap-width, 0)) !important; | |
| right: auto !important; | |
| width: calc(100vw - var(--mcs-sidebar-width, 50px)); | |
| margin: 0 !important; | |
| height: var(--mcs-breadcrumb-height, 30px) !important; | |
| padding: 0 8px !important; | |
| display: flex; | |
| gap: 24px; | |
| > li { | |
| height: 100%; | |
| position: relative; | |
| line-height: var(--mcs-breadcrumb-height); | |
| > i { | |
| display: none !important; | |
| } | |
| } | |
| > li::before { | |
| display: none !important; | |
| } | |
| > li::after { | |
| content: ""; | |
| width: 12px; | |
| height: var(--mcs-breadcrumb-height, 30px); | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| right: -18px; | |
| } | |
| } | |
| > .text-center { | |
| order: 1; | |
| } | |
| > #mycls { | |
| display: none !important; | |
| } | |
| } | |
| > .content { | |
| padding: 0 !important; | |
| display: contents !important; | |
| min-height: auto !important; | |
| margin: 0 !important; | |
| } | |
| .content:has(> .row) { | |
| > :not(.row, h4) { | |
| display: none !important; | |
| } | |
| > .row { | |
| display: grid !important; | |
| grid-template-columns: 1fr; | |
| margin: 0 !important; | |
| gap: 16px; | |
| > div { | |
| width: 100% !important; | |
| float: none !important; | |
| min-height: auto !important; | |
| padding: 0 !important; | |
| > .well { | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| min-height: auto !important; | |
| > .media { | |
| display: grid; | |
| grid-template: | |
| "image . . . " 16px | |
| "image title title title" 1fr | |
| "image button1 button2 . " 30px | |
| "image . . . " 16px | |
| / auto 30px 30px 1fr; | |
| row-gap: 4px; | |
| column-gap: 4px; | |
| > .media-left { | |
| padding: 0 !important; | |
| grid-area: image; | |
| position: relative; | |
| > img { | |
| height: 100% !important; | |
| object-fit: cover !important; | |
| width: 128px !important; | |
| } | |
| } | |
| > .media-left::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 50%; | |
| height: 100%; | |
| } | |
| > .media-body { | |
| display: contents !important; | |
| > .media-heading { | |
| grid-area: title; | |
| } | |
| > a { | |
| display: grid !important; | |
| place-content: center; | |
| aspect-ratio: 1; | |
| width: fit-content !important; | |
| font-size: 0 !important; | |
| padding: 0 !important; | |
| > i { | |
| font-size: 16px !important; | |
| } | |
| } | |
| > a:not(.drive-search) { | |
| grid-area: button1; | |
| } | |
| > a.drive-search { | |
| grid-area: button2; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| > .row::before { | |
| display: none !important; | |
| } | |
| > .row:not(:has(> div)) { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| > footer { | |
| grid-area: footer; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0 !important; | |
| padding: 0 16px !important; | |
| display: flex !important; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| > div::-webkit-scrollbar { | |
| width: var(--mcs-scrollbar-width, 6px); | |
| height: var(--mcs-scrollbar-width, 6px); | |
| } | |
| > div::-webkit-scrollbar-thumb { | |
| border-radius: 3px; | |
| } | |
| } | |
| } | |
| @layer design { | |
| :root { | |
| --mcs-bg-color-main: #fff; | |
| --mcs-bg-color-sub: #f9f9f9; | |
| --mcs-bg-color-hover: #1111; | |
| --mcs-border-color: #eee; | |
| --mcs-color-primary: #00a2ff; | |
| --mcs-fg-color-main: #444; | |
| --mcs-fg-color-icon: #999; | |
| } | |
| html, | |
| body { | |
| font-family: 'Inter Tight', 'Zen Kaku Gothic New', sans-serif !important; | |
| } | |
| p, | |
| span, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: inherit !important; | |
| } | |
| .wrapper { | |
| background-color: var(--mcs-border-color, #eee) !important; | |
| > header, | |
| > header > a, | |
| > header > nav > a, | |
| > header > nav > div > ul > li > a, | |
| > aside, | |
| > div, | |
| > div > .content > .row > div > .well, | |
| > footer { | |
| border: 0 !important; | |
| } | |
| > header, | |
| > header > .logo, | |
| > aside, | |
| > div.content-wrapper, | |
| > div > .content-header > .breadcrumb, | |
| > div > .content > .row > div > .well, | |
| > footer { | |
| background-color: var(--mcs-bg-color-main, #fff) !important; | |
| } | |
| > div > .content-header > .breadcrumb, | |
| > div > .content > .row > div > .well { | |
| border-radius: 0 !important; | |
| } | |
| > div { | |
| > .content-header > h1 { | |
| font-size: 32px !important; | |
| font-weight: bold; | |
| color: var(--mcs-fg-color-main) !important; | |
| } | |
| > .content-header > .breadcrumb > li::after { | |
| background-color: var(--mcs-border-color, #eee); | |
| clip-path: polygon( | |
| 0 0, | |
| 1px 0, | |
| 100% 50%, | |
| 1px 100%, | |
| 0 100%, | |
| calc(100% - 1px) 50%, | |
| 0 0 | |
| ) | |
| } | |
| > .content > .row > div { | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: default !important; | |
| border: solid 1.6px var(--mcs-border-color, #eee); | |
| box-shadow: 1px 1px 4px #00000009; | |
| > .well { | |
| box-shadow: none !important; | |
| .media-left::after { | |
| background-color: transparent; | |
| background-image: linear-gradient( | |
| 270deg, | |
| var(--mcs-bg-color-main, #fff) 0%, | |
| var(--mcs-bg-color-main, #fff) 30%, | |
| #0000 100% | |
| ) | |
| } | |
| .media-body > a { | |
| border: 0 !important; | |
| border-radius: 6px !important; | |
| background-color: #0000 !important; | |
| transition: background-color ease .2s; | |
| box-shadow: none !important; | |
| > i { | |
| color: var(--mcs-fg-color-icon, #999) | |
| } | |
| } | |
| .media-body > a:hover { | |
| background-color: var(--mcs-bg-color-hover, #1111) !important; | |
| } | |
| } | |
| } | |
| } | |
| > div::-webkit-scrollbar-thumb { | |
| background-color: #0005; | |
| border-radius: calc(var(--mcs-scrollbar-width, 6px) / 2); | |
| } | |
| > footer { | |
| font-size: 10px !important; | |
| > strong > a { | |
| color: var(--mcs-color-primary, #00a2ff) !important; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment