Fix style problems
This commit is contained in:
parent
55344f8a9d
commit
16e78847a2
@ -71,8 +71,7 @@ body {
|
|||||||
|
|
||||||
.checkbox > label::before {
|
.checkbox > label::before {
|
||||||
/* @apply bg-grey-10; */
|
/* @apply bg-grey-10; */
|
||||||
border-width: 1px;
|
@apply border-default;
|
||||||
|
|
||||||
@apply rounded-sm;
|
@apply rounded-sm;
|
||||||
|
|
||||||
content: '';
|
content: '';
|
||||||
@ -314,8 +313,7 @@ select {
|
|||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
.main > section {
|
.main > section {
|
||||||
border-width: 1px;
|
@apply border-default;
|
||||||
|
|
||||||
@apply border-grey-80;
|
@apply border-grey-80;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -83,7 +83,7 @@ class Account extends Component {
|
|||||||
<input
|
<input
|
||||||
type="image"
|
type="image"
|
||||||
alt="${user.email}"
|
alt="${user.email}"
|
||||||
class="w-8 h-8 rounded-full border text-primary md:text-white focus:outline"
|
class="w-8 h-8 rounded-full border-default text-primary md:text-white focus:outline"
|
||||||
src="${user.avatar}"
|
src="${user.avatar}"
|
||||||
onclick="${e => this.avatarClick(e)}"
|
onclick="${e => this.avatarClick(e)}"
|
||||||
/>
|
/>
|
||||||
|
@ -53,7 +53,7 @@ function password(state) {
|
|||||||
id="password-input"
|
id="password-input"
|
||||||
class="${state.archive.password
|
class="${state.archive.password
|
||||||
? ''
|
? ''
|
||||||
: 'invisible'} border rounded focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
: 'invisible'} border-default rounded-default focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
maxlength="${MAX_LENGTH}"
|
maxlength="${MAX_LENGTH}"
|
||||||
type="password"
|
type="password"
|
||||||
@ -261,7 +261,7 @@ module.exports = function(state, emit, archive) {
|
|||||||
return html`
|
return html`
|
||||||
<send-archive
|
<send-archive
|
||||||
id="archive-${archive.id}"
|
id="archive-${archive.id}"
|
||||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
|
class="flex flex-col items-start rounded-default shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border-default dark:border-grey-70"
|
||||||
>
|
>
|
||||||
${archiveInfo(
|
${archiveInfo(
|
||||||
archive,
|
archive,
|
||||||
@ -335,7 +335,7 @@ module.exports.wip = function(state, emit) {
|
|||||||
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
|
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
|
||||||
),
|
),
|
||||||
'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
|
'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
|
||||||
'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
|
'bg-white px-2 my-2 shadow-light rounded-default dark:bg-grey-90 dark:border-default dark:border-grey-80'
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
|
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
|
||||||
@ -438,7 +438,7 @@ module.exports.uploading = function(state, emit) {
|
|||||||
return html`
|
return html`
|
||||||
<send-upload-area
|
<send-upload-area
|
||||||
id="${archive.id}"
|
id="${archive.id}"
|
||||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
|
class="flex flex-col items-start rounded-default shadow-light bg-white p-4 w-full dark:bg-grey-90"
|
||||||
>
|
>
|
||||||
${archiveInfo(archive)}
|
${archiveInfo(archive)}
|
||||||
<div class="text-xs opacity-75 w-full mt-2 mb-2">
|
<div class="text-xs opacity-75 w-full mt-2 mb-2">
|
||||||
@ -488,7 +488,7 @@ module.exports.empty = function(state, emit) {
|
|||||||
`;
|
`;
|
||||||
return html`
|
return html`
|
||||||
<send-upload-area
|
<send-upload-area
|
||||||
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
|
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded-default px-6 py-16 h-full w-full dark:border-grey-60"
|
||||||
onclick="${e => {
|
onclick="${e => {
|
||||||
if (e.target.tagName !== 'LABEL') {
|
if (e.target.tagName !== 'LABEL') {
|
||||||
document.getElementById('file-upload').click();
|
document.getElementById('file-upload').click();
|
||||||
@ -563,7 +563,7 @@ module.exports.preview = function(state, emit) {
|
|||||||
<send-archive
|
<send-archive
|
||||||
class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
|
class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
|
||||||
>
|
>
|
||||||
<div class="border rounded py-3 px-6 dark:border-grey-70">
|
<div class="border-default rounded-default py-3 px-6 dark:border-grey-70">
|
||||||
${archiveInfo(archive)} ${details}
|
${archiveInfo(archive)} ${details}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@ -590,7 +590,7 @@ module.exports.downloading = function(state) {
|
|||||||
const progressPercent = percent(progress);
|
const progressPercent = percent(progress);
|
||||||
return html`
|
return html`
|
||||||
<send-archive
|
<send-archive
|
||||||
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
|
class="flex flex-col bg-white rounded-default shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
|
||||||
>
|
>
|
||||||
${archiveInfo(archive)}
|
${archiveInfo(archive)}
|
||||||
<div class="link-primary text-sm font-medium mt-2">
|
<div class="link-primary text-sm font-medium mt-2">
|
||||||
|
@ -21,7 +21,7 @@ module.exports = function(name, url) {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="share-url"
|
id="share-url"
|
||||||
class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
class="block w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
||||||
value="${url}"
|
value="${url}"
|
||||||
readonly="true"
|
readonly="true"
|
||||||
/>
|
/>
|
||||||
|
@ -12,12 +12,12 @@ module.exports = function(state, emit) {
|
|||||||
'downloadTitle'
|
'downloadTitle'
|
||||||
)}</h1>
|
)}</h1>
|
||||||
<p
|
<p
|
||||||
class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
|
class="w-full p-2 border-default border-yellow-50 rounded-default md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
|
||||||
>
|
>
|
||||||
⚠️ ${state.translate('noStreamsWarning')} ⚠️
|
⚠️ ${state.translate('noStreamsWarning')} ⚠️
|
||||||
</p>
|
</p>
|
||||||
<form class="md:w-128" onsubmit=${submit}>
|
<form class="md:w-128" onsubmit=${submit}>
|
||||||
<fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
|
<fieldset class="border-default rounded-default p-4 my-4" onchange=${optionChanged}>
|
||||||
<div class="flex items-center mb-2">
|
<div class="flex items-center mb-2">
|
||||||
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
|
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
|
||||||
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
||||||
|
@ -18,7 +18,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
|
|||||||
return html`
|
return html`
|
||||||
<select
|
<select
|
||||||
id="${htmlId}"
|
id="${htmlId}"
|
||||||
class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
|
class="appearance-none cursor-pointer border-default rounded-default bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
|
||||||
data-selected="${selected}"
|
data-selected="${selected}"
|
||||||
onchange="${choose}"
|
onchange="${choose}"
|
||||||
>
|
>
|
||||||
|
@ -18,7 +18,7 @@ module.exports = function(name, url) {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="share-url"
|
id="share-url"
|
||||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
class="w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
||||||
value="${url}"
|
value="${url}"
|
||||||
readonly="true"
|
readonly="true"
|
||||||
/>
|
/>
|
||||||
|
@ -35,7 +35,7 @@ module.exports = function() {
|
|||||||
<input
|
<input
|
||||||
id="email-input"
|
id="email-input"
|
||||||
type="email"
|
type="email"
|
||||||
class="hidden border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
|
class="hidden border-default rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
|
||||||
placeholder=${state.translate('emailPlaceholder')}
|
placeholder=${state.translate('emailPlaceholder')}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
|
@ -27,7 +27,7 @@ module.exports = function(state, emit) {
|
|||||||
<main class="main">
|
<main class="main">
|
||||||
${state.modal && modal(state, emit)}
|
${state.modal && modal(state, emit)}
|
||||||
<section
|
<section
|
||||||
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
|
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border-default border-grey-30 md:border-none md:px-12 md:py-16 shadow-default w-full md:h-full dark:bg-grey-90"
|
||||||
>
|
>
|
||||||
<h1 class="text-3xl font-bold">${strings.header}</h1>
|
<h1 class="text-3xl font-bold">${strings.header}</h1>
|
||||||
<p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
|
<p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user