From 04ed3640eba994d5c788c3d8dc39b5d1f1455852 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Sun, 27 Dec 2020 20:11:57 +0100
Subject: [PATCH] Move art styles in CSS module
---
css/art/art.css | 112 ++++++++++++++++++++++++++++++++
src/gui/css/mainStyleSheet.css | 113 ---------------------------------
2 files changed, 112 insertions(+), 113 deletions(-)
create mode 100644 css/art/art.css
diff --git a/css/art/art.css b/css/art/art.css
new file mode 100644
index 00000000000..2610af5ed5c
--- /dev/null
+++ b/css/art/art.css
@@ -0,0 +1,112 @@
+/* small trick to hide broken images */
+img {
+ text-indent: -10000px;
+}
+
+.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ position: relative;
+ float: right;
+}
+
+.imageRef {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ position: relative;
+ background-color: rgba(80, 80, 80, 0.5);
+ margin: 2px;
+}
+
+.tinyImg {
+ height: 120px;
+ width: 120px;
+ float: left;
+}
+
+.smlImg {
+ height: 150px;
+ width: 150px;
+ float: left;
+}
+
+.smlImg > img, .smlImg > video {
+ height: auto;
+}
+
+.medImg {
+ height: 300px;
+ width: 300px;
+ float: right;
+}
+
+.medImg > img, .medImg > video {
+ height: auto;
+}
+
+.lrgRender {
+ height: 531px;
+ width: 531px;
+ margin-right: -50px;
+ margin-left: -50px;
+ float: right;
+ z-index: -1;
+}
+
+.lrgVector {
+ height: 600px;
+ width: 600px;
+ margin-right: -125px;
+ margin-left: -125px;
+ float: right;
+ z-index: -1;
+}
+
+.lrgRender > div.mask {
+ width: 150px;
+ height: 100%;
+ background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
+ z-index: 1;
+ /*position: absolute;*/
+}
+
+.lrgRender > img, .lrgRender > video {
+ margin-left: -150px;
+ height: 531px;
+ width: auto;
+}
+
+.lrgVector > div.mask {
+ width: 150px;
+ height: 100%;
+ background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
+ z-index: 1;
+}
+
+.lrgVector > img, .lrgVector > video {
+ margin-left: -150px;
+ height: 600px;
+ width: auto;
+}
+
+.lrgVector svg {
+ width: 336px;
+}
+
+object {
+ object-fit: scale-down;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+img.paperdoll {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin-left: 0;
+}
diff --git a/src/gui/css/mainStyleSheet.css b/src/gui/css/mainStyleSheet.css
index 90e70947d8e..4566fb76d61 100644
--- a/src/gui/css/mainStyleSheet.css
+++ b/src/gui/css/mainStyleSheet.css
@@ -1,116 +1,3 @@
-/* small trick to hide broken images */
-img {
- text-indent: -10000px;
-}
-
-.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: flex-start;
- position: relative;
- float: right;
-}
-
-.imageRef {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: flex-start;
- position: relative;
- background-color: rgba(80, 80, 80, 0.5);
- margin: 2px;
-}
-
-.tinyImg {
- height: 120px;
- width: 120px;
- float: left;
-}
-
-.smlImg {
- height: 150px;
- width: 150px;
- float: left;
-}
-
-.smlImg > img, .smlImg > video {
- height: auto;
-}
-
-.medImg {
- height: 300px;
- width: 300px;
- float: right;
-}
-
-.medImg > img, .medImg > video {
- height: auto;
-}
-
-.lrgRender {
- height: 531px;
- width: 531px;
- margin-right: -50px;
- margin-left: -50px;
- float: right;
- z-index: -1;
-}
-
-.lrgVector {
- height: 600px;
- width: 600px;
- margin-right: -125px;
- margin-left: -125px;
- float: right;
- z-index: -1;
-}
-
-.lrgRender > div.mask {
- width: 150px;
- height: 100%;
- background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
- z-index: 1;
- /*position: absolute;*/
-}
-
-.lrgRender > img, .lrgRender > video {
- margin-left: -150px;
- height: 531px;
- width: auto;
-}
-
-.lrgVector > div.mask {
- width: 150px;
- height: 100%;
- background: linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0));
- z-index: 1;
-}
-
-.lrgVector > img, .lrgVector > video {
- margin-left: -150px;
- height: 600px;
- width: auto;
-}
-
-.lrgVector svg {
- width: 336px;
-}
-
-object {
- object-fit: scale-down;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-img.paperdoll {
- position: absolute;
- top: 0;
- left: 0;
- margin-left: 0;
-}
-
/* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
/* a version is for this case: <span class="-.."><a>text</a></span> */
.link, .link a { color: var(--link-color) } /* link color */
--
GitLab