Шаблон:ModernButton: различия между версиями

Интерактивная навигация по истории

← Предыдущая правка

ВизуальныйВики-текст

@@ Строка 1: / Строка 1: @@
-<div class="modern-button noExternal brightness-overlay {{{class}}}" style="--background-color:{{{background-color|#3d3d49}}}>{{#if:{{{external|}}} | [{{{external|}}} <span class="StupidButton"></span>] | {{#if:{{{link|}}} | [[{{{link|}}}|<span class="StupidButton"></span>]] }} }}
+<div class="modern-button noExternal brightness-overlay {{{class}}}" style="
-<div class="modern-button__image">[[File:{{{img|mousegif.gif}}}|{{{pixel|64x64px}}}]]</div>
+ --background-color: {{{background-color|var(--theme-bg-color-300)}}};
+">{{#if:{{{external|}}} | [{{{external|}}} <span class="StupidButton"></span>] | {{#if:{{{link|}}} | [[{{{link|}}}|<span class="StupidButton"></span>]] }} }}
+<div class="modern-button__image">[[File:{{{img|MobMouse2.png}}}|{{{pixel|64x64px}}}]]</div>
 <div class="modern-button__content"><span class="modern-button__title">{{{text|Мышь-Пышь}}}</span>{{#if:{{{subtext|Самая прожорливая мышь на вики}}}|<em class="modern-button__subtext">{{{subtext|Самая прожорливая мышь на вики}}}</em>}}
 </div></div><!--
--->{{#css:
+--><templatestyles src="ModernButton/styles.css" />
-.modern-button {
-    position: relative;
-    display: flex;
-    width: 100%;
-    min-width: 45%;
-    min-height: 64px;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
-    transition: all 0.1s ease;
-}
-.modern-button__image {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 4px;
-    box-shadow: inset 20px 0px 20px 0px rgba(0, 0, 0, 0.05);
-}
-.modern-button__content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2px;
-    width: 100%;
-    padding: 8px 10px;
-    background: #00000037;
-}
-.modern-button__title {
-    font-size: 1.8em;
-    line-height: 1;
-    font-family: "Oswald";
-}
-.modern-button__subtext {
-    font-size: 0.8em;
-}
-}}