MayHeCome/Assets/Exoa/Common/Packages/UIElements/Resources/Styles/Responsive/Grid.uss
2024-12-18 17:55:34 +08:00

389 lines
8.3 KiB
Plaintext

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.col {
max-width: 100%;
flex: 0 0 100%;
}
.col-1, .col-xs-1, .child-1 .col-child, .child-xs-1 .col-child {
max-width: 8.3333333%;
flex: 0 0 8.3333333%;
padding-left: 5px;
padding-right: 5px;
}
.col-2, .col-xs-2, .child-2 .col-child, .child-xs-2 .col-child {
max-width: 16.6666667%;
flex: 0 0 16.6666667%;
padding-left: 5px;
padding-right: 5px;
}
.col-3, .col-xs-3, .child-3 .col-child, .child-xs-3 .col-child {
max-width: 25%;
flex: 0 0 25%;
padding-left: 5px;
padding-right: 5px;
}
.col-4, .col-xs-4, .child-4 .col-child, .child-xs-4 .col-child {
max-width: 33.3333333%;
flex: 0 0 33.3333333%;
padding-left: 5px;
padding-right: 5px;
}
.col-5, .col-xs-5, .child-5 .col-child, .child-xs-5 .col-child {
max-width: 41.6666667%;
flex: 0 0 41.6666667%;
padding-left: 5px;
padding-right: 5px;
}
.col-6, .col-xs-6, .child-6 .col-child, .child-xs-6 .col-child {
max-width: 50%;
flex: 0 0 50%;
padding-left: 5px;
padding-right: 5px;
}
.col-7, .col-xs-7, .child-7 .col-child, .child-xs-7 .col-child {
max-width: 58.3333333%;
flex: 0 0 58.3333333%;
padding-left: 5px;
padding-right: 5px;
}
.col-8, .col-xs-8, .child-8 .col-child, .child-xs-8 .col-child {
max-width: 66.6666667%;
flex: 0 0 66.6666667%;
padding-left: 5px;
padding-right: 5px;
}
.col-9, .col-xs-9, .child-9 .col-child, .child-xs-9 .col-child {
max-width: 75%;
flex: 0 0 75%;
padding-left: 5px;
padding-right: 5px;
}
.col-10, .col-xs-10, .child-10 .col-child, .child-xs-10 .col-child {
max-width: 83.3333333%;
flex: 0 0 83.3333333%;
padding-left: 5px;
padding-right: 5px;
}
.col-11, .col-xs-11, .child-11 .col-child, .child-xs-11 .col-child {
max-width: 91.6666667%;
flex: 0 0 91.6666667%;
padding-left: 5px;
padding-right: 5px;
}
.col-12, .col-xs-12, .child-12 .col-child, .child-xs-12 .col-child {
max-width: 100%;
flex: 0 0 100%;
padding-left: 5px;
padding-right: 5px;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.child-sm-1 .col-child, .child-sm-2 .col-child, .child-sm-3 .col-child, .child-sm-4 .col-child, .child-sm-5 .col-child, .child-sm-6 .col-child, .child-sm-7 .col-child, .child-sm-8 .col-child, .child-sm-9 .col-child, .child-sm-10 .col-child, .child-sm-11 .col-child, .child-sm-12 .col-child,
.child-md-1 .col-child, .child-md-2 .col-child, .child-md-3 .col-child, .child-md-4 .col-child, .child-md-5 .col-child, .child-md-6 .col-child, .child-md-7 .col-child, .child-md-8 .col-child, .child-md-9 .col-child, .child-md-10 .col-child, .child-md-11 .col-child, .child-md-12 .col-child,
.child-lg-1 .col-child, .child-lg-2 .col-child, .child-lg-3 .col-child, .child-lg-4 .col-child, .child-lg-5 .col-child, .child-lg-6 .col-child, .child-lg-7 .col-child, .child-lg-8 .col-child, .child-lg-9 .col-child, .child-lg-10 .col-child, .child-lg-11 .col-child, .child-lg-12 .col-child, {
max-width: 100%;
flex: 0 0 100%;
padding-left: 0;
padding-right: 0;
}
.pt-0, .py-0, .p-0 {
padding-top: 0 !important;
}
.pt-1, .py-1, .p-1 {
padding-top: 2px !important;
}
.pt-2, .py-2, .p-2 {
padding-top: 4px !important;
}
.pt-3, .py-3, .p-3 {
padding-top: 5px !important;
}
.pt-4, .py-4, .p-4 {
padding-top: 8px !important;
}
.pt-5, .py-5, .p-5 {
padding-top: 10px !important;
}
.pb-0, .py-0, .p-0 {
padding-bottom: 0 !important;
}
.pb-1, .py-1, .p-1 {
padding-bottom: 2px !important;
}
.pb-2, .py-2, .p-2 {
padding-bottom: 4px !important;
}
.pb-3, .py-3, .p-3 {
padding-bottom: 5px !important;
}
.pb-4, .py-4, .p-4 {
padding-bottom: 8px !important;
}
.pb-5, .py-5, .p-5 {
padding-bottom: 10px !important;
}
.pr-0, .px-0, .p-0 {
padding-right: 0 !important;
}
.pr-1, .px-1, .p-1 {
padding-right: 2px !important;
}
.pr-2, .px-2, .p-2 {
padding-right: 4px !important;
}
.pr-3, .px-3, .p-3 {
padding-right: 5px !important;
}
.pr-4, .px-4, .p-4 {
padding-right: 8px !important;
}
.pr-5, .px-5, .p-5 {
padding-right: 10px !important;
}
.pl-0, .px-0, .p-0 {
padding-left: 0 !important;
}
.pl-1, .px-1, .p-1 {
padding-left: 2px !important;
}
.pl-2, .px-2, .p-2 {
padding-left: 4px !important;
}
.pl-3, .px-3, .p-3 {
padding-left: 5px !important;
}
.pl-4, .px-4, .p-4 {
padding-left: 8px !important;
}
.pl-5, .px-5, .p-5 {
padding-left: 10px !important;
}
.mt-0, .my-0, .m-0 {
margin-top: 0 !important;
}
.mt-1, .my-1, .m-1 {
margin-top: 2px !important;
}
.mt-2, .my-2, .m-2 {
margin-top: 4px !important;
}
.mt-3, .my-3, .m-3 {
margin-top: 5px !important;
}
.mt-4, .my-4, .m-4 {
margin-top: 8px !important;
}
.mt-5, .my-5, .m-5 {
margin-top: 10px !important;
}
.mb-0, .my-0, .m-0 {
margin-bottom: 0 !important;
}
.mb-1, .my-1, .m-1 {
margin-bottom: 2px !important;
}
.mb-2, .my-2, .m-2 {
margin-bottom: 4px !important;
}
.mb-3, .my-3, .m-3 {
margin-bottom: 5px !important;
}
.mb-4, .my-4, .m-4 {
margin-bottom: 8px !important;
}
.mb-5, .my-5, .m-5 {
margin-bottom: 10px !important;
}
.mr-0, .mx-0, .m-0 {
margin-right: 0 !important;
}
.mr-1, .mx-1, .m-1 {
margin-right: 2px !important;
}
.mr-2, .mx-2, .m-2 {
margin-right: 4px !important;
}
.mr-3, .mx-3, .m-3 {
margin-right: 5px !important;
}
.mr-4, .mx-4, .m-4 {
margin-right: 8px !important;
}
.mr-5, .mx-5, .m-5 {
margin-right: 10px !important;
}
.ml-0, .mx-0, .m-0 {
margin-left: 0 !important;
}
.ml-1, .mx-1, .m-1 {
margin-left: 2px !important;
}
.ml-2, .mx-2, .m-2 {
margin-left: 4px !important;
}
.ml-3, .mx-3, .m-3 {
margin-left: 5px !important;
}
.ml-4, .mx-4, .m-4 {
margin-left: 8px !important;
}
.ml-5, .mx-5, .m-5 {
margin-left: 10px !important;
}
.unity-headline-1 {
font-size: 200%;
-unity-font-style: bold;
}
.unity-headline-2 {
font-size: 150%;
-unity-font-style: bold;
}
.unity-headline-3 {
font-size: 120%;
-unity-font-style: bold;
}
.unity-headline-4 {
font-size: 110%;
-unity-font-style: bold;
}
.unity-headline-5 {
font-size: 100%;
-unity-font-style: bold;
}
.unity-headline-6 {
font-size: 100%;
-unity-font-style: bold;
}
Overlay {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.box, Box, .unity-foldout__toggle, .unity-listview-field .unity-listview-field__content {
margin: 2px 0 2px 0;
padding: 2px;
}
.message {
margin: 2px 0 2px 0;
padding: 5px 10px;
white-space: normal;
}
.message .unity-label {
white-space: normal;
margin-bottom: 5px;
}
.unity-foldout__toggle {
padding: 4px;
}
.unity-listview-field .unity-listview-field__content {
padding-left: 10px;
}
.unity-label.box {
padding-left: 10px;
padding-right: 10px;
}
.list, .unity-button.list {
border-width: 0 0 1px;
padding: 5px 10px 7px;
-unity-text-align: middle-left;
}
.cover {
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.code {
padding: 5px 10px;
border-width: 1px;
border-radius: 2px;
}
.code .unity-label {
margin-top: 0!important;
margin-bottom: 0!important;
}
.indent {
margin-left: 20px;
}
.content {
background-color: rgba(0,0,0,0.75);
padding: 15px;
}
.content .unity-label {
white-space: normal;
}
Main, Article, .container {
margin: 5px 5px;
}
Main .unity-label, Article .unity-label {
white-space: normal;
}
Article .unity-button {
margin: 0;
padding: 0;
border-width: 0;
background-color: transparent;
color: #3498db;
-unity-text-align: middle-left;
}
Article .unity-label, Article .unity-button, Article .code {
margin-bottom: 8px;
}
Article .unity-button:hover {
color: #ddd;
}
Article .unity-button:active {
color: #ddd;
}
Header {
width: 100%;
font-size: 150%;
-unity-font-style: bold;
padding: 10px 35px;
margin-bottom: 5px;
}
Footer {
width: 100%;
margin-top: 5px;
padding: 10px 25px;
}
.featured {
width: 100%;
height: auto;
min-height:200px;
margin: 0 0 5px;
padding: 5px;
-unity-background-scale-mode:scale-to-fit;
}
.copy {
-unity-text-align: middle-center;
}
Header #not_show_at_startup{
position:absolute;
right:10px;
top:10px;
bottom:10px;
font-size: 80%;
-unity-font-style: normal;
}
.tabDiv{
height:30px;
}