FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Isolate component styles

Browse Source
This commit is contained in:
Fat Snake
2023-12-21 10:36:01 +08:00
parent 8910c3a514
commit 1b78cd4163
16 changed files with 319 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/common.scss
View File

@@ -6,6 +6,7 @@
}
.body {
background-color: constants.$background-color;
color: constants.$font-main-color;
user-select: none;
min-width: 900px;

2
src/assets/css/components/home/home.scss
View File

@@ -1,4 +1,4 @@
.indicator {
[data-component=home].indicator {
position: fixed;
margin: {
right: 20px;

353
src/assets/css/pages/home-framework.scss
View File

@@ -1,214 +1,217 @@
@use "@/assets/css/mixins" as mixins;
@use "@/assets/css/constants" as constants;
.nav {
display: flex;
position: fixed;
align-items: center;
z-index: 1;
width: 100%;
height: 70px;
background-color: constants.$origin-color;
border: {
bottom: {
width: 1px;
style: solid;
color: constants.$border-color;
}
}
animation: .5s ease both;
@include mixins.unique-keyframes {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.logo {
padding: 0 40px;
.title {
font-size: 2.8em;
font-family: century gothic, texgyreadventor, stheiti, sans-serif;
}
}
nav {
[data-component=home-framework] {
.nav {
display: flex;
justify-content: end;
flex: 1;
transition: {
property: all;
duration: .5s;
};
.menu {
padding: 0 30px;
.item {
display: inline-block;
position: relative;
font-size: 1.5em;
transition: {
property: all;
duration: .3s;
};
a {
padding: 5px 20px;
color: constants.$url-color;
}
position: fixed;
align-items: center;
z-index: 1;
width: 100%;
height: 70px;
background-color: constants.$origin-color;
border: {
bottom: {
width: 1px;
style: solid;
color: constants.$border-color;
}
}
animation: .5s ease both;
.active {
border: {
bottom: {
width: 2px;
style: solid;
color: constants.$url-active-color;
};
};
@include mixins.unique-keyframes {
0% {
transform: translateY(-100%);
}
.item:hover {
transform: translateY(-5px);
100% {
transform: translateY(0);
}
}
.item:hover .submenu {
display: block;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
animation: 0.3s;
.logo {
padding: 0 40px;
@include mixins.unique-keyframes {
0% {
transform: translateY(-10px);
opacity: 0;
}
}
.title {
font-size: 2.8em;
font-family: century gothic, texgyreadventor, stheiti, sans-serif;
}
}
.submenu {
display: none;
position: absolute;
width: 100%;
text-align: center;
background-color: constants.$origin-color;
overflow: hidden;
nav {
display: flex;
justify-content: end;
flex: 1;
transition: {
property: all;
duration: .5s;
};
.menu {
padding: 0 30px;
.item {
display: block;
font-size: 0.8em;
transition: all 0s;
display: inline-block;
position: relative;
font-size: 1.5em;
transition: {
property: all;
duration: .3s;
};
a {
display: block;
padding: 8px 0;
}
}
.item:hover {
transform: none;
a {
background-color: constants.$focus-color !important;
padding: 5px 20px;
color: constants.$url-color;
}
}
.active {
font-weight: bold;
border: none;
border: {
bottom: {
width: 2px;
style: solid;
color: constants.$url-active-color;
};
};
}
}
}
.dropdown-menu-button {
display: none;
margin: 0 20px;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
border-radius: 6px;
}
.item:hover {
transform: translateY(-5px);
}
.dropdown-menu-button.active {
background-color: transparentize(constants.$focus-color, 0.8);
border: {
width: 1px;
color: constants.$focus-color;
style: solid;
};
}
.item:hover .submenu {
display: block;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
animation: 0.3s;
@media screen and (max-width: 900px) {
.menu {
display: none;
@include mixins.unique-keyframes {
0% {
transform: translateY(-10px);
opacity: 0;
}
}
}
.submenu {
display: none;
position: absolute;
width: 100%;
text-align: center;
background-color: constants.$origin-color;
overflow: hidden;
.item {
display: block;
font-size: 0.8em;
transition: all 0s;
a {
display: block;
padding: 8px 0;
}
}
.item:hover {
transform: none;
a {
background-color: constants.$focus-color !important;
}
}
.active {
font-weight: bold;
border: none;
}
}
}
.dropdown-menu-button {
display: flex;
display: none;
margin: 0 20px;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
border-radius: 6px;
}
.dropdown-menu-button.active {
background-color: transparentize(constants.$focus-color, 0.8);
border: {
width: 1px;
color: constants.$focus-color;
style: solid;
};
}
@media screen and (max-width: 900px) {
.menu {
display: none;
}
.dropdown-menu-button {
display: flex;
}
}
}
}
}
.dropdown-menu-content {
display: none;
.dropdown-menu-content {
display: none;
@media screen and (max-width: 900px) {
display: none;
position: fixed;
width: 100%;
top: 70px;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
background-color: constants.$origin-color;
z-index: 1;
ul {
li {
font-size: 1.2em;
text-align: center;
a {
display: block;
width: 100%;
height: 100%;
padding: 10px;
}
:hover {
background-color: constants.$focus-color;
}
}
}
}
}
@media screen and (max-width: 900px) {
display: none;
position: fixed;
width: 100%;
top: 70px;
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
background-color: constants.$origin-color;
z-index: 1;
.dropdown-menu-content.show {
display: block;
}
}
ul {
li {
font-size: 1.2em;
text-align: center;
.nav.hide {
animation: .5s ease both;
a {
display: block;
width: 100%;
height: 100%;
padding: 10px;
}
:hover {
background-color: constants.$focus-color;
}
@include mixins.unique-keyframes {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
}
}
@media screen and (max-width: 900px) {
.dropdown-menu-content.show {
display: block;
}
}
.nav.hide {
animation: .5s ease both;
@include mixins.unique-keyframes {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
}

20
src/assets/css/pages/system-framework.scss
View File

@@ -1,16 +1,14 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
body {
background-color: constants.$background-color;
}
[data-component=system-framework] {
.left-panel {
background-color: constants.$origin-color;
}
.left-panel {
background-color: constants.$origin-color;
}
.right-panel {
flex: 1;
width: 0;
background-color: constants.$background-color;
.right-panel {
flex: 1;
width: 0;
background-color: constants.$background-color;
}
}

52
src/assets/css/pages/system/settings.scss
View File

@@ -1,38 +1,40 @@
@use '@/assets/css/constants' as constants;
.root-content {
padding: 30px;
gap: 20px;
.root-row {
[data-component=system-settings] {
.root-content {
padding: 30px;
gap: 20px;
.settings-card {
padding: 20px;
.root-row {
gap: 20px;
color: constants.$main-color;
> .head {
align-items: center;
gap: 5px;
.settings-card {
padding: 20px;
gap: 20px;
color: constants.$main-color;
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
> .head {
align-items: center;
gap: 5px;
.title {
display: flex;
font-size: 1.2em;
}
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.title {
display: flex;
font-size: 1.2em;
}
.bt-save {
color: constants.$main-color;
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.bt-save {
color: constants.$main-color;
}
}
}
}

130
src/assets/css/pages/system/statistics.scss
View File

@@ -1,86 +1,88 @@
@use '@/assets/css/constants' as constants;
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
[data-component=system-statistics] {
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
> .card-box {
width: 48%;
flex: 0 0 auto;
> .card-box {
width: 48%;
flex: 0 0 auto;
.common-card {
padding: 20px;
gap: 20px;
.common-card {
padding: 20px;
gap: 20px;
> .head {
align-items: center;
gap: 5px;
color: constants.$main-color;
> .head {
align-items: center;
gap: 5px;
color: constants.$main-color;
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
.icon {
font-size: constants.$SIZE_ICON_MD;
flex: 0 0 auto;
}
.title {
display: flex;
font-size: 1.2em;
}
.title {
display: flex;
font-size: 1.2em;
}
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
}
.card-content {
font-size: 1.1em;
padding: 0 10px;
gap: 10px;
.key, .value-percent {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.value {
color: constants.$font-secondary-color;
overflow: hidden;
> * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
}
}
.value-chart {
justify-content: space-around;
width: 0;
.card-content {
font-size: 1.1em;
padding: 0 10px;
gap: 10px;
> div {
max-height: 12px;
height: 12px;
.key, .value-percent {
flex: 0 0 auto;
color: constants.$font-main-color;
}
.value {
color: constants.$font-secondary-color;
overflow: hidden;
> * {
transform: translateY(1px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.value-percent {
text-align: right;
}
.value-chart {
justify-content: space-around;
width: 0;
.big-chart {
width: 0;
height: 400px;
}
> div {
max-height: 12px;
height: 12px;
> * {
gap: 5px;
> * {
transform: translateY(1px);
}
}
}
.value-percent {
text-align: right;
}
.big-chart {
width: 0;
height: 400px;
}
> * {
gap: 5px;
}
}
}
}

20
src/assets/css/pages/tools-framework.scss
View File

@@ -1,16 +1,14 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
body {
background-color: constants.$background-color;
}
[data-component=tools-framework] {
.left-panel {
background-color: constants.$origin-color;
}
.left-panel {
background-color: constants.$origin-color;
}
.right-panel {
flex: 1;
width: 0;
background-color: constants.$background-color;
.right-panel {
flex: 1;
width: 0;
background-color: constants.$background-color;
}
}

14
src/assets/css/pages/user-framework.scss Normal file
View File

@@ -0,0 +1,14 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
[data-component=user-framework] {
.left-panel {
background-color: constants.$origin-color;
}
.right-panel {
flex: 1;
width: 0;
background-color: constants.$background-color;
}
}