META-INF.resources.asset.ajaxjs-ui.less.admin.less Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of ajaxjs-web Show documentation
Show all versions of ajaxjs-web Show documentation
AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It's written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.
@import 'common_style.less';
@import 'widgets/menu.less';
@import 'widgets/upload.less';
@import 'widgets/msg.less';
@import 'widgets/form.less';
@header-height: 5%;
@mainColor: #EBEBEB;
@hightColor: #417BB5;
body {
font-size: .95rem;
}
body.admin-shell {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
a {
text-decoration: none;
color: #939da8;
}
.memberNav {
display: none;
}
header {
width: 100%;
height: @header-height;
border-top: 1px solid white;
border-bottom: 1px solid gray;
.gradient (top , #78B1ED , @hightColor);
display: table;
h1 , menu {
display: table-cell;
vertical-align: middle;
color: white;
}
h1 {
text-shadow: 0px 1px 0px black;
font-weight: normal;
font-size: 1.1rem;
text-indent: 2em;
letter-spacing: 3px;
}
menu {
margin: 0;
font-size: .9rem;
padding-right: 2%;
text-align: right;
a {
color: white;
}
}
}
}
@sidebarWidth: 15%;
.side {
.widthFx;
width: @sidebarWidth;
height: 100-@header-height;
float: left;
position: relative;
.gradient (left , #FAFAFA , @mainColor);
.rightTop_title {
overflow: hidden;
width: 80%;
height: 30px;
line-height: 30px;
background-color: #FAFAFA;
float: right;
}
.rightTop {
overflow: hidden;
clear: right;
width: 100%;
height: 30px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAAcCAYAAABCiFvZAAAD6UlEQVR4nO3ZW1LqQBSFYec/KhEEBUFEROQOAoLcoiARX9Z5CpUTA+l07yZYtR7+KXxZu3Px8/ODYLvdDrvdDt/f3/tc14Xruthut9hut/j6+tq32Wyw2WywXq/x+fm57+PjA47jwHEcrFYrrFYrLJdLLBYLLBYLzOdzzOdzzGYzzGYzvL+/YzqdYjKZYDKZ4O3tDePxGOPxGKPRCMPhEMPhEK+vrxgMBhgMBuj3++j1euh2u+h2u+h0Omi322i322i1Wmg2m2g0Gmg0Gnh5eUG9Xke9Xsfz8zNqtRpqtRqenp5QrVZRrVbx+PiISqWCSqWCh4cHlMtllMtl3N/fo1QqoVQqoVgsolgs4u7uDoVCAYVCAfl8Hvl8Hre3t7i5udmXy+WQy+WQzWZxfX29L5PJIJPJIJ1OI51O4+rqal8qlUIqlcLl5SVjf6YLPx5h+UEJy0MmmIeOHx8PnWDr9fq//CAFcfIXhMrfcrn8lYeYPz9mftSCTafT0PzweXkAhjUajQ7mQamTh6tu/X7fqF6vp533ITCp0+kY532ETGu1WuI1m03reR9d3axhEgTFv2TiwHIIlyAowcKAOYSMt5CCBZFRwcbDJSw/OGFFYRMFkUm6iElgZgqZKWaSqEnBZgs6mwhGYqICShQqruv+wkQXFj8uh5ZKXFjC1ooEMFGrJlgUNlEQmaSLmARmppBJLDMp1KRgswWdTQSVMFEFRfXs0YEl6hwKwqIKjeM4oWvl2GkUho4OMjrgRJ1buplAZoqZKWQSy0wKNSnYbEFnE0FlTOKAEgZL8A1FFZdjyKi8s6hgE7Vgjp1IYegcWzbH1o4qPDYwShIzU8gklpkUalKw2YLOJoKxMDkFLHHAibNijqWybKLWThREug/EqsUFTPV8Uy1pCE2XmRRqUrAlkSmi2phIv6noYKN7LsV9m1EpLj5x3nZ0cYqTCWSmmJlCZoqZ9LqTgM0WdDYRFMFEBZY4mOj+IdIp7oqJC4/u0ombCURJY2S6qs4JJFsnpw2gpMESx+QQMFKYSL7D6KyYY+smzpIxhUcSoqQxMl1F5wSSJEqnfhMzxegkmESdQjYwMX2PsflGI3FWSUKUNEamq+icQJJEyTZQ0mCdBSa6SUEjdS5JrJskIEoaI9NVdE4gSaJkGyhpsIgJMSEmxISYnOLt5a+AlOSJlfR7zzmBJImSbaCkwSImxISYEBNiQkyICTEhJsSEmBATYkJMiAkxISbEhJgQE2JCTIgJMSEmxISYEBNiQkyICTEhJsSEmBATYkJMiAkxISbEhJgQE2JCTIgJMSEmxISYEBNiQkyICTEhJsSEmPx1TP4BmpLvcn0FwB4AAAAASUVORK5CYII=") no-repeat right top;
}
.closeBtn {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
background: #ECECEC url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAKCAYAAACe5Y9JAAAAGElEQVQImWPYtGnT/02bNv1ngDMwAVlqAHuWJP30elz+AAAAAElFTkSuQmCC") no-repeat scroll 2px 50%;
border-left: 1px solid #D1D1D1;
border-right: 1px solid #D1D1D1;
cursor: pointer;
}
// .leftSidebar {
// .acMenu ();
// overflow: hidden;
// & > li {
// border-top: 1px solid white;
// border-bottom: 1px solid lightgray;
// &.pressed {
// border-top: 0;
// border-bottom: 1px solid lightgray;
// h3 {
// .gradient (right , transparent , darken(@mainColor, 10));
// }
// }
//
// ul {
// li {
// list-style-type: disc;
// padding-left: 10%;
// a {
// width: 100%;
// display: block;
// }
//
// &.selected {
// background-color: lighten(@hightColor, 33);
// a {
// color: black;
// }
// }
// }
// }
//
// h3 , li {
// padding: 5px 0 5px 15px;
// letter-spacing: 2px;
// line-height: 20px;
// color: #939da8;
// font-size: 12px;
// &:hover , a:hover {
// color: black;
// }
// }
// }
// }
}
.iframe {
.widthFx;
width: 100-@sidebarWidth;
height: 100-@header-height;
margin-right: -999px;
overflow: hidden;
iframe {
width: 100%;
border: 0;
height: 100%;
}
}
header.ajaxjs-admin-header {
padding: 2%;
padding-bottom: 1.5%;
h4 {
}
& > div {
text-align: right;
padding: 0 3%;
}
fieldset {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid lightgray;
width: 94%;
margin: 0 auto;
letter-spacing: 5px;
legend {
margin-left: 1em;
font-size: 1.2rem;
span {
font-size: .8rem;
}
}
}
}
.aj-admin-filter-panel {
width: 90%;
margin: 0 auto;
padding: 1%;
padding-top: 0;
text-align: right;
form {
display: inline;
}
}
.pager {
text-align: center;
padding: 2%;
}
.admin-entry-form {
& > form {
margin: 0 5%;
border: 1px solid #e3e3e3;
overflow: hidden;
& > div {
padding: 1% 2%;
border-bottom: 1px solid #e3e3e3;
&:last-child {
border-bottom: 0;
}
}
& > div:nth-child(even) {
border-top: 1px solid white;
background: #f5f5f5;
}
div.label {
display: inline-block;
min-width: 70px;
text-align: center;
}
input[type=text] {
.ajaxjs-inputField;
}
textarea {
min-height: 90px;
}
.htmlEditor {
width: 90%;
margin: 0 auto;
display: inline-block;
}
}
.buttons {
text-align: center;
}
}
.configForm {
.ajaxjs-form;
dl dt {
width: 10%;
}
dt , dd {
margin: 1% 0 ! important;
}
input[type=text] , textarea {
.ajaxjs-inputField;
}
button {
.ajaxjs-btn;
}
.sub {
color: gray;
transition: color linear 300ms;
}
dl:hover .sub {
color: black;
}
p {
padding: 2%;
padding-top: 0;
}
}
.tree {
width: 900px;
position: relative;
li {
overflow: hidden;
background-color: #e3e3e3;
box-sizing: border-box;
padding-left: 10px;
min-height: 38px;
line-height: 38px;
border-top: 1px solid white;
border-bottom: 1px solid lightgray;
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
}
&:nth-child(odd) {
background-color: #f3f3f3;
}
}
.parentNode {
cursor: pointer;
}
.subTree {
overflow: hidden;
transition: height linear 100ms;
}
.valueHolder {
width: 480px;
float: right;
padding-right: 5%;
}
.tipsNote {
position: absolute;
width: 260px;
right: -250px;
transition: top linear 100ms;
b {
letter-spacing: 2px;
}
}
select {
width: 100%;
}
.valueHolder > textarea {
width: 100% ! important;
margin: 2% 0;
min-height: 60px;
}
.htmlEditor {
width: 100% ! important;
margin-top: 10px ! important;
ul.toolbar {
}
li {
overflow: inherit;
background-color: inherit;
box-sizing: border-box;
padding-left: inherit;
min-height: inherit;
line-height: 20px;
border-top: 0;
border-bottom: inherit;
}
textarea {
margin-bottom: 14px;
}
}
}
// 列表页
.list-ui {
.ajaxjs-niceTable {
width: 92%;
margin: 0 auto;
}
}
.pid {
form {
padding: 1% 2%;
margin: 0;
background-color: #f5f5f5;
text-align: center;
}
.panel {
width: 90%;
margin: 0 auto;
}
table {
margin: 0 auto;
width: 100%;
thead {
td {
font-weight: bold;
text-align: center;
}
}
td {
text-align: left;
}
td.id {
text-align: center;
}
td.createDate {
text-align: center;
width: 180px;
}
td.action {
text-align: center;
width: 240px;
}
td.name {
width: 280px;
}
td.content {
width: 390px;
}
}
}
// 上传图片
.uploadBox {
.simpleTab_hoz {
width: 50%;
height: 30%;
}
.upload-btns {
float: right;
width: 60%;
}
}
// 图片列表
.articlePics , .avater {
margin: 1% 2%;
overflow: hidden;
li {
position: relative;
max-width: 300px;
max-height: 160px;
float: left;
margin-right: 20px;
img {
max-width: 300px;
max-height: 160px;
cursor: move;
}
.menu {
height: 0;
width: 100%;
transition: height 500ms;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .2);
padding: 0 2px;
box-sizing: border-box;
color: black;
line-height: 25px;
cursor: pointer;
text-align: center;
letter-spacing: 2px;
font-size: .8rem;
text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white;
span:hover {
color: red;
}
}
&:hover .menu {
height: 25px;
}
}
}
.ajaxjs-admin-info-btns {
text-align: center;
button {
.ajaxjs-btn;
}
}
table.listTable {
width: 90%;
margin: 0 auto;
}
.listTable.pager {
text-align: center;
}
body {
opacity: 0;
transition: opacity 0.3s;
}
body.active {
opacity: 1;
}
.aj-dhtml-border {
width: 300px;
height: 300px;
transition: border 5s;
position: relative;
margin: 3%;
&:before, &:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
transition: all 1s;
}
&:before {
transform: scale(1, 0);
border-left: 1px solid red;
border-right: 1px solid red;
}
&:after {
transform: scale(0, 1);
border-top: 1px solid red;
border-bottom: 1px solid red;
}
&:hover {
&:before,&:after {
transform: scale(1);
transition: all 1s;
}
}
}
.aj-tree {
font-size: .9rem;
margin-left: 5px;
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
line-height: 1.5em;
margin-left: 1.5rem;
border-left:1px dotted lightgray;
}
.node>span{
font-weight:normal;
color:lightgray;
}
.bold:before{
content: 'o';
margin: -5px;
color:lightgray;
}
.show {
animation: hideIndex 0.3s;
-moz-animation: hideIndex 0.3s; /* Firefox */
-webkit-animation: hideIndex 0.3s; /* Safari and Chrome */
-o-animation: hideIndex 0.3s; /* Opera */
}
@keyframes hideIndex {
0%{
opacity: 0;
transform:translate3d(0, -10px,0);
}
100%{
opacity: 1;
transform:translate3d(0, 0px,0);
}
}
}
table.aj-grid {
th {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 120px;
padding: 10px 20px;
}
td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
.arrow {
opacity: 1;
}
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
&.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
&.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
}
}
.treeGrid {
overflow: hidden;
width:95%;
margin:0 auto;
.left{
float:left;
width:22%;
}
.right {
float:right;
width:77%;
.inline-search {
float: left;
}
table{
width:99%;
}
}
}