mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2024-12-24 16:50:48 +01:00
Updated button editor
A bit of optimization. Everything kinda scales to mobile now. Everything still looks terrible tho.
This commit is contained in:
Julian Prieber
parent
4eec538834
commit
08da6fa960
@ -1,372 +1,145 @@
|
|||||||
<!doctype html>
|
@extends('layouts.sidebar')
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>Studio ⚙️ {{ config('app.name') }}</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
|
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
|
|
||||||
|
|
||||||
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
|
|
||||||
<!-- begin dark mode detection -->
|
|
||||||
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
|
|
||||||
<script>
|
|
||||||
// code to set the `color_scheme` cookie
|
|
||||||
var $color_scheme = Cookies.get("color_scheme");
|
|
||||||
function get_color_scheme() {
|
|
||||||
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
|
|
||||||
}
|
|
||||||
function update_color_scheme() {
|
|
||||||
Cookies.set("color_scheme", get_color_scheme());
|
|
||||||
}
|
|
||||||
// read & compare cookie `color-scheme`
|
|
||||||
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
|
|
||||||
update_color_scheme();
|
|
||||||
// detect changes and change the cookie
|
|
||||||
if (window.matchMedia)
|
|
||||||
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
|
|
||||||
// reloads page to apply the dark mode cookie
|
|
||||||
window.onload = function() {
|
|
||||||
if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
|
|
||||||
window.location = window.location + '#dark';
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<?php // loads dark mode CSS if dark mode detected
|
|
||||||
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
|
|
||||||
@if ($color_scheme == 'dark')
|
|
||||||
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
|
|
||||||
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
|
|
||||||
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">
|
|
||||||
@else
|
|
||||||
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min.css') }}">
|
|
||||||
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard.css') }}">
|
|
||||||
@endif
|
|
||||||
<!-- end dark mode detection -->
|
|
||||||
|
|
||||||
@if(file_exists(base_path("littlelink/images/avatar.png" )))
|
|
||||||
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
|
|
||||||
@else
|
|
||||||
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
|
|
||||||
@endif
|
|
||||||
|
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
@push('scripts')
|
||||||
<!-- start button editor -->
|
<!-- start button editor -->
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
#inside{
|
|
||||||
background:white;
|
|
||||||
|
|
||||||
height:600px;
|
|
||||||
padding-top:50px;
|
|
||||||
padding-right:30px;
|
|
||||||
padding-left:30px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<title> MELANGE button generator </title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/button-gen.css">
|
|
||||||
<link rel="stylesheet" href="./styles/jquery.gradientPicker.css" type="text/css" />
|
|
||||||
<!--<link rel="stylesheet" href="./vendor/jqPlugins/colorpicker/css/colorpicker.css" type="text/css" /> -->
|
|
||||||
<link rel="stylesheet" href="./styles/colorpicker_1.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="./themes/blackboard.css">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="./js/rainbow.js"></script>
|
|
||||||
<script src="./js/css.js"></script>
|
|
||||||
|
|
||||||
<script src="./js/jquery-1.7.js"></script>
|
|
||||||
<script src="./js/jqueryUI-custom.js"></script>
|
|
||||||
<script src="./js/colorpicker.js"></script>
|
|
||||||
<script src="./js/jquery.gradientPicker.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$('#code').click(function() {
|
||||||
|
var css_text = 'padding-top : ' + button_css.padding_top + ';' + '\npadding-bottom :' + button_css.padding_bottom + ';' + '\npadding-left :' + button_css.padding_left + ';';
|
||||||
|
css_text = css_text + '\npadding-right :' + button_css.padding_right + ';' + '\ncolor :' + button_css.color + ';' + '\nbackground-image :' + button_css.background_image + ';';
|
||||||
|
css_text = css_text + '\nborder-radius :' + button_css.border_radius + ';' + '\nfont-size :' + button_css.font_size + ';' + '\nfont-family :' + button_css.font_family + ';';
|
||||||
|
css_text = css_text + '\nborder-color :' + button_css.border_color + ';' + '\nborder-style :' + button_css.border_style + ';' + '\nborder-width :' + button_css.border_width + ';';
|
||||||
|
$('#sCode').html(css_text);
|
||||||
|
Rainbow.color(div, function() {
|
||||||
|
document.getElementById('output').appendChild(div);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.modal-profile').fadeIn("slow");
|
||||||
|
$('.modal-lightsout').fadeTo("slow", .9);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('a.modal-close-profile, .modal-lightsout').click(function() {
|
||||||
|
$('.modal-profile').fadeOut("slow");
|
||||||
|
$('.modal-lightsout').fadeOut("slow");
|
||||||
|
});
|
||||||
|
|
||||||
|
var $button = $("#sample");
|
||||||
|
$("#ex1").gradientPicker({
|
||||||
|
change: function(points, styles) {
|
||||||
|
for (i = 1; i < styles.length; ++i) {
|
||||||
|
$button.css("background-image", styles[i]);
|
||||||
|
button_css.background_image = styles[i];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fillDirection: "45deg",
|
||||||
|
controlPoints: ["white 0%", "#888888 100%"]
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#color').ColorPicker({
|
||||||
|
color: '#000000',
|
||||||
|
onShow: function(colpkr) {
|
||||||
|
$(colpkr).fadeIn(500);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onHide: function(colpkr) {
|
||||||
|
$(colpkr).fadeOut(500);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onChange: function(hsb, hex, rgb) {
|
||||||
|
$('#color').css('background-color', '#' + hex);
|
||||||
|
document.getElementById("sample").style.color = '#' + hex;
|
||||||
|
button_css.color = '#' + hex;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#border-color').ColorPicker({
|
||||||
|
color: '#000000',
|
||||||
|
onShow: function(colpkr) {
|
||||||
|
$(colpkr).fadeIn(500);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onHide: function(colpkr) {
|
||||||
|
$(colpkr).fadeOut(500);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onChange: function(hsb, hex, rgb) {
|
||||||
|
$('#border-color').css('background-color', '#' + hex);
|
||||||
|
document.getElementById("sample").style.borderColor = '#' + hex;
|
||||||
|
button_css.border_color = '#' + hex;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("pdtb").onchange = $.proxy(function() {
|
||||||
|
var val = document.getElementById('pdtb').value;
|
||||||
|
$('#sample').css("padding-top", val + 'px');
|
||||||
|
$('#sample').css("padding-bottom", val + 'px');
|
||||||
|
button_css.padding_top = val + 'px';
|
||||||
|
button_css.padding_bottom = val + 'px';
|
||||||
|
}, document);
|
||||||
|
document.getElementById("pdlr").onchange = $.proxy(function() {
|
||||||
|
var val = document.getElementById('pdlr').value;
|
||||||
|
$('#sample').css("padding-left", val + 'px');
|
||||||
|
$('#sample').css("padding-right", val + 'px');
|
||||||
|
button_css.padding_left = val + 'px';
|
||||||
|
button_css.padding_right = val + 'px';
|
||||||
|
}, document);
|
||||||
|
document.getElementById("ftb").onchange = $.proxy(function() {
|
||||||
|
var val = document.getElementById('ftb').value;
|
||||||
|
$('#sample').css("font-size", val + 'px');
|
||||||
|
button_css.font_size = val + 'px';
|
||||||
|
}, document);
|
||||||
|
document.getElementById("br").onchange = $.proxy(function() {
|
||||||
|
var val = document.getElementById('br').value;
|
||||||
|
$('#sample').css("border-radius", val + 'px');
|
||||||
|
button_css.border_radius = val + 'px';
|
||||||
|
}, document);
|
||||||
|
document.getElementById("tsub").onclick = $.proxy(function() {
|
||||||
|
var val = document.getElementById('text').value;
|
||||||
|
$('#sample').text(val);
|
||||||
|
}, document);
|
||||||
|
document.getElementById("ffsub").onclick = $.proxy(function() {
|
||||||
|
var font1 = document.getElementById("font-face"); // or in jQuery use: select = this;
|
||||||
|
var FontFace = font1.options[font1.selectedIndex].text;
|
||||||
|
document.getElementById('sample').style.fontFamily = FontFace;
|
||||||
|
button_css.font_family = FontFace;
|
||||||
|
}, document);
|
||||||
|
document.getElementById("bssub").onclick = $.proxy(function() {
|
||||||
|
var bor = document.getElementById("border-style"); // or in jQuery use: select = this;
|
||||||
|
var borstyle = bor.options[bor.selectedIndex].text;
|
||||||
|
document.getElementById('sample').style.borderStyle = borstyle;
|
||||||
|
$('#sample').text(val);
|
||||||
|
button_css.border_style = borstyle;
|
||||||
|
}, document);
|
||||||
|
document.getElementById("bw").onchange = $.proxy(function() {
|
||||||
|
var val = document.getElementById('bw').value;
|
||||||
|
$('#sample').css("border-width", val + 'px');
|
||||||
|
button_css.border_width = val + 'px';
|
||||||
|
}, document);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Many of these values cannot be changed by the UI editor, so they are set to zero here. These values might get used in the future.
|
||||||
$('#code').click(function() {
|
|
||||||
|
|
||||||
var css_text = 'padding-top : '+button_css.padding_top+';'+'\npadding-bottom :'+button_css.padding_bottom+';'+'\npadding-left :'+button_css.padding_left+';';
|
|
||||||
css_text = css_text+'\npadding-right :'+button_css.padding_right+';'+'\ncolor :'+button_css.color+';'+'\nbackground-image :'+button_css.background_image+';';
|
|
||||||
css_text = css_text+'\nborder-radius :'+button_css.border_radius+';'+'\nfont-size :'+button_css.font_size+';'+'\nfont-family :'+button_css.font_family+';';
|
|
||||||
css_text = css_text+'\nborder-color :'+button_css.border_color+';'+'\nborder-style :'+button_css.border_style+';'+'\nborder-width :'+button_css.border_width+';';
|
|
||||||
|
|
||||||
$('#sCode').html(css_text);
|
|
||||||
|
|
||||||
Rainbow.color(div, function() {
|
|
||||||
document.getElementById('output').appendChild(div);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$('.modal-profile').fadeIn("slow");
|
|
||||||
$('.modal-lightsout').fadeTo("slow", .9);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('a.modal-close-profile, .modal-lightsout').click(function() {
|
|
||||||
$('.modal-profile').fadeOut("slow");
|
|
||||||
$('.modal-lightsout').fadeOut("slow");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var $button = $("#sample");
|
|
||||||
|
|
||||||
$("#ex1").gradientPicker({
|
|
||||||
change: function(points, styles) {
|
|
||||||
for (i = 1; i < styles.length; ++i) {
|
|
||||||
$button.css("background-image", styles[i]);
|
|
||||||
button_css.background_image = styles[i];
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fillDirection: "45deg",
|
|
||||||
controlPoints: ["white 0%", "#888888 100%"]
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$('#color').ColorPicker({
|
|
||||||
color: '#000000',
|
|
||||||
onShow: function (colpkr) {
|
|
||||||
$(colpkr).fadeIn(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onHide: function (colpkr) {
|
|
||||||
$(colpkr).fadeOut(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onChange: function (hsb, hex, rgb) {
|
|
||||||
$('#color').css('background-color', '#' + hex);
|
|
||||||
document.getElementById("sample").style.color='#'+hex;
|
|
||||||
button_css.color = '#'+hex;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#border-color').ColorPicker({
|
|
||||||
color: '#000000',
|
|
||||||
onShow: function (colpkr) {
|
|
||||||
$(colpkr).fadeIn(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onHide: function (colpkr) {
|
|
||||||
$(colpkr).fadeOut(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onChange: function (hsb, hex, rgb) {
|
|
||||||
$('#border-color').css('background-color', '#' + hex);
|
|
||||||
document.getElementById("sample").style.borderColor='#'+hex;
|
|
||||||
button_css.border_color = '#'+hex;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("pdtb").onchange = $.proxy(function(){
|
|
||||||
|
|
||||||
|
|
||||||
var val = document.getElementById('pdtb').value;
|
|
||||||
|
|
||||||
$('#sample').css("padding-top",val+'px');
|
|
||||||
$('#sample').css("padding-bottom",val+'px');
|
|
||||||
|
|
||||||
button_css.padding_top = val+'px';
|
|
||||||
button_css.padding_bottom = val+'px';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("pdlr").onchange = $.proxy(function(){
|
|
||||||
|
|
||||||
var val = document.getElementById('pdlr').value;
|
|
||||||
$('#sample').css("padding-left",val+'px');
|
|
||||||
$('#sample').css("padding-right",val+'px');
|
|
||||||
|
|
||||||
button_css.padding_left = val+'px';
|
|
||||||
button_css.padding_right = val+'px';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("ftb").onchange = $.proxy(function(){
|
|
||||||
|
|
||||||
var val = document.getElementById('ftb').value;
|
|
||||||
$('#sample').css("font-size",val+'px');
|
|
||||||
|
|
||||||
|
|
||||||
button_css.font_size = val+'px';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
document.getElementById("br").onchange = $.proxy(function(){
|
|
||||||
|
|
||||||
var val = document.getElementById('br').value;
|
|
||||||
$('#sample').css("border-radius",val+'px');
|
|
||||||
|
|
||||||
|
|
||||||
button_css.border_radius = val+'px';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("tsub").onclick = $.proxy(function(){
|
|
||||||
|
|
||||||
var val = document.getElementById('text').value;
|
|
||||||
$('#sample').text(val);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("ffsub").onclick = $.proxy(function(){
|
|
||||||
|
|
||||||
var font1 = document.getElementById("font-face"); // or in jQuery use: select = this;
|
|
||||||
var FontFace = font1.options[font1.selectedIndex].text;
|
|
||||||
document.getElementById('sample').style.fontFamily=FontFace;
|
|
||||||
button_css.font_family = FontFace;
|
|
||||||
// $('#sample').text(val);
|
|
||||||
// button_css.font_family = FontFace;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("bssub").onclick = $.proxy(function(){
|
|
||||||
|
|
||||||
var bor = document.getElementById("border-style"); // or in jQuery use: select = this;
|
|
||||||
var borstyle = bor.options[bor.selectedIndex].text;
|
|
||||||
document.getElementById('sample').style.borderStyle=borstyle;
|
|
||||||
|
|
||||||
$('#sample').text(val);
|
|
||||||
button_css.border_style = borstyle;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("bw").onchange = $.proxy(function(){
|
|
||||||
|
|
||||||
|
|
||||||
var val = document.getElementById('bw').value;
|
|
||||||
|
|
||||||
$('#sample').css("border-width",val+'px');
|
|
||||||
|
|
||||||
|
|
||||||
button_css.border_width = val+'px';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},document);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var button_css = {
|
var button_css = {
|
||||||
|
padding_top: '0px',
|
||||||
padding_top:'0px',
|
padding_bottom: '0px',
|
||||||
padding_bottom:'0px',
|
color: 'black',
|
||||||
color:'black',
|
background_image: 'none',
|
||||||
background_image : 'none',
|
padding_left: '0px',
|
||||||
padding_left: '0px',
|
padding_right: '0px',
|
||||||
padding_right : '0px',
|
border_radius: '8px',
|
||||||
border_radius : '8px',
|
font_family: 'Open Sans',
|
||||||
font_family : 'Open Sans',
|
font_size: '18px',
|
||||||
font_size : '18px',
|
border_color: 'black',
|
||||||
border_color : 'black',
|
border_style: 'none',
|
||||||
border_style : 'none',
|
border_width: '0px'
|
||||||
border_width : '0px'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- end button editor -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
#inside{
|
|
||||||
background:white;
|
|
||||||
|
|
||||||
height:600px;
|
|
||||||
padding-top:50px;
|
|
||||||
padding-right:30px;
|
|
||||||
padding-left:30px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<title> MELANGE button generator </title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/button-gen.css">
|
<link rel="stylesheet" type="text/css" href="./styles/button-gen.css">
|
||||||
<link rel="stylesheet" href="./styles/jquery.gradientPicker.css" type="text/css" />
|
<link rel="stylesheet" href="./styles/jquery.gradientPicker.css" type="text/css" />
|
||||||
<!--<link rel="stylesheet" href="./vendor/jqPlugins/colorpicker/css/colorpicker.css" type="text/css" /> -->
|
|
||||||
<link rel="stylesheet" href="./styles/colorpicker_1.css" type="text/css" />
|
<link rel="stylesheet" href="./styles/colorpicker_1.css" type="text/css" />
|
||||||
<link rel="stylesheet" type="text/css" href="./themes/blackboard.css">
|
<link rel="stylesheet" type="text/css" href="./themes/blackboard.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/style.css">
|
||||||
|
|
||||||
|
|
||||||
<script src="./js/rainbow.js"></script>
|
<script src="./js/rainbow.js"></script>
|
||||||
<script src="./js/css.js"></script>
|
<script src="./js/css.js"></script>
|
||||||
@ -375,122 +148,13 @@ padding-left:30px;
|
|||||||
<script src="./js/jqueryUI-custom.js"></script>
|
<script src="./js/jqueryUI-custom.js"></script>
|
||||||
<script src="./js/colorpicker.js"></script>
|
<script src="./js/colorpicker.js"></script>
|
||||||
<script src="./js/jquery.gradientPicker.js"></script>
|
<script src="./js/jquery.gradientPicker.js"></script>
|
||||||
|
<!-- end button editor -->
|
||||||
</head>
|
@endpush
|
||||||
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="https://kit.fontawesome.com/c4a5e06183.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/c4a5e06183.js" crossorigin="anonymous"></script>
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
|
|
||||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
|
|
||||||
|
|
||||||
|
<div>
|
||||||
<div style="position: relative; top: 50px; z-index: 2;"><a href="{{ url('/studio/links') }}" style="font-size: 40px;" > Back</a></div>
|
<h2 class="mb-4"><i class="bi bi-pen"> Button Editor</i>
|
||||||
|
<br><br><a href="{{ url('/studio/links') }}"><button style="font-size: 40px;" > ⬅ Back</button></a><br><br>
|
||||||
<a style="position:relative;float:right;z-index:10;right:25px;" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">Watch Page</a>
|
|
||||||
|
|
||||||
<div style="position: absolute;height: 80%; width: 80%; top: 15%; left: 10%;">
|
|
||||||
<h2 class="mb-4"><i class="bi bi-pen"> Button Editor</i><p style="color: tomato;">B E T A</p></h2><br><br>
|
|
||||||
|
|
||||||
<h2>Custom Button</h2><br>
|
<h2>Custom Button</h2><br>
|
||||||
|
|
||||||
@ -544,7 +208,7 @@ details > ul {
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<section id="preview">
|
<section id="preview">
|
||||||
<center><div id="sample" style="--delay: 1s; border-radius:8px !important; width: 400px; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . 'custom' }}.svg">Example</div></div></center>
|
<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . 'custom' }}.svg">Example</div></div></center>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -578,7 +242,7 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
|
|||||||
<button type="submit" class="mt-3 ml-3 btn btn-info">Reset to default</button>
|
<button type="submit" class="mt-3 ml-3 btn btn-info">Reset to default</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<br><br><div style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; width:65%; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
|
<br><br><div style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; min-width:300px; max-width:950px; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
|
||||||
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
||||||
<h2 align="center" style="color:white">Result:</h2>
|
<h2 align="center" style="color:white">Result:</h2>
|
||||||
@if($custom_css === "")
|
@if($custom_css === "")
|
||||||
@ -609,15 +273,15 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
|
|||||||
<details>
|
<details>
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
<p>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'.</p>
|
<p>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'.</p>
|
||||||
<p>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'</p>
|
<p>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'</p>
|
||||||
<p>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.<br>
|
<p>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.<br>
|
||||||
You can find a list of available colors <a href="https://www.w3schools.com/cssref/css_colors.asp" target="_blank">here</a>.</p>
|
You can find a list of available colors <a href="https://www.w3schools.com/cssref/css_colors.asp" target="_blank">here</a>.</p>
|
||||||
<br><table class="table table-bordered">
|
<br><table class="table table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">Style</th>
|
<th scope="col">Style</th>
|
||||||
<th scope="col">Prefix</th>
|
<th scope="col">Prefix</th>
|
||||||
<th scope="col" style="width: 1%">Icon</th>
|
<th scope="col" style="max-width: 1%">Icon</th>
|
||||||
<th scope="col">Short Code</th>
|
<th scope="col">Short Code</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -657,5 +321,8 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
|
|||||||
</form><br><br><br><br>
|
</form><br><br><br><br>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
98
studio/button-editor/css/style.css
vendored
98
studio/button-editor/css/style.css
vendored
@ -482,3 +482,101 @@ margin-top:-120px;
|
|||||||
margin-top: 15px;
|
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%;
|
||||||
|
}
|
||||||
4
studio/button-editor/styles/button-gen.css
vendored
4
studio/button-editor/styles/button-gen.css
vendored
@ -6,7 +6,7 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
background-color: #2c2d3a;
|
background-color: #2c2d3a;
|
||||||
margin-top:-10px;
|
margin-top:-10px;
|
||||||
width: 67%;
|
max-width: 1010px;
|
||||||
left:1%;
|
left:1%;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
#preview {
|
#preview {
|
||||||
|
|
||||||
width: 67%;
|
max-width: 1010px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
margin-top:50px;
|
margin-top:50px;
|
||||||
background: url('../images/grid2.png');
|
background: url('../images/grid2.png');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user