From 5abf7032a5f09ef195aa93e5ffbb59282853fc7b Mon Sep 17 00:00:00 2001 From: Alex Ling Date: Thu, 14 Jan 2021 13:04:57 +0000 Subject: [PATCH] Use less --- .gitignore | 1 + public/css/mango.css | 146 ---------------------------- public/css/mango.less | 124 +++++++++++++++++++++++ src/views/download-manager.html.ecr | 2 +- src/views/layout.html.ecr | 4 +- src/views/reader.html.ecr | 2 +- 6 files changed, 129 insertions(+), 150 deletions(-) delete mode 100644 public/css/mango.css create mode 100644 public/css/mango.less diff --git a/.gitignore b/.gitignore index b8047b7..7516173 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ mango public/css/uikit.css public/img/*.svg public/js/*.min.js +public/css/*.css diff --git a/public/css/mango.css b/public/css/mango.css deleted file mode 100644 index 2eae165..0000000 --- a/public/css/mango.css +++ /dev/null @@ -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); -} diff --git a/public/css/mango.less b/public/css/mango.less new file mode 100644 index 0000000..f6e8951 --- /dev/null +++ b/public/css/mango.less @@ -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%; +} diff --git a/src/views/download-manager.html.ecr b/src/views/download-manager.html.ecr index 2f25d27..920d4d1 100644 --- a/src/views/download-manager.html.ecr +++ b/src/views/download-manager.html.ecr @@ -43,7 +43,7 @@ diff --git a/src/views/layout.html.ecr b/src/views/layout.html.ecr index 2c240de..82fa636 100644 --- a/src/views/layout.html.ecr +++ b/src/views/layout.html.ecr @@ -37,7 +37,7 @@
- +
-
+
<%= content %> diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr index ef84fe2..86f4f4b 100644 --- a/src/views/reader.html.ecr +++ b/src/views/reader.html.ecr @@ -1,5 +1,5 @@ - + <% page = "Reader" %> <%= render_component "head" %>