diff options
Diffstat (limited to 'view/theme')
| -rw-r--r-- | view/theme/redbasic/css/blockmode.css | 15 | ||||
| -rw-r--r-- | view/theme/redbasic/css/mod_page.css | 24 | ||||
| -rw-r--r-- | view/theme/redbasic/css/sloppy_photos.css | 58 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 22 | ||||
| -rw-r--r-- | view/theme/redbasic/php/config.php | 73 | ||||
| -rw-r--r-- | view/theme/redbasic/php/style.php | 126 | ||||
| -rw-r--r-- | view/theme/redbasic/php/theme_init.php | 2 | ||||
| -rw-r--r-- | view/theme/redbasic/tpl/theme_settings.tpl | 20 |
8 files changed, 131 insertions, 209 deletions
diff --git a/view/theme/redbasic/css/blockmode.css b/view/theme/redbasic/css/blockmode.css deleted file mode 100644 index cc1db209e..000000000 --- a/view/theme/redbasic/css/blockmode.css +++ /dev/null @@ -1,15 +0,0 @@ - -.wall-item-content.conv-list-mode { - max-width: 280px; - height:200px; - min-height: 200px; - overflow: hidden; -} - -.thread-wrapper.toplevel_item.conv-list-mode { - width: 300px; - height: 300px; - float: left; - margin-left: 5px; - margin-bottom: 35px; -} diff --git a/view/theme/redbasic/css/mod_page.css b/view/theme/redbasic/css/mod_page.css deleted file mode 100644 index 37f597fac..000000000 --- a/view/theme/redbasic/css/mod_page.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -section { -left: 0px; -width: 800px; -margin-left: auto; -margin-right: auto; -} -body {background-color: #d00 !important;} - -.page-content-wrapper {background: #fff; - color: #000; - border-radius: 20px; - box-shadow: 5px 5px 5px #111; -} - -h3.page-title { -padding-top: 30px; - color: #033} -.page-body {padding: 40px;} - -.page-body strong {color: #033;} - -.nav-links {margin-top: 5px;} -*/
\ No newline at end of file diff --git a/view/theme/redbasic/css/sloppy_photos.css b/view/theme/redbasic/css/sloppy_photos.css deleted file mode 100644 index 78aedc9cc..000000000 --- a/view/theme/redbasic/css/sloppy_photos.css +++ /dev/null @@ -1,58 +0,0 @@ - -.rotleft1 { --webkit-transform: rotate(-1deg); --moz-transform: rotate(-1deg); --ms-transform: rotate(-1deg); --o-transform: rotate(-1deg); -} - -.rotleft2 { --webkit-transform: rotate(-2deg); --moz-transform: rotate(-2deg); --ms-transform: rotate(-2deg); --o-transform: rotate(-2deg); -} - -.rotleft3 { --webkit-transform: rotate(-3deg); --moz-transform: rotate(-3deg); --ms-transform: rotate(-3deg); --o-transform: rotate(-3deg); -} - -.rotleft4 { --webkit-transform: rotate(-4deg); --moz-transform: rotate(-4deg); --ms-transform: rotate(-4deg); --o-transform: rotate(-4deg); -} - - -.rotright1 { --webkit-transform: rotate(1deg); --moz-transform: rotate(1deg); --ms-transform: rotate(1deg); --o-transform: rotate(1deg); -} - -.rotright2 { --webkit-transform: rotate(2deg); --moz-transform: rotate(2deg); --ms-transform: rotate(2deg); --o-transform: rotate(2deg); -} - -.rotright3 { --webkit-transform: rotate(3deg); --moz-transform: rotate(3deg); --ms-transform: rotate(3deg); --o-transform: rotate(3deg); -} - -.rotright4 { --webkit-transform: rotate(4deg); --moz-transform: rotate(4deg); --ms-transform: rotate(4deg); --o-transform: rotate(4deg); -} - diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 451303338..8d91702a3 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -7,21 +7,13 @@ /* bootstrap variables */ -:root { - --bs-border-radius: $radius; - --bs-highlight-bg: var(--bs-warning); -} [data-bs-theme=light] { - --bs-link-color: $link_color; - --bs-link-hover-color: $link_hover_color; --hz-body-bg: $bgcolor; --hz-body-bg-image: url('$background_image'); } [data-bs-theme=dark] { - --bs-link-color: $link_color_dark; - --bs-link-hover-color: $link_hover_color_dark; --hz-body-bg: $bgcolor_dark; --hz-body-bg-image: url('$background_image_dark'); } @@ -34,10 +26,6 @@ background-color: $nav_bg_dark !important; } -.btn { - --bs-btn-border-radius: $radius; -} - /* generals */ @@ -459,7 +447,7 @@ footer { .photo, .contact-block-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } #side-bar-photos-albums { @@ -472,7 +460,7 @@ footer { .profile-match-photo img, .directory-photo-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } .profile-match-photo img { @@ -1354,10 +1342,6 @@ main.fullscreen .section-content-wrapper-np { /* bootstrap overrides */ -.form-control { - border-radius: $radius; -} - blockquote { font-size: 1rem; font-style: italic; @@ -1674,3 +1658,5 @@ dl.bb-dl > dd > li { transform: translateX(80vw); } } + + diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index 344f3ff68..213e441eb 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -2,6 +2,9 @@ namespace Zotlabs\Theme; +use ScssPhp\ScssPhp\Compiler; +use ScssPhp\ScssPhp\OutputStyle; + class RedbasicConfig { function get_schemas() { @@ -37,15 +40,12 @@ class RedbasicConfig { } $arr = array(); + $arr['primary_color'] = get_pconfig(local_channel(),'redbasic', 'primary_color'); $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode'); $arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode'); $arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' ); $arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' ); $arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' ); - $arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' ); - $arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' ); - $arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' ); - $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' ); $arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' ); $arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' ); $arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' ); @@ -65,15 +65,62 @@ class RedbasicConfig { } if (isset($_POST['redbasic-settings-submit'])) { + if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) { + + $primary_color = ''; + $radius = floatval($_POST['redbasic_radius']); + + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) { + $primary_color = $_POST['redbasic_primary_color']; + } + + if ($primary_color || $radius) { + + try { + $cache_dir = 'store/[data]/[scss]'; + if(!is_dir($cache_dir)) { + os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true); + } + + $options = [ + 'cacheDir' => $cache_dir, + 'forceRefresh' => false + ]; + + $compiler = new Compiler($options); + $compiler->setImportPaths('vendor/twbs/bootstrap/scss'); + $compiler->setOutputStyle(OutputStyle::COMPRESSED); + + // Set Variables + if ($primary_color) { + $variables['$primary'] = $primary_color; + } + + if ($radius) { + $variables['$border-radius'] = $radius . 'rem'; + } + + // Replace Bootstrap Variables with Customizer Variables + $compiler->replaceVariables($variables); + + $bs = $compiler->compileString('@import "bootstrap.scss";'); + + set_pconfig(local_channel(), 'redbasic', 'bootstrap', $bs->getCss()); + } catch (\Exception $e) { + logger('scssphp: Unable to compile content'); + } + } + else { + set_pconfig(local_channel(), 'redbasic', 'bootstrap', ''); + } + } + + set_pconfig(local_channel(), 'redbasic', 'primary_color', $_POST['redbasic_primary_color']); set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']); set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']); set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']); - set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']); - set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']); - set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']); - set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']); set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']); set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']); set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']); @@ -84,6 +131,9 @@ class RedbasicConfig { set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']); set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']); set_pconfig(local_channel(), 'redbasic', 'advanced_theming', $_POST['redbasic_advanced_theming']); + + // This is used to refresh the cache + set_pconfig(local_channel(), 'system', 'style_update', time()); } } @@ -103,21 +153,18 @@ class RedbasicConfig { '$dark' => t('Dark style'), '$light' => t('Light style'), '$common' => t('Common settings'), + '$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color']), '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))), '$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), '$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), - '$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']), - '$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']), - '$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']), - '$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']), '$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']), '$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']), '$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']), '$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']), '$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')), - '$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')), + '$radius' => array('redbasic_radius', t('Set radius of corners in rem'), $arr['radius']), '$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')), '$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']), '$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']), diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php index 4d5bd42be..056cea1cd 100644 --- a/view/theme/redbasic/php/style.php +++ b/view/theme/redbasic/php/style.php @@ -1,32 +1,53 @@ <?php -if(! App::$install) { +if(!App::$install) { // Get the UID of the channel owner $uid = get_theme_uid(); if($uid) { - load_pconfig($uid,'redbasic'); + // Load the owners pconfig + load_pconfig($uid, 'redbasic'); + + $custom_bs = get_pconfig($uid, 'redbasic', 'bootstrap'); + $nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg'); + $nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark'); + $narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar'); + $link_color = get_pconfig($uid, 'redbasic', 'link_color'); + $link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark'); + $link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color'); + $link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark'); + $bgcolor = get_pconfig($uid, 'redbasic', 'background_color'); + $bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark'); + $schema = get_pconfig($uid,'redbasic','schema'); + $background_image = get_pconfig($uid, 'redbasic', 'background_image'); + $background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark'); + $font_size = get_pconfig($uid, 'redbasic', 'font_size'); + $radius = get_pconfig($uid, 'redbasic', 'radius'); + $converse_width = get_pconfig($uid,'redbasic','converse_width'); + $top_photo = get_pconfig($uid,'redbasic','top_photo'); + $reply_photo = get_pconfig($uid,'redbasic','reply_photo'); } +} + +$site_bs_path = 'vendor/twbs/bootstrap/dist/css/bootstrap.min.css'; + +if (file_exists('view/theme/redbasic/css/bootstrap-custom.css')) { + // Compiled custom site bootstrap from sass + // Run this script from the document root for an example: + // php vendor/bin/pscss view/theme/redbasic/css/sample.scss view/theme/redbasic/css/bootstrap-custom.css + + $site_bs_path = 'view/theme/redbasic/css/bootstrap-custom.css'; +} + +$bs = $custom_bs ?: file_get_contents($site_bs_path); - // Load the owners pconfig - $nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg'); - $nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark'); - $narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar'); - $link_color = get_pconfig($uid, 'redbasic', 'link_color'); - $link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark'); - $link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color'); - $link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark'); - $bgcolor = get_pconfig($uid, 'redbasic', 'background_color'); - $bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark'); - $schema = get_pconfig($uid,'redbasic','schema'); - $background_image = get_pconfig($uid, 'redbasic', 'background_image'); - $background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark'); - $font_size = get_pconfig($uid, 'redbasic', 'font_size'); - $radius = get_pconfig($uid, 'redbasic', 'radius'); - $converse_width=get_pconfig($uid,'redbasic','converse_width'); - $top_photo=get_pconfig($uid,'redbasic','top_photo'); - $reply_photo=get_pconfig($uid,'redbasic','reply_photo'); +if (file_exists('view/css/bootstrap-red.css')) { + $bs = $bs . file_get_contents('view/css/bootstrap-red.css'); +} + +if(file_exists('view/theme/redbasic/schema/' . $schema . '.css')) { + $schemecss = file_get_contents('view/theme/redbasic/schema/' . $schema . '.css'); } // Now load the scheme. If a value is changed above, we'll keep the settings @@ -71,50 +92,16 @@ if ((!$schema) || ($schema == '---')) { //Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting //individually. If we don't, we'll have problems if a user has set one, but not all options. -if (! $nav_bg) - $nav_bg = 'rgba(248, 249, 250, 1)'; - -if (! $nav_bg_dark) - $nav_bg_dark = 'rgba(43, 48, 53, 1)'; - -if (! $link_color) - $link_color = '#0d6efd'; - -if (! $link_color_dark) - $link_color_dark = '#6ea8fe'; - -if (! $link_hover_color) - $link_hover_color = '#0a58ca'; - -if (! $link_hover_color_dark) - $link_hover_color_dark = '#9ec5fe'; - -if (! $bgcolor) - $bgcolor = '#fff'; - -if (! $bgcolor_dark) - $bgcolor_dark = '#212529'; - -if (! $background_image) - $background_image = ''; - -if (! $background_image_dark) - $background_image_dark = ''; - -if (! $font_size) - $font_size = '0.875rem'; - -if (! $radius) - $radius = '0.375rem'; - -if (! $converse_width) - $converse_width = '52'; //unit: rem - -if(! $top_photo) - $top_photo = '2.3rem'; - -if(! $reply_photo) - $reply_photo = '2.3rem'; +$nav_bg = $nav_bg ?: 'rgba(248, 249, 250, 1)'; +$nav_bg_dark = $nav_bg_dark ?: 'rgba(43, 48, 53, 1)'; +$bgcolor = $bgcolor ?: '#fff'; +$bgcolor_dark = $bgcolor_dark ?: '#212529'; +$background_image = $background_image ?: ''; +$background_image_dark = $background_image_dark ?: ''; +$font_size = $font_size ?: '0.875rem'; +$converse_width = $converse_width ?: '52'; //unit: rem +$top_photo = $top_photo ?: '2.3rem'; +$reply_photo = $reply_photo ?: '2.3rem'; // Apply the settings if(file_exists('view/theme/redbasic/css/style.css')) { @@ -140,16 +127,11 @@ if(file_exists('view/theme/redbasic/css/style.css')) { $options = array ( '$nav_bg' => $nav_bg, '$nav_bg_dark' => $nav_bg_dark, - '$link_color' => $link_color, - '$link_color_dark' => $link_color_dark, - '$link_hover_color' => $link_hover_color, - '$link_hover_color_dark' => $link_hover_color_dark, '$bgcolor' => $bgcolor, '$bgcolor_dark' => $bgcolor_dark, '$background_image' => $background_image, '$background_image_dark' => $background_image_dark, '$font_size' => $font_size, - '$radius' => $radius, '$converse_width' => $converse_width, '$top_photo' => $top_photo, '$reply_photo' => $reply_photo, @@ -158,8 +140,12 @@ if(file_exists('view/theme/redbasic/css/style.css')) { '$right_aside_width' => $right_aside_width ); - echo strtr($x, $options); + $o = strtr($x, $options); + + header('Cache-Control: max-age=2592000'); + + echo $bs . $o; } // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. diff --git a/view/theme/redbasic/php/theme_init.php b/view/theme/redbasic/php/theme_init.php index cb81165b1..54e6e7be3 100644 --- a/view/theme/redbasic/php/theme_init.php +++ b/view/theme/redbasic/php/theme_init.php @@ -2,9 +2,7 @@ require_once('view/php/theme_init.php'); head_add_css('/library/fork-awesome/css/fork-awesome.min.css'); -head_add_css('/vendor/twbs/bootstrap/dist/css/bootstrap.min.css'); head_add_css('/library/bootstrap-tagsinput/bootstrap-tagsinput.css'); -head_add_css('/view/css/bootstrap-red.css'); head_add_css('/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css'); head_add_js('/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js'); diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl index 6bf1666ed..4ba418afc 100644 --- a/view/theme/redbasic/tpl/theme_settings.tpl +++ b/view/theme/redbasic/tpl/theme_settings.tpl @@ -5,32 +5,34 @@ {{include file="field_checkbox.tpl" field=$advanced_theming}} {{if $expert}} + <hr> + <h3>{{$common}}</h3> + {{include file="field_colorinput.tpl" field=$primary_color}} + {{include file="field_input.tpl" field=$radius}} + {{include file="field_input.tpl" field=$top_photo}} + {{include file="field_input.tpl" field=$reply_photo}} + <h3>{{$light}}</h3> {{include file="field_checkbox.tpl" field=$navbar_dark_mode}} {{include file="field_colorinput.tpl" field=$nav_bg}} {{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$background_image}} - {{include file="field_colorinput.tpl" field=$link_color}} - {{include file="field_colorinput.tpl" field=$link_hover_color}} <h3>{{$dark}}</h3> {{include file="field_colorinput.tpl" field=$nav_bg_dark}} {{include file="field_colorinput.tpl" field=$bgcolor_dark}} {{include file="field_colorinput.tpl" field=$background_image_dark}} - {{include file="field_colorinput.tpl" field=$link_color_dark}} - {{include file="field_colorinput.tpl" field=$link_hover_color_dark}} - - <h3>{{$common}}</h3> - {{include file="field_input.tpl" field=$radius}} - {{include file="field_input.tpl" field=$top_photo}} - {{include file="field_input.tpl" field=$reply_photo}} <script> $(function(){ $('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'}); }); + $(function(){ + $('#id_redbasic_primary_color').colorpicker({format: 'hex'}); + }); </script> {{/if}} + <div class="settings-submit-wrapper" > <button type="submit" name="redbasic-settings-submit" class="btn btn-primary">{{$submit}}</button> </div> |