.

VaKeR CYBER ARMY

Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol/demo/

Upload File :

Current File : /var/www/html/libs/absol/demo/dynamiccss.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=no">

    <meta charset="UTF-8">
    <title>DynamicCSS</title>
    <script src="../dist/absol.js?date=<?php  echo stat('../dist/absol.js')['mtime'];?>"></script>
</head>
<body>
<div class="text-color">Text color</div>

<h2 class="preview">H2: 1</h2>
<h2 class="preview">H2: 2</h2>

<h1>H1: 1.12rem</h1>
<style>
    .preview::after {
        content: "rrer";
    }

    h1 {
        font-size: 1.12rem;
    }
</style>
<script>
/*
    var hue = 0;
    var styleConfig = new absol.DynamicCSS()
        .setRules({//gán mới rule
            'h2.preview': {
                'font-size': '30px'
            },
            'h2.preview::after': {
                content: '" font 30px"'
            },
            ':root': { 'font-size': 30 + 'px' },
            '.text-color': {
                color: `hsl(${hue}deg, 0.5, 0.5)`
            },
            '.text-color::after': {
                content: `"hsl(${hue}deg, 0.5, 0.5)"`
            }
        })
        .commit();
    var h2FontSize = 30;
    setInterval(function () {
        h2FontSize = ((h2FontSize - 30) % 70 + 1) + 30;
        styleConfig.setProperty('h2.preview', 'font-size', h2FontSize + 'px')
            .setProperty('h2.preview::after', 'content', '" font ' + h2FontSize + 'px"')
            .modifyRule(':root', { 'font-size': h2FontSize + 'px' })
            .commit();
    }, 500);

    setInterval(function () {
        hue = (hue + 5) % 360;
        styleConfig.setProperty('.text-color', 'color', `hsl(${hue}, 50%, 50%)`)
            .setProperty('.text-color::after', 'content', `"hsl(${hue}, 50%, 50%)"`)
            .commit();

    }, 100);
    console.log(absol.getSystemFontSize)*/
    var t = absol._({
        tag: 'h5',
        style: {
            font: 'status-bar',
            'text-size-adjust':'auto'
        },
        child: {
            text: 'Font hệ thống: ' + absol.getSystemFontSize() + 'px'
        }
    }).addTo(document.body);
    t.firstChild.data =   'Font hệ thống: ' + t.getFontSize() + 'px'
</script>
</body>
</html>

VaKeR 2022