mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Remove useless Sass
Fix styling
This commit is contained in:
parent
ba34a1bb7f
commit
674b3968ae
5 changed files with 21 additions and 97 deletions
|
|
@ -57,9 +57,9 @@
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
bottom: 0
|
bottom: 0
|
||||||
left: -25rem
|
left: -27rem
|
||||||
|
|
||||||
width: 25rem
|
width: 27rem
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
|
|
@ -67,11 +67,10 @@
|
||||||
gap: 1rem
|
gap: 1rem
|
||||||
|
|
||||||
background-color: RGB($bg-200)
|
background-color: RGB($bg-200)
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
z-index: +2
|
z-index: +2
|
||||||
|
|
||||||
transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
|
transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1)
|
||||||
|
|
||||||
#dragIndicator
|
#dragIndicator
|
||||||
display: none
|
display: none
|
||||||
|
|
@ -197,7 +196,6 @@
|
||||||
|
|
||||||
.container
|
.container
|
||||||
left: 0
|
left: 0
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
@media (max-width: $breakpoint)
|
||||||
.upload-panel
|
.upload-panel
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
.image-fullscreen
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
height: 100dvh
|
|
||||||
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
display: none
|
|
||||||
opacity: 0 // hide
|
|
||||||
|
|
||||||
background-color: $bg-transparent
|
|
||||||
z-index: 100
|
|
||||||
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
img
|
|
||||||
margin: auto
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: auto
|
|
||||||
height: auto
|
|
||||||
max-width: 100%
|
|
||||||
max-height: 100%
|
|
||||||
|
|
||||||
object-fit: contain
|
|
||||||
object-position: center
|
|
||||||
|
|
||||||
transform: scale(0.8)
|
|
||||||
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
|
||||||
|
|
||||||
&.active
|
|
||||||
opacity: 1 // show
|
|
||||||
|
|
||||||
img
|
|
||||||
transform: scale(1)
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.info-container
|
.info-container
|
||||||
width: 25rem
|
width: 27rem
|
||||||
height: 100vh
|
height: 100vh
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||||
|
|
||||||
&.collapsed
|
&.collapsed
|
||||||
left: -25rem
|
left: -27rem
|
||||||
|
|
||||||
.info-tab
|
.info-tab
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
@ -127,11 +127,6 @@
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
text-align: center
|
|
||||||
line-height: 1
|
|
||||||
|
|
||||||
color: RGB($primary)
|
color: RGB($primary)
|
||||||
|
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
@ -150,43 +145,31 @@
|
||||||
border-collapse: collapse
|
border-collapse: collapse
|
||||||
|
|
||||||
tr
|
tr
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
td
|
td
|
||||||
padding-bottom: 0.5rem
|
padding-bottom: 0.5rem
|
||||||
|
|
||||||
|
max-width: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
td:first-child
|
td:first-child
|
||||||
padding-right: 0.5rem
|
padding-right: 0.5rem
|
||||||
|
|
||||||
width: 50%
|
width: 50%
|
||||||
max-width: 0
|
|
||||||
|
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 400
|
|
||||||
td:last-child
|
td:last-child
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 50%
|
width: 50%
|
||||||
max-width: 0
|
|
||||||
|
|
||||||
overflow: hidden
|
white-space: normal
|
||||||
text-overflow: ellipsis
|
word-break: break-word
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
td.empty-table
|
|
||||||
opacity: 0.3
|
|
||||||
|
|
||||||
tr:last-of-type td
|
tr:last-of-type td
|
||||||
padding-bottom: 0
|
padding-bottom: 0
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@import 'background'
|
@import 'background'
|
||||||
@import 'fullscreen'
|
|
||||||
@import 'info-tab'
|
@import 'info-tab'
|
||||||
@import 'image'
|
@import 'image'
|
||||||
|
|
||||||
|
|
@ -18,7 +17,7 @@
|
||||||
z-index: 3
|
z-index: 3
|
||||||
|
|
||||||
.image-block
|
.image-block
|
||||||
margin: 0 0 0 25rem
|
margin: 0 0 0 27rem
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
width: calc(100% - 25rem)
|
width: calc(100% - 25rem)
|
||||||
|
|
|
||||||
|
|
@ -85,10 +85,6 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="image-fullscreen" onclick="imageFullscreenOff()">
|
|
||||||
<img src="" alt="{{ image.alt }}"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="image-grid">
|
<div class="image-grid">
|
||||||
<div class="image-block">
|
<div class="image-block">
|
||||||
<div class="image-container">
|
<div class="image-container">
|
||||||
|
|
@ -145,22 +141,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-container">
|
<div class="info-container">
|
||||||
{% if image.post_description %}
|
|
||||||
<div class="info-tab">
|
|
||||||
<div class="info-header">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path></svg>
|
|
||||||
<h2>Description</h2>
|
|
||||||
<button class="collapse-indicator">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
|
||||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="info-table">
|
|
||||||
<p>{{ image.post_description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="info-tab">
|
<div class="info-tab">
|
||||||
<div class="info-header">
|
<div class="info-header">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
||||||
|
|
@ -181,6 +161,12 @@
|
||||||
<td>Upload date</td>
|
<td>Upload date</td>
|
||||||
<td><span class="time">{{ image.created_at }}</span></td>
|
<td><span class="time">{{ image.created_at }}</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{% if image.description %}
|
||||||
|
<tr>
|
||||||
|
<td>Description</td>
|
||||||
|
<td>{{ image.description }}</td>
|
||||||
|
</tr>
|
||||||
|
{% endif %}
|
||||||
</table>
|
</table>
|
||||||
<div class="img-colours">
|
<div class="img-colours">
|
||||||
{% for col in image.colours %}
|
{% for col in image.colours %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue