@tnotesjs/ui 0.3.3 → 0.4.1

package/src/components/Mindmap/markdown.ts

@@ -1,6 +1,15 @@
 export interface MindmapFenceOptions {
   title?: string
   initialExpandLevel?: number
+  /** Pane height in px (`h=480` in the fence info). */
+  height?: number
+}
+
+export const MINDMAP_MIN_HEIGHT = 200
+export const MINDMAP_MAX_HEIGHT = 1600
+
+export function clampMindmapHeight(value: number): number {
+  return Math.round(Math.min(MINDMAP_MAX_HEIGHT, Math.max(MINDMAP_MIN_HEIGHT, value)))
 }
 
 function cleanHeadingText(value: string): string {
@@ -10,7 +19,7 @@ function cleanHeadingText(value: string): string {
     .trim()
 }
 
-/** Parse the canonical `mindmap [title] 2` fence metadata. */
+/** Parse the canonical `mindmap [title] 2 h=480` fence metadata. */
 export function parseMindmapFence(openLine: string): MindmapFenceOptions | null {
   const fenceBody = openLine.trim().replace(/^`+\s*/, '')
   const nameMatch = fenceBody.match(/^mindmap(?=\s|\[|$)/)
@@ -25,9 +34,15 @@ export function parseMindmapFence(openLine: string): MindmapFenceOptions | null
       `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim()
   }
 
-  if (rest && !/^\d+$/.test(rest)) return null
-  if (rest) {
-    options.initialExpandLevel = Math.max(1, Number(rest))
+  for (const token of rest.split(/\s+/).filter(Boolean)) {
+    const height = token.match(/^h=(\d+)$/)
+    if (height) {
+      options.height = clampMindmapHeight(Number(height[1]))
+    } else if (/^\d+$/.test(token) && options.initialExpandLevel === undefined) {
+      options.initialExpandLevel = Math.max(1, Number(token))
+    } else {
+      return null
+    }
   }
   return options
 }

package/src/components/WordList/RightClickMenu.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="show" class="rightClickMenu" :style="{ left: x + 'px', top: y + 'px' }">
+  <div
+    v-if="show"
+    class="rightClickMenu"
+    :style="{ left: x + 'px', top: y + 'px' }"
+    @mousedown.stop
+  >
     <div v-if="showPin" class="menuItem" @click="handlePin">📌 Pin</div>
     <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">📢 Pronounce（英）</div>
     <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">📢 Pronounce（美）</div>
@@ -61,12 +66,12 @@ const handleReset = () => {
 .rightClickMenu {
   position: fixed;
   z-index: 99999;
-  background: #2c2c2c;
-  border: 1px solid #444;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  background: var(--tn-c-bg-elv, var(--tn-c-bg));
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--tn-shadow-2);
   font-size: 13px;
-  color: #eee;
+  color: var(--tn-c-text);
   cursor: pointer;
   user-select: none;
 }
@@ -75,7 +80,7 @@ const handleReset = () => {
   padding: 8px 16px;
 
   &:hover {
-    background-color: #444;
+    background: var(--tn-c-hover);
   }
 }
 </style>

package/src/components/WordList/WordList.vue

@@ -48,6 +48,7 @@ const sortedWords = computed(() => {
   if (!props.needSort) return unique
   return unique.sort((a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0))
 })
+const islandWords = computed(() => encodeURIComponent(JSON.stringify(sortedWords.value)))
 const checkedStates = ref({})
 
 const updateCheckedState = (word, isChecked) => {
@@ -84,6 +85,7 @@ const cardX = ref(0)
 const cardY = ref(0)
 const cardContent = ref('')
 const wordCache = ref({})
+const wordMarkdown = ref({})
 
 // 加载失败的词汇（也就是词库中不存在的词汇）
 const failedWords = ref({})
@@ -112,6 +114,66 @@ let currentWordForContextMenu = null
 // 防抖计时器
 let hoverTimer = null
 
+function wordSlug(word) {
+  return encodeURIComponent(word.toLowerCase().replaceAll(/\s/g, '_'))
+}
+
+function wordGithubUrl(word) {
+  return `${props.wordsBaseUrl}${wordSlug(word)}.md`
+}
+
+async function ensureWord(word) {
+  if (wordCache.value[word]) return
+  const url = `${props.wordsRawBaseUrl}${wordSlug(word)}.md`
+  try {
+    const res = await fetch(url)
+    if (res.ok) {
+      const text = await res.text()
+      wordMarkdown.value[word] = text
+      wordCache.value[word] = marked.parse(text)
+    } else {
+      wordCache.value[word] = `<em>无法加载单词内容</em>`
+      failedWords.value[word] = true
+    }
+  } catch (err) {
+    console.error(err)
+    wordCache.value[word] = `<em>加载失败</em>`
+    failedWords.value[word] = true
+  }
+}
+
+const copiedCardId = ref(null)
+let copiedTimer = null
+
+async function copyCardMarkdown(card, event) {
+  event.stopPropagation()
+  const markdown = wordMarkdown.value[card.word]
+  if (!markdown) return
+  try {
+    await navigator.clipboard.writeText(markdown)
+  } catch {
+    const field = document.createElement('textarea')
+    field.value = markdown
+    field.setAttribute('readonly', '')
+    field.style.position = 'fixed'
+    field.style.left = '-9999px'
+    document.body.append(field)
+    field.select()
+    document.execCommand('copy')
+    field.remove()
+  }
+  copiedCardId.value = card.id
+  clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => {
+    copiedCardId.value = null
+  }, 1500)
+}
+
+function openCardOnGithub(card, event) {
+  event.stopPropagation()
+  window.open(wordGithubUrl(card.word), '_blank', 'noopener')
+}
+
 /**
  * 显示单词卡片
  */
@@ -128,29 +190,8 @@ const showWordCard = async (e, word) => {
       cardY.value = clientY + 10
       showCard.value = true
 
-      if (wordCache.value[word]) {
-        cardContent.value = wordCache.value[word]
-        resolve()
-        return
-      }
-
-      const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
-        word.toLowerCase().replaceAll(/\s/g, '_')
-      )}.md`
-      try {
-        const res = await fetch(url)
-        if (res.ok) {
-          let text = await res.text()
-          text = marked.parse(text)
-          wordCache.value[word] = text
-          cardContent.value = text
-        } else {
-          cardContent.value = `<em>无法加载单词内容</em>`
-        }
-      } catch (err) {
-        console.error(err)
-        cardContent.value = `<em>加载失败</em>`
-      }
+      await ensureWord(word)
+      cardContent.value = wordCache.value[word] || `<em>加载失败</em>`
       resolve()
     }, 300)
   })
@@ -208,28 +249,8 @@ const preloadWords = async () => {
   for (let i = 0; i < wordsToPreload.length; i++) {
     const word = wordsToPreload[i]
 
-    // 如果已经缓存过，跳过
     if (wordCache.value[word]) continue
-
-    const url = `${props.wordsRawBaseUrl}${encodeURIComponent(
-      word.toLowerCase().replaceAll(/\s/g, '_')
-    )}.md`
-    try {
-      const res = await fetch(url)
-      if (res.ok) {
-        let text = await res.text()
-        text = marked.parse(text)
-        wordCache.value[word] = text
-        console.log(`✅ 预加载完成: ${word}`)
-      } else {
-        wordCache.value[word] = `<em>无法加载单词内容</em>`
-        failedWords.value[word] = true
-      }
-    } catch (err) {
-      console.error(`❌ 加载失败: ${word}`, err)
-      wordCache.value[word] = `<em>加载失败</em>`
-      failedWords.value[word] = true
-    }
+    await ensureWord(word)
 
     // 可选：加个延迟避免并发请求过多
     await new Promise((resolve) => setTimeout(resolve, 200))
@@ -446,6 +467,7 @@ onMounted(() => {
  */
 onUnmounted(() => {
   clearTimeout(hoverTimer)
+  clearTimeout(copiedTimer)
   if (typeof document !== 'undefined') {
     document.removeEventListener('mousemove', onDragging)
     document.removeEventListener('mouseup', stopDrag)
@@ -455,7 +477,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="tn-word-list">
+  <div
+    class="tn-word-list"
+    data-tn-island="word-list"
+    :data-words="islandWords"
+    :data-need-sort="needSort ? 'true' : 'false'"
+  >
     <ol>
       <li
         v-for="(word, index) in sortedWords"
@@ -515,10 +542,60 @@ onUnmounted(() => {
         @mousedown="(e) => startDrag(card, e)"
         @click="bringToFront(card)"
       >
+        <div class="wordCardTools">
+          <button
+            type="button"
+            class="cardTool"
+            aria-label="在 GitHub 打开"
+            title="在 GitHub 打开"
+            @mousedown.stop
+            @click.stop="openCardOnGithub(card, $event)"
+          >
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="cardTool"
+            :aria-label="copiedCardId === card.id ? '已复制' : '复制 Markdown'"
+            :title="copiedCardId === card.id ? '已复制' : '复制 Markdown'"
+            @mousedown.stop
+            @click.stop="copyCardMarkdown(card, $event)"
+          >
+            <svg
+              v-if="copiedCardId !== card.id"
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                d="M9 9h10v10H9zM5 15V5h10"
+              />
+            </svg>
+            <svg v-else viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m5 12 5 5L20 7"
+              />
+            </svg>
+          </button>
+        </div>
         <div class="wordCardContentWrapper">
           <div class="wordCardContent" v-html="card.content"></div>
         </div>
-        <button class="closeBtn" @click.stop="removeCard(card.id)">✖</button>
+        <button class="closeBtn" @mousedown.stop @click.stop="removeCard(card.id)">✖</button>
         <div class="resizeHandle" @mousedown.stop="startResize(card, $event)"></div>
       </div>
     </template>
@@ -549,11 +626,41 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .tn-word-list {
+  padding: 12px 16px;
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
+
   // Checkbox 样式
   input[type='checkbox'] {
-    margin: 8px;
-    transform: scale(1.3);
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    box-sizing: border-box;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    margin: 0 8px;
+    border: 1px solid var(--tn-c-task-check-border);
+    border-radius: 4px;
+    background: var(--tn-c-task-check-bg);
     cursor: pointer;
+
+    &:checked {
+      border-color: var(--tn-c-task-check);
+      background: var(--tn-c-task-check);
+    }
+
+    &:checked::after {
+      content: '';
+      position: absolute;
+      left: 4.5px;
+      top: 1px;
+      width: 4px;
+      height: 9px;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
   }
 
   // 链接样式
@@ -577,8 +684,9 @@ onUnmounted(() => {
 
   // 单词列表样式
   ol {
-    list-style-type: decimal;
-    padding-left: 20px;
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
 
     li {
       display: flex;
@@ -599,13 +707,12 @@ onUnmounted(() => {
   }
 }
 
-// 单词卡片样式（🌑 暗色悬浮卡片）
 .wordCard {
   position: fixed;
   z-index: 9999;
-  background: #1e1e1e;
-  border: 1px solid #333;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  background: var(--tn-c-bg-elv, var(--tn-c-bg));
+  border: 1px solid var(--tn-c-divider);
+  box-shadow: var(--tn-shadow-2);
   padding: 12px 16px;
   max-width: 600px;
   min-width: 200px;
@@ -613,12 +720,11 @@ onUnmounted(() => {
   font-size: 14px;
   line-height: 1.4;
   border-radius: 8px;
-  color: #eee;
+  color: var(--tn-c-text);
   pointer-events: auto;
-  font-family: sans-serif;
+  font-family: var(--tn-font-sans, sans-serif);
   cursor: move;
 
-  // 关闭按钮
   .closeBtn {
     position: absolute;
     right: 5px;
@@ -627,19 +733,49 @@ onUnmounted(() => {
     border: none;
     font-size: 16px;
     cursor: pointer;
-    color: #ccc;
+    color: var(--tn-c-text-2);
 
     &:hover {
-      color: white;
+      color: var(--tn-c-text);
     }
   }
 }
 
 // 卡片内容包裹器
+.wordCardTools {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 2px;
+}
+
+.cardTool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--tn-c-text-2);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--tn-c-hover);
+    color: var(--tn-c-text);
+  }
+}
+
 .wordCardContentWrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
+  box-sizing: border-box;
+  padding-top: 22px;
 }
 
 // 卡片内容样式
@@ -657,13 +793,13 @@ onUnmounted(() => {
   bottom: 0;
   width: 12px;
   height: 12px;
-  background-color: #666;
+  background-color: var(--tn-c-text-2);
   cursor: nwse-resize;
   z-index: 2;
   border-radius: 50%;
 
   &:hover {
-    background-color: #aaa;
+    background-color: var(--tn-c-text);
   }
 }
 </style>

package/src/excalidraw/ExcalidrawSvg.vue

@@ -105,12 +105,13 @@ defineExpose({ state, errorReason })
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--tn-excalidraw-bg, transparent);
 }
 .tn-excalidraw-view__image {
   max-width: 100%;
   max-height: 100%;
+  border-radius: 4px;
   object-fit: contain;
 }
 .tn-excalidraw-view__placeholder {

package/src/index.ts

@@ -11,7 +11,13 @@ export {
   resolveWordListFeatures
 } from './components/WordList/wordListFeatures'
 export type { WordListFeatures } from './components/WordList/wordListFeatures'
-export { normalizeMindmapMarkdown, parseMindmapFence } from './components/Mindmap/markdown'
+export {
+  clampMindmapHeight,
+  MINDMAP_MAX_HEIGHT,
+  MINDMAP_MIN_HEIGHT,
+  normalizeMindmapMarkdown,
+  parseMindmapFence
+} from './components/Mindmap/markdown'
 export type { MindmapFenceOptions, NormalizeMindmapOptions } from './components/Mindmap/markdown'
 export type { NotesTableRow } from './components/NotesTable/types'
 export {

package/src/styles/code.css

@@ -159,7 +159,7 @@ html[data-theme='dark'] .tn-code-highlight span:not(.line) {
 }
 .tn-code-group {
   position: relative;
-  margin: 1rem 0;
+  margin: 0;
 }
 .tn-code-group__tabs {
   position: absolute;

package/src/styles/prose.css

@@ -47,15 +47,15 @@
   line-height: var(--tn-heading-6-line);
 }
 :is(.tn-prose, .vp-doc) :where(a) {
-  color: var(--tn-c-brand);
+  color: var(--tn-c-link);
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 400;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 :is(.tn-prose, .vp-doc) :where(a:hover) {
-  color: var(--tn-c-brand-hover);
-  text-decoration: underline;
+  color: var(--tn-c-link);
+  text-decoration: none;
 }
 :is(.tn-prose, .vp-doc) :where(ul, ol) {
   padding-left: 1.5rem;
@@ -106,11 +106,21 @@
   background-size: 12px 12px;
 }
 :is(.tn-prose, .vp-doc) :where(:not(pre) > code) {
-  color: var(--tn-c-brand);
-  background: var(--tn-c-default-soft);
+  color: inherit;
+  background: var(--tn-c-inline-code-bg);
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  font: 0.875em var(--tn-font-mono);
-  padding: 3px 6px;
+  margin: 1px 3px;
+  padding: 0 4px;
+  font-family: var(--tn-font-mono);
+  font-size: 1em;
+  font-weight: 400;
+}
+:is(.tn-prose, .vp-doc) :where(mark) {
+  color: inherit;
+  background: var(--tn-c-mark-bg);
+  border-radius: 2px;
+  padding: 0 2px;
 }
 :is(.tn-prose, .vp-doc) :where(blockquote) {
   margin: 16px 0;
@@ -155,6 +165,13 @@
   max-width: 100%;
   height: auto;
 }
+/* 笔记里的图片默认 4px 圆角。Desk 和静态站共用；按钮里的图标保持直角。 */
+:is(.tn-prose, .vp-doc, .live-editor) :where(img) {
+  border-radius: 4px;
+}
+:is(.tn-prose, .vp-doc, .live-editor) button img {
+  border-radius: 0;
+}
 :is(.tn-prose, .vp-doc) :where(figure.tn-image) {
   display: block;
   width: fit-content;
@@ -174,6 +191,14 @@
   width: 100%;
   height: auto;
 }
+
+/* 正文图片边界。Desk 可视化图和静态站图共用；Swiper 的边画在 .tn-swiper 上。 */
+:is(.tn-prose, .vp-doc) :where(figure.tn-image > img),
+.cm-lp-image-frame > img,
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block img) {
+  border: 1px solid var(--tn-c-media-edge);
+  border-radius: 4px;
+}
 :is(.tn-prose, .vp-doc) :where(figure.tn-image > figcaption),
 :is(.tn-prose, .vp-doc) :where(figcaption) {
   display: block;
@@ -185,7 +210,7 @@
 }
 
 /* Callouts — same soft-tint cards as Desk visual (no left accent bar). */
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block) {
   box-sizing: border-box;
   margin: 16px 0;
   padding: 12px 16px;
@@ -195,37 +220,37 @@
   font-size: inherit;
   line-height: 1.5;
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.tip) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.tip) {
   background-color: var(--tn-c-highlight);
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.info),
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.note),
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.details) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.info),
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.note),
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.details) {
   background-color: var(--tn-c-hover);
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.warning) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.warning) {
   background-color: var(--tn-c-warning-soft);
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block.danger) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block.danger) {
   background-color: var(--tn-c-danger-soft);
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block-title) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block-title) {
   margin: 0 0 2px;
   font-size: inherit;
   font-weight: 600;
   line-height: 1.5;
   color: var(--tn-c-text);
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block > p:not(.tn-custom-block-title)) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block > p:not(.tn-custom-block-title)) {
   margin: 0;
   padding: 4px 0;
   font-size: 1em;
   line-height: 1.5;
 }
-:is(.tn-prose, .vp-doc) :where(.tn-custom-block > :last-child) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(.tn-custom-block > :last-child) {
   margin-bottom: 0;
 }
-:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block > summary) {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -236,13 +261,14 @@
   font-weight: 600;
   line-height: 1.5;
 }
-:is(.tn-prose, .vp-doc) :where(details.tn-custom-block:not([open]) > summary) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block:not([open]) > summary) {
   margin-bottom: 0;
 }
-:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::-webkit-details-marker) {
+:is(.tn-prose, .vp-doc, .cm-lp-card)
+  :where(details.tn-custom-block > summary::-webkit-details-marker) {
   display: none;
 }
-:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::before) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block > summary::before) {
   content: '';
   flex: none;
   box-sizing: border-box;
@@ -256,7 +282,7 @@
   transform-origin: 50% 50%;
   transition: transform 120ms ease;
 }
-:is(.tn-prose, .vp-doc) :where(details.tn-custom-block[open] > summary::before) {
+:is(.tn-prose, .vp-doc, .cm-lp-card) :where(details.tn-custom-block[open] > summary::before) {
   margin-top: -0.05em;
   transform: rotate(45deg);
 }