mirror of
https://github.com/Tygs/0bin.git
synced 2023-08-10 21:13:00 +03:00
cleaning reader mode and admin css
This commit is contained in:
papee
parent
d0cca8cdd9
commit
89d25030d4
@ -243,14 +243,6 @@ pre {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-wrapper {
|
|
||||||
color: #f2f2f2;
|
|
||||||
max-width: 800px;
|
|
||||||
width: 90%;
|
|
||||||
text-align: justify;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Common css */
|
/* Common css */
|
||||||
|
|
||||||
@ -489,7 +481,7 @@ nav ul li a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@media screen and (max-width: 840px) {
|
@media screen and (max-width: 1060px) {
|
||||||
.topnav a:not(:first-child) {
|
.topnav a:not(:first-child) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -511,10 +503,60 @@ nav ul li a:hover {
|
|||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reader-tools {
|
||||||
|
bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 660px) {
|
||||||
|
.submenu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* reader mode */
|
/* reader mode */
|
||||||
|
|
||||||
#readable-paste-content {
|
#readable-paste-content {
|
||||||
white-space: pre;
|
color: #f2f2f2;
|
||||||
|
max-width: 800px;
|
||||||
|
width: 90%;
|
||||||
|
text-align: justify;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader-mode-bg {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader-book svg {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader-tools {
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader-tools.min a{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reader-tools.max a{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Admin */
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#password-field {
|
||||||
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
<form action="." method="post">
|
<form action="." method="post">
|
||||||
%if status == "error":
|
<!-- %if status == "error": -->
|
||||||
<div class="alert alert-danger" role="alert alert-danger">
|
<div class="alert alert-danger" role="alert alert-danger">
|
||||||
{{message}}
|
{{message}}
|
||||||
|
dededede
|
||||||
</div>
|
</div>
|
||||||
%end
|
<!-- %end -->
|
||||||
%if status == "ok" and message:
|
%if status == "ok" and message:
|
||||||
<div class="alert alert-success" role="alert">
|
<div class="alert alert-success" role="alert">
|
||||||
{{message}}
|
{{message}}
|
||||||
@ -15,7 +16,6 @@
|
|||||||
<input name="paste" type="text" class="form-control" placeholder="Paste URL or ID">
|
<input name="paste" type="text" class="form-control" placeholder="Paste URL or ID">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-black">Delete</button>
|
<button type="submit" class="btn btn-black">Delete</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -23,9 +23,9 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body >
|
||||||
|
|
||||||
<div id="app">
|
<div id="app" :class="{ 'reader-mode-bg': readerMode}">
|
||||||
|
|
||||||
<div :class="{'topnav': true, 'reader-mode': readerMode}" @mouseleave="openPreviousPastesMenu =false">
|
<div :class="{'topnav': true, 'reader-mode': readerMode}" @mouseleave="openPreviousPastesMenu =false">
|
||||||
<a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
|
<a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
|
||||||
@ -35,13 +35,27 @@
|
|||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li class="reader-tools min" v-if="readerMode">
|
||||||
|
<a href="#" @click.prevent="decreaseFontSize()">
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<text x="10" y="20" fill="#eee">A</text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="reader-tools max" v-if="readerMode">
|
||||||
|
<a href="#" @click.prevent="increaseFontSize()">
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<text x="10" y="20" fill="#eee">A</text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" v-if="currentPaste.type === 'text'" @click.prevent="toggleReaderMode()">📖</a>
|
<a class="reader-book" href="#" v-if="currentPaste.type === 'text'" @click.prevent="toggleReaderMode()">
|
||||||
<span v-if="readerMode">
|
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
<a href="#" @click.prevent="increaseFontSize()">+</a>
|
<path fill-rule="evenodd" d="M3.214 1.072C4.813.752 6.916.71 8.354 2.146A.5.5 0 0 1 8.5 2.5v11a.5.5 0 0 1-.854.354c-.843-.844-2.115-1.059-3.47-.92-1.344.14-2.66.617-3.452 1.013A.5.5 0 0 1 0 13.5v-11a.5.5 0 0 1 .276-.447L.5 2.5l-.224-.447.002-.001.004-.002.013-.006a5.017 5.017 0 0 1 .22-.103 12.958 12.958 0 0 1 2.7-.869zM1 2.82v9.908c.846-.343 1.944-.672 3.074-.788 1.143-.118 2.387-.023 3.426.56V2.718c-1.063-.929-2.631-.956-4.09-.664A11.958 11.958 0 0 0 1 2.82z"/>
|
||||||
<a href="#" @click.prevent="decreaseFontSize()">-</a>
|
<path fill-rule="evenodd" d="M12.786 1.072C11.188.752 9.084.71 7.646 2.146A.5.5 0 0 0 7.5 2.5v11a.5.5 0 0 0 .854.354c.843-.844 2.115-1.059 3.47-.92 1.344.14 2.66.617 3.452 1.013A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.276-.447L15.5 2.5l.224-.447-.002-.001-.004-.002-.013-.006-.047-.023a12.582 12.582 0 0 0-.799-.34 12.96 12.96 0 0 0-2.073-.609zM15 2.82v9.908c-.846-.343-1.944-.672-3.074-.788-1.143-.118-2.387-.023-3.426.56V2.718c1.063-.929 2.631-.956 4.09-.664A11.956 11.956 0 0 1 15 2.82z"/>
|
||||||
🔍
|
</svg>
|
||||||
</span>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="submenu"><a href="#" @click.prevent="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
|
<li class="submenu"><a href="#" @click.prevent="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
|
||||||
pastes v</a>
|
pastes v</a>
|
||||||
@ -65,7 +79,7 @@
|
|||||||
<p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p>
|
<p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<div class="container-md reader-mode" id="wrap-content">
|
<div class="container-md" id="wrap-content">
|
||||||
|
|
||||||
<p :class="'alert alert-' + msg.type" v-for="msg in messages">
|
<p :class="'alert alert-' + msg.type" v-for="msg in messages">
|
||||||
<a class="close" data-dismiss="alert" href="#" @click="$event.target.parentNode.remove()">×</a>
|
<a class="close" data-dismiss="alert" href="#" @click="$event.target.parentNode.remove()">×</a>
|
||||||
|
|||||||
@ -1,18 +1,20 @@
|
|||||||
<form action="." method="post">
|
<form class="form-group" action="." method="post">
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<form>
|
<form>
|
||||||
<label>Password</label>
|
<label>Password:</label>
|
||||||
%if status == "error":
|
%if status == "error":
|
||||||
<div class="alert alert-danger" role="alert alert-danger">
|
<div class="alert alert-danger" role="alert alert-danger">
|
||||||
{{message}}
|
{{message}}
|
||||||
</div>
|
</div>
|
||||||
%end
|
%end
|
||||||
<input type="password" class="form-control" placeholder="Password" name="password">
|
<div class="input-group">
|
||||||
<button type="submit" class="btn btn-black">Login</button>
|
<input type="password" id="password-field" placeholder="Enter your admin password here" name="password">
|
||||||
</form>
|
<div class="input-group-append">
|
||||||
</div>
|
<button type="submit" class="btn btn-secondary">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
% rebase('base', settings=settings, pastes_count=pastes_count)
|
% rebase('base', settings=settings, pastes_count=pastes_count)
|
||||||
|
|||||||
@ -60,8 +60,10 @@
|
|||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<div id="readable-paste-content" v-if="readerMode">
|
<div>
|
||||||
{% currentPaste.content %}
|
<div id="readable-paste-content" v-if="readerMode">
|
||||||
|
{% currentPaste.content %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex justify-content-between down">
|
<div class="d-flex justify-content-between down">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user