diff --git a/resources/views/studio/button-editor.blade.php b/resources/views/studio/button-editor.blade.php index b59284c..2f9f3f0 100644 --- a/resources/views/studio/button-editor.blade.php +++ b/resources/views/studio/button-editor.blade.php @@ -1,372 +1,145 @@ - - - - Studio ⚙️ {{ config('app.name') }} - - - - - - - - - - - - @if ($color_scheme == 'dark') - - - - @else - - - @endif - - - @if(file_exists(base_path("littlelink/images/avatar.png" ))) - - @else - - @endif - +@extends('layouts.sidebar') +@section('content') +@push('scripts') - - - - - - MELANGE button generator - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - MELANGE button generator - - - + @@ -375,122 +148,13 @@ padding-left:30px; - - - - - - - + +@endpush - - - -
      Back
- -Watch Page - -
-

Button Editor

B E T A



+
+

Button Editor +



Custom Button


@@ -544,7 +208,7 @@ details > ul {
-
Example
+
Example
@@ -578,7 +242,7 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e) -

+

Result:

@if($custom_css === "") @@ -609,15 +273,15 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)

Custom icons can be added to buttons via Font Awesome. You can use any icon from the list below, you can access this list by clicking the 'See all icons' button. Each icon on that list has a short code, which you can copy and enter in the custom icon field.

Every icon short code consists of a prefix and main part. If the short code is not a brand icon, you can simply enter the code in the format: fa-icon-name. The 'fa-...' formatting is important here. For example 'fa-code'.

-

If the short code is a brand icon, it is important to include a 'fab' before the short code part. Again, The 'fa-...' formatting still applies here. For example, 'fab fa-github'

-

To apply color to your icons, you can simply write out the color name or just write the HEX value before the icon, followed by a ';'. Here it is important to put the color before the icon short code and the color code must be ended with a semicolon.
+

If the short code is a brand icon, it is important to include a 'fab' before the short code part. Again, The 'fa-...' formatting still applies here. For example, 'fab fa-github'

+

To apply color to your icons, you can simply write out the color name or just write the HEX value before the icon, followed by a ';'. Here it is important to put the color before the icon short code and the color code must be ended with a semicolon.
You can find a list of available colors here.


- + @@ -657,5 +321,8 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)



- - \ No newline at end of file + + +@endsection + + diff --git a/studio/button-editor/css/style.css b/studio/button-editor/css/style.css index 914e74a..9652f74 100644 --- a/studio/button-editor/css/style.css +++ b/studio/button-editor/css/style.css @@ -482,3 +482,101 @@ margin-top:-120px; margin-top: 15px; } +.button-demo, +button-demo { + display: inline-block; + text-decoration: none; + height: 48px; + text-align: center; + vertical-align: middle; + font-size: 18px; + width: 300px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0.1px; + white-space: wrap; + border-radius: 8px; + cursor: pointer; + } + button-demo:hover, +.button-demo:focus { + color: #333; + border-color: #888; + outline: 0; } +.button-demo.button-primary { + color: #FFF; + filter: brightness(90%) } +.button-demo.button-primary:hover, +.button-demo.button-primary:focus { + color: #FFF; + filter: brightness(90%) } +.icon { + padding: 0px 8px 3.5px 0px; + vertical-align: middle; + width: 20px; + height: 20px; +} +.button.button-custom { + color: #FFFFFF; + background-color: #FFFFFF; + background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e) } +.button.button-custom:hover, +.button.button-custom:focus { + filter: brightness(90%) } + + details { + width: 64.7%; + background: #282828; + color: #ffffff; + cursor: pointer; + padding: 12px; + margin-bottom: 0; + box-sizing: border-box; + border-radius: 4px; + transition: border-radius 100ms cubic-bezier(0.66, 0.01, 0.35, 0.99); + overflow: hidden; + position:relative; + left:1%; +} + +summary { + padding: 1rem; + display: block; + background: #333; + padding-left: 1rem; + cursor: pointer; +} + +summary:before { + content: ''; + border-width: .4rem; + border-style: solid; + border-color: transparent transparent transparent #fff; + position: absolute; + top: 1.3rem; + left: 1rem; + transform: rotate(0); + transform-origin: .2rem 50%; + transition: .25s transform ease; +} + +details[open] > summary:before { + transform: rotate(90deg); +} + +details summary::-webkit-details-marker { + display:none; +} + +details > ul { + padding-bottom: 1rem; + margin-bottom: 0; +} + +.body-container { + position: absolute; + height: 80%; + width: 80%; + top: 10%; + left: 10%; +} \ No newline at end of file diff --git a/studio/button-editor/styles/button-gen.css b/studio/button-editor/styles/button-gen.css index 7e41ec2..75e5284 100644 --- a/studio/button-editor/styles/button-gen.css +++ b/studio/button-editor/styles/button-gen.css @@ -6,7 +6,7 @@ margin-top: 5px; background-color: #2c2d3a; margin-top:-10px; - width: 67%; + max-width: 1010px; left:1%; } @@ -27,7 +27,7 @@ #preview { - width: 67%; + max-width: 1010px; height: 300px; margin-top:50px; background: url('../images/grid2.png');
Style PrefixIconIcon Short Code