blob: c00f63919bd0c54c18a230f95bf068014b25cd8a [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {css} from 'lit-element';
6
7export const SHARED_STYLES = css`
8 :host {
9 --mr-edit-field-padding: 0.125em 4px;
10 --mr-edit-field-width: 90%;
11 --mr-input-grid-gap: 6px;
12 font-family: var(--chops-font-family);
13 color: var(--chops-primary-font-color);
14 font-size: var(--chops-main-font-size);
15 }
16 /** Converts a <button> to look like an <a> tag. */
17 .linkify {
18 display: inline;
19 padding: 0;
20 margin: 0;
21 border: 0;
22 background: 0;
23 cursor: pointer;
24 }
25 h1, h2, h3, h4 {
26 background: none;
27 }
28 a, chops-button, a.button, .button, .linkify {
29 color: var(--chops-link-color);
30 text-decoration: none;
31 font-weight: var(--chops-link-font-weight);
32 font-family: var(--chops-font-family);
33 }
34 a:hover, .linkify:hover {
35 text-decoration: underline;
36 }
37 a.button, .button {
38 /* Links that look like buttons. */
39 display: inline-flex;
40 align-items: center;
41 justify-content: center;
42 text-decoration: none;
43 transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
44 }
45 a.button:hover, .button:hover {
46 filter: brightness(95%);
47 }
48 chops-button, a.button, .button {
49 box-sizing: border-box;
50 font-size: var(--chops-main-font-size);
51 background: var(--chops-white);
52 border-radius: 6px;
53 --chops-button-padding: 0.25em 8px;
54 margin: 0;
55 margin-left: auto;
56 }
57 a.button, .button {
58 padding: var(--chops-button-padding);
59 }
60 chops-button i.material-icons, a.button i.material-icons, .button i.material-icons {
61 display: block;
62 margin-right: 4px;
63 }
64 chops-button.emphasized, a.button.emphasized, .button.emphasized {
65 background: var(--chops-primary-button-bg);
66 color: var(--chops-primary-button-color);
67 text-shadow: 1px 1px 3px hsla(0, 0%, 0%, 0.25);
68 }
69 textarea, select, input {
70 box-sizing: border-box;
71 font-size: var(--chops-main-font-size);
72 }
73 /* Note: decoupling heading levels from styles is useful for
74 * accessibility because styles will not always line up with semantically
75 * appropriate heading levels.
76 */
77 .medium-heading {
78 font-size: var(--chops-large-font-size);
79 font-weight: normal;
80 line-height: 1;
81 padding: 0.25em 0;
82 color: var(--chops-link-color);
83 margin: 0;
84 margin-top: 0.25em;
85 border-bottom: var(--chops-normal-border);
86 }
87 .medium-heading chops-button {
88 line-height: 1.6;
89 }
90 .input-grid {
91 padding: 0.5em 0;
92 display: grid;
93 max-width: 100%;
94 grid-gap: var(--mr-input-grid-gap);
95 grid-template-columns: minmax(120px, max-content) 1fr;
96 align-items: flex-start;
97 }
98 .input-grid label {
99 font-weight: bold;
100 text-align: right;
101 word-wrap: break-word;
102 }
103 @media (max-width: 600px) {
104 .input-grid label {
105 margin-top: var(--mr-input-grid-gap);
106 text-align: left;
107 }
108 .input-grid {
109 grid-gap: var(--mr-input-grid-gap);
110 grid-template-columns: 100%;
111 }
112 }
113`;
114
115/**
116 * Markdown specific styling:
117 * * render link destination on hover as a tooltip
118 * @type {CSSResult}
119 */
120export const MD_STYLES = css`
121 .markdown .annotated-link {
122 position: relative;
123 }
124 .markdown .annotated-link:hover .tooltip {
125 display: block
126 }
127 .markdown .tooltip {
128 display: none;
129 position: absolute;
130 width: auto;
131 white-space: nowrap;
132 box-shadow: rgb(170 170 170) 1px 1px 5px;
133 box-shadow: 0 4px 8px 3px rgb(0 0 0 / 10%);
134 border-radius: 8px;
135 background-color: rgb(255, 255, 255);
136 top: -32px;
137 left: 0px;
138 border: 1px solid #dadce0;
139 padding: 6px 10px;
140 }
141 .markdown .material-icons {
142 font-size: 18px;
143 vertical-align: middle;
144 }
145 .markdown .material-icons.link {
146 color: var(--chops-link-color);
147 }
148 .markdown .material-icons.link_off {
149 color: var(--chops-field-error-color);
150 }
151 .markdown table {
152 -webkit-font-smoothing: antialiased;
153 box-sizing: inherit;
154 border-collapse: collapse;
155 margin: 8px 0 8px 0;
156 box-shadow: 0 2px 2px 0 hsla(315, 3%, 26%, 0.30);
157 border: 1px solid var(--chops-gray-300);
158 line-height: 1.4;
159 }
160 .markdown th {
161 border-bottom: 1px solid var(--chops-gray-300);
162 border-right: 1px solid var(--chops-gray-300);
163 padding: 1px;
164 text-align: left;
165 font-weight: 500;
166 color: var(--chops-gray-900);
167 background-color: var(--chops-gray-50);
168 }
169 .markdown td {
170 border-bottom: 1px solid var(--chops-gray-300);
171 border-right: 1px solid var(--chops-gray-300);
172 padding: 1px;
173 }
174 .markdown pre {
175 -webkit-font-smoothing: antialiased;
176 line-height: 1.6;
177 box-sizing: inherit;
178 background-color: hsla(0, 0%, 0%, 0.05);
179 border: 2px solid hsla(0, 0%, 0%, 0.10);
180 border-radius: 2px;
181 overflow-x: auto;
182 padding: 4px;
183 }
184`;
185
186export const MD_PREVIEW_STYLES = css`
187 ${MD_STYLES}
188 .markdown-preview {
189 padding: 0.25em 1em;
190 color: var(--chops-gray-800);
191 background-color: var(--chops-gray-200);
192 border-radius: 10px;
193 margin: 0px 0px 10px;
194 overflow: auto;
195 }
196 .preview-height-description {
197 max-height: 40vh;
198 }
199 .preview-height-comment {
200 min-height: 5vh;
201 max-height: 15vh;
202 }
203`;