Dennis Brentjes
16ec547064
The ConfirmDelete page now uses parts of the photopage. The Confirmation dialog is its own template which is based on Alert. The database now updates the album thumb to the most recent addition to the album, when the album thumb asset is being deleted. When there are no pictures left in the album 0 will be set.
775 lines
14 KiB
CSS
775 lines
14 KiB
CSS
/**
|
|
* Styles for the fifth version of Aaronweb.net.
|
|
* (C) Aaron van Geffen 2013, 2014
|
|
* DO NOT COPY OR RE-USE WITHOUT EXPLICIT WRITTEN PERMISSION. THANK YOU.
|
|
*/
|
|
|
|
@import url(//fonts.googleapis.com/css?family=Press+Start+2P);
|
|
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
|
|
|
|
@font-face {
|
|
font-family: 'Invaders';
|
|
src: url('fonts/invaders.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
font: 13px/1.7 "Open Sans", sans-serif;
|
|
padding: 0 0 3em;
|
|
margin: 0;
|
|
background: #aaa 0 -50% fixed;
|
|
background-image: radial-gradient(ellipse at top, #ccc 0%, #aaa 55%, #333 100%);
|
|
}
|
|
|
|
#wrapper, header {
|
|
width: 95%;
|
|
min-width: 900px;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
overflow: auto;
|
|
}
|
|
|
|
a {
|
|
color: #963626;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #262626;
|
|
}
|
|
|
|
/* Logo
|
|
---------*/
|
|
h1#logo {
|
|
color: #fff;
|
|
float: left;
|
|
font: 200 50px 'Press Start 2P', sans-serif;
|
|
margin: 40px 0 50px 10px;
|
|
padding: 0;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
h1#logo:before {
|
|
color: #fff;
|
|
content: 'B';
|
|
float: left;
|
|
font: 75px 'Invaders';
|
|
margin: -4px 20px 0 0;
|
|
padding: 0;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
a h1#logo {
|
|
text-decoration: none;
|
|
}
|
|
a:hover h1#logo, a:hover h1#logo:before {
|
|
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
|
|
/* Navigation
|
|
---------------*/
|
|
ul#nav {
|
|
margin: 55px 10px 0 0;
|
|
padding: 0;
|
|
float: right;
|
|
list-style: none;
|
|
}
|
|
ul#nav li {
|
|
float: left;
|
|
}
|
|
ul#nav li a {
|
|
color: #fff;
|
|
display: block;
|
|
float: left;
|
|
font: 200 20px 'Press Start 2P', sans-serif;
|
|
margin: 0 0 0 32px;
|
|
padding: 10px 0;
|
|
text-decoration: none;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
}
|
|
ul#nav li a:hover {
|
|
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
|
|
/* Pagination
|
|
---------------*/
|
|
.pagination {
|
|
clear: both;
|
|
text-align: center;
|
|
}
|
|
.pagination ul {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.pagination ul > li {
|
|
display: inline;
|
|
}
|
|
.pagination ul > li > a, .pagination ul > li > span {
|
|
float: left;
|
|
font: 300 18px/2.2 "Open Sans", sans-serif;
|
|
padding: 6px 22px;
|
|
text-decoration: none;
|
|
background-color: #fff;
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
|
|
.pagination ul > li > a:hover, .pagination ul > li > a:focus,
|
|
.pagination ul > .active > a, .pagination ul > .active > span {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.pagination ul > .active > a, .pagination ul > .active > span {
|
|
cursor: default;
|
|
}
|
|
|
|
.pagination ul > .disabled > span, .pagination ul > .disabled > a,
|
|
.pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus {
|
|
color: #999;
|
|
cursor: default;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.pagination .page-padding {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Tiled grid
|
|
---------------*/
|
|
.tiled_header {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
color: #000;
|
|
clear: both;
|
|
float: left;
|
|
margin: 0 0 1.5% 0;
|
|
font: 400 18px/2.2 "Open Sans", sans-serif;
|
|
padding: 6px 22px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tiled_grid {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
|
|
.tiled_grid div.duo, .tiled_grid div.single {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
line-height: 0;
|
|
margin: 0 3.5% 3.5% 0;
|
|
overflow: none;
|
|
position: relative;
|
|
width: 31%;
|
|
}
|
|
.tiled_grid div img {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
.tiled_grid div h4 {
|
|
color: #000;
|
|
margin: 0;
|
|
font: 400 18px "Open Sans", sans-serif;
|
|
padding: 15px 5px;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.tiled_grid div a {
|
|
text-decoration: none;
|
|
}
|
|
.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover,
|
|
.tiled_grid div.duo:hover, .tiled_grid div.single:hover {
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Panoramas */
|
|
.tiled_grid div.panorama, .tiled_grid .tiled_row {
|
|
clear: both;
|
|
float: left;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Tiling: one landscape, two tiles */
|
|
.tiled_row .column_landscape {
|
|
float: left;
|
|
width: 65.5%;
|
|
margin: 0 3.5% 3.5% 0;
|
|
}
|
|
.tiled_row .column_landscape div {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.tiled_row .column_tiles_two {
|
|
float: left;
|
|
width: 31%;
|
|
}
|
|
.tiled_row .column_tiles_two div {
|
|
float: left;
|
|
width: 100%;
|
|
margin: 0 0 10% 0;
|
|
}
|
|
|
|
/* Tiling: big portrait, four tiles */
|
|
.tiled_row .column_portrait {
|
|
float: left;
|
|
width: 31%;
|
|
margin: 0 3.5% 3.5% 0;
|
|
}
|
|
.tiled_row .column_portrait div {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.tiled_row .column_tiles_four {
|
|
float: left;
|
|
width: 65.5%;
|
|
}
|
|
.tiled_row .column_tiles_four div {
|
|
float: left;
|
|
width: 47.45%;
|
|
margin: 0 5% 5% 0;
|
|
}
|
|
|
|
/* Tiling: two tiles */
|
|
.tiled_row .duo {
|
|
width: 48.25% !important;
|
|
}
|
|
|
|
/* Tiling: one tile */
|
|
.tiled_row .single {
|
|
width: 48.25% !important;
|
|
}
|
|
|
|
/* Tiling: remove horizontal margin at end of row. */
|
|
.tiled_row > div:nth-child(3n),
|
|
.tiled_row > .duo:nth-child(2) {
|
|
margin-right: 0 !important;
|
|
}
|
|
.tiled_row .column_tiles_four > div:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Tiling: switch places for odd rows */
|
|
.tiled_row:nth-child(odd) .column_landscape,
|
|
.tiled_row:nth-child(odd) .column_portrait {
|
|
float: right;
|
|
margin: 0 0 3.5% 3.5%;
|
|
}
|
|
.tiled_row:nth-child(odd) .column_tiles_four {
|
|
float: right;
|
|
}
|
|
.tiled_row:nth-child(odd) .column_tiles_two {
|
|
float: right;
|
|
}
|
|
|
|
|
|
/* Album title boxes
|
|
----------------------*/
|
|
.album_title_box {
|
|
margin-left: -46px;
|
|
width: 100%;
|
|
}
|
|
.album_title_box > a {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 2em;
|
|
line-height: 1;
|
|
padding: 8px 10px 14px;
|
|
}
|
|
.album_title_box > div {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
font: inherit;
|
|
padding: 6px 22px;
|
|
max-width: 90%;
|
|
margin: 0 0 1.5% 0;
|
|
}
|
|
.album_title_box h2 {
|
|
color: #262626;
|
|
font: 400 18px/2 "Open Sans", sans-serif !important;
|
|
margin: 0;
|
|
}
|
|
.album_title_box p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
|
|
/* Album button box
|
|
---------------------*/
|
|
.album_button_box {
|
|
float: right;
|
|
margin-bottom: 20px;
|
|
}
|
|
.album_button_box > a {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 1em;
|
|
padding: 8px 10px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
|
|
/* Generic boxed content
|
|
--------------------------*/
|
|
.boxed_content {
|
|
background: #fff;
|
|
padding: 25px;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.boxed_content h2 {
|
|
font: 300 24px "Open Sans", sans-serif;
|
|
margin: 0 0 0.2em;
|
|
}
|
|
|
|
|
|
/* Error pages
|
|
----------------*/
|
|
.errormsg p {
|
|
font-size: 1.1em;
|
|
margin: 1em 0 0;
|
|
}
|
|
.errorpage .widget {
|
|
margin-top: 3%;
|
|
}
|
|
.errorpage .widget_recentposts {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* Footer
|
|
-----------*/
|
|
footer {
|
|
clear: both;
|
|
color: #fff;
|
|
font: 400 12px/1.7 "Open Sans", sans-serif;
|
|
padding: 40px 0 0;
|
|
text-align: center;
|
|
overflow: auto;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
|
|
}
|
|
footer a {
|
|
color: #eee;
|
|
}
|
|
|
|
|
|
/* Input
|
|
----------*/
|
|
|
|
input, select, .btn {
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
color: #000;
|
|
font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
|
|
padding: 3px;
|
|
}
|
|
input[type=submit], button, .btn {
|
|
background: #ddd;
|
|
border-radius: 3px;
|
|
border: 1px solid #aaa;
|
|
display: inline-block;
|
|
font: inherit;
|
|
padding: 4px 5px;
|
|
}
|
|
input[type=submit]:hover, button:hover, .btn:hover {
|
|
background-color: #d0d0d0;
|
|
border-color: #a0a0a0;
|
|
}
|
|
textarea {
|
|
border: 1px solid #ccc;
|
|
font: 12px/1.4 'Monaco', 'Inconsolata', 'DejaVu Sans Mono', monospace;
|
|
padding: 0.75%;
|
|
width: 98.5%;
|
|
}
|
|
.btn-red {
|
|
background: #F3B076;
|
|
border-color: #C98245;
|
|
color: #000;
|
|
}
|
|
|
|
|
|
/* Login box styles
|
|
---------------------*/
|
|
#login {
|
|
background: #fff;
|
|
border: 1px solid #aaa;
|
|
border-radius: 10px;
|
|
box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
|
margin: 0 auto;
|
|
overflow: auto;
|
|
padding: 15px;
|
|
width: 300px;
|
|
}
|
|
#login dl *, #login button {
|
|
font-size: 15px;
|
|
line-height: 35px;
|
|
}
|
|
#login h3 {
|
|
font: 700 24px/36px "Open Sans", sans-serif;
|
|
margin: 0;
|
|
}
|
|
#login dd {
|
|
width: 96%;
|
|
margin: 0 0 10px;
|
|
}
|
|
#login input {
|
|
background: #eee;
|
|
border: 1px solid #aaa;
|
|
border-radius: 3px;
|
|
padding: 4px 5px;
|
|
width: 100%;
|
|
}
|
|
#login div.alert {
|
|
margin: 15px 0;
|
|
}
|
|
#login div.buttonstrip {
|
|
float: right;
|
|
padding: 0 0 5px;
|
|
}
|
|
#login button {
|
|
line-height: 20px;
|
|
}
|
|
|
|
|
|
/* Alert boxes -- styling borrowed from Bootstrap 2
|
|
-----------------------------------------------------*/
|
|
.alert {
|
|
padding: 8px 35px 8px 14px;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
background-color: #fcf8e3;
|
|
border: 1px solid #fbeed5;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.alert,
|
|
.alert h4 {
|
|
color: #c09853;
|
|
}
|
|
.alert h4 {
|
|
margin: 0;
|
|
}
|
|
.alert .close {
|
|
position: relative;
|
|
top: -2px;
|
|
right: -21px;
|
|
line-height: 20px;
|
|
}
|
|
.alert-success {
|
|
background-color: #dff0d8;
|
|
border-color: #d6e9c6;
|
|
color: #468847;
|
|
}
|
|
.alert-success h4 {
|
|
color: #468847;
|
|
}
|
|
.alert-danger,
|
|
.alert-error {
|
|
background-color: #f2dede;
|
|
border-color: #eed3d7;
|
|
color: #b94a48;
|
|
}
|
|
.alert-danger h4,
|
|
.alert-error h4 {
|
|
color: #b94a48;
|
|
}
|
|
.alert-info {
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
color: #3a87ad;
|
|
}
|
|
.alert-info h4 {
|
|
color: #3a87ad;
|
|
}
|
|
.alert-block {
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
}
|
|
.alert-block > p,
|
|
.alert-block > ul {
|
|
margin-bottom: 0;
|
|
}
|
|
.alert-block p + p {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
/* Styling for the photo pages
|
|
--------------------------------*/
|
|
#photo_frame {
|
|
text-align: center;
|
|
}
|
|
#photo_frame a {
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
cursor: -moz-zoom-in;
|
|
display: inline-block;
|
|
}
|
|
#photo_frame a img {
|
|
border: none;
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#previous_photo, #next_photo {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
color: #262626;
|
|
font-size: 3em;
|
|
line-height: 0.5;
|
|
padding: 32px 8px;
|
|
position: fixed;
|
|
text-decoration: none;
|
|
top: 45%;
|
|
}
|
|
#previous_photo em, #next_photo em {
|
|
position: absolute;
|
|
top: -1000em;
|
|
left: -1000em;
|
|
}
|
|
span#previous_photo, span#next_photo {
|
|
opacity: 0.25;
|
|
}
|
|
a#previous_photo:hover, a#next_photo:hover {
|
|
background: #eee;
|
|
color: #000;
|
|
}
|
|
#previous_photo {
|
|
left: 0;
|
|
}
|
|
#previous_photo:before {
|
|
content: '←';
|
|
}
|
|
#next_photo {
|
|
right: 0;
|
|
}
|
|
#next_photo:before {
|
|
content: '→';
|
|
}
|
|
|
|
#sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box h3 {
|
|
font: 600 20px/30px "Open Sans", sans-serif;
|
|
margin: 0 0 10px;
|
|
}
|
|
#sub_photo h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#sub_photo {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
padding: 2%;
|
|
margin: 25px 3.5% 25px 0;
|
|
width: 68.5%;
|
|
}
|
|
#sub_photo #tag_list {
|
|
list-style: none;
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
}
|
|
#sub_photo #tag_list li {
|
|
display: inline;
|
|
}
|
|
#sub_photo #tag_list li:after {
|
|
content: ', ';
|
|
}
|
|
#sub_photo #tag_list li:last-child:after {
|
|
content: '';
|
|
}
|
|
|
|
#photo_exif_box {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
margin: 25px 0 25px 0;
|
|
overflow: auto;
|
|
padding: 2%;
|
|
float: right;
|
|
width: 20%;
|
|
}
|
|
#photo_exif_box dt {
|
|
font-weight: bold;
|
|
float: left;
|
|
clear: left;
|
|
width: 120px;
|
|
}
|
|
#photo_exif_box dt:after {
|
|
content: ':';
|
|
}
|
|
#photo_exif_box dd {
|
|
float: left;
|
|
margin: 0;
|
|
}
|
|
|
|
#user_actions_box {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
margin: 25px 0 25px 0;
|
|
overflow: auto;
|
|
padding: 2%;
|
|
width: 20%;
|
|
}
|
|
|
|
/* Responsive: smartphone in portrait
|
|
---------------------------------------*/
|
|
@media only screen and (max-width: 895px) {
|
|
#wrapper, header {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
h1#logo {
|
|
font-size: 42px;
|
|
float: none;
|
|
margin: 1em 0 0.5em;
|
|
text-align: center;
|
|
}
|
|
h1#logo:before {
|
|
float: none;
|
|
font-size: 58px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
ul#nav {
|
|
float: none;
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
overflow: none;
|
|
}
|
|
|
|
ul#nav li, ul#nav li a {
|
|
display: inline-block;
|
|
float: none;
|
|
}
|
|
|
|
ul#nav li a {
|
|
float: none;
|
|
font-size: 16px;
|
|
margin-left: 6px;
|
|
padding: 12px 4px;
|
|
}
|
|
|
|
.album_title_box {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tiled_header {
|
|
font-size: 14px;
|
|
margin: 0 0 3.5% 0;
|
|
}
|
|
.tiled_grid div h4 {
|
|
font-size: 14px;
|
|
padding: 15px 5px;
|
|
}
|
|
|
|
.tiled_row > div, .tiled_row .single, .tiled_row .duo {
|
|
float: none !important;
|
|
width: 100% !important;
|
|
margin: 0 0 5% !important;
|
|
}
|
|
|
|
.tiled_row > div > div {
|
|
float: none !important;
|
|
width: 100% !important;
|
|
margin: 0 0 5% !important;
|
|
}
|
|
|
|
#previous_photo, #next_photo {
|
|
display: none;
|
|
}
|
|
|
|
#sub_photo, #photo_exif_box {
|
|
float: none;
|
|
margin: 30px 0;
|
|
padding: 10px;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
|
|
/* Upload form
|
|
----------------*/
|
|
#upload_preview_area {
|
|
margin: 10px 0;
|
|
}
|
|
#upload_preview_area > div {
|
|
display: inline-block;
|
|
margin: 0 5px 0 0;
|
|
line-height: 0;
|
|
position: relative;
|
|
}
|
|
#upload_preview_area .progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: rgba(200, 200, 200, 0.5);
|
|
height: 5px;
|
|
width: 100%;
|
|
}
|
|
#upload_preview_area .progress > div {
|
|
background: #2b2;
|
|
height: 5px;
|
|
width: 0%;
|
|
}
|
|
#upload_preview_area .progress .error {
|
|
background: #b22;
|
|
}
|
|
#photo_submit:disabled {
|
|
background: #ccc;
|
|
color: #777;
|
|
border-color: #aaa;
|
|
}
|
|
|
|
|
|
/* Spinner animation
|
|
----------------------*/
|
|
.spinner {
|
|
display: inline-block;
|
|
background-color: #74AFCF;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 0 5px;
|
|
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@-webkit-keyframes sk-rotateplane {
|
|
0% { -webkit-transform: perspective(120px) }
|
|
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
|
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
|
}
|
|
|
|
@keyframes sk-rotateplane {
|
|
0% {
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
|
} 50% {
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
|
} 100% {
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|