API tools faq
paste
Searaw

RENSHUU CSS CONTEST 2025 V3

Searaw
Oct 31st, 2025 (edited)
118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.87 KB | Source Code | 0 0
raw download clone embed print report
  1. :root {
  2.  
  3.  
  4.  
  5.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  6.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  7. }
  8. .fwrap .sched_box{
  9.     display:flex;
  10.    
  11.     position:relative;
  12.    
  13. }
  14.  
  15. .schedbox2.sched_split  :div{
  16.  
  17.     border-radius:5px;
  18.     border-width:1px;
  19.     display:grid;
  20.     flex-wrap:wrap;
  21.     width:100%;
  22.     min-height:65px;
  23.    
  24. }
  25. .sched_box_v3.flexbox   {
  26.  
  27.     border-radius:5px!important;
  28.     border-width:1px;
  29.    // display:grid;
  30.    // flex-wrap:wrap;
  31.    // width:100%;
  32.    // min-height:65px;
  33.    
  34. }
  35. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  36.     outline-style: solid;
  37.     outline-width: 1px;
  38.    
  39. }
  40. .sched_box_v3.flexbox:hover  {
  41.  
  42.    outline-style: solid;
  43.     outline-width: 1px;
  44.    
  45. }
  46.  
  47. .pure-u-1-2, .finish_box{
  48.     width:100%!important;
  49. }
  50.  
  51. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  52.   outline-color: var(--introbox4_on);
  53.   --test-color: var(--introbox4_on);
  54.   background: linear-gradient(
  55.       90deg,
  56.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  57.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  58.       var(--bg_main)100%
  59.       );
  60.  
  61. }
  62. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  63.   outline-color: var(--introbox1_on);
  64.   --test-color: var(--introbox1_on);
  65.   background: linear-gradient(
  66.       90deg,
  67.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  68.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  69.       var(--bg_main)100%
  70.       );
  71.  
  72. }
  73. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  74.   outline-color: var(--introbox3_on);
  75.   --test-color: var(--introbox3_on);
  76.   background: linear-gradient(
  77.       90deg,
  78.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  79.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  80.       var(--bg_main)100%
  81.       );
  82.  
  83. }
  84. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  85.   outline-color: var(--introbox2_on);
  86.   --test-color: var(--introbox2_on);
  87.   background: linear-gradient(
  88.       90deg,
  89.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  90.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  91.       var(--bg_main)100%
  92.       );
  93.  
  94. }
  95.  
  96. .c_circular-chart.sched_icon{
  97.     height:100%!important;
  98.     width:30px!important;
  99.    
  100.     margin: -4px 0 0 0;
  101.     background-color:var(--test-color);    
  102.   clip-path: polygon(
  103.     0% 0%,      /* top-left */
  104.     100% 0%,   /* top-right shifted down (controls angle) */
  105.     100% 100%,   /* bottom-right shifted up (controls angle) */
  106.     50% 90%,
  107.     0% 100%     /* bottom-left */
  108.   );
  109.    // filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  110.    
  111.  
  112. }
  113.  
  114. .sched_icon .c_percentage {
  115.  
  116.        background-clip: text;
  117.        -webkit-background-clip: text;
  118.        -moz-background-clip: text;
  119.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  120.        
  121.        
  122. }
  123.  
  124. .sched_blinks > :first-child {
  125.   order: 99; /* or any number higher than others */
  126.     margin-left: 8px;
  127. }
  128.  
  129. .sched_blinks > .bl_spacer :after{
  130.     content: '-';
  131. }
  132.  
  133. .sched_data{
  134.     margin-left:10px;
  135.  
  136.     height:18px;
  137.     grid-area:inherit!important;
  138.    
  139. }
  140.  
  141. .sched_link{
  142.     align-self:normal!important;
  143.     margin-top:0px;
  144.     margin-left:10px;
  145.    
  146. }
  147.  
  148. .sched_status .tlnk:not(.pure-button){
  149.     color:var(--test-color);
  150. }
  151. .sched_status > *:not(:last-child) {
  152.   grid-column: 1;
  153.    
  154.     width:100%
  155. }
  156. .sched_status > :last-child {
  157.   grid-column: 2;
  158.     grid-row: 1 / span 2;
  159.    
  160.    
  161.    
  162.  
  163. }
  164. .sched_status > div:first-of-type:has(> .ki_light_on) {
  165.     margin-top: 12px;
  166. }
  167.  
  168. .flexbox .fcenter .sched_blinks{
  169.     display:none!important;
  170. }
  171. .tlnk .grow .right{
  172.     width:10px!important;
  173.    
  174. }
  175. .sched_status{
  176.  justify-content: space-between;
  177.     align-self:end;
  178.     margin-right: auto;
  179.  
  180.     flex-basis:100%;
  181.     width:100%;
  182.    
  183.     max-width:100%!important;
  184.     display:grid;
  185. }
  186.  
  187. .sched_link a{
  188.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  189.     color:var(--color-text);
  190.    
  191. }
  192. .sched_link a:hover{
  193.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  194. }
  195.  
  196. .sched_icon{
  197.     /*display:none;*/
  198. }:root {
  199.  
  200.  
  201.  
  202.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  203.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  204. }
  205. .fwrap .sched_box{
  206.     display:flex;
  207.    
  208.     position:relative;
  209.    
  210. }
  211.  
  212. .schedbox2.sched_split  > div:nth-of-type(n+1){
  213.  
  214.     border-radius:5px;
  215.     border-width:1px;
  216.     display:grid;
  217.     flex-wrap:wrap;
  218.     width:100%;
  219.     min-height:65px;
  220.    
  221. }
  222. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  223.     outline-style: solid;
  224.     outline-width: 1px;
  225.    
  226. }
  227.  
  228. .pure-u-1-2, .finish_box{
  229.     width:100%!important;
  230. }
  231.  
  232. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  233.   outline-color: var(--introbox4_on);
  234.   --test-color: var(--introbox4_on);
  235.   background: linear-gradient(
  236.       90deg,
  237.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  238.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  239.       var(--bg_main)100%
  240.       );
  241.  
  242. }
  243. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  244.   outline-color: var(--introbox1_on);
  245.   --test-color: var(--introbox1_on);
  246.   background: linear-gradient(
  247.       90deg,
  248.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  249.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  250.       var(--bg_main)100%
  251.       );
  252.  
  253. }
  254. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  255.   outline-color: var(--introbox3_on);
  256.   --test-color: var(--introbox3_on);
  257.   background: linear-gradient(
  258.       90deg,
  259.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  260.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  261.       var(--bg_main)100%
  262.       );
  263.  
  264. }
  265. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  266.   outline-color: var(--introbox2_on);
  267.   --test-color: var(--introbox2_on);
  268.   background: linear-gradient(
  269.       90deg,
  270.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  271.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  272.       var(--bg_main)100%
  273.       );
  274.  
  275. }
  276.  
  277. .c_circular-chart.sched_icon{
  278.     height:100%!important;
  279.     width:30px!important;
  280.    
  281.     margin: -4px 0 0 0;
  282.     background-color:var(--test-color);    
  283.   clip-path: polygon(
  284.     0% 0%,      /* top-left */
  285.     100% 0%,   /* top-right shifted down (controls angle) */
  286.     100% 100%,   /* bottom-right shifted up (controls angle) */
  287.     50% 90%,
  288.     0% 100%     /* bottom-left */
  289.   );
  290.    // filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  291.    
  292.  
  293. }
  294.  
  295. .sched_icon .c_percentage {
  296.  
  297.        background-clip: text;
  298.        -webkit-background-clip: text;
  299.        -moz-background-clip: text;
  300.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  301.        
  302.        
  303. }
  304.  
  305. .sched_blinks > :first-child {
  306.   order: 99; /* or any number higher than others */
  307.     margin-left: 8px;
  308. }
  309.  
  310. .sched_blinks > .bl_spacer :after{
  311.     content: '-';
  312. }
  313.  
  314. .sched_data{
  315.     margin-left:10px;
  316.  
  317.     height:18px;
  318.     grid-area:inherit!important;
  319.    
  320. }
  321.  
  322. .sched_link{
  323.     align-self:normal!important;
  324.     margin-top:0px;
  325.      margin-left:10px;
  326.    
  327. }
  328.  
  329. .sched_status .tlnk:not(.pure-button){
  330.     color:var(--test-color);
  331. }
  332. .sched_status > *:not(:last-child) {
  333.   grid-column: 1;
  334.    
  335.     width:100%
  336. }
  337. .sched_status > :last-child {
  338.   grid-column: 2;
  339.     grid-row: 1 / span 2;
  340.    
  341.    
  342.    
  343.  
  344. }
  345. .sched_status > div:first-of-type:has(> .ki_light_on) {
  346.     margin-top: 8px;
  347. }
  348. .sched_status>div:first-of-type>div  {
  349.     margin-top: 8px!important;
  350. }
  351. .sched_status>div:not(:last-child){
  352.     margin-left: 10px
  353. }
  354. .flexbox .fcenter .sched_blinks{
  355.     display:none!important;
  356. }
  357. .tlnk .grow .right{
  358.     width:10px!important;
  359.    
  360. }
  361. .sched_status{
  362.  justify-content: space-between;
  363.     align-self:end;
  364.     margin-right: auto;
  365.  
  366.     flex-basis:100%;
  367.     width:100%;
  368.    
  369.     max-width:100%!important;
  370.     display:grid;
  371. }
  372. .schedbox2.sched_split>div:nth-of-type(even) {
  373.     padding-left: 8px !important;
  374. }
  375.  
  376. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)){
  377.    
  378.     --test-color2: color-mix(in srgb, transparent 85%, var(--test-color) 15%)!important;
  379.     background: linear-gradient(
  380.       90deg,
  381.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  382.       var(--test-color2) 0%,
  383.       var(--bg_main)100%
  384.       );
  385. }
  386. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .sched_link a{
  387.     color: color-mix(in srgb,var(--test-color)70%, var(--bg-adjusted) 10%)!important;
  388.    
  389. }
  390. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div))  .c_circular-chart.sched_icon{
  391.     background-color: var(--test-color2);
  392.    
  393. }
  394. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .c_circular-chart circle{
  395.     fill: none;
  396.    
  397. }
  398. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .c_circular-chart text{
  399.     fill: color-mix(in srgb,var(--test-color)0%, var(--bg-adjusted) 50%)!important;
  400.    
  401. }
  402.  
  403.  
  404. .sched_link a{
  405.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  406.     color:var(--color-text);
  407.    
  408. }
  409. .sched_link a:hover{
  410.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  411. }
  412.  
  413. .sched_icon{
  414.     /*display:none;*/
  415. }
  416.  
  417. .alertsucc, .alertsucc > div:first-of-type {
  418.     background-color: transparent!important;
  419. }
  420. .alertsucc > div:nth-of-type(2), .alertsucc > div:nth-of-type(3){
  421.     padding: unset!important;
  422.     background-color: transparent!important;
  423.  
  424. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!