Embeautification

src/app/[...file]/components/copy.css.ts

@@ -3,19 +3,83 @@ import { style } from '@vanilla-extract/css';
 import * as colors from '../../colors.css';
 
 export const copy = style({
-	display:    'block',
-	margin:     0,
-	border:     'none',
-	padding:    '0',
-	outline:    'inherit',
-	fontFamily: 'monospace',
-	fontSize:   '1.1em',
-	lineHeight: '2em',
-	background: 'none',
-	color:      'inherit',
-	transition: 'color 0.15s',
-	whiteSpace: 'pre-wrap',
+	display: 'flex',
+	alignItems: 'center',
+	width: 'max-content',
+	backgroundColor: colors.background,
+});
+
+export const copy_button = style({
+	display:         'flex',
+	margin:          0,
+	border:          'none',
+	padding:         0,
+	outline:         'inherit',
+	fontFamily:      'monospace',
+	fontSize:        '1.1em',
+	lineHeight:      '2em',
+	color:           'inherit',
+	whiteSpace:      'pre-wrap',
+	transition:      'background-color 0.35s',
+	background:      'none',
+	width:           'max-content',
+	height:          '100%',
 	':hover': {
-		color: colors.accent,
+		backgroundColor: colors.background2,
 	},
 });
+
+const copy_image = style({
+	boxSizing:  'border-box',
+	border:     `1px solid ${colors.background2}`,
+	padding:    '0.75em',
+	width:      'auto',
+	height:     '100%',
+	selectors: {
+		[`${copy}:hover &`]: {
+		},
+	},
+});
+
+export const copy_image_dark = style([copy_image, {
+	display: 'block',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'none',
+		},
+	},
+}]);
+
+export const copy_image_light = style([copy_image, {
+	display: 'none',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'block',
+		},
+	},
+}]);
+
+export const copied_image_dark = style([copy_image, {
+	display: 'block',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'none',
+		},
+	},
+}]);
+
+export const copied_image_light = style([copy_image, {
+	display: 'none',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'block',
+		},
+	},
+}]);
+
+
+export const copy_text = style({
+	margin: 0,
+	marginLeft: '1em',
+	width:  'max-content',
+});