Merge pull request #115 from ConchbrainClub/main

css isolation
ConchbrainClub · Dec 28, 2023 · 0ec5be8 · 0ec5be8
2 parents 82007db + 694f1b5
commit 0ec5be8
Show file tree

Hide file tree

Showing 34 changed files with 914 additions and 940 deletions.
diff --git a/MixApp.Shared/Components/Detail.razor b/MixApp.Shared/Components/Detail.razor
@@ -6,6 +6,8 @@
 
 @if (Software == null) return;
 
+<div class="page">
+
 <FluentDialog @ondialogdismiss="OnDismiss" Modal="true" class="animate__animated animate__fadeIn">        
     <FluentDialogHeader Visible="false" />
 
@@ -173,144 +175,4 @@
     </div>
 </FluentDialog>
 
-<style scoped>
-    .detailSkeleton{
-        display: flex;
-        box-sizing: border-box;
-    }
-
-    .detailSkeletonIntroLeft{
-        width: calc(100% - 135px);
-        padding: 20px;
-    }
-
-    .firstOnLeft {
-        margin-bottom: 12px;
-    }
-
-    .secondOnLeft {
-        margin-bottom: 16px;
-    }
-
-    .buttonOnLeft {
-        margin-bottom: 16px;
-    }
-
-    .detailSkeletonButtonRight{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        padding: 20px;
-        width: 135px;
-    }
-
-    .detailSkeletonButtonRight  .detailSkeletonRight{
-        margin: 5px;
-    }
-
-    .installer{
-        padding: 20px;
-    }
-
-    fluent-dialog::part(control) {
-        --dialog-width: 60%;
-        --dialog-height: 100%;
-        padding: 0 !important;
-        overflow: hidden;
-        position: relative;
-    }
-
-    @@media only screen and (max-width: 1270px) {
-        fluent-dialog::part(control) {
-            --dialog-width: 100%;
-        }
-
-        .detailSkeletonButtonRight{
-            width: 175px;
-        }
-
-        .detailSkeletonIntroLeft{
-            width: calc(100% - 175px);
-        }
-    }
-
-    .cancelButton {
-        position: absolute;
-        border-radius: 50%;
-        width: 32px;
-        height: 32px;
-        z-index: 5;
-        right: 0;
-        top: -6px;
-    }
-
-    .detail {
-        overflow-y: scroll;
-        height: 100%;
-        position: relative;
-    }
-
-    .detail .cover {
-        object-fit: cover;
-        height: 50vh;
-        width: 100%;
-        border-radius: 5px;
-    }
-
-    .detail .mask {
-        position: absolute;
-        top: 0;
-        height: 50vh;
-        width: 100%;
-        background: linear-gradient(to top, var(--fill-color), rgba(255, 255, 255, 0));
-    }
-
-    .detail .head {
-        display: flex;
-        justify-content: space-between;
-        padding: 30px;
-    }
-
-    .detail .head > div fluent-button+fluent-button {
-        margin-left: 10px;
-    }
-
-    .head > div:first-child {
-        text-align: left;
-    }
-
-    .detail .head > div:last-child {
-        text-align: right;
-        padding: 20px 0;
-        min-width: 250px;
-    }
-
-    .detail .head > div:last-child p {
-        margin: 5px;
-    }
-
-    .detail .info {
-        padding: 0 30px 20px 30px;
-    }
-
-    .detail .info > div {
-        margin-bottom: 20px;
-    }
-
-    .detail .info > div:last-child {
-        margin-bottom: 0;
-    }
-
-    .detail .info fluent-text-field {
-        width: 300px;
-    }
-
-    .detail .info fluent-data-grid {
-        max-height: 400px;
-        overflow-y: scroll;
-    }
-
-    .detail .copyright {
-        text-align: center;
-    }
-</style>
+</div>
diff --git a/MixApp.Shared/Components/Detail.razor.css b/MixApp.Shared/Components/Detail.razor.css
@@ -0,0 +1,139 @@
+.detailSkeleton {
+    display: flex;
+    box-sizing: border-box;
+}
+
+.detailSkeletonIntroLeft{
+    width: calc(100% - 135px);
+    padding: 20px;
+}
+
+::deep .firstOnLeft {
+    margin-bottom: 12px;
+}
+
+::deep .secondOnLeft {
+    margin-bottom: 16px;
+}
+
+::deep .buttonOnLeft {
+    margin-bottom: 16px;
+}
+
+.detailSkeletonButtonRight{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding: 20px;
+    width: 135px;
+}
+
+::deep .detailSkeletonButtonRight  .detailSkeletonRight{
+    margin: 5px;
+}
+
+.installer{
+    padding: 20px;
+}
+
+::deep fluent-dialog::part(control) {
+    --dialog-width: 60%;
+    --dialog-height: 100%;
+    padding: 0 !important;
+    overflow: hidden;
+    position: relative;
+}
+
+@media only screen and (max-width: 1270px) {
+    ::deep fluent-dialog::part(control) {
+        --dialog-width: 100%;
+    }
+
+    .detailSkeletonButtonRight{
+        width: 175px;
+    }
+
+    .detailSkeletonIntroLeft{
+        width: calc(100% - 175px);
+    }
+}
+
+::deep .cancelButton {
+    position: absolute;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    z-index: 5;
+    right: 0;
+    top: -6px;
+}
+
+.detail {
+    overflow-y: scroll;
+    height: 100%;
+    position: relative;
+}
+
+.detail .cover {
+    object-fit: cover;
+    height: 50vh;
+    width: 100%;
+    border-radius: 5px;
+}
+
+.detail .mask {
+    position: absolute;
+    top: 0;
+    height: 50vh;
+    width: 100%;
+    background: linear-gradient(to top, var(--fill-color), rgba(255, 255, 255, 0));
+}
+
+.detail .head {
+    display: flex;
+    justify-content: space-between;
+    padding: 30px;
+}
+
+::deep .detail .head > div fluent-button+fluent-button {
+    margin-left: 10px;
+}
+
+.head > div:first-child {
+    text-align: left;
+}
+
+.detail .head > div:last-child {
+    text-align: right;
+    padding: 20px 0;
+    min-width: 250px;
+}
+
+.detail .head > div:last-child p {
+    margin: 5px;
+}
+
+.detail .info {
+    padding: 0 30px 20px 30px;
+}
+
+.detail .info > div {
+    margin-bottom: 20px;
+}
+
+.detail .info > div:last-child {
+    margin-bottom: 0;
+}
+
+::deep .detail .info fluent-text-field {
+    width: 300px;
+}
+
+::deep .detail .info fluent-data-grid {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+.detail .copyright {
+    text-align: center;
+}
diff --git a/MixApp.Shared/Components/Header.razor b/MixApp.Shared/Components/Header.razor
@@ -2,10 +2,10 @@
 
 @inject LocaleManager LM
 
-<div class="mixHeader">
-    <div class="mix">
-        <img src="/favicon.png" class="mixIcon"/>
-        <span class="mixInfo">Mix Store</span>
+<div class="header">
+    <div class="left">
+        <img src="/favicon.png" class="icon"/>
+        <span class="info">Mix Store</span>
     </div>
     <FluentSearch @bind-Value="@Keyword" 
         @oninput="@(e => Keyword = e.Value?.ToString())"
@@ -39,67 +39,3 @@
         </div>
     }
 </div>
-
-<style>
-    .mixHeader {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        background-color: var(--neutral-fill-layer-rest);
-        position: relative;
-        height: 60px;
-    }
-
-    .mix{
-        position: absolute;
-        left: 25px;
-        top: 15px;
-    }
-
-    .mix .mixIcon{
-        width: 30px;
-        height: 30px;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    .mix .mixInfo{
-        padding-left: 10px;
-        font-size: 15px;
-        font-weight: bold;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    .mixHeader .search {
-        width: 50%; 
-        margin: 15px;
-        margin-right: 10px;
-    }
-
-    .mixHeader .searchContent {
-        position: absolute;
-        margin: 60px;
-        overflow-y: scroll;
-        text-align: left;
-        max-height: calc(100vh - 200px);
-        z-index: 10;
-        box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
-        background-color: var(--fill-color);
-        border-radius: 5px;
-    }
-
-    .mixHeader ::-webkit-scrollbar {
-        display: none;
-    }
-
-    .mixHeader .searchResult {
-        padding: 20px;
-    }
-
-    @@media only screen and (max-width: 950px) {
-        .mixHeader .search {
-            display: none;
-        }
-    }
-</style>