basic styling

2020-11-30 12:49:16 +01:00
parent b14b404534
commit 91b328f540
5 changed files with 323 additions and 5 deletions
@@ -0,0 +1,85 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+:root {
+	--app-background: #f4f4f4;
+	--background: #ffffff;
+	--foreground: #000000;
+	--font: #333333;
+	--grey: #666666;
+	--accent: #0098d4;
+	--error: #d6001c;
+	--link: #0098d4;
+	--borders: #f4f4f4;
+}
+
+html {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background-color: var(--app-background);
+	background-image: url('../images/background.svg');
+	background-repeat: no-repeat;
+	background-size: auto;
+	background-position: center -50px;
+    height: 100%;
+    width: 100%;
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--font);
+    padding: 120px 0 0 0;
+    margin: 0;
+}
+
+body,
+button,
+input,
+textarea {
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-style: normal;
+}
+
+.RootView {
+    margin: 0 auto;
+	max-width: 480px;
+	width: 100%;
+}
+
+.PreviewView {
+	background-color: var(--background);
+    border-radius: 16px;
+    box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
+    padding: 2rem;
+}
+
+.PreviewView .avatar {
+	border-radius: 100%;
+}
+
+.PreviewView .preview {
+	display: flex;
+}
+
+.PreviewView .profileInfo {
+	flex: 1;
+	margin-left: 12px;
+}
+
+.hidden {
+	display: none !important;
+}