Skip to content

Commit

Permalink
Refactor css into smaller files
Browse files Browse the repository at this point in the history
  • Loading branch information
dpilafian committed Jun 16, 2024
1 parent 2081952 commit f26f7ef
Show file tree
Hide file tree
Showing 18 changed files with 836 additions and 740 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
"jshint . --exclude-path .gitignore"
],
"build": [
"lessc src/gallery/style/gallery.less build/1-dev/gallery/paradise.css",
"lessc src/gallery/console/style/admin.less build/1-dev/gallery/console/paradise-console.css",
"lessc src/gallery/gallery.less build/1-dev/gallery/paradise.css",
"lessc src/gallery/console/admin.less build/1-dev/gallery/console/paradise-console.css",
"make-dir build/2-min/gallery/console",
"csso build/1-dev/gallery/paradise.css --output build/2-min/gallery/paradise.min.css",
"csso build/1-dev/gallery/console/paradise-console.css --output build/2-min/gallery/console/paradise-console.min.css",
Expand Down
13 changes: 13 additions & 0 deletions src/gallery/console/admin.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Administrator Console

@import "css/gallery-setttings";
@import "css/gallery-uploader";
@import "css/notice-box";
@import "css/page-layout";
@import "css/portfolio-image";
@import "css/security";
19 changes: 19 additions & 0 deletions src/gallery/console/css/gallery-setttings.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Gallery Settings

@import "../css/static/utility-box";

.gallery-settings fieldset.settings-website input.dna-field-dark-mode+span { background-color: dimgray; color: white; padding: 0px 5px; }
.gallery-settings fieldset.settings-website input.dna-field-image-border+span { border: 1px solid black; padding: 0px 3px; }
.gallery-settings fieldset.settings-website input.dna-field-caption-caps+span { font-size: 0.8em; text-transform: uppercase; }
.gallery-settings fieldset.settings-website input.dna-field-caption-italic+span { font-style: italic; }
.gallery-settings fieldset.settings-website input.dna-field-show-description+span { font-weight: lighter; }
.gallery-settings fieldset.settings-tabs label { display: inline; }
.gallery-settings fieldset.settings-tabs label span { display: inline; }
.gallery-settings fieldset.settings-tabs label input[type=text] { width: 40%; }
.gallery-settings fieldset.settings-tabs label input[type=checkbox] { margin-left: 3px; }
.gallery-settings fieldset.settings-tabs [data-item-type=page]:first-child label:last-child { display: none; }
86 changes: 86 additions & 0 deletions src/gallery/console/css/gallery-uploader.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Galery Uploader (DropzoneJS)

@import "../css/static/utility-box";

#gallery-uploader.dropzone {
background: mintcream;
border: 2px dashed silver;
&.pulse {
.dz-preview {
animation: 1s infinite pulse;
@keyframes pulse {
0% { background-color: limegreen; }
50% { background-color: lime; }
100% { background-color: limegreen; }
}
}
}
.dz-default.dz-message {
font-size: 1.2rem;
}
.dz-preview {
display: block;
min-height: auto;
background-color: limegreen;
padding: 15px 0px 15px 10px;
margin: 0px 0px 10px 0px;
&:last-child {
margin-bottom: 0px;
}
.dz-image {
display: none;
}
.dz-details {
position: static;
text-align: left;
padding: 0px;
.dz-size,
.dz-filename {
display: inline-block;
line-height: initial;
margin: 0px;
&:hover span,
span {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
}
}
.dz-filename {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
color: dimgray;
padding-left: 3px;
}
}
.dz-progress {
top: 20px;
.dz-upload {
}
}
.dz-error-message {
}
.dz-error-mark,
.dz-success-mark {
top: 0px;
left: 0px;
display: block;
width: 100%;
text-align: center;
margin-left: 0px;
margin-top: 0px;
animation: none;
svg {
display: inline-block;
width: 40px;
}
}
}
}
21 changes: 21 additions & 0 deletions src/gallery/console/css/notice-box.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Notice Box

@import "../css/static/utility-box";

notice-box.show { max-height: 100vh; opacity: 1; }
notice-box { max-height: 0vh; overflow: hidden; opacity: 0; transition: all 1000ms; }
notice-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); max-width: 500px; background-color: black; border-radius: 10px; padding: 18px 50px 12px 30px; }
notice-box >header { margin-bottom: 12px; }
notice-box >header >nav { position: absolute; top: 6px; right: 10px; }
notice-box >header >nav i[data-icon] { color: lightskyblue; }
notice-box >header >h2 { white-space: nowrap; color: crimson; padding-right: 100px; }
notice-box >div { color: white; }
notice-box >div >p {}
notice-box >div >b {}
notice-box >div >ul {}
notice-box >div >ul >li {}
54 changes: 54 additions & 0 deletions src/gallery/console/css/page-layout.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Page Layout

@import "../css/static/utility-box";

body {
max-width: 1000px;
>header {
h1 {
font-size: 1.7rem;
}
h1+h2 {
font-size: 1.3rem;
}
}
}

body {
button {
font-size: 0.9rem;
}
#status-msg {
font-weight: bold;
}
}

i.icon-popup-anchor {
&+div {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all 400ms;
white-space: nowrap;
font-weight: bold;
text-align: right;
color: firebrick;
background-color: white;
border: 3px solid steelblue;
border-radius: 5px;
padding: 15px 25px;
}
&:hover+div,
&+div:hover {
visibility: visible;
opacity: 1;
}
}

// Component: Administrator Accounts
.admin-accounts p { font-size: 0.9rem; font-style: italic; }
50 changes: 50 additions & 0 deletions src/gallery/console/css/portfolio-image.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Portfolio Image

@import "../css/static/utility-box";

// Structure:
// div.portfolio-image
// form
// label.display-on | label.display-off
// span
// input | textarea
// span
// div.actions
// i.font-icon
// div
// p
// button
// figure
// img
// figcaption
.portfolio-image { position: relative; display: flex; background-color: gainsboro; border: 2px solid silver; padding: 10px; margin: 10px 0px 0px 0px; }
.portfolio-image >form { flex-grow: 1; max-width: none; }
.portfolio-image >form >label:first-child span { display: inline-block; transition: color 400ms; }
.portfolio-image >form >label:first-child input { margin: 0px 5px 1em 0px; }
.portfolio-image >form >label.display-off >span:first-child { color: firebrick; }
.portfolio-image >form >label textarea { height: 3.2em; }
.portfolio-image >form >p { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.portfolio-image >form >p label:last-child { white-space: nowrap; }
.portfolio-image >form >p label >span { display: inline-block; }
.portfolio-image >form >p label input[type=text] { width: 4em; }
.portfolio-image >form >p label input[type=checkbox] { margin: 0px 3px; }
.portfolio-image >form >p >span >span { display: block; }
.portfolio-image >form >p >span >i.font-icon { font-size: 0.9rem; transition: color 400ms; cursor: help; }
.portfolio-image >form >p >span >i.font-icon:hover { color: black; }
.portfolio-image >form >p >span >label >input[type=checkbox] { margin: 0px; }
.portfolio-image >form .actions { position: absolute; left: 10px; bottom: 10px; }
.portfolio-image >form .actions i.font-icon { font-size: 1.8rem; margin-right: 2px; opacity: 1; transition: all 400ms; }
.portfolio-image >form .actions i.font-icon:hover { color: black; }
.portfolio-image >form .actions i.font-icon[data-icon=times] { font-size: 2.0rem; }
.portfolio-image:first-child >form .actions i.font-icon[data-move=up],
.portfolio-image:last-child >form .actions i.font-icon[data-move=down] { opacity: 0.2; pointer-events: none; }
.portfolio-image form .actions i.icon-popup-anchor+div { bottom: 15px; left: 85px; }
.portfolio-image >figure { flex: 0 0 180px; text-align: center; margin: 0px 0px 0px 10px; }
.portfolio-image >figure >img { max-width: 100%; max-height: 210px; border: 2px solid darkgray; transition: all 400ms; }
.portfolio-image >figure >img:hover { border-color: black; }
.portfolio-image >figure >figcaption { font-size: 0.7rem; }
49 changes: 49 additions & 0 deletions src/gallery/console/css/security.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
///////////////////////////////////////////////////////////////
// Paradise ~ centerkey.com/paradise //
// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
///////////////////////////////////////////////////////////////

// Console Security

@import "../css/static/utility-box";

section.component-security {
>h2 {
margin-bottom: 25px;
}
>h3 {
text-align: center;
}
>form {
max-width: 25em;
margin: 0px auto;
>label.remember-me {
text-align: right;
}
}
&.create h3:first-child {
display: none;
}
&.invite p.for-create {
display: none;
}
.for-create {
display: none;
}
&.create .for-create {
display: block;
}
.error-message {
display: none;
color: firebrick;
}
.invite-code {
display: none;
}
&.invite .invite-code {
display: block;
}
>p {
color: firebrick;
}
}
Loading

0 comments on commit f26f7ef

Please sign in to comment.