diff --git a/css/poketube.css b/css/poketube.css index 1ade994..293cf75 100644 --- a/css/poketube.css +++ b/css/poketube.css @@ -18,12 +18,26 @@ along with this program. If not, see https://www.gnu.org/licenses/. */ - :root { + :root { + /* text */ --text-link: #0ab7f0; --text-link-visited: #00c0ff; - --text: #ffffff; + --text-color: #ffffff; + --text-font-primary:'PokeTube Flex'; + --text-header-weight:1000; + + /* Divs */ + --div-gradient: linear-gradient( + 135deg, + #f97794 10%, + #623aa2 100%, + #8e6f7e 100% + ); + --div-border-color:#7c44a0; + --div-prim-bg:#1c1c1c; + --div-second-bg:#1a1a1a; + --div-transparent-bg:#0009; } - a.class:hover { @@ -46,7 +60,7 @@ a { } .video > .info > .title { - font-family: "PokeTube flex"; + font-family: var(--text-font-primary); width: 10em; } @@ -66,14 +80,14 @@ a { font-weight: 600; margin-top: 1em !important; border-radius: 21px; - background: #1c1c1c; + background: var(--div-prim-bg); padding: 10px; margin-bottom: 20px; font-stretch: expanded; justify-self: center; width: 39em; - font-family: "PokeTube Flex"; - border: #7c44a0; + font-family: var(--text-font-primary); + border: var(--div-border-color); border-style: solid; margin-left: auto; margin-right: auto; @@ -81,14 +95,14 @@ a { } .video-sub-info.description > .video-title { - font-family: "PokeTube Flex"; + font-family: var(--text-font-primary); font-weight: 1000; font-stretch: extra-expanded; font-size: larger; } .recommended-list { - background-color: #1c1c1c; + background-color: var(--div-prim-bg); border-radius: 25px; margin: 10px; margin-top: 0px; @@ -97,7 +111,7 @@ a { justify-self: center; margin-right: -1.5em; /* width: min-content;*/ - border: #7c44a0; + border: var(--div-border-color); border-style: solid; max-width: 371px; width: max-content; @@ -110,12 +124,7 @@ a { .video-info-panel.gradient { padding: 12px; border-radius: 11px; - background-image: linear-gradient( - 135deg, - #f97794 10%, - #623aa2 100%, - #8e6f7e 100% - ); + background-image: var(--div-gradient); display: block; margin: 0px 0 0px -3px; justify-self: left; @@ -124,7 +133,7 @@ a { .video-info-pill-channelname { color: #fff; word-wrap: break-word; - font-family: "PokeTube Flex"; + font-family: var(--text-font-primary); font-weight: 1000; font-stretch: ultra-expanded; overflow: hidden; @@ -220,12 +229,12 @@ a { } .comments-class-or-something-i-cant-find-a-name-lol { - background: #1a1a1a; + background: var(--div-second-bg); border-radius: 30px; padding: 10px; padding-top: 0; margin: auto; - border: #7c44a0; + border: var(--div-border-color); border-style: solid; } @@ -248,7 +257,7 @@ a { color: #fff; padding: 2px; border-radius: 3px; - font-family: PokeTube Flex; + font-family: var(--text-font-primary); font-stretch: 100%; font-weight: 600; }