mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 02:45:29 -04:00
Use less
This commit is contained in:
Alex Ling
parent
44336c546a
commit
5abf7032a5
1
.gitignore
vendored
1
.gitignore
vendored
@ -12,3 +12,4 @@ mango
|
||||
public/css/uikit.css
|
||||
public/img/*.svg
|
||||
public/js/*.min.js
|
||||
public/css/*.css
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
.uk-alert-close {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.uk-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uk-card-media-top {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.uk-card-media-top {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.uk-card-media-top>img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.uk-card-title {
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
.acard:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reader-bg {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.uk-logo>img {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.uk-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#selectable .ui-selecting {
|
||||
background: #EEE6B9;
|
||||
}
|
||||
|
||||
#selectable .ui-selected {
|
||||
background: #F4E487;
|
||||
}
|
||||
|
||||
.uk-light #selectable .ui-selecting {
|
||||
background: #5E5731;
|
||||
}
|
||||
|
||||
.uk-light #selectable .ui-selected {
|
||||
background: #9D9252;
|
||||
}
|
||||
|
||||
td>.uk-dropdown {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
#edit-modal .uk-grid>div {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#edit-modal #cover {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#edit-modal #cover-upload {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#edit-modal .uk-modal-body .uk-inline {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item .uk-card-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.uk-light .uk-navbar-dropdown,
|
||||
.uk-light .uk-modal-header,
|
||||
.uk-light .uk-modal-body,
|
||||
.uk-light .uk-modal-footer {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.uk-light .uk-dropdown {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.uk-light .uk-navbar-dropdown,
|
||||
.uk-light .uk-dropdown {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.uk-light .uk-nav-header,
|
||||
.uk-light .uk-description-list>dt {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#select-bar-controls a {
|
||||
transform: scale(1.5, 1.5);
|
||||
}
|
||||
|
||||
#select-bar-controls a:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#main-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#totop-wrapper {
|
||||
position: absolute;
|
||||
top: 100vh;
|
||||
right: 2em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#totop-wrapper a {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: calc(100vh - 5em);
|
||||
}
|
||||
124
public/css/mango.less
Normal file
124
public/css/mango.less
Normal file
@ -0,0 +1,124 @@
|
||||
// Item cards
|
||||
.item .uk-card {
|
||||
cursor: pointer;
|
||||
.uk-card-media-top {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@media (min-width: 600px) {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
&.grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.uk-card-body {
|
||||
padding: 20px;
|
||||
.uk-card-title {
|
||||
max-height: 3em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// jQuery selectable
|
||||
#selectable {
|
||||
.ui-selecting {
|
||||
background: #EEE6B9;
|
||||
}
|
||||
.ui-selected {
|
||||
background: #F4E487;
|
||||
}
|
||||
.uk-light & {
|
||||
.ui-selecting {
|
||||
background: #5E5731;
|
||||
}
|
||||
.ui-selected {
|
||||
background: #9D9252;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edit modal
|
||||
#edit-modal {
|
||||
.uk-grid > div {
|
||||
height: 300px;
|
||||
}
|
||||
#cover {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
#cover-upload {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.uk-modal-body .uk-inline {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
.uk-light {
|
||||
.uk-navbar-dropdown,
|
||||
.uk-modal-header,
|
||||
.uk-modal-body,
|
||||
.uk-modal-footer {
|
||||
background: #222;
|
||||
}
|
||||
.uk-navbar-dropdown,
|
||||
.uk-dropdown {
|
||||
color: #ccc;
|
||||
}
|
||||
.uk-nav-header,
|
||||
.uk-description-list > dt {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
// Alpine magic
|
||||
[x-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Batch select bar on title page
|
||||
#select-bar-controls {
|
||||
a {
|
||||
transform: scale(1.5, 1.5);
|
||||
|
||||
&:hover {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Totop button
|
||||
#totop-wrapper {
|
||||
position: absolute;
|
||||
top: 100vh;
|
||||
right: 2em;
|
||||
bottom: 0;
|
||||
|
||||
a {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: calc(100vh - 5em);
|
||||
}
|
||||
}
|
||||
|
||||
// Misc
|
||||
.uk-alert-close {
|
||||
color: black !important;
|
||||
}
|
||||
.break-word {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.uk-search {
|
||||
width: 100%;
|
||||
}
|
||||
@ -43,7 +43,7 @@
|
||||
<template x-if="job.status_message.length > 0">
|
||||
<div class="uk-inline">
|
||||
<span uk-icon="info"></span>
|
||||
<div uk-dropdown x-text="job.status_message"></div>
|
||||
<div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
<div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
|
||||
</div>
|
||||
<div class="uk-navbar-left uk-visible@s">
|
||||
<a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png"></a>
|
||||
<a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
|
||||
<ul class="uk-navbar-nav">
|
||||
<li><a href="<%= base_url %>">Home</a></li>
|
||||
<li><a href="<%= base_url %>library">Library</a></li>
|
||||
@ -69,7 +69,7 @@
|
||||
</div>
|
||||
<div class="uk-section uk-section-small">
|
||||
</div>
|
||||
<div class="uk-section uk-section-small" id="main-section">
|
||||
<div class="uk-section uk-section-small" style="position:relative;">
|
||||
<div class="uk-container uk-container-small">
|
||||
<div id="alert"></div>
|
||||
<%= content %>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="reader-bg">
|
||||
<html style="background-color: black;">
|
||||
|
||||
<% page = "Reader" %>
|
||||
<%= render_component "head" %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user