!3628 doc(#I66KG3): document css use isolation

* refactor: 拆解侧边栏样式
* refactor: 更新背景色
* feat: 更新 sidebar-title 样式
* chore: 移动 github gitee 样式
* chore: 更新下载按钮样式
* chore: 更新 Header 样式
* doc: 移除空格
* feat: 移动文化下拉框样式
* chore: 更新样式
* refactor: 移除 h2 元素
* Revert "refactor: 移除 Error 页面"
* refactor: 移除 Error 页面
* refactor: 增加 card 隔离样式
* refactor: Install 增加样式隔离
* chore: 更新 content 相关样式
* chore: bb-icon 更新样式
* chore: 移动样式进行隔离
* refactor: 移除 z-index 设置
* chore: Header 增加样式隔离
* chore: 增加样式隔离
This commit is contained in:
Argo 2022-12-17 08:06:34 +00:00
parent 4bbeb606ea
commit a073413c6b
14 changed files with 347 additions and 413 deletions

View File

@ -0,0 +1,14 @@
.culture-selector {
display: flex;
align-items: center;
}
.culture-selector label {
margin: 0;
color: var(--bs-navbar-color);
opacity: 0.85;
}
.culture-selector ::deep .select {
width: 210px;
}

View File

@ -1,12 +1,12 @@
@inherits IdComponentBase
<AnchorLink Text="@Title" Id="@Name" TooltipText="@TooltipText" />
<AnchorLink Text="@Title" Id="@Name" TooltipText="@TooltipText" class="link-block" />
<p>@(new MarkupString(Introduction))</p>
<h5>@Localizer["SubTitle"]</h5>
<div class="card card-demo">
<div class="card">
<div class="card-body">
@ChildContent
</div>
@ -18,7 +18,7 @@
</div>
<a class="card-footer-control collapsed" href="#@Id" data-bs-toggle="collapse" role="button" aria-label="show code">
<i class="fa-solid fa-caret-up"></i>
<span class="card-demo-text"></span>
<span class="card-text"></span>
</a>
</div>
}

View File

@ -0,0 +1,81 @@
.card {
transition: all .3s linear;
}
.card:hover {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
.card:hover .card-footer-control i {
margin-left: -1.5rem;
margin-left: -72px;
}
.card:hover .card-footer-control .card-text {
margin-left: 1rem;
}
.card:hover .card-footer-control .card-text:before {
opacity: 1;
}
.card-footer {
background-color: transparent;
}
.card-footer .card-footer-code {
margin: -.5rem -1rem 0 -1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer .card-footer-code.show + a {
margin-top: .5rem;
}
.card-footer .card-footer-code .loading {
padding: .5rem;
}
.card-footer .card-footer-code ::deep code {
border: none;
}
.card-footer ::deep pre {
color: #e83e8c;
margin-bottom: 0;
}
.card-footer-control {
text-align: center;
color: #d3dce6;
display: block;
}
.card-footer-control:hover {
color: #409eff;
}
.card-footer-control i {
transition: .3s linear;
}
.card-footer-control.collapsed i {
transform: rotate(180deg);
}
.card-footer-control .card-text {
margin-left: 1.5rem;
position: absolute;
transition: all .3s linear;
}
.card-footer-control .card-text:before {
content: "隐藏代码";
opacity: 0;
transition: opacity .3s linear;
}
.card-footer-control.collapsed .card-text:before {
content: "显示代码";
}

View File

@ -0,0 +1,28 @@
.git img {
height: 44px;
width: auto;
display: block;
}
.git .git-fork {
display: flex;
align-items: center;
padding: 0 10px;
}
.git a {
border: solid 1px #ddd;
display: block;
padding: 6px 10px;
border-radius: var(--bs-border-radius);
}
.git .git-fork img {
height: 56px;
}
.git .git-fork span {
font-size: 1.8rem;
color: #1c3949;
margin-left: 38px;
}

View File

@ -8,7 +8,7 @@
<button class="btn btn-outline-primary" @onclick="GetHeartrate ">@Localizer["GetHeartrateButtonText"]</button>
<button class="btn btn-outline-danger" @onclick="StopHeartrate ">@Localizer["StopHeartrateButtonText"]</button>
<Heartrate @ref="heartrate" OnUpdateValue="OnUpdateValue" OnUpdateStatus="OnUpdateStatus" OnUpdateError="OnError" />
<h2 style="color:red" data-action="heartrate" />
<h3 style="color:red" data-action="heartrate"></h3>
<pre>@message</pre>
<pre style="color:green">@statusmessage</pre>
<pre style="color:red">@errmessage</pre>

View File

@ -2,13 +2,13 @@
<header class="navbar-header navbar navbar-expand navbar-dark flex-column flex-md-row px-3">
<div class="header-img navbar-brand">
<img alt="logo" src="_content/BootstrapBlazor.Shared/images/logo.png" />
<img class="bb-icon" alt="logo" src="_content/BootstrapBlazor.Shared/images/logo.png" />
<span>Bootstrap Blazor</span>
</div>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="index">@HomeText</a>
<a class="nav-link" href="index">@HomeText</a>
</li>
<li class="nav-item">
<a class="nav-link" href="introduction">@IntroductionText</a>

View File

@ -1,4 +1,21 @@
::deep .btn-search .btn {
header {
--bb-violet-rgb: 112.520718,44.062154,249.437846;
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.95));
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
font-size: 1rem;
transition: transform .3s ease;
}
.header-img {
--bb-logo: #732cf9;
display: flex;
align-items: center;
padding: 0;
margin-right: 0;
}
::deep .btn-search .btn {
--bs-btn-bg: #8759ff;
--bs-btn-color: #fff;
--bs-btn-hover-bg: #7d53eb;
@ -19,3 +36,21 @@
::deep .btn-fs {
margin-top: 2px;
}
.btn-bd-download {
font-weight: 600;
color: #ffe484;
border-color: #ffe484;
}
.btn-bd-download:active,
.btn-bd-download:hover {
color: #2a2730;
background-color: #ffe484;
border-color: #ffe484;
}
.nav-link img {
height: 24px;
width: auto;
}

View File

@ -0,0 +1,40 @@
.bb-title {
font-size: 1.1rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.5rem;
}
.bb-icon {
display: none;
}
.tab-navigators {
position: fixed;
right: 1rem;
bottom: 13rem;
display: flex;
flex-direction: column;
}
.tab-navigators ::deep .btn {
width: 40px;
height: 40px;
position: relative;
font-size: 1.1rem;
}
.tab-navigators ::deep .btn:not(:first-child) {
margin-top: 1.5rem;
}
@media (min-width: 576px) {
.bb-title {
font-size: 1.2rem;
}
.bb-icon {
display: inline-block;
}
}

View File

@ -11,9 +11,7 @@
</div>
<div class="main">
<div class="content p-3">
<Wwads />
@Body
</div>
<Wwads />
@Body
</div>
</section>

View File

@ -0,0 +1,99 @@
.main {
width: calc(100% - var(--bs-sidebar-width));
position: relative;
padding: 1rem;
}
.sidebar-title {
height: 50px;
align-items: center;
padding: 1rem;
border-bottom: solid 1px #c0c4cc;
display: none;
}
.sidebar-text {
font-weight: 700;
}
::deep p {
line-height: 2;
}
::deep p:last-child {
margin-bottom: 0;
}
::deep p code,
::deep li code {
display: inline-block;
padding: 0px 8px;
background-color: #e9ecef;
margin: 0;
border-radius: var(--bs-border-radius);
}
::deep .code-label {
font-weight: bold;
color: #333;
margin-bottom: 4px;
}
::deep h4 {
margin-top: 1rem;
font-size: var(--bb-sub-font-size);
}
::deep .link-block {
font-weight: var(--bb-font-weight);
color: var(--bb-title-color);
font-size: var(--bb-sub-font-size);
margin-top: 1rem;
}
::deep .alert:last-child {
margin-bottom: 0;
}
::deep .alert h4 {
margin-top: 0;
}
::deep .alert-info .fa-lightbulb-o {
color: #17a2b8
}
::deep .tabs .tabs-item {
padding: 0 1rem;
}
::deep .wwads-cn {
--ad-min-height: 120px;
--ad-margin-bottom: 1rem;
min-height: var(--ad-min-height);
margin-bottom: var(--ad-margin-bottom);
overflow: hidden;
}
::deep .wwads-cn.debug {
--ad-min-height: 0;
--ad-margin-bottom: 0;
}
@media (min-width: 768px) {
.sidebar-title {
display: flex;
}
.sidebar {
width: var(--bs-sidebar-width);
height: calc(100vh);
position: sticky;
top: 0;
border-right: solid 1px #c0c4cc;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
margin-top: calc(var(--bs-header-height)*-1);
}
}

View File

@ -12,3 +12,28 @@
.switchs ::deep .switch {
width: auto;
}
.navbar {
background-color: #8548ff;
}
@media (min-width: 768px) {
.sidebar-content {
height: calc(100vh - var(--bs-header-height));
}
.sidebar-content.collapse {
display: flex;
flex-direction: column;
}
::deep .scroll {
overflow-x: hidden;
max-height: calc(100% - 36px);
padding: 5px 0;
}
::deep .scroll .menu {
width: var(--bs-sidebar-width);
}
}

View File

@ -1,297 +1,32 @@
header {
--bb-violet-rgb: 112.520718,44.062154,249.437846;
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.95));
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
font-size: 1rem;
transition: transform .3s ease;
:root {
--bb-font-weight: 500;
--bb-title-color: #1f2f3d;
--bb-sub-font-size: 1.2rem;
}
.navbar {
--bs-navbar-color: rgba(255,255,255,.85);
--bs-navbar-hover-color: rgb(255,255,255);
}
.layout {
--bb-layout-sidebar-banner-background: #702cf8;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,.85);
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-header {
font-size: 1rem;
}
.navbar-header .nav-link img {
height: 24px;
width: auto;
}
.header-img {
--bb-logo: #732cf9;
display: flex;
align-items: center;
padding: 0;
margin-right: 0;
}
.header-img img,
.bb-icon {
width: 42px;
height: auto;
border-radius: var(--bs-border-radius);
background-color: var(--bs-info);
border: solid 1px #fff;
margin-right: 1rem;
}
.bb-icon {
display: none;
width: 42px;
height: auto;
border-radius: var(--bs-border-radius);
background-color: var(--bs-info);
border: solid 1px #fff;
margin-right: 1rem;
}
.bb-title {
font-size: 1.1rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.5rem;
}
.content > .tabs .tabs-item-text {
display: none;
}
.content > .tabs .tabs-item {
padding: 0 1rem;
}
.btn.btn-bd-download {
font-weight: 600;
color: #ffe484;
border-color: #ffe484;
}
.btn.btn-bd-download:active,
.btn.btn-bd-download:hover {
color: #2a2730;
background-color: #ffe484;
border-color: #ffe484;
}
section {
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
.sidebar .navbar-brand {
font-size: 1.1rem;
}
.sidebar .nav-item {
font-size: 0.875rem;
padding-left: 6px;
}
.sidebar .nav-item a {
color: #444;
border-radius: var(--bs-border-radius);
display: flex;
align-items: center;
padding: .25rem 1.5rem;
font-weight: 400;
}
.sidebar .navbar {
--bb-bg-navbar: #8548ff;
background-color: var(--bb-bg-navbar);
}
.sidebar .sidebar-title {
display: none;
}
.sidebar-text {
font-weight: 700;
}
.tabs-body-content > h2,
.content > h2,
.tabs-body-content > h3,
.content > h3,
.tabs-body-content > h4,
.anchor-link,
.content > h4 {
font-weight: 500;
color: #1f2f3d;
}
.tabs-body-content > h3:not(:first-child) {
margin-top: 2rem;
}
.tabs-body-content > h4,
.anchor-link,
.content > h4 {
margin-top: 1.5rem;
font-size: 1.2rem;
}
.tabs-body-content > h5,
.content > h45 {
font-size: 1rem;
line-height: 1.5;
}
.content {
color: #495057;
}
.content .alert:last-child {
margin-bottom: 0;
}
.content .card-demo {
transition: all .3s linear;
}
.content .card-demo:hover {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
.content .card-footer {
background-color: transparent;
}
.content .card-footer .card-footer-control {
text-align: center;
color: #d3dce6;
display: block;
}
.content .card-footer .card-footer-control i {
transition: .3s linear;
}
.content .card-footer .card-footer-control.collapsed i {
transform: rotate(180deg);
}
.content .card:hover .card-footer .card-footer-control i {
margin-left: -1.5rem;
margin-left: -72px;
}
.content .card:hover .card-footer .card-footer-control .card-demo-text {
margin-left: 1rem;
}
.content .card-footer .card-footer-control .card-demo-text {
margin-left: 1.5rem;
position: absolute;
transition: all .3s linear;
}
.content .card:hover .card-footer .card-footer-control .card-demo-text:before {
opacity: 1;
}
.content .card-footer .card-footer-control .card-demo-text:before {
content: "隐藏代码";
opacity: 0;
transition: opacity .3s linear;
}
.content .card-footer .card-footer-control.collapsed .card-demo-text:before {
content: "显示代码";
}
.content .card-footer .card-footer-control:hover {
color: #409eff;
}
.content .card-footer pre {
color: #e83e8c;
margin-bottom: 0;
}
.content .card-footer .card-footer-code {
margin: -.5rem -1rem 0 -1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.content .card-footer .card-footer-code code {
border: none;
}
.content .card-footer .card-footer-code.show + a {
margin-top: .5rem;
}
.content .card-footer .card-footer-code .loading {
padding: .5rem;
}
.content .code-label {
font-weight: bold;
color: #333;
margin-bottom: 4px;
}
.content p {
line-height: 2;
}
.content p:last-child {
margin-bottom: 0;
}
.content code.highlight, .alert-content code, .content p code, .content li code {
display: inline-block;
padding: 0px 8px;
background-color: #e9ecef;
margin: 0;
border-radius: var(--bs-border-radius);
line-height: 20px;
}
.content .git img {
height: 44px;
width: auto;
display: block;
}
.content .git .git-fork {
display: flex;
align-items: center;
padding: 0 10px;
}
.content .git a {
border: solid 1px #ddd;
display: block;
padding: 6px 10px;
border-radius: var(--bs-border-radius);
}
.content .git .git-fork img {
height: 56px;
}
.content .git .git-fork span {
font-size: 1.8rem;
color: #1c3949;
margin-left: 38px;
}
.content .alert h4 {
margin-top: 0;
}
.content .alert-info .fa-lightbulb-o {
color: #17a2b8
}
.table-container .table tbody tr.highlight,
.table-container .table-row.highlight {
background-color: #409eff;
@ -985,20 +720,6 @@ section {
margin-left: 0.3rem;
}
.culture-selector {
display: flex;
align-items: center;
}
.culture-selector label {
margin: 0;
color: rgba(255,255,255,.85);
}
.culture-selector .select {
width: 210px;
}
.layout-drawer {
padding: 13px;
margin-right: -1rem;
@ -1499,19 +1220,6 @@ section {
border-radius: var(--bs-border-radius);
}
.wwads-cn {
--ad-min-height: 120px;
--ad-margin-bottom: 1rem;
min-height: var(--ad-min-height);
margin-bottom: var(--ad-margin-bottom);
overflow: hidden;
}
.wwads-cn.debug {
--ad-min-height: 0;
--ad-margin-bottom: 0;
}
.gitee-icon {
width: 32px;
height: auto;
@ -1528,39 +1236,6 @@ section {
min-height: var(--bb-height);
}
.tab-navigators {
position: fixed;
right: 1rem;
bottom: 13rem;
display: flex;
flex-direction: column;
}
.tab-navigators .btn {
width: 40px;
height: 40px;
position: relative;
font-size: 1.1rem;
}
.tab-navigators .btn:not(:first-child) {
margin-top: 1.5rem;
}
@media (max-width: 767.98px) {
.main .top-row:not(.auth) {
display: none;
}
.main .top-row.auth {
justify-content: space-between;
}
.main .top-row a, .main .top-row .btn-link {
margin-left: 0;
}
}
@media (max-width: 576px) {
.intro .card {
border-color: transparent !important;
@ -1585,18 +1260,6 @@ section {
text-align: center;
}
.bb-icon {
display: inline-block;
}
.bb-title {
font-size: 1.2rem;
}
.content > .tabs .tabs-item-text {
display: inline;
}
.textarea-demo {
word-break: break-all;
height: auto;
@ -1647,54 +1310,6 @@ section {
display: flex;
}
.sidebar {
width: var(--bs-sidebar-width);
height: calc(100vh);
position: sticky;
top: 0;
border-right: solid 1px #c0c4cc;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
margin-top: calc(var(--bs-header-height)*-1);
}
.sidebar .sidebar-content {
height: calc(100vh - var(--bs-header-height));
}
.sidebar .sidebar-content.collapse {
display: flex;
flex-direction: column;
}
.sidebar .sidebar-title {
height: 50px;
display: flex;
align-items: center;
padding: 1rem;
border-bottom: solid 1px #c0c4cc;
}
.sidebar .scroll {
overflow-x: hidden;
max-height: calc(100% - 36px);
padding: 5px 0;
}
.sidebar .scroll .menu {
width: var(--bs-sidebar-width);
}
.main {
width: calc(100% - var(--bs-sidebar-width));
}
.main .top-row {
position: sticky;
top: 0;
}
.navbar-toggler {
display: none;
}

View File

@ -25,7 +25,6 @@
--bb-ribbon-body-padding: 1rem;
--bb-ribbon-menu-header-height: calc(var(--bb-ribbon-menu-height) + var(--bb-ribbon-menu-margin-top) + var(--bb-ribbon-menu-body-height));
position: relative;
z-index: 10;
}
.ribbon-tab.is-float:not(.is-expand) {

File diff suppressed because one or more lines are too long