Blazor Hybrid / .NET MAUI support
This commit is contained in:
Shaun Walker
215
Oqtane.Maui/wwwroot/css/app.css
Normal file
215
Oqtane.Maui/wwwroot/css/app.css
Normal file
@ -0,0 +1,215 @@
|
||||
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
|
||||
|
||||
html, body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
app {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Admin Modal */
|
||||
.app-admin-modal .modal {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 9999; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background: rgba(0,0,0,0.3); /* Dim background */
|
||||
}
|
||||
|
||||
.app-admin-modal .modal-dialog {
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
max-width: none; /* Override default of 500px */
|
||||
}
|
||||
|
||||
.app-admin-modal .modal-content {
|
||||
margin: 5% auto; /* 5% from the top and centered */
|
||||
width: 80%; /* Could be more or less, depending on screen size */
|
||||
}
|
||||
|
||||
/* Action Dialog */
|
||||
.app-actiondialog .modal {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 9999; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background: rgba(0,0,0,0.3); /* Dim background */
|
||||
}
|
||||
|
||||
.app-actiondialog .modal-dialog {
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
max-width: none; /* Override default of 500px */
|
||||
}
|
||||
|
||||
.app-actiondialog .modal-content {
|
||||
margin: 15% auto; /* 15% from the top and centered */
|
||||
width: 40%; /* Could be more or less, depending on screen size */
|
||||
}
|
||||
|
||||
/* Admin Pane */
|
||||
.app-pane-admin-border {
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
.app-pane-admin-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.app-moduleactions .dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-moduleactions .dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.app-progress-indicator {
|
||||
background: rgba(0,0,0,0.2) url('../loading.gif') no-repeat 50% 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999; /* Sit on top */
|
||||
}
|
||||
|
||||
.app-rule {
|
||||
width: 100%;
|
||||
color: gray;
|
||||
height: 1px;
|
||||
background-color: gray;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.app-link-unstyled, .app-link-unstyled:visited, .app-link-unstyled:hover, .app-link-unstyled:active, .app-link-unstyled:focus, .app-link-unstyled:active:hover {
|
||||
font-style: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
font-variant: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
border-radius: inherit;
|
||||
border: inherit;
|
||||
outline: inherit;
|
||||
box-shadow: inherit;
|
||||
padding: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.app-alert {
|
||||
padding: 20px;
|
||||
background-color: #f44336; /* red */
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.app-moduletitle a {
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.app-tooltip {
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-tooltip::before,
|
||||
.app-tooltip::after {
|
||||
left: 25%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.app-tooltip:hover::before,
|
||||
.app-tooltip:focus::before,
|
||||
.app-tooltip:hover::after,
|
||||
.app-tooltip:focus::after {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-tooltip::before {
|
||||
border-style: solid;
|
||||
border-width: 1em 0.75em 0 0.75em;
|
||||
border-color: #3E474F transparent transparent transparent;
|
||||
bottom: 100%;
|
||||
content: "";
|
||||
margin-left: -0.5em;
|
||||
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
|
||||
transform: scale(.6) translateY(-90%);
|
||||
}
|
||||
|
||||
.app-tooltip:hover::before,
|
||||
.app-tooltip:focus::before {
|
||||
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
|
||||
}
|
||||
|
||||
.app-tooltip::after {
|
||||
background: #3E474F;
|
||||
border-radius: .25em;
|
||||
bottom: 140%;
|
||||
color: #EDEFF0;
|
||||
content: attr(data-tip);
|
||||
margin-left: -8.75em;
|
||||
padding: 1em;
|
||||
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
|
||||
transform: scale(.6) translateY(50%);
|
||||
width: 17.5em;
|
||||
}
|
||||
|
||||
.app-tooltip:hover::after,
|
||||
.app-tooltip:focus::after {
|
||||
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-tooltip::after {
|
||||
font-size: .75em;
|
||||
margin-left: -5em;
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user