mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 12:34:47 -04:00
Removes some redundancy.
This commit is contained in:
Lars Jung
parent
6bfbdb4d05
commit
8ee901517b
14 changed files with 293 additions and 323 deletions
18
src/_h5ai/css/inc/content.less
Normal file
18
src/_h5ai/css/inc/content.less
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
#content {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
|
||||
> header {
|
||||
display: none;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 80px;
|
||||
border-bottom: 2px dashed #ddd;
|
||||
}
|
||||
> footer {
|
||||
display: none;
|
||||
padding-top: 10px;
|
||||
margin-top: 80px;
|
||||
border-top: 2px dashed #ddd;
|
||||
}
|
||||
}
|
||||
111
src/_h5ai/css/inc/footer.less
Normal file
111
src/_h5ai/css/inc/footer.less
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
|
||||
body > footer {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 6px 0 8px 0;
|
||||
background-color: rgb(241,241,241);
|
||||
border-top: 2px solid rgb(210,210,210);
|
||||
|
||||
color: #999;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
color: #e80;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
float: left
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin: 0 100px;
|
||||
}
|
||||
.right {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
float: right
|
||||
}
|
||||
.noJsMsg {
|
||||
color: #c33;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.status {
|
||||
.sep {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
}
|
||||
&.default {
|
||||
}
|
||||
&.dynamic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#langSelector {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.langOptions {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
max-height: 200px;
|
||||
background-color: rgb(241,241,241);
|
||||
border: 1px solid rgb(210,210,210);
|
||||
|
||||
> .scrollbar {
|
||||
margin: 0;
|
||||
width: 6px;
|
||||
background-color: rgb(210,210,210);
|
||||
|
||||
.drag {
|
||||
background-color: rgb(180,180,180);
|
||||
}
|
||||
&.dragOn .drag {
|
||||
background-color: rgb(150,150,150);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
padding: 8px 24px 10px 24px;
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid rgb(231,231,231);
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.current {
|
||||
color: #333;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
&:hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
}
|
||||
li:nth-child(3n+1) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
|
||||
@import "h5bp-norm";
|
||||
@import "mixins";
|
||||
|
||||
|
||||
html.js {
|
||||
.hideOnJs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
html.no-js {
|
||||
.hideOnNoJs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: Ubuntu, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
margin: 80px 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body > nav {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 0.85em;
|
||||
background-color: rgb(241,241,241);
|
||||
border-bottom: 2px solid rgb(210,210,210);
|
||||
|
||||
span.jsDisabledFallback {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
color: #999;
|
||||
}
|
||||
a, a:active, a:visited, span.element {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
.current {
|
||||
a, span.element {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
img + span, img + input {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.crumb {
|
||||
float: left;
|
||||
border-right: 1px solid rgb(231,231,231);
|
||||
.hint {
|
||||
margin-left: 8px;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
img.hint {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.view {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
}
|
||||
#download {
|
||||
display: none;
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.zipping {
|
||||
|
||||
}
|
||||
&.failed {
|
||||
background-color: rgba(255,0,0,0.5);
|
||||
}
|
||||
}
|
||||
#filter {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
|
||||
input {
|
||||
border: none;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #555;
|
||||
background-color: rgba(0,0,0,0);
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
|
||||
> header {
|
||||
display: none;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 80px;
|
||||
border-bottom: 2px dashed #ddd;
|
||||
}
|
||||
> footer {
|
||||
display: none;
|
||||
padding-top: 10px;
|
||||
margin-top: 80px;
|
||||
border-top: 2px dashed #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "table";
|
||||
@import "extended";
|
||||
@import "tree";
|
||||
@import "context";
|
||||
|
||||
|
||||
body > footer {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 6px 0 8px 0;
|
||||
background-color: rgb(241,241,241);
|
||||
border-top: 2px solid rgb(210,210,210);
|
||||
|
||||
color: #999;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
color: #e80;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
float: left
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin: 0 100px;
|
||||
}
|
||||
.right {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
float: right
|
||||
}
|
||||
.noJsMsg {
|
||||
color: #c33;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.status {
|
||||
.sep {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
}
|
||||
&.default {
|
||||
}
|
||||
&.dynamic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#langSelector {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.langOptions {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
max-height: 200px;
|
||||
background-color: rgb(241,241,241);
|
||||
border: 1px solid rgb(210,210,210);
|
||||
|
||||
> .scrollbar {
|
||||
margin: 0;
|
||||
width: 6px;
|
||||
background-color: rgb(210,210,210);
|
||||
|
||||
.drag {
|
||||
background-color: rgb(180,180,180);
|
||||
}
|
||||
&.dragOn .drag {
|
||||
background-color: rgb(150,150,150);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
padding: 8px 24px 10px 24px;
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid rgb(231,231,231);
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.current {
|
||||
color: #333;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
&:hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
}
|
||||
li:nth-child(3n+1) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "responsive";
|
||||
|
||||
94
src/_h5ai/css/inc/nav.less
Normal file
94
src/_h5ai/css/inc/nav.less
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
|
||||
body > nav {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 0.85em;
|
||||
background-color: rgb(241,241,241);
|
||||
border-bottom: 2px solid rgb(210,210,210);
|
||||
|
||||
span.jsDisabledFallback {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
color: #999;
|
||||
}
|
||||
a, a:active, a:visited, span.element {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
.current {
|
||||
a, span.element {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
img + span, img + input {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.crumb {
|
||||
float: left;
|
||||
border-right: 1px solid rgb(231,231,231);
|
||||
.hint {
|
||||
margin-left: 8px;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
img.hint {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.view {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
}
|
||||
#download {
|
||||
display: none;
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.zipping {
|
||||
|
||||
}
|
||||
&.failed {
|
||||
background-color: rgba(255,0,0,0.5);
|
||||
}
|
||||
}
|
||||
#filter {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
|
||||
input {
|
||||
border: none;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #555;
|
||||
background-color: rgba(0,0,0,0);
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
@import "inc/main";
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
|
||||
@import "inc/main";
|
||||
|
||||
|
||||
#table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tree, #content > header, #content > footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html.no-js {
|
||||
#extended.details-view, #extended.icons-view {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
58
src/_h5ai/css/main.less
Normal file
58
src/_h5ai/css/main.less
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
@import "inc/h5bp-norm";
|
||||
@import "inc/mixins";
|
||||
|
||||
|
||||
body {
|
||||
font-family: Ubuntu, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
margin: 80px 30px;
|
||||
}
|
||||
|
||||
|
||||
@import "inc/nav";
|
||||
@import "inc/content";
|
||||
@import "inc/table";
|
||||
@import "inc/extended";
|
||||
@import "inc/tree";
|
||||
@import "inc/context";
|
||||
@import "inc/footer";
|
||||
@import "inc/responsive";
|
||||
|
||||
|
||||
html.js {
|
||||
.hideOnJs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
html.no-js {
|
||||
.hideOnNoJs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
html.h5ai-js {
|
||||
#h5ai-reference:after {
|
||||
content: " (js)";
|
||||
}
|
||||
}
|
||||
html.h5ai-php {
|
||||
#h5ai-reference:after {
|
||||
content: " (php)";
|
||||
}
|
||||
|
||||
#table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tree, #content > header, #content > footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html.no-js {
|
||||
#extended.details-view, #extended.icons-view {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue