mirror of
https://github.com/Tygs/0bin.git
synced 2023-08-10 21:13:00 +03:00
css responsive icons menu
This commit is contained in:
papee
parent
d11081fc54
commit
c95fe5a2f7
@ -212,6 +212,29 @@ h1 {
|
|||||||
border: 0px;
|
border: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paste-form {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#expiration-tag {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
margin: 1em;
|
||||||
|
background: grey;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 0 1ex;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: alpha(opacity=50);
|
||||||
|
font-weight: bold;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-moz-background-clip: padding;
|
||||||
|
-webkit-background-clip: padding-box;
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
.paste-options,
|
.paste-options,
|
||||||
.paste-options-res {
|
.paste-options-res {
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
@ -256,7 +279,6 @@ margin-left: 8px;
|
|||||||
margin: 8px 0 8px 0;
|
margin: 8px 0 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#paste-content.linenums {
|
#paste-content.linenums {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
@ -265,6 +287,10 @@ margin-left: 8px;
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tip svg{
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
a#clip-button.hover {
|
a#clip-button.hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -432,23 +458,6 @@ canvas {
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#expiration-tag {
|
|
||||||
float: right;
|
|
||||||
margin: 1em;
|
|
||||||
background: grey;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding: 0 1ex;
|
|
||||||
opacity: 0.5;
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
font-weight: bold;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
-moz-background-clip: padding;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content.hover {
|
#content.hover {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
@ -589,6 +598,11 @@ nav ul li a:hover {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.responsive-icons svg{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 660px) {
|
@media screen and (max-width: 660px) {
|
||||||
.reader-mode .submenu {
|
.reader-mode .submenu {
|
||||||
display: none;
|
display: none;
|
||||||
@ -602,6 +616,26 @@ nav ul li a:hover {
|
|||||||
width: 94%;
|
width: 94%;
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paste-options-res a {
|
||||||
|
max-width: 80px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 460px) {
|
||||||
|
|
||||||
|
/* Responsive icons */
|
||||||
|
.responsive-icons {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsive-icons svg{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* reader mode */
|
/* reader mode */
|
||||||
|
|||||||
@ -49,11 +49,11 @@
|
|||||||
|
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<div class="input-group-prepend">
|
<div class="input-group-prepend">
|
||||||
<span class="input-group-text" id="basic-addon1"><strong><svg xmlns="http://www.w3.org/2000/svg" width="18"
|
<span class="input-group-text tip" id="basic-addon1">Tip <svg xmlns="http://www.w3.org/2000/svg" width="18"
|
||||||
height="18" viewBox="0 0 24 24">
|
height="18" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 18v-1.511h-.5v1.511h-1v-1.511h-2.484l.25-1.489h.539c.442 0 .695-.425.695-.854v-4.444c0-.416-.242-.702-.683-.702h-.817v-1.5h2.5v-1.5h1v1.5h.5v-1.5h1v1.526c2.158.073 3.012.891 3.257 1.812.29 1.09-.429 2.005-1.046 2.228.75.192 1.789.746 1.789 2.026 0 1.742-1.344 2.908-4 2.908v1.5h-1zm-.5-5.503v2.503c1.984 0 3.344-.188 3.344-1.258 0-1.148-1.469-1.245-3.344-1.245zm0-.997c1.105 0 2.789-.078 2.789-1.25 0-1-1.039-1.25-2.789-1.25v2.5z"
|
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 18v-1.511h-.5v1.511h-1v-1.511h-2.484l.25-1.489h.539c.442 0 .695-.425.695-.854v-4.444c0-.416-.242-.702-.683-.702h-.817v-1.5h2.5v-1.5h1v1.5h.5v-1.5h1v1.526c2.158.073 3.012.891 3.257 1.812.29 1.09-.429 2.005-1.046 2.228.75.192 1.789.746 1.789 2.026 0 1.742-1.344 2.908-4 2.908v1.5h-1zm-.5-5.503v2.503c1.984 0 3.344-.188 3.344-1.258 0-1.148-1.469-1.245-3.344-1.245zm0-.997c1.105 0 2.789-.078 2.789-1.25 0-1-1.039-1.25-2.789-1.25v2.5z"
|
||||||
fill="#eee" /></svg> tip</strong></span>
|
fill="#eee" /></svg></span>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control paste-btc-tip-address" name="paste-btc-tip-address"
|
<input type="text" class="form-control paste-btc-tip-address" name="paste-btc-tip-address"
|
||||||
placeholder="Put a BTC address to ask for a tip. Leave it empty to let us use our."
|
placeholder="Put a BTC address to ask for a tip. Leave it empty to let us use our."
|
||||||
|
|||||||
@ -25,17 +25,44 @@
|
|||||||
|
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
<button v-if="support.clipboard && currentPaste.type === 'text'" @click.prevent="copyToClipboard()"
|
<button v-if="support.clipboard && currentPaste.type === 'text'" @click.prevent="copyToClipboard()"
|
||||||
type="button" id="clip-button" class="btn btn-secondary">Copy to clipboard</button>
|
type="button" id="clip-button" class="btn btn-secondary responsive-icons">Copy to clipboard
|
||||||
<button type="button" id="email-link" class="btn btn-secondary" @click="handleSendByEmail($event)">Email
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-clipboard-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" fill="#eee" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||||
|
<path fill-rule="evenodd" fill="#eee" d="M9.5 1h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3zM8 7a.5.5 0 0 1 .5.5V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5A.5.5 0 0 1 8 7z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button type="button" id="email-link" class="btn btn-secondary responsive-icons" @click="handleSendByEmail($event)">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" fill="#eee" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
Email
|
||||||
this</button>
|
this</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="paste-option btn-group">
|
|
||||||
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone</button>
|
<span class="paste-option btn-group responsive-icons">
|
||||||
|
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-files" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" fill-rule="evenodd" d="M3 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3z"/>
|
||||||
|
<path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<a class="btn btn-secondary download-link" :href="currentPaste.downloadLink.url"
|
<a class="btn btn-secondary download-link" :href="currentPaste.downloadLink.url"
|
||||||
:download="currentPaste.downloadLink.name">Download</a>
|
:download="currentPaste.downloadLink.name">Download
|
||||||
<button class="btn btn-secondary">New Paste</button>
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-cloud-download-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button class="btn btn-secondary">New Paste
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-pencil-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
|
||||||
|
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -87,13 +114,27 @@
|
|||||||
<button class="btn btn-clone btn-secondary" @click="handleDeletePaste()">Delete Paste</button>
|
<button class="btn btn-clone btn-secondary" @click="handleDeletePaste()">Delete Paste</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="paste-option btn-group">
|
<span class="paste-option btn-group responsive-icons">
|
||||||
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone</button>
|
<button class="btn btn-clone btn-secondary" @click.prevent="handleClone()">Clone
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-files" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" fill-rule="evenodd" d="M3 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3z"/>
|
||||||
|
<path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<a class="btn btn-secondary download-link" :href="currentPaste.downloadLink.url"
|
<a class="btn btn-secondary download-link" :href="currentPaste.downloadLink.url"
|
||||||
:download="currentPaste.downloadLink.name"> Download</a>
|
:download="currentPaste.downloadLink.name">Download
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-cloud-download-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
<button class="btn btn-secondary">New Paste</button>
|
<button class="btn btn-secondary">New Paste
|
||||||
|
<svg width="24" height="24" viewBox="0 0 20 20" class="bi bi-pencil-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#eee" d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
|
||||||
|
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user