mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-24 20:14:37 -04:00
Clean styles.
This commit is contained in:
Lars Jung
parent
0a4fd4ee2c
commit
336e9ac0bd
23 changed files with 96 additions and 94 deletions
|
|
@ -1,6 +1,6 @@
|
|||
@col-blue-400: #42a5f5;
|
||||
@col-green-500: #4caf50;
|
||||
@col-red-500: #f44336;
|
||||
@col-green-500: #4caf50;
|
||||
@col-blue-400: #42a5f5;
|
||||
@col-pink-a200: #ff4081;
|
||||
|
||||
@col-white: #ffffff;
|
||||
|
|
@ -10,11 +10,6 @@
|
|||
@col-grey-700: #616161;
|
||||
@col-grey-900: #212121;
|
||||
|
||||
@col-light: @col-white;
|
||||
@col-lightgrey: @col-grey-50;
|
||||
@col-darkgrey: @col-grey-100;
|
||||
@col-dark: @col-grey-900;
|
||||
|
||||
@col-text-primary-black: rgba(0,0,0,0.87);
|
||||
@col-text-secondary-black: rgba(0,0,0,0.54);
|
||||
@col-text-disabled-black: rgba(0,0,0,0.26);
|
||||
|
|
@ -28,15 +23,15 @@
|
|||
@col-text-selected: @col-text-primary-white;
|
||||
@col-back-selected: @col-blue-400;
|
||||
|
||||
@col-font-light: @col-light;
|
||||
@col-font-dark: @col-dark;
|
||||
@col-text-native-selection: @col-text-primary-white;
|
||||
@col-back-native-selection: @col-pink-a200;
|
||||
|
||||
@col-back-light: @col-lightgrey;
|
||||
@col-back-dark: @col-darkgrey;
|
||||
|
||||
@col: @col-text-primary-black;
|
||||
@col-back: @col-back-dark;
|
||||
@col-hover: @col-blue-400;
|
||||
@col-text: @col-text-primary-black;
|
||||
@col-back: @col-grey-100;
|
||||
@col-back-paper: @col-white;
|
||||
@col-back-panel: @col-grey-50;
|
||||
@col-text-hover: @col-blue-400;
|
||||
@col-back-hover: rgba(0,0,0,0.03);
|
||||
@col-border: rgba(0,0,0,0.05);
|
||||
@col-border-strong: rgba(0,0,0,0.15);
|
||||
@col-border-stronger: rgba(0,0,0,0.3);
|
||||
|
|
@ -45,6 +40,7 @@
|
|||
@col-error: @col-red-500;
|
||||
|
||||
@col-link: @col-blue-400;
|
||||
@col-link-hover: @col-grey-900;
|
||||
|
||||
@col-range-back: @col-grey-300;
|
||||
@col-range-thumb: @col-grey-700;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
}
|
||||
.fb-i {
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
overflow: hidden;
|
||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
|
||||
text-align: right;
|
||||
background: @col-lightgrey;
|
||||
background: @col-back-panel;
|
||||
|
||||
a, a:active, a:visited {
|
||||
display: inline-block;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ html.no-js, html.no-browser {
|
|||
|
||||
#root {
|
||||
position: static;
|
||||
background: #fff;
|
||||
background: @col-back-paper;
|
||||
}
|
||||
|
||||
#fallback, #fallback-hints {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin-left: -100px;
|
||||
z-index: 100;
|
||||
padding: 3px 6px 6px 6px;
|
||||
color: @col-light;
|
||||
color: @col-text-primary-white;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 0 0 4px 4px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
border-radius: 4px;
|
||||
font-family: @font-family-mono;
|
||||
letter-spacing: 0.05em;
|
||||
background: @col-lightgrey;
|
||||
background: @col-back-panel;
|
||||
border: 1px solid @col-border;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
margin: 12px auto 24px auto;
|
||||
padding: 6px 18px;
|
||||
width: 210px;
|
||||
background: #fafafa;
|
||||
background: @col-back-panel;
|
||||
border: 1px solid @col-border;
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
#pass {
|
||||
.el-input();
|
||||
.el-input;
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
padding: 0 12px;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
#login, #logout {
|
||||
.el-button();
|
||||
.el-button;
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
padding: 0 12px;
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
padding: 0;
|
||||
|
||||
.test {
|
||||
.card();
|
||||
.rounded();
|
||||
background: @col-light;
|
||||
.card;
|
||||
.rounded;
|
||||
background: @col-back-paper;
|
||||
margin: 12px 0 0 0;
|
||||
padding: 8px 12px 12px 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
order: 0;
|
||||
background: #fafafa;
|
||||
background: @col-back-panel;
|
||||
border-right: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 16px;
|
||||
|
||||
|
|
@ -22,12 +22,12 @@
|
|||
display: inline-block;
|
||||
margin: 4px;
|
||||
border-radius: 2px;
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.03);
|
||||
background: @col-back-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
font-family: @font-family;
|
||||
font-size: @font-size;
|
||||
font-weight: @font-weight;
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
border: 0 solid #000;
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.03);
|
||||
background: @col-back-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
align-content: flex-start;
|
||||
align-items: stretch;
|
||||
|
||||
background: @col-lightgrey;
|
||||
background: @col-back-panel;
|
||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.03);
|
||||
background: @col-back-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
background: rgba(0,0,0,0.03);
|
||||
color: @col-text-hover;
|
||||
background: @col-back-hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
margin: 16px;
|
||||
|
||||
#items {
|
||||
.rounded();
|
||||
.rounded;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
position: relative;
|
||||
white-space: nowrap;
|
||||
display: list-item;
|
||||
background: #fafafa;
|
||||
background: @col-back-panel;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||||
|
||||
&:hover {
|
||||
.raised();
|
||||
.raised;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
padding: 8px;
|
||||
|
||||
.thumb {
|
||||
.rounded();
|
||||
.rounded;
|
||||
box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,21 +20,21 @@
|
|||
margin: 8px;
|
||||
|
||||
.item {
|
||||
.card();
|
||||
.rounded();
|
||||
.card;
|
||||
.rounded;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
margin: 8px;
|
||||
|
||||
&:hover {
|
||||
.raised();
|
||||
.raised;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: #fafafa;
|
||||
background: @col-back-panel;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
|
|||
|
|
@ -24,20 +24,20 @@
|
|||
margin: 8px;
|
||||
|
||||
.item {
|
||||
.card();
|
||||
.rounded();
|
||||
.card;
|
||||
.rounded;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
margin: 8px;
|
||||
|
||||
&:hover {
|
||||
.raised();
|
||||
.raised;
|
||||
}
|
||||
}
|
||||
|
||||
.landscape {
|
||||
display: block;
|
||||
background: #fafafa;
|
||||
background: @col-back-panel;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
.item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
background: @col-back-paper;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
background: @col-lightgrey;
|
||||
color: @col-text-hover;
|
||||
background: @col-back-panel;
|
||||
border-color: @col-border;
|
||||
|
||||
.selector {
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
z-index: 200;
|
||||
|
||||
.cm-panel {
|
||||
.popup();
|
||||
.rounded();
|
||||
.popup;
|
||||
.rounded;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
background: #fff;
|
||||
color: @col;
|
||||
background: @col-back-paper;
|
||||
color: @col-text;
|
||||
z-index: 10;
|
||||
overflow: auto;
|
||||
min-width: 200px;
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
background: @col-darkgrey;
|
||||
color: @col-text-hover;
|
||||
background: @col-grey-100;
|
||||
}
|
||||
|
||||
.cm-icon {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// border-left: 1px solid rgba(0,0,0,0.05);
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#content-header, #content-footer {
|
||||
margin: 16px;
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
padding: 8px;
|
||||
|
||||
a, a:active, a:visited {
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @col-dark;
|
||||
color: @col-link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
font-family: @font-family;
|
||||
font-weight: lighter;
|
||||
font-size: 16px;
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
width: 160px;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
height: 180px;
|
||||
|
||||
img {
|
||||
.rounded();
|
||||
.rounded;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
#pv-aud-audio {
|
||||
.raised;
|
||||
|
||||
position: absolute;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#pv-img-image {
|
||||
.raised;
|
||||
|
||||
@check-white: #f8f8f8;
|
||||
@check-black: #e8e8e8;
|
||||
|
|
@ -15,8 +16,6 @@
|
|||
background-size: 60px 60px;
|
||||
background-position: 0 0, 30px 30px;
|
||||
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&.loading {
|
||||
opacity: 0.5;
|
||||
margin-top: 32px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
#pv-txt-text {
|
||||
.raised;
|
||||
|
||||
max-width: 960px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
background: @col-back-paper;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&.highlighted {
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
#pv-vid-video {
|
||||
.raised;
|
||||
|
||||
position: absolute;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#pv-vid-video:-webkit-full-screen {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
#pv-overlay.fullscreen {
|
||||
background: #111;
|
||||
background: @col-grey-900;
|
||||
}
|
||||
|
||||
#pv-content {
|
||||
|
|
@ -29,7 +29,6 @@
|
|||
height: 240px;
|
||||
margin: -120px -120px;
|
||||
border-radius: 120px;
|
||||
background: #f00;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -57,9 +56,9 @@
|
|||
|
||||
&:hover {
|
||||
img {
|
||||
.raised;
|
||||
opacity: 1;
|
||||
background: rgba(27,27,27,0.8);
|
||||
box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,13 +125,13 @@
|
|||
}
|
||||
|
||||
#pv-bottombar {
|
||||
.raised;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(27,27,27);
|
||||
box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@
|
|||
margin-left: 20px;
|
||||
padding: 3px 0;
|
||||
text-decoration: none;
|
||||
color: @col;
|
||||
color: @col-text;
|
||||
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
color: @col-text-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,16 @@ html {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
|
||||
::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
|
||||
::-moz-selection {
|
||||
color: @col-text-native-selection;
|
||||
background: @col-back-native-selection;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
color: @col-text-native-selection;
|
||||
background: @col-back-native-selection;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.card() {
|
||||
.card {
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.raised() {
|
||||
.raised {
|
||||
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.popup() {
|
||||
.popup {
|
||||
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.rounded() {
|
||||
.rounded {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.el-button() {
|
||||
.card();
|
||||
.rounded();
|
||||
.el-button {
|
||||
.card;
|
||||
.rounded;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: @col-text-primary-white;
|
||||
background: @col-blue-400;
|
||||
|
|
@ -25,20 +25,20 @@
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
.raised();
|
||||
.raised;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input() {
|
||||
.card();
|
||||
.rounded();
|
||||
.el-input {
|
||||
.card;
|
||||
.rounded;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
font-family: @font-family;
|
||||
font-weight: @font-weight;
|
||||
color: @col-text-primary-black;
|
||||
background: @col-light;
|
||||
background: @col-back-paper;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue