mirror of
https://github.com/go-shiori/shiori.git
synced 2025-03-09 22:36:36 +08:00
chore: frontend formatting (#764)
* Install `prettier` Ignore everything in the first step as I want to see the size of changes that are going to happen first * Configure prettier - use tabs as the whole project prefers tabs - ignore a bunch of files that shouldn't be formatted * Check & format with prettier when compiling less * Update docs to use bun Since bun handles the dependencies used for the CSS compilation this should be the preferred method from now on. * Check actual result of prettier * Use LF line endings All files where formatted in LF and since it's most common in git repos we should probably keep it this way * Limit prettier to `internal/view/` See pull request review https://github.com/go-shiori/shiori/pull/764#pullrequestreview-1702935417 * Format code with prettier
This commit is contained in:
cbe
GitHub
parent
1d58455b53
commit
7765e5bf42
19 changed files with 1278 additions and 1118 deletions
16
.prettierignore
Normal file
16
.prettierignore
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Ignore some files we don't want to format
|
||||
*.html
|
||||
*.json
|
||||
*.md
|
||||
*.yml
|
||||
*.yaml
|
||||
|
||||
# Ignore build artifacts
|
||||
internal/view/assets/css/
|
||||
|
||||
# Ignore bundled dependencies
|
||||
internal/view/assets/js/dayjs.min.js
|
||||
internal/view/assets/js/url.js
|
||||
internal/view/assets/js/url.min.js
|
||||
internal/view/assets/js/vue.js
|
||||
internal/view/assets/js/vue.min.js
|
||||
3
.prettierrc
Normal file
3
.prettierrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"useTabs": true
|
||||
}
|
||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -37,7 +37,7 @@ make swagger
|
|||
|
||||
The styles that are bundled with Shiori are stored under `internal/view/assets/css/style.css` and `internal/view/assets/css/archive.css` and created from the less files under `internal/views/assets/less`.
|
||||
|
||||
If you want to make frontend changes you need to do that under the less files and then compile them to css. In order to do that, you need to have installed [bun](https://bun.sh) (preferred) or [lessc](http://lesscss.org/usage/#command-line-usage)/[clean-css-cli](https://github.com/clean-css/clean-css-cli).
|
||||
If you want to make frontend changes you need to do that under the less files and then compile them to css. In order to do that, you need to have installed [bun](https://bun.sh).
|
||||
|
||||
Then, run the following command:
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
:root{--main:#F44336;--border:#E5E5E5;--colorLink:#999;--archiveHeaderBg:rgba(255, 255, 255, 0.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41, 41, 41, 0.95)}}#shiori-archive-header{top:0;left:0;right:0;height:60px;box-sizing:border-box;position:fixed;padding:0 16px;display:flex;flex-flow:row wrap;align-items:center;font-size:16px;border-bottom:1px solid var(--border);background-color:var(--archiveHeaderBg);z-index:9999999999}#shiori-archive-header *{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0}#shiori-archive-header>:not(:last-child){margin-right:8px}#shiori-archive-header>.spacer{flex:1}#shiori-archive-header #shiori-logo{font-size:2em;font-weight:100;color:var(--main)}#shiori-archive-header #shiori-logo span{margin-right:8px}#shiori-archive-header a{display:block;color:var(--colorLink);text-decoration:underline}#shiori-archive-header a:focus,#shiori-archive-header a:hover{color:var(--main)}@media (max-width:600px){#shiori-archive-header{font-size:14px;height:50px}#shiori-archive-header #shiori-logo{font-size:1.5em}}body.shiori-archive-content{margin-top:60px!important}@media (max-width:600px){body.shiori-archive-content{margin-top:50px!important}}
|
||||
:root{--main:#f44336;--border:#e5e5e5;--colorLink:#999;--archiveHeaderBg:rgba(255, 255, 255, 0.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41, 41, 41, 0.95)}}#shiori-archive-header{top:0;left:0;right:0;height:60px;box-sizing:border-box;position:fixed;padding:0 16px;display:flex;flex-flow:row wrap;align-items:center;font-size:16px;border-bottom:1px solid var(--border);background-color:var(--archiveHeaderBg);z-index:9999999999}#shiori-archive-header *{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0}#shiori-archive-header>:not(:last-child){margin-right:8px}#shiori-archive-header>.spacer{flex:1}#shiori-archive-header #shiori-logo{font-size:2em;font-weight:100;color:var(--main)}#shiori-archive-header #shiori-logo span{margin-right:8px}#shiori-archive-header a{display:block;color:var(--colorLink);text-decoration:underline}#shiori-archive-header a:focus,#shiori-archive-header a:hover{color:var(--main)}@media (max-width:600px){#shiori-archive-header{font-size:14px;height:50px}#shiori-archive-header #shiori-logo{font-size:1.5em}}body.shiori-archive-content{margin-top:60px!important}@media (max-width:600px){body.shiori-archive-content{margin-top:50px!important}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -62,9 +62,9 @@ export default {
|
|||
tags: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
mainURL() {
|
||||
|
|
@ -79,34 +79,31 @@ export default {
|
|||
ebookURL() {
|
||||
if (this.hasEbook) {
|
||||
return new URL(`bookmark/${this.id}/ebook`, document.baseURI);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
hostnameURL() {
|
||||
var url = new URL(this.url);
|
||||
return url.hostname.replace(/^www\./, "");
|
||||
},
|
||||
thumbnailVisible() {
|
||||
return this.imageURL !== "" &&
|
||||
!this.HideThumbnail;
|
||||
return this.imageURL !== "" && !this.HideThumbnail;
|
||||
},
|
||||
excerptVisible() {
|
||||
return this.excerpt !== "" &&
|
||||
!this.thumbnailVisible &&
|
||||
!this.HideExcerpt;
|
||||
return this.excerpt !== "" && !this.thumbnailVisible && !this.HideExcerpt;
|
||||
},
|
||||
thumbnailStyleURL() {
|
||||
return {
|
||||
backgroundImage: `url("${this.imageURL}")`
|
||||
}
|
||||
backgroundImage: `url("${this.imageURL}")`,
|
||||
};
|
||||
},
|
||||
eventItem() {
|
||||
return {
|
||||
id: this.id,
|
||||
index: this.index,
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
tagClicked(name, event) {
|
||||
|
|
@ -125,12 +122,12 @@ export default {
|
|||
this.$emit("update", this.eventItem);
|
||||
},
|
||||
downloadebook() {
|
||||
const id = this.id;
|
||||
const ebook_url = new URL(`bookmark/${id}/ebook`, document.baseURI);
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = ebook_url.toString();
|
||||
downloadLink.download = `${this.title}.epub`;
|
||||
downloadLink.click();
|
||||
const id = this.id;
|
||||
const ebook_url = new URL(`bookmark/${id}/ebook`, document.baseURI);
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = ebook_url.toString();
|
||||
downloadLink.download = `${this.title}.epub`;
|
||||
downloadLink.click();
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -66,96 +66,107 @@ export default {
|
|||
visible: Boolean,
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
showLabel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
mainText: {
|
||||
type: String,
|
||||
default: 'OK'
|
||||
default: "OK",
|
||||
},
|
||||
secondText: String,
|
||||
mainClick: {
|
||||
type: Function,
|
||||
default() { this.visible = false; }
|
||||
default() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
secondClick: {
|
||||
type: Function,
|
||||
default() { this.visible = false; }
|
||||
default() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
escPressed: {
|
||||
type: Function,
|
||||
default() { this.visible = false; }
|
||||
}
|
||||
default() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formFields: []
|
||||
formFields: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
btnTabIndex() {
|
||||
return this.fields.length + 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fields: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.formFields = this.fields.map(field => {
|
||||
if (typeof field === 'string') return {
|
||||
name: field,
|
||||
label: field,
|
||||
value: '',
|
||||
type: 'text',
|
||||
dictionary: [],
|
||||
separator: ' ',
|
||||
suggestion: undefined
|
||||
}
|
||||
this.formFields = this.fields.map((field) => {
|
||||
if (typeof field === "string")
|
||||
return {
|
||||
name: field,
|
||||
label: field,
|
||||
value: "",
|
||||
type: "text",
|
||||
dictionary: [],
|
||||
separator: " ",
|
||||
suggestion: undefined,
|
||||
};
|
||||
|
||||
if (typeof field === 'object') return {
|
||||
name: field.name || '',
|
||||
label: field.label || '',
|
||||
value: field.value || '',
|
||||
type: field.type || 'text',
|
||||
dictionary: field.dictionary instanceof Array ? field.dictionary : [],
|
||||
separator: field.separator || ' ',
|
||||
suggestion: undefined
|
||||
}
|
||||
if (typeof field === "object")
|
||||
return {
|
||||
name: field.name || "",
|
||||
label: field.label || "",
|
||||
value: field.value || "",
|
||||
type: field.type || "text",
|
||||
dictionary:
|
||||
field.dictionary instanceof Array ? field.dictionary : [],
|
||||
separator: field.separator || " ",
|
||||
suggestion: undefined,
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
'fields.length'() {
|
||||
"fields.length"() {
|
||||
this.focus();
|
||||
},
|
||||
visible: {
|
||||
immediate: true,
|
||||
handler() { this.focus() }
|
||||
}
|
||||
handler() {
|
||||
this.focus();
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fieldType(f) {
|
||||
var type = f.type || 'text';
|
||||
if (type !== 'text' && type !== 'password') return 'text';
|
||||
var type = f.type || "text";
|
||||
if (type !== "text" && type !== "password") return "text";
|
||||
else return type;
|
||||
},
|
||||
handleMainClick() {
|
||||
var data = {};
|
||||
this.formFields.forEach(field => {
|
||||
this.formFields.forEach((field) => {
|
||||
var value = field.value;
|
||||
if (field.type === 'number') value = parseInt(value, 10) || 0;
|
||||
else if (field.type === 'float') value = parseFloat(value) || 0.0;
|
||||
else if (field.type === 'check') value = Boolean(value);
|
||||
if (field.type === "number") value = parseInt(value, 10) || 0;
|
||||
else if (field.type === "float") value = parseFloat(value) || 0.0;
|
||||
else if (field.type === "check") value = Boolean(value);
|
||||
data[field.name] = value;
|
||||
})
|
||||
});
|
||||
|
||||
this.mainClick(data);
|
||||
},
|
||||
|
|
@ -178,9 +189,9 @@ export default {
|
|||
lastWord = words[words.length - 1].toLowerCase(),
|
||||
suggestion;
|
||||
|
||||
if (lastWord !== '') {
|
||||
suggestion = dictionary.find(word => {
|
||||
return word.toLowerCase().startsWith(lastWord)
|
||||
if (lastWord !== "") {
|
||||
suggestion = dictionary.find((word) => {
|
||||
return word.toLowerCase().startsWith(lastWord);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -192,11 +203,11 @@ export default {
|
|||
// Display suggestion
|
||||
this.$nextTick(() => {
|
||||
var input = this.$refs.input[index],
|
||||
suggestionNode = this.$refs['suggestion-' + index][0],
|
||||
suggestionNode = this.$refs["suggestion-" + index][0],
|
||||
inputRect = input.getBoundingClientRect();
|
||||
|
||||
suggestionNode.style.top = (inputRect.bottom - 1) + 'px';
|
||||
suggestionNode.style.left = inputRect.left + 'px';
|
||||
suggestionNode.style.top = inputRect.bottom - 1 + "px";
|
||||
suggestionNode.style.left = inputRect.left + "px";
|
||||
});
|
||||
},
|
||||
handleInputEnter(index) {
|
||||
|
|
@ -223,7 +234,7 @@ export default {
|
|||
if (!this.visible) return;
|
||||
|
||||
var fields = this.$refs.input,
|
||||
otherInput = this.$el.querySelectorAll('input'),
|
||||
otherInput = this.$el.querySelectorAll("input"),
|
||||
button = this.$refs.mainButton;
|
||||
|
||||
if (fields && fields.length > 0) {
|
||||
|
|
@ -235,7 +246,7 @@ export default {
|
|||
} else if (button) {
|
||||
button.focus();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ var template = `
|
|||
<i class="fas fa-fw fa-angle-double-right"></i>
|
||||
</a>
|
||||
</template>
|
||||
</div>`
|
||||
</div>`;
|
||||
|
||||
export default {
|
||||
template: template,
|
||||
|
|
@ -39,6 +39,6 @@ export default {
|
|||
else if (page <= 1) page = 1;
|
||||
|
||||
this.$emit("change", page);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default {
|
|||
id: 0,
|
||||
username: "",
|
||||
owner: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
appOptions: {
|
||||
type: Object,
|
||||
|
|
@ -24,25 +24,25 @@ export default {
|
|||
CreateEbook: false,
|
||||
MakePublic: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {}
|
||||
}
|
||||
dialog: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
defaultDialog() {
|
||||
return {
|
||||
visible: false,
|
||||
loading: false,
|
||||
title: '',
|
||||
content: '',
|
||||
title: "",
|
||||
content: "",
|
||||
fields: [],
|
||||
showLabel: false,
|
||||
mainText: 'Yes',
|
||||
secondText: '',
|
||||
mainText: "Yes",
|
||||
secondText: "",
|
||||
mainClick: () => {
|
||||
this.dialog.visible = false;
|
||||
},
|
||||
|
|
@ -51,8 +51,8 @@ export default {
|
|||
},
|
||||
escPressed: () => {
|
||||
if (!this.loading) this.dialog.visible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
showDialog(cfg) {
|
||||
var base = this.defaultDialog();
|
||||
|
|
@ -81,34 +81,44 @@ export default {
|
|||
}
|
||||
},
|
||||
isSessionError(err) {
|
||||
switch (err.toString().replace(/\(\d+\)/g, "").trim().toLowerCase()) {
|
||||
switch (
|
||||
err
|
||||
.toString()
|
||||
.replace(/\(\d+\)/g, "")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
) {
|
||||
case "session is not exist":
|
||||
case "session has been expired":
|
||||
return true
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
},
|
||||
showErrorDialog(msg) {
|
||||
var sessionError = this.isSessionError(msg),
|
||||
dialogContent = sessionError ? "Session has expired, please login again." : msg;
|
||||
dialogContent = sessionError
|
||||
? "Session has expired, please login again."
|
||||
: msg;
|
||||
|
||||
this.showDialog({
|
||||
visible: true,
|
||||
title: 'Error',
|
||||
title: "Error",
|
||||
content: dialogContent,
|
||||
mainText: 'OK',
|
||||
mainText: "OK",
|
||||
mainClick: () => {
|
||||
this.dialog.visible = false;
|
||||
if (sessionError) {
|
||||
var loginUrl = new Url("login", document.baseURI);
|
||||
loginUrl.query.dst = window.location.href;
|
||||
|
||||
document.cookie = `session-id=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
document.cookie = `session-id=; Path=${
|
||||
new URL(document.baseURI).pathname
|
||||
}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
location.href = loginUrl.toString();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -77,107 +77,114 @@ export default {
|
|||
template: template,
|
||||
mixins: [basePage],
|
||||
components: {
|
||||
customDialog
|
||||
customDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
accounts: []
|
||||
}
|
||||
accounts: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveSetting() {
|
||||
let options = {
|
||||
ShowId: this.appOptions.ShowId,
|
||||
ListMode: this.appOptions.ListMode,
|
||||
HideThumbnail: this.appOptions.HideThumbnail,
|
||||
HideExcerpt: this.appOptions.HideExcerpt,
|
||||
NightMode: this.appOptions.NightMode,
|
||||
};
|
||||
methods: {
|
||||
saveSetting() {
|
||||
let options = {
|
||||
ShowId: this.appOptions.ShowId,
|
||||
ListMode: this.appOptions.ListMode,
|
||||
HideThumbnail: this.appOptions.HideThumbnail,
|
||||
HideExcerpt: this.appOptions.HideExcerpt,
|
||||
NightMode: this.appOptions.NightMode,
|
||||
};
|
||||
|
||||
if (this.activeAccount.owner) {
|
||||
options = {
|
||||
...options,
|
||||
KeepMetadata: this.appOptions.KeepMetadata,
|
||||
UseArchive: this.appOptions.UseArchive,
|
||||
CreateEbook: this.appOptions.CreateEbook,
|
||||
MakePublic: this.appOptions.MakePublic,
|
||||
};
|
||||
}
|
||||
if (this.activeAccount.owner) {
|
||||
options = {
|
||||
...options,
|
||||
KeepMetadata: this.appOptions.KeepMetadata,
|
||||
UseArchive: this.appOptions.UseArchive,
|
||||
CreateEbook: this.appOptions.CreateEbook,
|
||||
MakePublic: this.appOptions.MakePublic,
|
||||
};
|
||||
}
|
||||
|
||||
this.$emit("setting-changed", options);
|
||||
//request
|
||||
fetch(new URL("/api/v1/auth/account", document.baseURI), {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({
|
||||
config: this.appOptions
|
||||
}),
|
||||
this.$emit("setting-changed", options);
|
||||
//request
|
||||
fetch(new URL("/api/v1/auth/account", document.baseURI), {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({
|
||||
config: this.appOptions,
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem("shiori-token"),
|
||||
}
|
||||
}).then(response => {
|
||||
if (!response.ok) throw response;
|
||||
return response.json();
|
||||
}).then(responseData => {
|
||||
const responseString = JSON.stringify(responseData.message);
|
||||
localStorage.setItem('shiori-account', responseString);
|
||||
}) .catch(err => {
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
this.showErrorDialog(msg);
|
||||
})
|
||||
});
|
||||
|
||||
},
|
||||
loadAccounts() {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + localStorage.getItem("shiori-token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) throw response;
|
||||
return response.json();
|
||||
})
|
||||
.then((responseData) => {
|
||||
const responseString = JSON.stringify(responseData.message);
|
||||
localStorage.setItem("shiori-account", responseString);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.getErrorMessage(err).then((msg) => {
|
||||
this.showErrorDialog(msg);
|
||||
});
|
||||
});
|
||||
},
|
||||
loadAccounts() {
|
||||
if (this.loading) return;
|
||||
|
||||
this.loading = true;
|
||||
fetch(new URL("api/accounts", document.baseURI), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + localStorage.getItem("shiori-token"),
|
||||
}
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + localStorage.getItem("shiori-token"),
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
if (!response.ok) throw response;
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
.then((json) => {
|
||||
this.loading = false;
|
||||
this.accounts = json;
|
||||
})
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
this.loading = false;
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
this.getErrorMessage(err).then((msg) => {
|
||||
this.showErrorDialog(msg);
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
showDialogNewAccount() {
|
||||
this.showDialog({
|
||||
title: "New Account",
|
||||
content: "Input new account's data :",
|
||||
fields: [{
|
||||
name: "username",
|
||||
label: "Username",
|
||||
value: "",
|
||||
}, {
|
||||
name: "password",
|
||||
label: "Password",
|
||||
type: "password",
|
||||
value: "",
|
||||
}, {
|
||||
name: "repeat",
|
||||
label: "Repeat password",
|
||||
type: "password",
|
||||
value: "",
|
||||
}, {
|
||||
name: "visitor",
|
||||
label: "This account is for visitor",
|
||||
type: "check",
|
||||
value: false,
|
||||
}],
|
||||
fields: [
|
||||
{
|
||||
name: "username",
|
||||
label: "Username",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "password",
|
||||
label: "Password",
|
||||
type: "password",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "repeat",
|
||||
label: "Repeat password",
|
||||
type: "password",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "visitor",
|
||||
label: "This account is for visitor",
|
||||
type: "check",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
mainText: "OK",
|
||||
secondText: "Cancel",
|
||||
mainClick: (data) => {
|
||||
|
|
@ -200,7 +207,7 @@ export default {
|
|||
username: data.username,
|
||||
password: data.password,
|
||||
owner: !data.visitor,
|
||||
}
|
||||
};
|
||||
|
||||
this.dialog.loading = true;
|
||||
fetch(new URL("api/accounts", document.baseURI), {
|
||||
|
|
@ -208,59 +215,69 @@ export default {
|
|||
body: JSON.stringify(request),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Authorization': 'Bearer ' + localStorage.getItem("shiori-token"),
|
||||
}
|
||||
}).then(response => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
}).then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
|
||||
this.accounts.push({ username: data.username, owner: !data.visitor });
|
||||
this.accounts.sort((a, b) => {
|
||||
var nameA = a.username.toLowerCase(),
|
||||
nameB = b.username.toLowerCase();
|
||||
|
||||
if (nameA < nameB) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (nameA > nameB) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}).catch(err => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
this.showErrorDialog(msg);
|
||||
Authorization: "Bearer " + localStorage.getItem("shiori-token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
})
|
||||
});
|
||||
}
|
||||
.then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
|
||||
this.accounts.push({
|
||||
username: data.username,
|
||||
owner: !data.visitor,
|
||||
});
|
||||
this.accounts.sort((a, b) => {
|
||||
var nameA = a.username.toLowerCase(),
|
||||
nameB = b.username.toLowerCase();
|
||||
|
||||
if (nameA < nameB) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (nameA > nameB) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then((msg) => {
|
||||
this.showErrorDialog(msg);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
showDialogChangePassword(account) {
|
||||
this.showDialog({
|
||||
title: "Change Password",
|
||||
content: "Input new password :",
|
||||
fields: [{
|
||||
name: "oldPassword",
|
||||
label: "Old password",
|
||||
type: "password",
|
||||
value: "",
|
||||
}, {
|
||||
name: "password",
|
||||
label: "New password",
|
||||
type: "password",
|
||||
value: "",
|
||||
}, {
|
||||
name: "repeat",
|
||||
label: "Repeat password",
|
||||
type: "password",
|
||||
value: "",
|
||||
}],
|
||||
fields: [
|
||||
{
|
||||
name: "oldPassword",
|
||||
label: "Old password",
|
||||
type: "password",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "password",
|
||||
label: "New password",
|
||||
type: "password",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "repeat",
|
||||
label: "Repeat password",
|
||||
type: "password",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
mainText: "OK",
|
||||
secondText: "Cancel",
|
||||
mainClick: (data) => {
|
||||
|
|
@ -284,7 +301,7 @@ export default {
|
|||
oldPassword: data.oldPassword,
|
||||
newPassword: data.password,
|
||||
owner: account.owner,
|
||||
}
|
||||
};
|
||||
|
||||
this.dialog.loading = true;
|
||||
fetch(new URL("api/accounts", document.baseURI), {
|
||||
|
|
@ -292,21 +309,24 @@ export default {
|
|||
body: JSON.stringify(request),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Authorization': 'Bearer ' + localStorage.getItem("shiori-token"),
|
||||
Authorization: "Bearer " + localStorage.getItem("shiori-token"),
|
||||
},
|
||||
}).then(response => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
}).then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
}).catch(err => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
this.showErrorDialog(msg);
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
})
|
||||
});
|
||||
}
|
||||
.then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then((msg) => {
|
||||
this.showErrorDialog(msg);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
showDialogDeleteAccount(account, idx) {
|
||||
|
|
@ -322,26 +342,29 @@ export default {
|
|||
body: JSON.stringify([account.username]),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Authorization': 'Bearer ' + localStorage.getItem("shiori-token")
|
||||
Authorization: "Bearer " + localStorage.getItem("shiori-token"),
|
||||
},
|
||||
}).then(response => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
}).then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
this.accounts.splice(idx, 1);
|
||||
}).catch(err => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
this.showErrorDialog(msg);
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
})
|
||||
});
|
||||
}
|
||||
.then(() => {
|
||||
this.dialog.loading = false;
|
||||
this.dialog.visible = false;
|
||||
this.accounts.splice(idx, 1);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then((msg) => {
|
||||
this.showErrorDialog(msg);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadAccounts();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:root {
|
||||
--main : #F44336;
|
||||
--border : #E5E5E5;
|
||||
--colorLink : #999;
|
||||
--main: #f44336;
|
||||
--border: #e5e5e5;
|
||||
--colorLink: #999;
|
||||
--archiveHeaderBg: rgba(255, 255, 255, 0.95);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--border : #191919;
|
||||
--border: #191919;
|
||||
--archiveHeaderBg: rgba(41, 41, 41, 0.95);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,41 +15,41 @@
|
|||
@screen-sm-header-height: 50px;
|
||||
|
||||
#shiori-archive-header {
|
||||
top : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
height : @header-height;
|
||||
box-sizing : border-box;
|
||||
position : fixed;
|
||||
padding : 0 16px;
|
||||
display : flex;
|
||||
flex-flow : row wrap;
|
||||
align-items : center;
|
||||
font-size : 16px;
|
||||
border-bottom : 1px solid var(--border);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: @header-height;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--archiveHeaderBg);
|
||||
z-index : 9999999999;
|
||||
z-index: 9999999999;
|
||||
|
||||
* {
|
||||
border-width: 0;
|
||||
box-sizing : border-box;
|
||||
font-family : "Source Sans Pro", sans-serif;
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
>*:not(:last-child) {
|
||||
> *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
>.spacer {
|
||||
> .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#shiori-logo {
|
||||
font-size : 2em;
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
color : var(--main);
|
||||
color: var(--main);
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
|
|
@ -57,8 +57,8 @@
|
|||
}
|
||||
|
||||
a {
|
||||
display : block;
|
||||
color : var(--colorLink);
|
||||
display: block;
|
||||
color: var(--colorLink);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 14px;
|
||||
height : @screen-sm-header-height;
|
||||
height: @screen-sm-header-height;
|
||||
|
||||
#shiori-logo {
|
||||
font-size: 1.5em;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.bookmark {
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
min-width : 0;
|
||||
border : 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--contentBg);
|
||||
height : 100%;
|
||||
position : relative;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.bookmark-menu>a {
|
||||
.bookmark-menu > a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,16 +20,16 @@
|
|||
|
||||
.bookmark-selector {
|
||||
position: absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
z-index : 9;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.bookmark-link {
|
||||
display: block;
|
||||
cursor : default;
|
||||
cursor: default;
|
||||
|
||||
&[href] {
|
||||
cursor: pointer;
|
||||
|
|
@ -43,78 +43,78 @@
|
|||
}
|
||||
|
||||
span.thumbnail {
|
||||
width : 100%;
|
||||
height : 200px;
|
||||
display : block;
|
||||
background-size : cover;
|
||||
background-repeat : no-repeat;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
margin-bottom : 8px;
|
||||
border-bottom : 1px solid var(--border);
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.id {
|
||||
color : var(--color);
|
||||
border : 1px solid var(--border);
|
||||
color: var(--color);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--contentBg);
|
||||
font-size : 0.7em;
|
||||
font-weight : bold;
|
||||
left : -1px;
|
||||
top : -1px;
|
||||
position : absolute;
|
||||
padding : 0px 0.3em;
|
||||
opacity : 0.7;
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
padding: 0px 0.3em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-overflow: ellipsis;
|
||||
word-wrap : break-word;
|
||||
overflow : hidden;
|
||||
font-size : 1.2em;
|
||||
line-height : 1.3em;
|
||||
max-height : 5.2em;
|
||||
font-weight : 600;
|
||||
padding : 0 16px;
|
||||
color : var(--color);
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.3em;
|
||||
max-height: 5.2em;
|
||||
font-weight: 600;
|
||||
padding: 0 16px;
|
||||
color: var(--color);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
i {
|
||||
color : var(--colorLink);
|
||||
color: var(--colorLink);
|
||||
margin-left: 4px;
|
||||
font-size : 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
color : var(--color);
|
||||
margin-top : 8px;
|
||||
padding : 0 16px;
|
||||
color: var(--color);
|
||||
margin-top: 8px;
|
||||
padding: 0 16px;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap : break-word;
|
||||
overflow : hidden;
|
||||
font-size : 0.9em;
|
||||
line-height : 1.5em;
|
||||
max-height : 10.5em;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5em;
|
||||
max-height: 10.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-tags {
|
||||
display : flex;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin : 8px 0 -4px;
|
||||
padding : 0 8px;
|
||||
margin: 8px 0 -4px;
|
||||
padding: 0 8px;
|
||||
|
||||
a {
|
||||
margin : 4px;
|
||||
padding : 4px 8px;
|
||||
font-size : 0.8em;
|
||||
font-weight : 600;
|
||||
border : 1px solid var(--border);
|
||||
border-radius : 4px;
|
||||
color : var(--colorLink);
|
||||
margin: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--colorLink);
|
||||
background-color: var(--contentBg);
|
||||
|
||||
&:hover,
|
||||
|
|
@ -125,19 +125,19 @@
|
|||
}
|
||||
|
||||
.bookmark-menu {
|
||||
padding : 8px 16px 16px;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
min-width : 0;
|
||||
min-height : 0;
|
||||
padding: 8px 16px 16px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color : var(--colorLink);
|
||||
color: var(--colorLink);
|
||||
flex-shrink: 0;
|
||||
opacity : 0.8;
|
||||
display : none;
|
||||
font-size : 0.9em;
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
font-size: 0.9em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
|
|
@ -145,23 +145,23 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color : var(--main);
|
||||
color: var(--main);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.url {
|
||||
flex : 1 0;
|
||||
opacity : 1;
|
||||
display : block;
|
||||
white-space : nowrap;
|
||||
overflow : hidden;
|
||||
flex: 1 0;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height : 21px;
|
||||
line-height: 21px;
|
||||
|
||||
&:not([href]) {
|
||||
cursor: default;
|
||||
color : var(--colorLink);
|
||||
color: var(--colorLink);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,9 +174,9 @@
|
|||
}
|
||||
|
||||
.bookmark.list {
|
||||
border-top-width : 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
padding : 16px 24px 16px 100px;
|
||||
padding: 16px 24px 16px 100px;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 1px;
|
||||
|
|
@ -184,67 +184,67 @@
|
|||
|
||||
.bookmark-link {
|
||||
span.thumbnail {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100px;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0px;
|
||||
border-right : 1px solid var(--border);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin : 0;
|
||||
margin: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt,
|
||||
>.spacer {
|
||||
> .spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bookmark-tags {
|
||||
padding-left : 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.bookmark-menu {
|
||||
padding : 8px 0 0 24px;
|
||||
padding: 8px 0 0 24px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&.no-thumbnail {
|
||||
padding-left : 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
||||
.bookmark-link .title {
|
||||
padding : 0;
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top : 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
padding : 0;
|
||||
display : block;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bookmark-tags {
|
||||
padding-left: 0;
|
||||
margin : 0 -4px 0;
|
||||
margin: 0 -4px 0;
|
||||
}
|
||||
|
||||
.bookmark-menu {
|
||||
padding-top : 0;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding : 8px 16px 8px 70px;
|
||||
border-width : 0 !important;
|
||||
padding: 8px 16px 8px 70px;
|
||||
border-width: 0 !important;
|
||||
border-bottom-width: 1px !important;
|
||||
|
||||
.bookmark-link {
|
||||
|
|
@ -253,8 +253,8 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size : 1.1em;
|
||||
font-weight : 500;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
:root {
|
||||
--bg : #EEE;
|
||||
--sidebarBg : #292929;
|
||||
--bg: #eee;
|
||||
--sidebarBg: #292929;
|
||||
--sidebarHoverBg: #232323;
|
||||
--headerBg : #FFF;
|
||||
--contentBg : #FFF;
|
||||
--border : #E5E5E5;
|
||||
--color : #232323;
|
||||
--colorLink : #999;
|
||||
--colorSidebar : #FFF;
|
||||
--main : #F44336;
|
||||
--errorColor : #F44336;
|
||||
--selectedBg : #ffe7e5;
|
||||
--headerBg: #fff;
|
||||
--contentBg: #fff;
|
||||
--border: #e5e5e5;
|
||||
--color: #232323;
|
||||
--colorLink: #999;
|
||||
--colorSidebar: #fff;
|
||||
--main: #f44336;
|
||||
--errorColor: #f44336;
|
||||
--selectedBg: #ffe7e5;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:root {
|
||||
--bg : #1F1F1F;
|
||||
--headerBg : #292929;
|
||||
--contentBg : #292929;
|
||||
--border : #191919;
|
||||
--color : #FFF;
|
||||
--bg: #1f1f1f;
|
||||
--headerBg: #292929;
|
||||
--contentBg: #292929;
|
||||
--border: #191919;
|
||||
--color: #fff;
|
||||
--selectedBg: #261918;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.night {
|
||||
--bg : #1F1F1F;
|
||||
--headerBg : #292929;
|
||||
--contentBg : #292929;
|
||||
--border : #191919;
|
||||
--color : #FFF;
|
||||
--bg: #1f1f1f;
|
||||
--headerBg: #292929;
|
||||
--contentBg: #292929;
|
||||
--border: #191919;
|
||||
--color: #fff;
|
||||
--selectedBg: #261918;
|
||||
}
|
||||
|
||||
* {
|
||||
border-width : 0;
|
||||
box-sizing : border-box;
|
||||
font-family : "Source Sans Pro", sans-serif;
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
border-width: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -55,55 +55,55 @@ a {
|
|||
}
|
||||
|
||||
#login-scene {
|
||||
height : 100%;
|
||||
height : 100dvh;
|
||||
padding : 16px;
|
||||
overflow : auto;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
flex-flow : column nowrap;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: column nowrap;
|
||||
background-color: var(--bg);
|
||||
|
||||
>.error-message {
|
||||
width : 100%;
|
||||
max-width : 400px;
|
||||
font-size : 1em;
|
||||
> .error-message {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
font-size: 1em;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
padding : 16px;
|
||||
margin-top : auto;
|
||||
margin-bottom : 16px;
|
||||
text-align : center;
|
||||
color : var(--errorColor);
|
||||
border: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
margin-top: auto;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
color: var(--errorColor);
|
||||
}
|
||||
|
||||
#login-box {
|
||||
width : 100%;
|
||||
max-width : 400px;
|
||||
margin-bottom : auto;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-bottom: auto;
|
||||
background-color: var(--contentBg);
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
border : 1px solid var(--border);
|
||||
flex-shrink : 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
border: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#logo-area {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
flex-flow : column nowrap;
|
||||
padding : 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: column nowrap;
|
||||
padding: 16px;
|
||||
background-color: var(--main);
|
||||
border-bottom : 1px solid var(--border);
|
||||
flex-shrink : 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
|
||||
#logo {
|
||||
font-size : 3em;
|
||||
font-size: 3em;
|
||||
font-weight: 100;
|
||||
color : var(--contentBg);
|
||||
color: var(--contentBg);
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
|
|
@ -112,66 +112,66 @@ a {
|
|||
|
||||
#tagline {
|
||||
font-weight: 500;
|
||||
margin-top : 4px;
|
||||
color : var(--contentBg);
|
||||
text-align : center;
|
||||
margin-top: 4px;
|
||||
color: var(--contentBg);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#input-area {
|
||||
padding : 16px;
|
||||
display : grid;
|
||||
grid-gap : 16px;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: auto 1fr;
|
||||
justify-content : baseline;
|
||||
align-items : center;
|
||||
border-bottom : 1px solid var(--border);
|
||||
justify-content: baseline;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
>label {
|
||||
> label {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
>input {
|
||||
color : var(--color);
|
||||
padding : 8px;
|
||||
> input {
|
||||
color: var(--color);
|
||||
padding: 8px;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
min-width : 0;
|
||||
font-size : 1em;
|
||||
border: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
grid-column : 1 / span 2;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
align-items : center;
|
||||
grid-column: 1 / span 2;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration : underline;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--main);
|
||||
}
|
||||
|
||||
>input[type="checkbox"] {
|
||||
> input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#button-area {
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
padding : 16px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 16px;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
color : var(--color);
|
||||
color: var(--color);
|
||||
text-transform: uppercase;
|
||||
text-align : center;
|
||||
font-weight : 600;
|
||||
cursor : default;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
|
||||
&.button {
|
||||
cursor: pointer;
|
||||
|
|
@ -187,87 +187,87 @@ a {
|
|||
}
|
||||
|
||||
#main-scene {
|
||||
min-height : 100%;
|
||||
min-height : 100dvh;
|
||||
padding-top : 60px;
|
||||
padding-left : 60px;
|
||||
min-height: 100%;
|
||||
min-height: 100dvh;
|
||||
padding-top: 60px;
|
||||
padding-left: 60px;
|
||||
background-color: var(--bg);
|
||||
|
||||
#main-sidebar {
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 60px;
|
||||
height : 100%;
|
||||
height : 100dvh;
|
||||
position : fixed;
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
background-color: var(--sidebarBg);
|
||||
z-index : 1;
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
flex-shrink: 0;
|
||||
display : block;
|
||||
width : 60px;
|
||||
display: block;
|
||||
width: 60px;
|
||||
line-height: 60px;
|
||||
text-align : center;
|
||||
font-size : 1em;
|
||||
color : var(--colorSidebar);
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
color: var(--colorSidebar);
|
||||
|
||||
&.active {
|
||||
cursor : default;
|
||||
color : var(--colorSidebar);
|
||||
cursor: default;
|
||||
color: var(--colorSidebar);
|
||||
background-color: var(--main);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color : var(--main);
|
||||
color: var(--main);
|
||||
background-color: var(--sidebarHoverBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
top : 0px;
|
||||
left : 60px;
|
||||
right : 0px;
|
||||
height : 60px;
|
||||
position : fixed;
|
||||
color : var(--color);
|
||||
top: 0px;
|
||||
left: 60px;
|
||||
right: 0px;
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
color: var(--color);
|
||||
background-color: var(--headerBg);
|
||||
border-bottom : 1px solid var(--border);
|
||||
padding : 0 16px;
|
||||
z-index : 10;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
h1.page-header {
|
||||
line-height: 60px;
|
||||
font-size : 1.3em;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
div.page-header {
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
flex : 1 0;
|
||||
font-size : 1.3em;
|
||||
flex: 1 0;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
line-height: 60px;
|
||||
color : var(--color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex : 1 0;
|
||||
min-width : 0;
|
||||
margin-right : 8px;
|
||||
font-size : 1.1em;
|
||||
font-weight : 500;
|
||||
line-height : 59px;
|
||||
color : var(--color);
|
||||
flex: 1 0;
|
||||
min-width: 0;
|
||||
margin-right: 8px;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
line-height: 59px;
|
||||
color: var(--color);
|
||||
background-color: var(--contentBg);
|
||||
|
||||
&::placeholder {
|
||||
|
|
@ -276,11 +276,11 @@ a {
|
|||
}
|
||||
|
||||
a {
|
||||
display : block;
|
||||
width : 24px;
|
||||
display: block;
|
||||
width: 24px;
|
||||
line-height: 24px;
|
||||
color : var(--colorLink);
|
||||
text-align : center;
|
||||
color: var(--colorLink);
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
|
|
@ -293,44 +293,44 @@ a {
|
|||
}
|
||||
|
||||
.loading-overlay {
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
overflow : hidden;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
width : 100dvw;
|
||||
height : 100%;
|
||||
height : 100dvh;
|
||||
z-index : 10001;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: 100dvw;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
z-index: 10001;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
i {
|
||||
color : var(--colorSidebar);
|
||||
font-size : 4em;
|
||||
text-align : center;
|
||||
width : 80px;
|
||||
color: var(--colorSidebar);
|
||||
font-size: 4em;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
line-height: 80px;
|
||||
position : absolute;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-top : 50px;
|
||||
padding-left : 0;
|
||||
padding-top: 50px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 50px;
|
||||
|
||||
#main-sidebar {
|
||||
top : auto;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
width : 100%;
|
||||
width : 100dvw;
|
||||
height : 50px;
|
||||
flex-flow : row nowrap;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 100dvw;
|
||||
height: 50px;
|
||||
flex-flow: row nowrap;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
.spacer {
|
||||
|
|
@ -338,27 +338,27 @@ a {
|
|||
}
|
||||
|
||||
a {
|
||||
width : auto;
|
||||
flex : 1 0;
|
||||
width: auto;
|
||||
flex: 1 0;
|
||||
line-height: 50px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color : var(--colorSidebar);
|
||||
color: var(--colorSidebar);
|
||||
background-color: var(--main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
left : 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
h1.page-header {
|
||||
text-align : center;
|
||||
font-size : 1em;
|
||||
line-height : 50px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
line-height: 50px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -366,23 +366,23 @@ a {
|
|||
flex-flow: row wrap;
|
||||
|
||||
p {
|
||||
flex : 1 0;
|
||||
font-size : 1em;
|
||||
flex: 1 0;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
line-height: 3em;
|
||||
padding : 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex : 1 0;
|
||||
font-size : 1em;
|
||||
flex: 1 0;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
a {
|
||||
display : block;
|
||||
width : 24px;
|
||||
display: block;
|
||||
width: 24px;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -390,30 +390,30 @@ a {
|
|||
}
|
||||
|
||||
#content-scene {
|
||||
padding : 20px;
|
||||
display : flex;
|
||||
color : var(--color);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
color: var(--color);
|
||||
background-color: var(--bg);
|
||||
flex-flow : column nowrap;
|
||||
align-items : center;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
|
||||
#header {
|
||||
width : 100%;
|
||||
padding : 20px;
|
||||
max-width : 840px;
|
||||
margin-bottom : 16px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
max-width: 840px;
|
||||
margin-bottom: 16px;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
display : flex;
|
||||
flex-flow : column;
|
||||
align-items : center;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
#metadata {
|
||||
display : flex;
|
||||
flex-flow : row wrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
text-align: center;
|
||||
font-size : 16px;
|
||||
color : var(--colorLink);
|
||||
font-size: 16px;
|
||||
color: var(--colorLink);
|
||||
|
||||
&[v-cloak] {
|
||||
visibility: hidden;
|
||||
|
|
@ -421,23 +421,23 @@ a {
|
|||
}
|
||||
|
||||
#title {
|
||||
padding : 8px 0;
|
||||
padding: 8px 0;
|
||||
grid-column-start: 1;
|
||||
grid-column-end : -1;
|
||||
font-size : 36px;
|
||||
font-weight : 700;
|
||||
word-break : break-word;
|
||||
hyphens : none;
|
||||
text-align : center;
|
||||
grid-column-end: -1;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
hyphens: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#links {
|
||||
display : flex;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
a {
|
||||
padding : 0 4px;
|
||||
color : var(--color);
|
||||
padding: 0 4px;
|
||||
color: var(--color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -449,14 +449,14 @@ a {
|
|||
}
|
||||
|
||||
#content {
|
||||
width : 100%;
|
||||
padding : 20px;
|
||||
max-width : 840px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
max-width: 840px;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
* {
|
||||
font-size : 18px;
|
||||
font-size: 18px;
|
||||
line-height: 180%;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -465,7 +465,7 @@ a {
|
|||
}
|
||||
|
||||
a {
|
||||
color : var(--color);
|
||||
color: var(--color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -476,16 +476,16 @@ a {
|
|||
|
||||
pre,
|
||||
code {
|
||||
overflow : auto;
|
||||
border : 1px solid var(--border);
|
||||
font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;
|
||||
font-size : 16px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--border);
|
||||
font-family: "Ubuntu Mono", "Courier New", Courier, monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 8px;
|
||||
|
||||
>code {
|
||||
> code {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -496,12 +496,12 @@ a {
|
|||
}
|
||||
|
||||
img {
|
||||
height : auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border : 1px solid var(--border);
|
||||
border: 1px solid var(--border);
|
||||
border-collapse: collapse;
|
||||
|
||||
tr,
|
||||
|
|
@ -514,44 +514,44 @@ a {
|
|||
}
|
||||
|
||||
#page-home {
|
||||
>.empty-message {
|
||||
width : 100%;
|
||||
max-width : 400px;
|
||||
font-size : 1em;
|
||||
> .empty-message {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
font-size: 1em;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
padding : 16px;
|
||||
margin : 16px;
|
||||
color : var(--errorColor);
|
||||
border: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
color: var(--errorColor);
|
||||
}
|
||||
|
||||
#edit-box {
|
||||
background-color: var(--selectedBg);
|
||||
border-bottom : 1px solid var(--main);
|
||||
border-bottom: 1px solid var(--main);
|
||||
}
|
||||
|
||||
#bookmarks-grid {
|
||||
display : grid;
|
||||
grid-template-rows : min-content;
|
||||
display: grid;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-gap : 16px;
|
||||
padding : 16px;
|
||||
overflow : auto;
|
||||
grid-gap: 16px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
|
||||
.bookmark {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
grid-column-end : -1;
|
||||
grid-column-end: -1;
|
||||
grid-column-start: 1;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
align-self : start;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-self: start;
|
||||
|
||||
a {
|
||||
padding: 8px;
|
||||
color : var(--colorLink);
|
||||
color: var(--colorLink);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -560,32 +560,32 @@ a {
|
|||
}
|
||||
|
||||
input {
|
||||
width : 40px;
|
||||
padding : 8px;
|
||||
text-align : center;
|
||||
font-size : 0.9em;
|
||||
color : var(--color);
|
||||
border : 1px solid var(--border);
|
||||
width: 40px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
color: var(--color);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--contentBg);
|
||||
margin : 0 8px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size : 0.9em;
|
||||
color : var(--colorLink);
|
||||
font-size: 0.9em;
|
||||
color: var(--colorLink);
|
||||
line-height: 37px;
|
||||
font-weight: 600;
|
||||
|
||||
&:last-of-type::before {
|
||||
content : "/";
|
||||
content: "/";
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list {
|
||||
grid-gap : 0;
|
||||
padding-bottom : 0;
|
||||
grid-gap: 0;
|
||||
padding-bottom: 0;
|
||||
grid-template-columns: minmax(0, 1000px);
|
||||
|
||||
.pagination-box {
|
||||
|
|
@ -616,21 +616,21 @@ a {
|
|||
|
||||
a {
|
||||
font-size: 1em;
|
||||
color : var(--color);
|
||||
color: var(--color);
|
||||
|
||||
span {
|
||||
&:last-child {
|
||||
font-size : 1em;
|
||||
color : var(--colorLink);
|
||||
font-size: 1em;
|
||||
color: var(--colorLink);
|
||||
margin-left: 4px;
|
||||
|
||||
&::before {
|
||||
content : "(";
|
||||
content: "(";
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content : ")";
|
||||
content: ")";
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -648,45 +648,45 @@ a {
|
|||
#page-setting {
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
.setting-container {
|
||||
padding : 8px;
|
||||
display : flex;
|
||||
overflow : auto;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-flow: column nowrap;
|
||||
flex : 1 0;
|
||||
flex: 1 0;
|
||||
|
||||
&::after {
|
||||
content : "";
|
||||
display : block;
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
details.setting-group {
|
||||
margin : 8px;
|
||||
display : block;
|
||||
max-width : 350px;
|
||||
color : var(--color);
|
||||
margin: 8px;
|
||||
display: block;
|
||||
max-width: 350px;
|
||||
color: var(--color);
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 600px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
summary {
|
||||
list-style : none;
|
||||
list-style: none;
|
||||
font-weight: 600;
|
||||
width : 100%;
|
||||
padding : 12px 8px;
|
||||
font-size : 1.1em;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
font-size: 1.1em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--main)
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
|
|
@ -694,7 +694,7 @@ a {
|
|||
}
|
||||
|
||||
&::after {
|
||||
content : "+";
|
||||
content: "+";
|
||||
margin-left: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -709,25 +709,25 @@ a {
|
|||
}
|
||||
|
||||
div.setting-group-footer {
|
||||
padding : 4px 8px;
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-end;
|
||||
border-top : 1px solid var(--border);
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
>a {
|
||||
> a {
|
||||
text-transform: uppercase;
|
||||
padding : 8px 4px;
|
||||
font-size : 0.9em;
|
||||
font-weight : 600;
|
||||
padding: 8px 4px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline : none;
|
||||
color : var(--main);
|
||||
outline: none;
|
||||
color: var(--main);
|
||||
border-bottom: 1px dashed var(--main);
|
||||
}
|
||||
}
|
||||
|
|
@ -737,7 +737,7 @@ a {
|
|||
|
||||
#setting-display,
|
||||
#setting-bookmarks {
|
||||
display : flex;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
&[open] {
|
||||
|
|
@ -749,20 +749,20 @@ a {
|
|||
}
|
||||
|
||||
label {
|
||||
padding : 4px 8px;
|
||||
color : var(--color);
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
padding: 4px 8px;
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
cursor : pointer;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration : underline;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--main);
|
||||
}
|
||||
|
||||
>input[type="checkbox"] {
|
||||
> input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -777,9 +777,9 @@ a {
|
|||
list-style: none;
|
||||
|
||||
li {
|
||||
padding : 8px;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -788,8 +788,8 @@ a {
|
|||
|
||||
p {
|
||||
font-size: 1em;
|
||||
color : var(--color);
|
||||
flex : 1 0;
|
||||
color: var(--color);
|
||||
flex: 1 0;
|
||||
|
||||
span {
|
||||
color: var(--colorLink);
|
||||
|
|
@ -798,7 +798,7 @@ a {
|
|||
|
||||
a {
|
||||
margin-left: 8px;
|
||||
color : var(--colorLink);
|
||||
color: var(--colorLink);
|
||||
|
||||
&:hover {
|
||||
color: var(--main);
|
||||
|
|
|
|||
|
|
@ -1,172 +1,171 @@
|
|||
:root {
|
||||
--dialogHeaderBg : #292929;
|
||||
--colorDialogHeader: #FFF;
|
||||
--dialogHeaderBg: #292929;
|
||||
--colorDialogHeader: #fff;
|
||||
}
|
||||
|
||||
.custom-dialog-overlay {
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
min-width : 0;
|
||||
min-height : 0;
|
||||
overflow : hidden;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
width : 100dvw;
|
||||
height : 100%;
|
||||
height : 100dvh;
|
||||
z-index : 10001;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: 100dvw;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
z-index: 10001;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding : 32px;
|
||||
padding: 32px;
|
||||
|
||||
.custom-dialog {
|
||||
display : flex;
|
||||
flex-flow : column nowrap;
|
||||
min-height : 0;
|
||||
max-height : 100%;
|
||||
max-width : 100%;
|
||||
width : 400px;
|
||||
overflow : auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 400px;
|
||||
overflow: auto;
|
||||
background-color: var(--contentBg);
|
||||
font-size : 16px;
|
||||
resize : both;
|
||||
font-size: 16px;
|
||||
resize: both;
|
||||
|
||||
.custom-dialog-header {
|
||||
padding : 16px;
|
||||
color : var(--colorDialogHeader);
|
||||
padding: 16px;
|
||||
color: var(--colorDialogHeader);
|
||||
background-color: var(--dialogHeaderBg);
|
||||
font-weight : 600;
|
||||
font-size : 1em;
|
||||
text-transform : uppercase;
|
||||
border-bottom : 1px solid var(--border);
|
||||
font-weight: 600;
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.custom-dialog-body {
|
||||
padding : 16px 16px 0;
|
||||
display : grid;
|
||||
max-height : 100%;
|
||||
min-height : 80px;
|
||||
min-width : 0;
|
||||
overflow : auto;
|
||||
font-size : 1em;
|
||||
padding: 16px 16px 0;
|
||||
display: grid;
|
||||
max-height: 100%;
|
||||
min-height: 80px;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
font-size: 1em;
|
||||
grid-template-columns: max-content 1fr;
|
||||
align-content : start;
|
||||
align-items : baseline;
|
||||
grid-gap : 16px;
|
||||
flex-grow : 1;
|
||||
align-content: start;
|
||||
align-items: baseline;
|
||||
grid-gap: 16px;
|
||||
flex-grow: 1;
|
||||
|
||||
&::after {
|
||||
content : "";
|
||||
display : block;
|
||||
min-height : 1px;
|
||||
grid-column-end : -1;
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 1px;
|
||||
grid-column-end: -1;
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.custom-dialog-content {
|
||||
grid-column-end : -1;
|
||||
grid-column-end: -1;
|
||||
grid-column-start: 1;
|
||||
color : var(--color);
|
||||
align-self : baseline;
|
||||
color: var(--color);
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
>label {
|
||||
color : var(--color);
|
||||
padding : 8px 0;
|
||||
> label {
|
||||
color: var(--color);
|
||||
padding: 8px 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
>input[type="text"],
|
||||
>input[type="password"],
|
||||
>textarea {
|
||||
color : var(--color);
|
||||
padding : 8px;
|
||||
font-size : 1em;
|
||||
border : 1px solid var(--border);
|
||||
> input[type="text"],
|
||||
> input[type="password"],
|
||||
> textarea {
|
||||
color: var(--color);
|
||||
padding: 8px;
|
||||
font-size: 1em;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--contentBg);
|
||||
min-width : 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
color : var(--color);
|
||||
font-size : 1em;
|
||||
display : flex;
|
||||
flex-flow : row nowrap;
|
||||
padding : 0;
|
||||
color: var(--color);
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0;
|
||||
grid-column-start: 1;
|
||||
grid-column-end : -1;
|
||||
cursor : pointer;
|
||||
grid-column-end: -1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration : underline;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--main);
|
||||
}
|
||||
|
||||
>input[type="checkbox"] {
|
||||
> input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
>textarea {
|
||||
height : 6em;
|
||||
> textarea {
|
||||
height: 6em;
|
||||
min-height: 37px;
|
||||
resize : vertical;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
>.suggestion {
|
||||
position : absolute;
|
||||
display : block;
|
||||
padding : 8px;
|
||||
> .suggestion {
|
||||
position: absolute;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
background-color: var(--contentBg);
|
||||
border : 1px solid var(--border);
|
||||
color : var(--color);
|
||||
font-size : 0.9em;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-dialog-footer {
|
||||
padding : 16px;
|
||||
display : flex;
|
||||
flex-flow : row wrap;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
border-top : 1px solid var(--border);
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
>a {
|
||||
padding : 0 8px;
|
||||
font-size : 0.9em;
|
||||
font-weight : 600;
|
||||
color : var(--color);
|
||||
> a {
|
||||
padding: 0 8px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: var(--color);
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color : var(--main);
|
||||
color: var(--main);
|
||||
}
|
||||
}
|
||||
|
||||
>i.fa-spinner.fa-spin {
|
||||
width : 19px;
|
||||
> i.fa-spinner.fa-spin {
|
||||
width: 19px;
|
||||
line-height: 19px;
|
||||
text-align : center;
|
||||
color : var(--color);
|
||||
text-align: center;
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.custom-dialog-overlay {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.custom-dialog {
|
||||
width : 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
{ "dependencies": { "clean-css-cli": "^5.6.2", "less": "^4.2.0" } }
|
||||
{
|
||||
"dependencies": {
|
||||
"clean-css-cli": "^5.6.2",
|
||||
"less": "^4.2.0",
|
||||
"prettier": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ OUTPUT_ARCHIVECSS=internal/view/assets/css/archive.css
|
|||
# Use bun is installled
|
||||
if [ -x "$(command -v bun)" ]; then
|
||||
bun install
|
||||
bun x prettier internal/view/ --write
|
||||
bun x lessc $INPUT_STYLECSS $OUTPUT_STYLECSS
|
||||
bun x lessc $INPUT_ARCHIVECSS $OUTPUT_ARCHIVECSS
|
||||
bun x clean-css-cli $CLEANCSS_OPTS -o $OUTPUT_STYLECSS $OUTPUT_STYLECSS
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ if [ -n "$(git status internal/view/assets/css --porcelain)" ]; then
|
|||
exit 1
|
||||
fi
|
||||
|
||||
# Check if prettier is ok
|
||||
if ! bun x prettier internal/view/ --check; then
|
||||
echo "❌ code style issues found. Please run 'make styles' and commit the changes."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Check style.css file
|
||||
CLEANCSS_OPTS=${CLEANCSS_OPTS} make styles
|
||||
if [ -n "$(git status internal/view/assets/css --porcelain)" ]; then
|
||||
|
|
|
|||
Loading…
Reference in a new issue